Cómo crear autenticación en Next.js con Auth.js

La autenticación es una parte fundamental de muchas aplicaciones web. Permite identificar a los usuarios y controlar qué partes de una aplicación pueden utilizar. En Next.js, una de las alternativas más utilizadas para gestionar este proceso es Auth.js, una solución que facilita la implementación de sesiones y proveedores de inicio de sesión.

¿Qué es Auth.js?

Auth.js es una solución de autenticación para aplicaciones modernas que permite integrar diferentes métodos de acceso, como credenciales, Google, GitHub y otros proveedores. Su integración con Next.js permite gestionar sesiones sin tener que construir manualmente todo el sistema de autenticación.

1. Instalar Auth.js

En un proyecto Next.js podemos comenzar instalando Auth.js:

npm install next-auth

Después debemos crear la configuración de autenticación. Una estructura habitual puede incluir un archivo auth.ts en la raíz del proyecto.

2. Configurar la autenticación

En auth.ts podemos definir los proveedores que estarán disponibles. Por ejemplo, para utilizar GitHub:

import NextAuth from "next-auth";
import GitHub from "next-auth/providers/github";

export const { handlers, signIn, signOut, auth } = NextAuth({
  providers: [
    GitHub
  ]
});

Para utilizar este proveedor será necesario configurar las variables de entorno correspondientes, como el identificador y secreto de la aplicación.

3. Crear las rutas de autenticación

Después podemos conectar los handlers de Auth.js con las rutas de Next.js mediante:

import { handlers } from "@/auth";

export const { GET, POST } = handlers;

Esto permite que Next.js gestione automáticamente las solicitudes relacionadas con la autenticación.

4. Proteger páginas

Una de las ventajas de Auth.js es que podemos comprobar la sesión directamente desde el servidor:

import { auth } from "@/auth";

export default async function Dashboard() {
  const session = await auth();

  if (!session) {
    return <p>Debes iniciar sesión.</p>;
  }

  return <h1>Bienvenido a tu panel</h1>;
}

De esta manera, podemos restringir el acceso a determinadas páginas dependiendo de si existe una sesión válida.

Auth.js simplifica considerablemente la autenticación en Next.js. Permite integrar proveedores externos, administrar sesiones y proteger páginas utilizando las capacidades del framework. Para proyectos reales, combinar Auth.js con una base de datos permite construir sistemas completos de usuarios, roles y permisos de forma escalable.