🔐 Autenticación con NextAuth.js

18 - 🔐 Autenticación con NextAuth.js

Aprende a implementar autenticación en tu proyecto Next.js usando NextAuth.js, soportando proveedores externos y credenciales personalizadas.

---

🔍 ¿Qué es NextAuth.js?

NextAuth.js es una librería para Next.js que simplifica la autenticación de usuarios, ofreciendo soporte para:

• Inicio de sesión con proveedores externos (Google, GitHub, Facebook, etc.).
• Autenticación basada en credenciales propias.
• Manejo de sesiones, JWT y cookies seguras automáticamente.

💡 NextAuth.js se integra con API Routes de Next.js, por lo que la lógica de autenticación se maneja de forma segura en el backend.

---

⚙️ Instalación

Instala NextAuth.js y su adaptador de base de datos (opcional):

npm install next-auth
npm install @next-auth/prisma-adapter
    

---

🔗 Configuración de NextAuth.js

Crea un archivo de API Route para NextAuth.js:

// app/api/auth/[...nextauth]/route.js
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import { PrismaAdapter } from "@next-auth/prisma-adapter";
import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

const handler = NextAuth({
  adapter: PrismaAdapter(prisma),
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
  session: {
    strategy: "jwt",
  },
  callbacks: {
    async session({ session, token, user }) {
      session.user.id = token.sub;
      return session;
    },
  },
});

export { handler as GET, handler as POST };
      

💡 Explicación:

• Providers: Define los proveedores de autenticación (Google, GitHub, etc.).
• Adapter: PrismaAdapter conecta la autenticación con tu base de datos.
• Session Strategy: JWT para mantener la sesión del usuario de forma segura.
• Callbacks: Permiten personalizar la sesión y token devuelto al cliente.

---

🖥️ Uso en componentes de Next.js

Puedes usar los hooks useSession y signIn / signOut en tus componentes React.

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

export default function LoginButton() {
  const { data: session } = useSession();

  if (session) {
    return (
      <div>
        <p>Hola, {session.user.name}</p>
        <button onClick={() => signOut()}>Cerrar sesión</button>
      </div>
    );
  }

  return <button onClick={() => signIn("google")}>Iniciar sesión con Google</button>;
}
      

---

✅ Resumen

• 🔐 NextAuth.js simplifica la autenticación en Next.js.
• ⚡ Soporta proveedores externos y credenciales propias.
• 🔗 Integra fácilmente con Prisma y tu base de datos.
• 💡 Hooks como useSession, signIn y signOut permiten controlar la sesión desde el frontend.

← Volver al índice