Cómo implementar autenticación con Next.js 15 y JWT sin librerías externas

Introducción

En el desarrollo web moderno, la autenticación es un componente esencial para proteger las aplicaciones y garantizar que solo los usuarios autorizados accedan a ciertas funcionalidades. En este artículo, te enseñaremos cómo implementar un sistema de autenticación utilizando Next.js 15 y JWT (JSON Web Tokens) sin necesidad de librerías externas. Este enfoque te permitirá tener un mayor control sobre el proceso de autenticación y adaptarlo a tus necesidades específicas.

¿Qué es JWT?

JWT es un estándar abierto (RFC 7519) que define una forma compacta y autónoma de transmitir información entre partes como un objeto JSON. Este token puede ser firmado digitalmente utilizando un secreto (HMAC) o un par clave pública/privada (RSA o ECDSA). Los JWTs son comúnmente utilizados en sistemas de autenticación y autorización debido a su simplicidad y eficiencia.

Configuración inicial del proyecto

Para comenzar, asegúrate de tener Node.js instalado en tu sistema. Luego, crea un nuevo proyecto de Next.js utilizando el siguiente comando:

npx create-next-app@latest nextjs-jwt-auth

Este comando generará una estructura básica del proyecto. Ahora, instala las dependencias necesarias para trabajar con JWTs:

npm install jsonwebtoken bcryptjs

Creación del sistema de autenticación

El primer paso es crear un sistema de autenticación que permita a los usuarios registrarse e iniciar sesión. Para ello, vamos a implementar dos endpoints API en Next.js: uno para el registro y otro para el inicio de sesión.

Implementación del registro

Crea un archivo llamado register.ts dentro de la carpeta pages/api. Este archivo manejará las solicitudes de registro:

import { NextApiRequest, NextApiResponse } from 'next';
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { email, password } = req.body;
    const hashedPassword = await bcrypt.hash(password, 10);
    const token = jwt.sign({ email }, process.env.JWT_SECRET!, { expiresIn: '1h' });
    res.status(200).json({ token });
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Implementación del inicio de sesión

Crea un archivo llamado login.ts dentro de la carpeta pages/api. Este archivo manejará las solicitudes de inicio de sesión:

import { NextApiRequest, NextApiResponse } from 'next';
import bcrypt from 'bcryptjs';
import jwt from 'jsonwebtoken';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
  if (req.method === 'POST') {
    const { email, password } = req.body;
    const user = await getUserByEmail(email);
    if (user && await bcrypt.compare(password, user.password)) {
      const token = jwt.sign({ email }, process.env.JWT_SECRET!, { expiresIn: '1h' });
      res.status(200).json({ token });
    } else {
      res.status(401).json({ message: 'Invalid credentials' });
    }
  } else {
    res.setHeader('Allow', ['POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

Protección de rutas

Para proteger rutas en Next.js, puedes crear un middleware que verifique la presencia y validez del JWT en cada solicitud. Aquí te mostramos cómo hacerlo:

import { NextApiRequest, NextApiResponse } from 'next';
import jwt from 'jsonwebtoken';

export function authenticateToken(req: NextApiRequest, res: NextApiResponse, next: Function) {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (token == null) return res.sendStatus(401);

  jwt.verify(token, process.env.JWT_SECRET!, (err: any, user: any) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
}

Conclusión

Implementar un sistema de autenticación con Next.js 15 y JWT sin librerías externas es una excelente manera de mantener el control total sobre tu aplicación y asegurar que cumpla con tus requisitos específicos. Siguiendo los pasos descritos en este artículo, podrás crear un sistema de autenticación seguro y eficiente para tus proyectos.