NextAuth.js / Auth.js v5 - Autenticación para Next.js App Router con proveedores, sesiones y middleware

npm install next-auth@beta

// auth.ts (raíz del proyecto)
import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";
import Google from "next-auth/providers/google";
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    GitHub({
      clientId: process.env.AUTH_GITHUB_ID!,
      clientSecret: process.env.AUTH_GITHUB_SECRET!,
    }),
    Google({
      clientId: process.env.AUTH_GOOGLE_ID!,
      clientSecret: process.env.AUTH_GOOGLE_SECRET!,
    }),
  ],
});

// app/api/auth/[...nextauth]/route.ts
import { handlers } from "@/auth";
 
export const { GET, POST } = handlers;

// .env.local
AUTH_SECRET=your-random-secret-at-least-32-chars
AUTH_GITHUB_ID=...
AUTH_GITHUB_SECRET=...
AUTH_GOOGLE_ID=...
AUTH_GOOGLE_SECRET=...

// app/components/AuthButtons.tsx
import { auth, signIn, signOut } from "@/auth";
 
export async function SignInButton() {
  const session = await auth();
 
  if (session?.user) {
    return (
      <div className="flex items-center gap-3">
        {session.user.image && (
          <img
            src={session.user.image}
            alt=""
            className="w-8 h-8 rounded-full"
          />
        )}
        <span className="text-sm">{session.user.name}</span>
        <form
          action={async () => {
            "use server";
            await signOut();
          }}
        >
          <button className="text-sm text-gray-500 hover:text-gray-700">
            Cerrar Sesión
          </button>
        </form>
      </div>
    );
  }
 
  return (
    <div className="flex gap-2">
      <form
        action={async () => {
          "use server";
          await signIn("github");
        }}
      >
        <button className="bg-gray-900 text-white px-4 py-2 rounded text-sm">
          Iniciar sesión con GitHub
        </button>
      </form>
      <form
        action={async () => {
          "use server";
          await signIn("google");
        }}
      >
        <button className="bg-blue-600 text-white px-4 py-2 rounded text-sm">
          Iniciar sesión con Google
        </button>
      </form>
    </div>
  );
}

// app/dashboard/page.tsx
import { auth } from "@/auth";
import { redirect } from "next/navigation";
 
export default async function DashboardPage() {
  const session = await auth();
 
  if (!session) {
    redirect("/api/auth/signin");
  }
 
  return (
    <div className="max-w-2xl mx-auto p-6">
      <h1 className="text-2xl font-bold">Panel de Control</h1>
      <p className="mt-2">¡Bienvenido, {session.user?.name}!</p>
      <pre className="mt-4 bg-gray-100 p-4 rounded text-sm">
        {JSON.stringify(session, null, 2)}
      </pre>
    </div>
  );
}

// middleware.ts
import { auth } from "./auth";
 
export default auth((req) => {
  const isLoggedIn = !!req.auth;
  const isProtected = req.nextUrl.pathname.startsWith("/dashboard");
 
  if (isProtected && !isLoggedIn) {
    return Response.redirect(new URL("/api/auth/signin", req.nextUrl));
  }
});
 
export const config = {
  matcher: ["/dashboard/:path*", "/settings/:path*"],
};

import Credentials from "next-auth/providers/credentials";
import { z } from "zod";
import bcrypt from "bcryptjs";
import { prisma } from "@/lib/prisma";
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    Credentials({
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" },
      },
      authorize: async (credentials) => {
        const parsed = z
          .object({
            email: z.string().email(),
            password: z.string().min(8),
          })
          .safeParse(credentials);
 
        if (!parsed.success) return null;
 
        const user = await prisma.user.findUnique({
          where: { email: parsed.data.email },
        });
 
        if (!user || !user.password) return null;
 
        const valid = await bcrypt.compare(parsed.data.password, user.password);
        if (!valid) return null;
 
        return { id: String(user.id), name: user.name, email: user.email };
      },
    }),
  ],
});

npm install @auth/prisma-adapter

import { PrismaAdapter } from "@auth/prisma-adapter";
import { prisma } from "@/lib/prisma";
 
export const { handlers, signIn, signOut, auth } = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [GitHub, Google],
  session: { strategy: "database" }, // Usa sesiones de base de datos en lugar de JWT
});

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [GitHub],
  callbacks: {
    async jwt({ token, user }) {
      if (user) {
        token.role = user.role; // Agrega rol del usuario en la base de datos
      }
      return token;
    },
    async session({ session, token }) {
      session.user.id = token.sub!;
      session.user.role = token.role as string;
      return session;
    },
  },
});

// types/next-auth.d.ts
import { DefaultSession } from "next-auth";
 
declare module "next-auth" {
  interface Session {
    user: {
      id: string;
      role: string;
    } & DefaultSession["user"];
  }
}

// app/providers.tsx
"use client";
import { SessionProvider } from "next-auth/react";
 
export function AuthProvider({ children }: { children: React.ReactNode }) {
  return <SessionProvider>{children}</SessionProvider>;
}
 
// app/components/ClientProfile.tsx
"use client";
import { useSession } from "next-auth/react";
 
export function ClientProfile() {
  const { data: session, status } = useSession();
 
  if (status === "loading") return <p>Cargando...</p>;
  if (!session) return <p>No iniciaste sesión</p>;
 
  return <p>Iniciaste sesión como {session.user?.name}</p>;
}

import type { Session } from "next-auth";
 
async function getUser(): Promise<Session["user"] | null> {
  const session = await auth();
  return session?.user ?? null;
}