Private Pages

🔒 Creating Private Pages After Authentication¶

Once the user is authenticated, you can create private pages such as a dashboard, profile, and more.

Making Protected API Requests¶

If you'd like to perform protected API calls, follow this detailed guide.

Securing Routes with Layout Files¶

The layout.js file inside the /dashboard directory ensures that all child pages under this route are protected.
If the user is not authenticated, they’ll be redirected automatically to the login page (as defined in the config.js auth settings).

User Dashboard Example¶

Here’s a basic example of a user dashboard that displays private user data using 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>
    </>
  );
}