Cómo Configurar la Autenticación y Rutas Protegidas en Next.js 13 con next-auth.js

Esta guía demuestra el proceso sencillo de incorporar la autenticación en tu aplicación de Next.js utilizando la biblioteca next-auth.js [https//next-auth.js.org/]. Aunque esta biblioteca ofrece numerosas opciones (proveedores), este tutorial se enfoca en la implementación utilizando el Proveedor de Google. También obtendrás una perspectiva sobre cómo configurar fácilmente rutas protegidas en tu aplicación, una tarea...

Esta guía demuestra el sencillo proceso de incorporar la autenticación en tu aplicación Next.js utilizando la biblioteca next-auth.js. Si bien la biblioteca ofrece numerosas opciones (proveedores), este tutorial se centra en la implementación utilizando el Proveedor de Google.

También obtendrás información sobre cómo configurar fácilmente rutas protegidas dentro de tu aplicación, una tarea que se facilita con la biblioteca next-auth.js.

Cuando estés listo, vamos a sumergirnos.

Cómo configurar la biblioteca next-auth.js

Una vez que tu aplicación Next.js esté en funcionamiento, estamos listos para comenzar.

Nota rápida: mencionaré el directorio “app” de manera constante en esta guía. Si este término es nuevo para ti, tómate un momento para consultar la documentación de Next.js para mayor claridad. Si estás utilizando el directorio “pages”, no te preocupes, ya que la implementación es casi idéntica.

Instala la biblioteca next-auth.js con el siguiente comando:

npm install next-auth

Después de completar la instalación, crea una carpeta api en la carpeta raíz de tu aplicación, y dentro de ella crea una carpeta auth. Por último, crea una carpeta [...nextauth] dentro de la carpeta auth.

Dentro de la carpeta [...nextauth], crea dos archivos llamados route.ts y options.ts.

Hasta este punto, tu estructura de carpetas debería lucir así:

Luego, en el archivo options.ts, inserta el siguiente código:

import type { NextAuthOptions } from 'next-auth'import GoogleProvider from "next-auth/providers/google";export const options: NextAuthOptions = {    providers: [  GoogleProvider({    clientId: process.env.GOOGLE_CLIENT_ID as string,    clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,  })]}

Importamos el tipo NextAuthOptions para asegurarnos de que la variable options tenga un tipo seguro.

Para utilizar el Proveedor de Google, importamos GoogleProvider de next-auth como se ilustra anteriormente.

La variable options es donde incrustamos el proveedor que pretendemos utilizar de next-auth.js.

Observa que exportamos la variable options, lo que nos permite utilizarla en toda la aplicación (aunque principalmente la necesitamos en el archivo route.ts). A medida que nos adentramos en la implementación en el archivo route.ts, exploraremos cómo se utiliza.

Para utilizar el Proveedor de Google de manera efectiva, necesitas obtener las propiedades clientId y clientSecret. No te preocupes, nos adentraremos en esto en breve. Primero, crea un archivo .env donde asignarás valores a ambas propiedades.

Los archivos env siempre se encuentran en la carpeta raíz de tu aplicación:

Ahora, veremos cómo puedes obtener tu clientId y clientSecret.

Suponiendo que ya tienes una cuenta de Google, sigue estos sencillos pasos:

1. Visita Google Cloud Platform y haz clic en el botón “console” en la esquina superior derecha de la barra de navegación.

1. Se te dirigirá al panel de control de la consola. En la esquina superior izquierda, justo después del logotipo de Google Cloud, haz clic en el menú desplegable para crear un nuevo proyecto:

1. Asigna el nombre que prefieras a tu proyecto y luego haz clic en el botón “Crear”. El mío será “Tutorial de Next-auth”.

2. Volverás a tu panel de control y ahora el mismo menú desplegable debería mostrar el proyecto que creaste recientemente. Si no lo hace, haz clic en él y selecciona el proyecto.

3. Suponiendo que todo esté en orden, desplázate hacia abajo hasta la sección “Acceso rápido” y elige la tarjeta “API y servicios”. Esta acción te llevará a la página “API y servicios”. En la barra lateral de esta página, selecciona la opción “Credenciales”:

1. Se te dirigirá a la página “Credenciales”. Aquí, haz clic en el botón “CONFIGURAR PANTALLA DE CONSENTIMIENTO”:

1. Esto te llevará a la página de configuración de la pantalla de consentimiento, donde determinarás cómo deseas configurar y registrar tu aplicación. Selecciona la opción “Externo” y procede haciendo clic en el botón “Crear”:

1. A continuación, te encontrarás en la página “Pantalla de consentimiento de OAuth”. Continúa completando estos cuatro pasos:

Comenzando por la pestaña “Pantalla de consentimiento de OAuth”, se te pedirá que modifiques la información de tu aplicación. Las secciones clave en las que debes centrarte son “Información de la aplicación” e “Información de contacto del desarrollador”. Después de completar estos campos, haz clic en el botón “GUARDAR Y CONTINUAR”.

Luego pasarás a la pestaña “Ámbitos”. Aquí, una vez más, haz clic en el botón “GUARDAR Y CONTINUAR”.

El siguiente paso es la pestaña “Usuarios de prueba”. Del mismo modo, procede haciendo clic en el botón “GUARDAR Y CONTINUAR”.

Y por último, llegarás a la última pestaña, la pestaña de resumen. Desplázate hacia abajo y selecciona el botón “VOLVER AL PANEL DE CONTROL”.

Al completar estos pasos, tu panel de control debería verse como en la siguiente imagen:

1. Vuelve a la página “Credenciales” y allí, haz clic en el botón “Crear credenciales”. Aparecerá un menú desplegable. Elige la opción “ID de cliente de OAuth”:

1. Esta acción te llevará a la página donde crearás tu ID de cliente. En esta página, verás un único campo desplegable para el tipo de aplicación, que revelará campos adicionales según tu selección. Selecciona la opción “Aplicación web” de este desplegable:

Desplázate hacia abajo hasta la sección “URI de redireccionamiento autorizada” y pega la siguiente URI: http://localhost:3000/api/auth/callback/google. Luego, haz clic en el botón “CREAR”.

1. Por último, aparecerá un cuadro emergente que muestra tu ID de cliente y tu secreto de cliente exclusivos. Ten en cuenta que ambos valores son confidenciales, específicos de cada usuario y deben mantenerse seguros. Por razones de privacidad, ambos valores están borrosos en la imagen a continuación:

Una vez que hayas completado estos pasos, vuelve a tu editor de código y pega los valores correspondientes de cada variable en el archivo .env:

GOOGLE_CLIENT_ID = valor del ID del clienteGOOGLE_CLIENT_SECRET = valor secreto del cliente

También necesitarás generar una clave NEXT_AUTH_SECRET para mejorar la seguridad del proceso de autenticación en next-auth.js. Genera tu clave secreta ejecutando el siguiente comando en tu terminal:

openssl rand -base64 32

Este comando generará una cadena de 32 caracteres. Copia esta cadena y pégala como valor para la variable NEXTAUTH_SECRET en tu archivo .env. Tu archivo .env final debería ser similar al siguiente:

GOOGLE_CLIENT_ID = valor ID clienteGOOGLE_CLIENT_SECRET = valor clave secretaNEXT_AUTH_SECRET = secreto de autenticación siguiente

Para finalizar, reinicia tu aplicación. Es importante tener en cuenta que la biblioteca next-auth.js no estará activamente comprometida en este punto. La razón es que aún no has implementado rutas protegidas para proteger tus páginas. Exploraremos este aspecto a continuación.

Cómo implementar rutas protegidas con next-auth.js

Con el uso del middleware de Next.js, proteger rutas es muy fácil.

Comienza creando un archivo middleware.ts en la carpeta raíz src.

Para proteger todas tus páginas de forma uniforme, inserta el siguiente fragmento de código:

export { default } from 'next-auth/middleware'

Alternativamente, puedes asegurar selectivamente páginas específicas utilizando un matcher. Por ejemplo, proteger solo la página de inicio y la de acerca de se implementaría de la siguiente manera:

export { default } from 'next-auth/middleware'export const config = { matcher: ['/', '/about'] }

Ahora, cuando visites ambas páginas en tu localhost, te presentarán un cuadro de diálogo de autenticación que te invitará a “Iniciar sesión con Google”, en lugar de mostrar el contenido regular:

Conclusión

En este tutorial, hemos cubierto los pasos esenciales para implementar autenticación y rutas protegidas en tu aplicación de Next.js utilizando la biblioteca next-auth.js con el proveedor de Google.

Siguiendo estos pasos, has sentado una base sólida para integrar autenticación en tu aplicación de Next.js, fortaleciendo su seguridad y mejorando la experiencia del usuario.

Con los conocimientos adquiridos aquí, ahora puedes desarrollar aplicaciones con confianza que ofrecen control de acceso seguro y contenido personalizado basado en autenticación de usuarios.

También es bueno tener en cuenta que next-auth.js proporciona múltiples proveedores que puedes utilizar para implementar autenticación, no solo el proveedor de Google.

• Application Security
• Authentication
• Next.js