Autenticación Rápida con NextAlt y GitHub en Next.js

¿Cómo implementar autenticación con Next.js y NextAuth de forma rápida y sencilla?

Implementar autenticación en una aplicación puede ser un desafío, pero con Next.js y NextAuth (antes conocido como nets out), el proceso se simplifica enormemente. Esta biblioteca ofrece la posibilidad de integrar servicios de autenticación como GitHub mediante el protocolo OAuth, permitiéndonos autenticar usuarios en cuestión de minutos.

¿Qué necesitamos para comenzar?

Antes de adentrarnos en el código, es esencial contar con algunos elementos básicos:

1. Asegúrate de tener una aplicación Next.js ya establecida.
2. Un perfil en GitHub para obtener el client ID y el client secret necesarios.
3. Acceso a las opciones de desarrollador de GitHub para crear una aplicación en su plataforma.

¿Cómo configurar la app de GitHub para la autenticación?

El primer paso para implementar NextAuth es configurar tu aplicación en GitHub para obtener los secretos necesarios para la autenticación.

1. Accede a las opciones de desarrollador en GitHub:

   • Visita tu perfil de GitHub.
   • Dirígete a las configuraciones de desarrollador y crea una nueva aplicación.
   • Proporciona un nombre a la aplicación y la obtención de una URL de callback es crucial. Utiliza http://localhost:3000/api/auth/callback/github al probar localmente.

2. Registrar la aplicación:

   • Al registrar la aplicación, desactiva la opción de Webhook, ya que no es necesaria para este propósito.
   • Una vez completada, copia el client ID y genera un nuevo client secret. Asegúrate de almacenarlos de manera segura en las variables de entorno.

¿Cómo integrar NextAuth en una aplicación Next.js?

Con los datos de la aplicación en GitHub listos, ahora puedes integrar NextAuth en tu aplicación Next.js.

3. Crear archivos y configurar NextAuth:
   • En la carpeta api de tu proyecto Next.js, crea una subcarpeta llamada auth.
   • En auth, crea un archivo nombrado [...nextauth].js. Este archivo se encargará de gestionar las rutas dinámicas que NextAuth utiliza.

// Importamos las bibliotecas necesarias
import NextAuth from 'next-auth';
import GitHubProvider from 'next-auth/providers/github';

// Exportamos la configuración de NextAuth
export default NextAuth({
  providers: [
    // Definimos el proveedor de GitHub
    GitHubProvider({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
    }),
  ],
});

4. Modificar la aplicación principal:
   • Envuelve la aplicación en un SessionProvider importado desde NextAuth.
   • Asegúrate de pasar las props adecuadas para gestionar la sesión.

import { SessionProvider } from 'next-auth/react';

function MyApp({ Component, pageProps }) {
  return (
    <SessionProvider session={pageProps.session}>
      <Component {...pageProps} />
    </SessionProvider>
  );
}

export default MyApp;

¿Cómo probar y corregir errores comunes?

5. Realizar pruebas y ajustes:

   • Corre la aplicación revisando que la URL del localhost sea correcta (usualmente 3000).
   • Asegúrate de utilizar HTTP o HTTPS según lo requiera el entorno local para evitar errores de conexión.

6. Autenticación y Proveedores Múltiples:

   • Para autenticar, usa los métodos signIn y useSession provistos por NextAuth.
   • Si deseas implementar múltiples proveedores, simplemente importa el correspondiente, define su client ID y client secret y ¡listo!

Prueba tu implementación

Ejecuta tu aplicación, prueba la autenticación y, como reto adicional, intenta añadir otro proveedor que no sea GitHub para ver cómo NextAuth facilita este proceso. Recuerda mantener la seguridad de tus tokens y siempre actualiza las dependencias para disfrutar de nuevas funcionalidades y mejoras en seguridad.