Autenticación y Protección de Páginas con NextAuth y Next.js

Cuando construyes una aplicación web con Next.js, es habitual que ciertas páginas solo estén disponibles para usuarios autenticados. La combinación de Next Auth con las capacidades de server side rendering permite controlar el acceso de forma eficiente, eliminando problemas visuales como el flash de contenido no deseado y redirigiendo desde el servidor a quienes no tienen sesión activa.

¿Cómo proteger una página desde el cliente con useSession?

El primer paso para restringir el acceso a una página es verificar si el usuario tiene una sesión activa. Para ello se utiliza el hook useSession, importado desde next-auth/client [01:05].

Este hook retorna dos valores fundamentales:

• session: contiene la información del usuario autenticado o es null si no hay sesión.
• loading: indica si la verificación de sesión aún está en curso.

El flujo básico funciona así:

1. Mientras loading sea true, se retorna null para evitar mostrar contenido parcial.
2. Si session no existe, se muestra un mensaje de acceso denegado.
3. Si session existe, se renderiza el contenido protegido.

tsx import { useSession } from 'next-auth/client';

const PremiumPage = () => { const [session, loading] = useSession();

if (loading) return null;

if (!session) { return <p>Acceso denegado</p>; }

return <p>Contenido secretísimo</p>; };

Esta solución funciona, pero tiene una limitación importante: durante la carga del hook, el usuario puede experimentar un flash donde no se muestra nada antes de que aparezca el contenido final. Dependiendo de la velocidad de conexión, esto puede resultar molesto [02:32].

¿Por qué usar getServerSideProps para eliminar el flash de carga?

Next.js permite ejecutar lógica en el servidor antes de enviar la página al navegador mediante la función getServerSideProps. Al combinarla con el método getSession de Next Auth, la validación de sesión ocurre en el servidor y el usuario recibe la página ya resuelta [03:15].

¿Qué diferencia hay entre useSession y getSession?

useSession es un wrapper que convierte a getSession en un hook de React, diseñado exclusivamente para componentes del lado del cliente. En cambio, getSession es una promesa genérica que puede utilizarse tanto en el backend con Node.js como en el frontend con JavaScript [04:25].

Para usar getSession dentro de getServerSideProps, basta con pasarle el contexto que Next.js proporciona automáticamente:

tsx import { getSession } from 'next-auth/client'; import { GetServerSideProps } from 'next';

export const getServerSideProps: GetServerSideProps = async (context) => { const session = await getSession(context);

if (!session) { return { redirect: { destination: '/api/auth/signin', permanent: false, }, }; }

return { props: { session, }, }; };

¿Cómo funciona la redirección desde el servidor?

Cuando la sesión no existe, getServerSideProps retorna un objeto con la propiedad redirect [05:48]. Este objeto necesita:

• destination: la ruta a donde se enviará al usuario, en este caso /api/auth/signin.
• permanent: un booleano que define si la redirección es un código 301 (permanente) o 302 (temporal). Al tratarse de una verificación de sesión, se usa false para indicar que es temporal.

Cuando la sesión sí existe, se retorna dentro de props para que el componente la utilice de inmediato, sin necesidad de esperar la resolución del hook en el cliente.

¿Qué ventajas ofrece la validación en el servidor?

Al mover la verificación al servidor se obtienen beneficios claros [07:27]:

• Se elimina el flash incómodo entre el estado vacío y el contenido real.
• El usuario sin sesión es redirigido instantáneamente a la página de sign in.
• TypeScript ayuda a detectar errores de tipado en la estructura del redirect y los props, brindando mayor seguridad durante el desarrollo [06:15].
• La experiencia se siente más fluida porque la página llega al navegador ya con toda la información resuelta.

Con estas dos herramientas —useSession para el cliente y getSession para el servidor— puedes proteger tus páginas de forma completa. ¿Has implementado protección de rutas en tus proyectos con Next.js? Comparte tu experiencia en los comentarios.