Configuración de Rutas Protegidas con NextAuth

Hoy vamos a aprender a configurar Rutas Protegidas con NextAuth.

Realmente había tanta información dispersa sobre esto que me costó mucho trabajo.

Así que intentaré escribirlo usando la documentación oficial al máximo.

1. Razón para escribir este artículo

Ya implementé el inicio de sesión usando NextAuth.

El problema surgió cuando quise usar la protección de rutas y la redirección al mismo tiempo.

Quería que tanto los usuarios conectados como los no conectados fueran redirigidos a "/category" al acceder a la ruta raíz "/".

Además, quería bloquear las rutas "/profile" o "/login" para los usuarios que ya habían iniciado sesión.

Sin embargo, no hay muchos artículos sobre esto y chatgpt sigue diciendo tonterías, lo que fue muy frustrante.

2. Documentación oficial de NextAuth

Al final, lo resolví mediante búsquedas y la documentación oficial.

La documentación oficial es definitivamente buena.

En el enlace se describe cómo combinar NextAuth y middleware.

import { withAuth } from "next-auth/middleware";

export default withAuth(
  // `withAuth` amplía tu `Request` con el token del usuario.
  function middleware(req) {
    console.log(req.nextauth.token);
  },
  {
    callbacks: {
      authorized: ({ token }) => token?.role === "admin",
    },
  }
);

export const config = { matcher: ["/admin"] };

La clave aquí es que al envolver el middleware con withAuth, puedes acceder al token del solicitante.

Si no se necesita el token, se puede manejar dentro del middleware, y si se necesita autorización, se puede pasar a través de callbacks.

La gestión también es posible en el middleware, por lo que no es necesario pasarla nuevamente a través de callbacks.

3. Implementación

Ahora vamos a aplicarlo.

Envuelve el middleware con withAuth.

En formato sencillo es withAuth(middleware, callbacks: {}).

Cuando llega una solicitud, el middleware la procesa primero y luego la pasa.

Veamos el código primero.

import { withAuth } from "next-auth/middleware";
import { NextResponse } from "next/server";

// Exportar middleware envuelto con withAuth
export default withAuth(
  function middleware(req) {
    // Redirigir a /category al acceder a la URL raíz (/)
    if (req.nextUrl.pathname === "/") {
      return NextResponse.redirect(new URL("/category", req.url));
    }
    if (
      req.nextauth.token?.authLevel !== "admin" &&
      req.nextUrl.pathname.startsWith("/dashboard")
    ) {
      return NextResponse.redirect(new URL("/category", req.url));
    }

    return NextResponse.next();
  },
  {
    callbacks: {
      authorized: ({ token, req }) => {
        // Verificación de autorización en dashboard
        // Verificación de autenticación solo en rutas que comienzan con profile
        if (req.nextUrl.pathname.startsWith("/profile")) {
          return !!token;
        }
        // Devuelve siempre true para otras rutas
        return true;
      },
    },
  }
);

export const config = {
  matcher: [
    "/((?!api|_next/static|_next/image|.*\\.avif$).*)", // Excluir archivos estáticos
    "/",
    "/dashboard",
    "/profile/:path*", // Incluir solo rutas de profile en matcher
  ],
};

De esta manera, todos los usuarios que accedan a "/" serán redirigidos a "/category".

Los usuarios conectados que no tengan el rol de "admin" serán redirigidos al intentar acceder a la ruta "/dashboard".

Y los usuarios no conectados que intenten acceder a "/profile" verán la pantalla de inicio de sesión.

Las demás funciones se pueden manejar manipulando el token de diversas maneras.

4. Reseñas

Una vez más me di cuenta de que no es fácil para un ciudadano común seguir las tendencias recientes del desarrollo web.

Con express, debido a la gran cantidad de datos ya disponibles, una entrada en la inteligencia artificial genera rápidamente el código, pero no es así con Nextjs.

Parece que incluso en Reddit o Stack Overflow hay muchas reseñas que indican que la IA no sigue las tendencias más recientes.

Por ello, tal vez el desarrollador sigue siendo (?) necesario.

Debería mejorar mi habilidad en inglés para leer la documentación oficial con entusiasmo.