Zpět na domů

NextAuth + Django JWT: jednotná autentizace

Článek popisuje integraci NextAuth s Django JWT pro jednotnou autentizaci bez duplicitního přihlášení. Jsou rozebrány vlastní modely uživatele, credentials provider, synchronizace OAuth a optimalizace relací. Uveden je kompletní funkční kód.

NextAuth a Django JWT bez chaosu tokenů
Advertisement 728x90

Integrace NextAuth s Django JWT: jednotná autorizace bez duplikace

NextAuth na Next.js a Django REST Framework s JWT často konfliktují při autorizaci. Uživatel se přihlásí jednou na frontendu, získá access a refresh tokeny od Django, poté všechny API-požadavky používají jediný klient s automatickým obnovením tokenů. OAuth-poskytovatelé se synchronizují s backendem bez druhé formy přihlášení.

Rozdělení rolí v architektuře

NextAuth spravuje UI-session, formy přihlášení a OAuth. Django odpovídá za doménový model uživatele, JWT-vydávání a ochranu API přes JWTAuthentication. Frontend negeneruje tokeny sám — pouze Django je zdrojem API-přístupu. Tokeny jsou uloženy uvnitř session NextAuth.

Klíčové výhody schématu:

Google AdInline article slot
  • Žádné ruční localStorage pro access token
  • Automatický refresh bez 401 chyb
  • Synchronizace OAuth bez duplikujícího se přihlášení
  • Jediný axios-klient pro všechny požadavky

Django: email-first uživatel a vlastní JWT

Model uživatele používá email jako USERNAME_FIELD. To zjednodušuje integraci s OAuth, kde username není vždy dostupný.

# 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("The Email field must be set")
        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()

V settings.py: AUTH_USER_MODEL = "auth_app.User". Připojují se rest_framework_simplejwt, dj_rest_auth, allauth.

Vlastní TokenObtainPairSerializer přidává do tokenu pole email, name, provider:

Google AdInline article slot
# 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)

Login-view kontroluje verifikaci emailu a vrací tokeny + user data:

# 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="Email address is not verified.")

        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: Credentials poskytovatel jako proxy k Django

Credentials poskytovatel předává email/heslo do Django a ukládá získané tokeny v session:

// 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: "Password", type: "password" },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials.password) {
          throw new Error("Email and password must be provided");
        }

        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;
      },
    }),
  ],

OAuth synchronizace: register-or-login endpoint

Po Google OAuth se provede požadavek register-or-login. Django vytvoří nebo aktualizuje uživatele a vydá JWT:

Google AdInline article slot
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;
  },
},

Django endpoint:

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": "User successfully synchronized.",
                "user": {
                    "email": user.email,
                    "name": user.name,
                    "provider": user.provider,
                },
                "access": access,
                "refresh": str(refresh),
            },
            status=status.HTTP_200_OK,
        )

Optimalizace JWT a session callbacks

V JWT a session jsou uloženy pouze id, accessToken, refreshToken. Nadbytečná data jsou vyloučena pro minimalizaci velikosti:

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;
},

Co je důležité

  • Jediný zdroj tokenů: Django JWT — jediný zdroj API-přístupu
  • Auto-synchronizace OAuth: register-or-login odstraní duplikující přihlášení
  • Minimální session: pouze id + tokeny, bez nadbytečných polí
  • Kontrola emailu: vestavěna v login pro konzistenci
  • Axios interceptor: automatický refresh a logout při 401

— Editorial Team

Advertisement 728x90

Číst dál