TutorialsPrivate page

Once user is authentified, you can build private routes like a user dashboard, account, etc.

If you want to make protected API calls, follow this tutorial.

The layout.js in /dashboard ensures any pages & subpages are private. If the user is not authenticated, he'll be redirected to the login page (see auth in config.js)

Here's an example of a simple user dashboard showing private user data in a server component:

/app/dashboard/page.js

1import { getServerSession } from "next-auth";
2import { authOptions } from "@/libs/next-auth";
3import connectMongo from "@/libs/mongoose";
4import User from "@/models/User";
5
6export default async function Dashboard() {
7  await connectMongo();
8  const session = await getServerSession(authOptions);
9  const user = await User.findById(session.user.id);
10
11  return (
12    <>
13      <main className="min-h-screen p-8 pb-24">
14        <section className="max-w-xl mx-auto space-y-8">
15          <h1 className="text-3xl md:text-4xl font-extrabold">
16            User Dashboard
17          </h1>
18          <p>Welcome {user.name} 👋</p>
19          <p>Your email is {user.email}</p>
20        </section>
21      </main>
22    </>
23  );
24}