Gestión de sesiones y hook useSession
Acceda a los datos de sesión en componentes de servidor y de cliente y proteja páginas según el estado de autenticación.
Gestión de sesiones y hook useSession es una lección gratuita de React Academy en CoddyKit. Esta es la lección 2 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.
Tipos de sesión en Auth.js
Auth.js admite dos estrategias de sesión: JWT (predeterminada, un token sin estado en una cookie) y database (un registro de sesión en la base de datos que se puede invalidar desde el servidor).
useSession en Client Components
useSession() es un hook de Client Component que lee la sesión actual. Devuelve data (la sesión), status ('loading' | 'authenticated' | 'unauthenticated') y una función update.
'use client';
import { useSession } from 'next-auth/react';
export function UserAvatar() {
const { data: session, status } = useSession();
if (status === 'loading') return <Spinner />;
if (status === 'unauthenticated') return <Link href="/login">Sign in</Link>;
return <img src={session.user?.image ?? ''} alt={session.user?.name ?? ''} />;
}Configurar SessionProvider
Envuelva su aplicación (o un subárbol de Client Components) en SessionProvider para que useSession pueda acceder al contexto de sesión.
// app/providers.tsx
'use client';
import { SessionProvider } from 'next-auth/react';
export function Providers({ children }: { children: React.ReactNode }) {
return <SessionProvider>{children}</SessionProvider>;
}
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({ children }) {
return <html><body><Providers>{children}</Providers></body></html>;
}auth() en Server Components
En Server Components, use auth() directamente: no necesita hook ni provider. Lee la sesión desde la cookie del servidor.
import { auth } from '@/auth';
export default async function Header() {
const session = await auth();
return (
<nav>
{session ? (
<span>Hello, {session.user?.name}</span>
) : (
<Link href="/login">Sign in</Link>
)}
</nav>
);
}Proteger rutas de cliente
Use useSession con la opción required: true para redirigir automáticamente a los usuarios no autenticados a la página de inicio de sesión.
'use client';
import { useSession } from 'next-auth/react';
export default function ProtectedPage() {
const { data: session } = useSession({ required: true });
// session is never null here — unauthenticated users are redirected
return <div>Welcome, {session?.user?.name}</div>;
}Actualizar la sesión
Llame a la función update() que devuelve useSession para actualizar la sesión (por ejemplo, después de actualizar el perfil) sin cerrar la sesión y volver a iniciarla.
const { data: session, update } = useSession();
async function handleNameChange(newName: string) {
await updateUserName(newName); // API call
await update({ user: { name: newName } }); // refresh session
}Callbacks de sesión JWT
Use el callback jwt para añadir datos personalizados al token JWT al iniciar sesión, y el callback session para exponerlos en el objeto de sesión.
callbacks: {
async jwt({ token, user }) {
if (user) token.role = user.role; // add on first sign-in
return token;
},
async session({ session, token }) {
session.user.role = token.role as string;
return session;
},
},Caducidad de la sesión
Configure la duración máxima de la sesión en la configuración de Auth.js. Las sesiones JWT se actualizan automáticamente en cada solicitud mientras están activas.
export const { handlers, auth } = NextAuth({
session: {
strategy: 'jwt',
maxAge: 30 * 24 * 60 * 60, // 30 days
updateAge: 24 * 60 * 60, // refresh if older than 1 day
},
});Invalidar sesiones de base de datos
Las sesiones de base de datos se pueden revocar desde el servidor, lo que resulta útil para forzar el cierre de sesión. Elimine el registro de sesión de la base de datos para invalidarlo inmediatamente.
// Server Action to log out all devices:
async function logOutAllDevices() {
'use server';
const session = await auth();
if (session) await db.session.deleteMany({ where: { userId: session.user.id } });
redirect('/login');
}Acceso basado en roles en Client Components
Lea el rol de la sesión mediante useSession y renderice la interfaz condicionalmente según dicho rol.
const { data: session } = useSession();
const isAdmin = session?.user?.role === 'admin';
return (
<>
{isAdmin && <AdminPanel />}
<UserContent />
</>
);Comprobación rápida
¿Qué provider debe envolver su aplicación para que useSession() funcione en Client Components?
Repaso
Use auth() para acceder a la sesión en Server Components y useSession() en Client Components envueltos por SessionProvider. Añada datos personalizados mediante callbacks de JWT y de sesión, actualice las sesiones del lado del cliente con update() y configure maxAge para la caducidad de la sesión.
Preguntas frecuentes
¿La lección «Gestión de sesiones y hook useSession» es gratis?
Sí — el texto completo de «Gestión de sesiones y hook useSession» 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 «Gestión de sesiones y hook useSession»?
Acceda a los datos de sesión en componentes de servidor y de cliente y proteja páginas según el estado de autenticación. 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 2 de 4.
¿Cuánto tiempo toma la lección «Gestión de sesiones y hook useSession»?
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