Private 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
import { getServerSession } from "next-auth";
import { authOptions } from "@/libs/next-auth";
import connectMongo from "@/libs/mongoose";
import User from "@/models/User";
export default async function Dashboard() {
await connectMongo();
const session = await getServerSession(authOptions);
const user = await User.findById(session.user.id);
return (
<>
<main className="min-h-screen p-8 pb-24">
<section className="max-w-xl mx-auto space-y-8">
<h1 className="text-3xl md:text-4xl font-extrabold">
User Dashboard
</h1>
<p>Welcome {user.name} 👋</p>
<p>Your email is {user.email}</p>
</section>
</main>
</>
);
}