Autenticación Rápida con SDK de Next.js y Auth0

¿Cómo configurar una autenticación con Auth0 en Next.js?

La integración de autenticación en aplicaciones web puede ser un proceso complejo, pero con el SDK de Next.js de Auth0, es posible lograrlo con pocas líneas de código. Aquí exploraremos paso a paso cómo añadir una capa de autenticación utilizando Auth0 y otras herramientas como Firebase y Unsplash.

¿Cuáles son los requisitos iniciales para el proyecto?

Antes de comenzar la implementación de la autenticación, es fundamental preparar algunas configuraciones iniciales en Firebase y Unsplash:

1. Cuenta de Firebase:

   • Crea un nuevo proyecto y una aplicación web.
   • Enfócate en "Project Settings" para copiar la configuración de Firebase.
   • Crea una base de datos en Firestore en modo producción y ajusta las reglas a if true para abrir inicialmente la colección al público.

2. Cuenta de Unsplash:

   • Crea una nueva aplicación en tu cuenta de desarrollador.
   • Asegúrate de copiar la clave de acceso proporcionada.

Con ambas configuraciones, copia la información en las variables de entorno de tu proyecto.

¿Cómo preparar las variables de entorno?

Procede con la preparación de variables de entorno para facilitar el trabajo con varias APIs. A continuación, el proceso detallado:

1. Duplicar y modificar archivos:

   • Copia el archivo .env.local.example y retira la extensión .example.
   • Incluye en el archivo resultante la clave de acceso de Unsplash y la configuración de Firebase.

2. Ejecutar scripts de preparación:

   • Utiliza el script jar-seed para enviar una colección de películas de prueba a Firestore, lo cual te permitirá probar la autenticación con datos previamente cargados.

¿Cómo implementar la autenticación con el SDK de Auth0?

La configuración en Auth0 te permitirá proteger rutas y acceder a datos de usuario fácilmente:

1. Crear una aplicación en Auth0:

   • Ve al panel de control de Auth0 y crea una nueva aplicación asegurándote de que sea del tipo "Regular Web Application".
   • Copia el Domain, Client ID, y Client Secret desde la pestaña de Settings.

2. Actualizar variables de entorno:

   • Asegúrate de incluir el protocolo HTTPS al dominio en las variables de entorno.
   • Genera una cadena de texto aleatoria de 32 bytes para el Auth0 Secret.

¿Cómo integrar el SDK en Next.js?

1. Instalación del SDK de Auth0:

   • Instala el paquete a través de npm:

     npm install @auth0/nextjs-auth0
     

2. Configurar rutas de autenticación:

   • Dentro de la carpeta api, crea una subcarpeta auth y un archivo con el nombre [...auth0].js:

     import { handleAuth } from '@auth0/nextjs-auth0';
     export default handleAuth();
     

   • Esta configuración habilita todas las rutas necesarias para login, logout, y callback.

3. Proteger componentes e implementar proveedor de usuario:

   • En el archivo _app.js, importa el UserProvider desde @auth0/nextjs-auth0/client y asegúrate de que esté presente en toda la aplicación:

     import { UserProvider } from '@auth0/nextjs-auth0/client';
     // Usa UserProvider como un componente envolvente
     

4. Proteger la página principal:

   • Implementa el Higher-Order Component (HOC) withPageAuthRequired desde el SDK para proteger la página de índice:

     export const getServerSideProps = withPageAuthRequired();
     

5. Acceder a datos de usuario:

   • Usa el hook useUser para obtener y mostrar información de usuario como nombre o avatar:

     import { useUser } from '@auth0/nextjs-auth0/client';
     const { user } = useUser();
     

Con esta estructura, ahora puedes iniciar tu servidor y verificar cómo la autenticación se aplica a tu aplicación en localhost:3000. Al acceder, se te solicitará iniciar sesión, brindando una forma segura y eficiente de gestionar usuarios en tu aplicación de Next.js.

Desafío adicional

El SDK de Auth0 no es la única opción para implementar la autenticación. Explora la librería Auth.js, conocida también como Next.auth, y experimenta diferencias y similitudes en la implementación para enriquecer tu proyecto.

A medida que avanzas, recuerda que la práctica es clave para dominar la integración de autenticaciones. Estás en el camino correcto, ¡sigue aprendiendo!