Nextauth+mangodb

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

The layout.tsx 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.ts

EX: A simple user dashboard showing private user data in a server component:

/app/dashboard/page.tsx

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>
    </>
  );
}

Supabase Supabase