NextAuth + Django JWT: autenticación unificada

NextAuth + Django JWT: Autenticación Única Sin Duplicados

NextAuth en Next.js y Django REST Framework con JWT suelen chocar durante la autenticación. Los usuarios inician sesión una sola vez en el frontend, obtienen tokens de acceso y refresco de Django, y todas las llamadas a la API usan un único cliente con refresco automático de tokens. Los proveedores OAuth se sincronizan con el backend: sin pantallas de login duplicadas.

Separación de Roles en la Arquitectura

NextAuth maneja las sesiones de UI, formularios de login y OAuth. Django gestiona el modelo de dominio de usuarios, emisión de JWT y protección de API mediante JWTAuthentication. El frontend nunca genera tokens por sí mismo: Django es la única fuente de acceso a la API. Los tokens se almacenan dentro de la sesión de NextAuth.

Principales beneficios de esta configuración:

• Sin localStorage manual para tokens de acceso
• Refresco automático sin errores 401
• Sincronización OAuth sin logins duplicados
• Un solo cliente axios para todas las peticiones

Django: Modelo de Usuario con Email Primero y JWT Personalizado

El modelo de usuario usa el email como USERNAME_FIELD. Esto simplifica la integración con OAuth, donde los nombres de usuario no siempre están disponibles.

# auth_app/models.py
from django.contrib.auth.models import AbstractUser
from django.db import models
from django.contrib.auth.models import BaseUserManager

class CustomUserManager(BaseUserManager):
    def create_user(self, email, password=None, **extra_fields):
        if not email:
            raise ValueError("El campo Email debe estar establecido")
        email = self.normalize_email(email)
        user = self.model(email=email, **extra_fields)
        user.set_password(password)
        user.save(using=self._db)
        return user

    def create_superuser(self, email, password=None, **extra_fields):
        extra_fields.setdefault("is_staff", True)
        extra_fields.setdefault("is_superuser", True)
        return self.create_user(email, password, **extra_fields)


class User(AbstractUser):
    email = models.EmailField(unique=True)
    name = models.CharField(max_length=100, blank=True)
    provider = models.CharField(max_length=50, default="credentials", blank=True, null=True)

    USERNAME_FIELD = "email"
    REQUIRED_FIELDS = []

    objects = CustomUserManager()

En settings.py: AUTH_USER_MODEL = "auth_app.User". Instala rest_framework_simplejwt, dj_rest_auth y allauth.

El TokenObtainPairSerializer personalizado añade email, name y provider al token:

# auth_app/serializers.py
from rest_framework_simplejwt.serializers import TokenObtainPairSerializer

class CustomTokenObtainPairSerializer(TokenObtainPairSerializer):
    @classmethod
    def get_token(cls, user):
        token = super().get_token(user)
        token["email"] = user.email
        token["name"] = user.name
        token["provider"] = user.provider
        return token

    def validate(self, attrs):
        credentials = {
            "email": attrs.get("email"),
            "password": attrs.get("password"),
        }
        return super().validate(credentials)

La vista de login verifica el email y devuelve tokens + datos del usuario:

# auth_app/views.py
class CustomTokenObtainPairView(TokenObtainPairView):
    serializer_class = CustomTokenObtainPairSerializer

    def post(self, request, *args, **kwargs):
        serializer = self.get_serializer(data=request.data)
        serializer.is_valid(raise_exception=True)

        user = serializer.user
        email_address = EmailAddress.objects.filter(user=user, email=user.email).first()
        if not email_address or not email_address.verified:
            raise AuthenticationFailed(detail="La dirección de email no está verificada.")

        return Response(
            {
                "access": serializer.validated_data["access"],
                "refresh": serializer.validated_data["refresh"],
                "user": {
                    "email": user.email,
                    "name": user.name,
                    "id": user.id,
                },
            },
            status=status.HTTP_200_OK,
        )

Next.js: Proveedor Credentials como Proxy de Django

El proveedor Credentials envía email/contraseña a Django y almacena los tokens recibidos en la sesión:

// src/lib/auth/authOptions.ts
import { NextAuthOptions } from "next-auth";
import GoogleProvider from "next-auth/providers/google";
import CredentialsProvider from "next-auth/providers/credentials";
import apiClient from "@/services/authClientService";

const baseURL = process.env.NEXT_PUBLIC_API_BASE_URL;

export const authOptions: NextAuthOptions = {
  providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET as string,
    }),
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: { label: "Contraseña", type: "password" },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials.password) {
          throw new Error("Debes proporcionar email y contraseña");
        }

        const { data } = await apiClient.post(`${baseURL}/api/auth/custom/login/`, {
          email: credentials.email,
          password: credentials.password,
        });

        if (data?.user) {
          const { id, name, email } = data.user;
          return {
            id: id.toString(),
            name,
            email,
            accessToken: data.access || null,
            refreshToken: data.refresh || null,
          };
        }

        return null;
      },
    }),
  ],
};

Sincronización OAuth: Endpoint register-or-login

Tras OAuth de Google, llama al endpoint register-or-login. Django crea o actualiza el usuario y emite JWT:

callbacks: {
  async signIn({ user, account }) {
    const allowedProviders = ["google", "apple"];

    if (account?.provider && allowedProviders.includes(account.provider)) {
      const res = await apiClient.post(
        `${baseURL}/api/auth/custom/oauth/register-or-login/`,
        {
          id: user.id,
          name: user.name,
          email: user.email,
          provider: account.provider,
        }
      );

      if (res.status === 200) {
        user.accessToken = res.data.access;
        user.refreshToken = res.data.refresh;
        return true;
      }

      return false;
    }

    return true;
  },
},

Endpoint de Django:

class CustomOAuthRegisterOrLoginView(APIView):
    permission_classes = [AllowAny]

    def post(self, request, *args, **kwargs):
        serializer = OAuthUserSerializer(data=request.data)
        serializer.is_valid(raise_exception=True)
        data = serializer.validated_data

        provider = data["provider"]
        email = data["email"]
        name = data["name"]
        user_id = data["id"]

        user, created = User.objects.get_or_create(
            email=email,
            defaults={
                "name": name,
                "provider": provider,
                "username": user_id,
            },
        )

        if not created:
            user.name = name
            user.provider = provider
            user.save()

        refresh = RefreshToken.for_user(user)
        access = str(refresh.access_token)

        return Response(
            {
                "message": "Usuario sincronizado exitosamente.",
                "user": {
                    "email": user.email,
                    "name": user.name,
                    "provider": user.provider,
                },
                "access": access,
                "refresh": str(refresh),
            },
            status=status.HTTP_200_OK,
        )

Optimización de Callbacks JWT y Sesión

JWT y sesión almacenan solo id, accessToken y refreshToken. Se excluyen datos extra para minimizar tamaño:

async jwt({ token, user }) {
  if (user) {
    token.id = user.id.toString();
    token.accessToken = user.accessToken || null;
    token.refreshToken = user.refreshToken || null;
  }
  return token;
},

async session({ session, token }) {
  session.user = {
    ...session.user,
    id: token.id as string,
  };
  session.accessToken = token.accessToken || null;
  session.refreshToken = token.refreshToken || null;
  return session;
},

Lecciones Clave

• Única fuente de tokens: Django JWT es la única autoridad de acceso a API
• Sincronización OAuth automática: register-or-login elimina logins duplicados
• Sesiones ligeras: Solo id + tokens, sin sobrecarga
• Verificación de email: Integrada en el login para consistencia
• Interceptor de Axios: Refresco automático y logout en 401

— Editorial Team