Autenticación en Next.js: cómo funciona y cómo implementarla

La autenticación es lo que permite a una aplicación saber a quién dejar entrar y a quién bloquear. Todas las aplicaciones web y SaaS modernas utilizan la autenticación. Los usuarios introducen sus datos de acceso, el servidor los verifica y los recuerda mientras navegan por la aplicación.

Next.js gestiona muy bien la autenticación cuando lo usas con herramientas como Auth.js. Puede verificar las credenciales de los usuarios, generar tokens seguros y proteger las páginas privadas. Así se garantiza la seguridad de las aplicaciones front-end sin tener que lidiar con criptografía compleja.

En este blog, te voy a explicar por qué tiene sentido usar tokens web JSON (JWT) con Auth.js en Next.js. Y también cómo funciona realmente la protección de rutas.

Después voy a crear una pequeña aplicación con un formulario de inicio de sesión personalizado que genere un JWT para proteger un panel de control privado. Y, una vez que funcione, lo pondré en producción en el alojamiento gestionado de Node.js de Cloudways (Velocity).

Vamos allá…

¿Qué es Auth.js (antes NextAuth)

Auth.js, antes conocido como NextAuth, es una herramienta que se usa en las aplicaciones de Next.js para gestionar la autenticación. Es una de las soluciones más utilizadas para añadir la función de inicio de sesión a las aplicaciones web modernas.

En lugar de crear un sistema de autenticación desde cero, lo que implica gestionar aspectos como el hash de las contraseñas, la caducidad de los tokens, la gestión de sesiones y las cookies seguras, Auth.js se encarga de todo eso.

Así que, cuando todo esto se gestiona automáticamente, solo tengo que conectarlo a mi proyecto, definir cómo deben iniciar sesión los usuarios, y Auth.js se encarga del resto entre bastidores de forma segura y fiable.

¿Por qué usar JWT para la autenticación en Next.js?

La razón por la que alguien usaría JWT en lugar de las sesiones tradicionales en bases de datos —como guardar un ID de sesión en PostgreSQL o MongoDB— es sencilla: JWT funciona como un carné de identidad digital seguro.

Cuando un usuario inicia sesión correctamente, el servidor le asigna una tarjeta de identificación y la guarda de forma segura también en su navegador.

Así que, cada vez que un usuario intenta cargar una URL protegida, el servidor comprueba la tarjeta de identificación para ver si el usuario tiene acceso a esa URL concreta y si además es válida y no ha caducado. Lo que no tiene que hacer constantemente es consultar la base de datos cada vez que el usuario hace clic en un enlace.

Lo que hace esto es que mantiene la aplicación rápida y alivia enormemente la carga de la base de datos.

Autenticación del lado del servidor frente a la del lado del cliente en Next.js

Como el App Router de Next.js divide el código en componentes de servidor y de cliente, los desarrolladores tienen que gestionar la autenticación de forma diferente según dónde se encuentren.

En el caso de la autenticación del lado del servidor, esto significa comprobar la sesión de forma segura en el backend antes de que se muestre la página. Aquí es donde se garantiza la seguridad. Si un usuario no tiene un JWT válido, el servidor se niega a mostrar la URL solicitada.

La autenticación del lado del cliente tiene más que ver con la interfaz de usuario y menos con la seguridad. Es cuando los componentes de React del front-end comprueban la sesión para decidir, por ejemplo, si mostrar un botón de«Iniciar sesión» o la foto de perfil de un usuario. En pocas palabras, sirve para actualizaciones visuales, no para medidas de seguridad estrictas.

Proteger rutas con el middleware de Next.js

Sin una autenticación adecuada, cualquiera podría simplemente escribir una URL restringida en el navegador y saltarse por completo la pantalla de inicio de sesión. Esto es lo que se puede evitar con el middleware de Next.js. También te lo mostraré cuando hable del miniproyecto más adelante en este blog.

En lugar de comprobar manualmente si un usuario ha iniciado sesión en cada página, el middleware lo comprueba a nivel global. Para ello, se interpone entre la solicitud web del usuario y el servidor que procesa dicha solicitud.

Antes de que Next.js muestre la página protegida que has solicitado, el middleware la intercepta y comprueba si hay un JWT válido, esa «tarjeta de identificación» de la que te hablé. Si el token es válido, se carga la página. Si falta o ha caducado, te redirige de nuevo a la pantalla de inicio de sesión.

Lo mejor de todo esto es que mantiene el código limpio y solo hacen falta unas pocas líneas para configurarlo.

Cómo crear una aplicación Next.js con autenticación JWT

Ahora que ya te he explicado qué es la autenticación JWT, para que entiendas mejor cómo funciona en la práctica, voy a crear una aplicación sencilla de Next.js con una página de inicio de sesión, un panel de control protegido y un botón para cerrar sesión.

Lo que voy a usar

• Node.js
• VS Code
• Next.js y Tailwind CSS
• Auth.js (NextAuth)

Paso 1: Configurar el proyecto de Next.js

Primero, voy a abrir la línea de comandos. Voy a crear una carpeta para mi proyecto y me voy a meter en ella:

mkdir nextjs-auth-blog
cd nextjs-auth-blog

Una vez creado el proyecto, lo primero que necesito es tener Node.js instalado en mi ordenador.

En mi caso, estoy usando el portátil del trabajo, que tiene restricciones informáticas. No puedo descargar la versión estándar, así que voy a descargar la versión binaria independiente de Node.js desde nodejs.org.

Es un archivo zip, así que lo voy a descomprimir en la carpeta de descargas para que me resulte más fácil.

Antes de poder ejecutar comandos de Node.js, tengo que indicarle al Símbolo del sistema dónde está mi carpeta de Node.js. Para ello, voy a ejecutar este comando:

set PATH=%PATH%;C:\Users\abdulrehman\Downloads\node-v24.15.0-win-x64\node-v24.15.0-win-x64

Ahora ya puedo crear mi proyecto de Next.js ejecutando este comando:

npx create-next-app@latest .

He añadido un punto al final para indicarle a Next.js que cree el proyecto dentro de la carpeta actual y no cree una completamente nueva.

En cuanto se ejecute el comando, pulsaré Intro para aceptar la opción predeterminada. Así se instalará Tailwind CSS junto con otros paquetes predeterminados de Next.js.

En cuanto vea el mensaje de éxito, podré abrir la carpeta de mi proyecto en VS Code.

Paso 2: Instalación y configuración de Auth.js

Para abrir mi proyecto en VS Code, voy a «Archivo» > «Abrir carpeta » y, a continuación, selecciono la carpeta del proyecto.

Ahora voy a dejar abierto VS Code e instalaré primero el paquete Auth.js. Para ello, volveré a la línea de comandos y ejecutaré:

npm install next-auth

Para que Auth.js pueda firmar de forma segura los tokens de autenticación, le voy a proporcionar una clave secreta. Para ello, en la raíz de la carpeta de mi proyecto, voy a crear un archivo llamado .env.local y, en él, voy a añadir una cadena aleatoria:

NEXTAUTH_SECRET="my_super_duper_secret_jwt_key_123"

Para gestionar la lógica de inicio de sesión de mi proyecto, voy a configurar las rutas de Auth.js. Esto se encargará de los inicios y cierres de sesión de los usuarios, así como de la gestión de sesiones.

Dentro de la carpeta «app», voy a crear una carpeta llamada «api». Luego, dentro de esa, otra carpeta llamada «auth». Y dentro de esa, una carpeta llamada […nextauth] para gestionar la autenticación.

Dentro de la última carpeta, voy a crear un archivo llamado route.ts.

La ruta final queda así: app > api > auth > […nextauth] > route.ts

Ahora, en el En el archivo route.ts, voy a configurar el proveedor de credenciales y también un usuario ficticio. Para ello, voy a pegar este código en el archivo:

import NextAuth from "next-auth";
import CredentialsProvider from "next-auth/providers/credentials";

const handler = NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "email" },
        password: { label: "Password", type: "password" }
      },
      async authorize(credentials) {
        // Hardcoded dummy user for testing
        const user = { id: "1", name: "Admin", email: "[email protected]" };

        if (credentials?.email === "[email protected]" && credentials?.password === "password123") {
          return user;
        }
        return null;
      }
    })
  ],
  session: {
    strategy: "jwt",
  },
  pages: {
    signIn: "/", // Redirects to our custom home page for login
  }
});

export { handler as GET, handler as POST };

Paso 3: Crear el formulario de inicio de sesión

Ahora es el momento de crear la página donde el usuario introducirá sus credenciales. Para ello, voy a abrir app/page.tsx y borrar el código que hay dentro.

Como este formulario que estoy creando va a gestionar la información que introduzca el usuario y también va a enviar datos, lo convertiré en un componente de cliente añadiendo «use client» justo al principio.

Así:

"use client";

import { signIn } from "next-auth/react";
import { useState } from "react";
import { useRouter } from "next/navigation";

export default function Home() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const router = useRouter();

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();

    const result = await signIn("credentials", {
      email,
      password,
      redirect: false,
    });

    if (result?.ok) {
      router.push("/dashboard");
    } else {
      alert("Invalid credentials");
    }
  };

  return (
    <main className="flex min-h-screen items-center justify-center bg-gray-50">
      <div className="w-full max-w-md bg-white p-8 rounded-lg shadow-md">
        <h1 className="text-2xl font-bold text-center mb-6">Login</h1>
        <form onSubmit={handleSubmit} className="space-y-4">
          <div>
            <label className="block text-sm font-medium text-gray-700">Email</label>
            <input
              type="email"
              className="mt-1 block w-full border border-gray-300 rounded-md p-2"
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
            />
          </div>
          <div>
            <label className="block text-sm font-medium text-gray-700">Password</label>
            <input
              type="password"
              className="mt-1 block w-full border border-gray-300 rounded-md p-2"
              value={password}
              onChange={(e) => setPassword(e.target.value)}
              required
            />
          </div>
          <button type="submit" className="w-full bg-blue-600 text-white p-2 rounded-md hover:bg-blue-700">
            Sign In
          </button>
        </form>
      </div>
    </main>
  );
}

Paso 4: Añadir middleware para proteger las rutas

Vale, pues… ahora mismo, cualquiera puede simplemente escribir /dashboard en la URL y saltarse por completo la lógica de inicio de sesión que he creado. Así que voy a proteger esto creando un archivo llamado middleware.ts en la raíz de la carpeta de mi proyecto.

Auth.js facilita la protección de las rutas. Voy a usar su middleware predeterminado y definir qué rutas deben protegerse.

export { default } from "next-auth/middleware";

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

Paso 5: Crear el panel de control protegido y la salida

Si el usuario inicia sesión correctamente, tras pasar mi lógica de autenticación, quiero que tenga un sitio al que pueda acceder. Para ello, voy a crear una carpeta dentro de la aplicación llamada «dashboard» y añadiré un archivo page.tsx en su interior.

En esta página, lo haré de forma sencilla y mostraré el correo electrónico del usuario que haya iniciado sesión utilizando Auth.js para comprobar la sesión actual. También añadiré un botón sencillo del lado del cliente para gestionar el cierre de sesión.

import { getServerSession } from "next-auth";
import LogoutButton from "./LogoutButton";
import { redirect } from "next/navigation";

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

  // Extra safety check
  if (!session) {
    redirect("/");
  }

  return (
    <main className="min-h-screen bg-gray-100 p-10">
      <div className="max-w-4xl mx-auto bg-white p-8 rounded-lg shadow">
        <h1 className="text-3xl font-bold mb-4">Secure Dashboard</h1>
        <p className="text-gray-600 mb-8">
          Welcome back, <span className="font-semibold text-black">{session?.user?.email}</span>
        </p>
        <LogoutButton />
      </div>
    </main>
  );
}

Ahora, para que funcione el botón de cerrar sesión, voy a crear otro archivo en la carpeta «dashboard» llamado «LogoutButton.tsx»:

"use client";

import { signOut } from "next-auth/react";

export default function LogoutButton() {
  return (
    <button
      onClick={() => signOut({ callbackUrl: '/' })}
      className="bg-red-600 text-white px-4 py-2 rounded-md hover:bg-red-700"
    >
      Sign Out
    </button>
  );
}

Paso 6: Probar la aplicación de forma local

Vale, ahora toca probar lo que he creado. Voy a volver a la línea de comandos y a iniciar el servidor de desarrollo:

npm run dev

Ahora puedo entrar en http://localhost:3000 desde mi navegador y debería ver mi formulario de inicio de sesión.

También puedo iniciar sesión con mis credenciales para comprobar si funciona:

Ahora bien, si intento entrar en /dashboard para intentar un pequeño truco, el middleware me devuelve al instante a la página de inicio de sesión.

Si vuelvo a introducir mis credenciales de prueba, puedo iniciar sesión, lo que significa que el JWT se ha verificado. Y cuando hago clic en «Cerrar sesión», la sesión se elimina y me redirige a la pantalla de inicio de sesión.

Paso 7: Subir el código a GitHub

Ahora que el proyecto funciona a la perfección, voy a detener mi servidor de desarrollo pulsando CTRL+C en la línea de comandos y subiré el código a Git. Así que, si tú también quieres reutilizar este proyecto, puedes descargarlo de mi repositorio de GitHub.

Para subir el código a Git, primero crearé un nuevo repositorio en GitHub.

A continuación, ejecutaré los siguientes comandos en el CMD uno por uno.

git init
git add .
git commit -m "Working NextAuth JWT login"
git branch -M main
git remote add origin https://github.com/abdulrehman293/nextjs-auth-blog.git
git push -u origin main

Bueno, si vuelvo a mi… Repositorio de GitHub y, al actualizar, todos mis archivos y carpetas deberían subirse a mi repositorio.

Paso 8: Implementación en el alojamiento gestionado de Node.js de Cloudways

Ahora que el proyecto ya funciona y está subido a GitHub, puedo implementarlo en nuestro alojamiento gestionado de Node.js de Cloudways (Velocity).

Voy a crear rápidamente una nueva aplicación de Node. Para esta demostración, voy a elegir el plan Starter.

Ahora tendré que conectar mi cuenta de GitHub, GitLab o Bitbucket a Cloudways. Como mi proyecto está en GitHub, lo conectaré ahí.

Después elegiré mi repositorio «nextjs-auth-blog», que ya he subido a Git, y le daré a «Continuar».

Ahora Cloudways elegirá automáticamente el framework, la rama y la versión de Node.js adecuados para mi aplicación. El «Directorio raíz» lo dejaré como viene por defecto.

A continuación, iré a «Variables de entorno » y haré clic en «Añadir». Ahora añadiré a Cloudways el mismo NEXTAUTH_SECRET y su valor que añadí en el paso 2 de mi archivo .env.local para firmar los JWT.

Hago esto porque mi archivo .env.local nunca se subió a GitHub, así que Auth.js no tendrá su clave en el servidor a menos que la añada aquí.

• NEXTAUTH_SECRET: la misma cadena secreta que usé localmente

Ya que estoy en esta pantalla, voy a añadir una variable de entorno más: NEXTAUTH_URL.

Hago esto porque Auth.js necesita saber la URL real de la app para gestionar bien las redirecciones. Así, cuando pulse «Cerrar sesión», la app debería poder redirigirme de nuevo a la pantalla de inicio de sesión.

Voy a volver a «Variables de entorno», haré clic en «Añadir» y configuraré:

• NEXTAUTH_URL: la URL temporal de Cloudways que aparece en la página de resumen

Después le daré a «Guardar » y haré clic en «Implementar ahora».

Ahora Cloudways va a empezar a descargar el código de GitHub, instalar las dependencias, ejecutar la compilación de Next.js e iniciar mi app. Esto tardará entre 5 y 7 minutos, así que voy a esperar hasta entonces.

En cuanto termine la implementación, copiaré y pegaré la URL temporal de Cloudways que aparece en la página de resumen de la app en mi navegador y pulsaré Intro.

En el formulario de inicio de sesión, igual que hice en mi ordenador, voy a escribir mis datos de acceso, [email protected] y password123, y así podré acceder al panel de control.

También voy a probar el botón de cerrar sesión y debería llevarme de vuelta a la pantalla de inicio de sesión en la URL activa, tal y como debería funcionar.

Y ese es todo el flujo de autenticación JWT ejecutándose en el alojamiento gestionado de Node.js de Cloudways. El middleware sigue protegiendo el panel de control, el inicio de sesión sigue generando un token válido y el cierre de sesión sigue terminando la sesión correctamente.

Todo funciona igual que en mi entorno local, salvo que ahora la aplicación está en producción y se puede acceder a ella desde cualquier sitio a través de un servidor en producción.

Conclusión sobre

Con esto terminamos nuestra guía sobre la autenticación en Next.js. En esta entrada del blog, he intentado explicar por qué tiene sentido usar Auth.js para la autenticación en Next.js. También he hablado de las ventajas en cuanto a rendimiento y seguridad que se obtienen al usar tokens en lugar de las sesiones tradicionales de base de datos.

También te he explicado cómo crear una aplicación segura con Next.js que gestione inicios de sesión personalizados y proteja un panel de control privado, y luego la he publicado en el alojamiento gestionado de Node.js de Cloudways (Velocity) para que puedas acceder a ella desde cualquier sitio.

Además, he subido el proyecto a mi GitHub para que puedas reutilizar fácilmente los archivos del proyecto.

Si tienes alguna duda, deja un comentario aquí abajo y te responderé.

[email protected]

Abdul es un experto en tecnología, aficionado al café y al marketing creativo al que le encanta estar al día de las últimas actualizaciones de software y aparatos tecnológicos. También es un hábil escritor técnico capaz de explicar conceptos complejos de forma sencilla para un público amplio. Abdul disfruta compartiendo sus conocimientos sobre el sector de la Nube a través de manuales de usuario, documentación y entradas de blog.

Get Connected on: Twitter Community Forum