Configurar Auth.js en Next.js App Router
Instale Auth.js, configure los route handlers y añada un proveedor OAuth de GitHub.
Configurar Auth.js en Next.js App Router es una lección gratuita de React Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de React Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de React Academy incluye 4 lecciones en total.
¿Qué es Auth.js?
Auth.js (anteriormente NextAuth.js v5) es una biblioteca de autenticación completa para Next.js. Gestiona proveedores OAuth, credenciales, sesiones y JWT de forma integrada.
Instalación
Instale la versión beta de Auth.js e inicialice el archivo de configuración.
npm install next-auth@beta
# Create auth.ts at project root
touch auth.tsCrear la configuración de Auth
Defina la configuración de autenticación en auth.ts, en la raíz del proyecto, con los proveedores y callbacks.
import NextAuth from 'next-auth';
import GitHub from 'next-auth/providers/github';
export const { handlers, auth, signIn, signOut } = NextAuth({
providers: [GitHub],
callbacks: {
session({ session, token }) {
session.user.id = token.sub!;
return session;
},
},
});Configurar el route handler
Cree un route handler de captura general en app/api/auth/[...nextauth]/route.ts que delegue en los handlers de Auth.js.
// app/api/auth/[...nextauth]/route.ts
import { handlers } from '@/auth';
export const { GET, POST } = handlers;Variables de entorno
Establezca las variables de entorno necesarias para los proveedores OAuth. AUTH_SECRET es obligatorio para firmar JWT.
# .env.local
AUTH_SECRET=your-random-secret-here
# GitHub OAuth
AUTH_GITHUB_ID=your-github-client-id
AUTH_GITHUB_SECRET=your-github-client-secret
# Generate AUTH_SECRET:
# npx auth secretAñadir botones de inicio y cierre de sesión
Importe signIn y signOut desde auth.ts y úselos en formularios de Server Components.
import { signIn, signOut } from '@/auth';
export function SignInButton() {
return (
<form action={async () => { 'use server'; await signIn('github'); }}>
<button type="submit">Sign in with GitHub</button>
</form>
);
}
export function SignOutButton() {
return (
<form action={async () => { 'use server'; await signOut(); }}>
<button type="submit">Sign out</button>
</form>
);
}Leer la sesión en Server Components
Llame a auth() desde auth.ts en cualquier Server Component o route handler para obtener la sesión actual.
import { auth } from '@/auth';
export default async function ProfilePage() {
const session = await auth();
if (!session) redirect('/login');
return <h1>Welcome, {session.user?.name}</h1>;
}Proteger páginas con middleware
Use el middleware de Auth.js para proteger rutas en el edge sin ejecutar lógica del servidor en cada solicitud.
// middleware.ts
export { auth as middleware } from '@/auth';
export const config = {
matcher: ['/dashboard/:path*', '/profile/:path*'],
};Sesiones en base de datos
Añada un adaptador de base de datos (por ejemplo, @auth/prisma-adapter) para conservar sesiones, usuarios y cuentas en una base de datos en lugar de usar JWT.
import { PrismaAdapter } from '@auth/prisma-adapter';
import { prisma } from '@/lib/prisma';
export const { handlers, auth, signIn, signOut } = NextAuth({
adapter: PrismaAdapter(prisma),
providers: [GitHub],
session: { strategy: 'database' },
});Personalizar el tipo de sesión
Amplíe los tipos de sesión de Auth.js para incluir campos personalizados, como el ID o el rol del usuario.
// types/next-auth.d.ts
import { DefaultSession } from 'next-auth';
declare module 'next-auth' {
interface Session {
user: { id: string; role: string } & DefaultSession['user'];
}
}Gestión de errores
Auth.js redirige a /error de forma predeterminada cuando falla la autenticación. Cree app/error/page.tsx para personalizar la página de error.
Comprobación rápida
¿Qué archivo debe crear para exponer los handlers GET y POST de Auth.js en Next.js App Router?
Repaso
Instale next-auth@beta, cree auth.ts con proveedores y callbacks, exponga los handlers en app/api/auth/[...nextauth]/route.ts, establezca AUTH_SECRET y las variables de entorno de los proveedores, y lea la sesión con auth() en Server Components.
Preguntas frecuentes
¿La lección «Configurar Auth.js en Next.js App Router» es gratis?
Sí — el texto completo de «Configurar Auth.js en Next.js App Router» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de React Academy, actualiza a CoddyKit PRO. El curso de React Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Configurar Auth.js en Next.js App Router»?
Instale Auth.js, configure los route handlers y añada un proveedor OAuth de GitHub. Practicas React Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar React Academy?
No se requiere experiencia previa. React Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Configurar Auth.js en Next.js App Router»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de React Academy?
Sí. Cada lección de React Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configurar Auth.js en Next.js App Router
- Gestión de sesiones y hook useSession
- Proveedor de credenciales e inicio de sesión personalizado
- Protección de rutas mediante middleware