HyperSaaS
FrontendAuthentication

Overview

JWT-based authentication with NextAuth.js and Django backend.

HyperSaaS uses NextAuth.js v5 (Auth.js) with a credentials provider that authenticates against the Django backend's Djoser JWT endpoints.

Architecture

Browser                    Next.js                     Django
  │                          │                           │
  │  email + password        │                           │
  │─────────────────────────►│  POST /auth/jwt/create/   │
  │                          │──────────────────────────►│
  │                          │  ◄── {access, refresh} ───│
  │                          │                           │
  │                          │  GET /auth/users/me/      │
  │                          │──────────────────────────►│
  │                          │  ◄── user details ────────│
  │                          │                           │
  │  ◄── session cookie ─────│  Store tokens in JWT      │
  │                          │                           │
  │  API request             │                           │
  │─────────────────────────►│  Authorization: JWT {token}│
  │                          │──────────────────────────►│

Key Components

ComponentLocationPurpose
NextAuth Configlib/auth/providers.tsCredentials provider, JWT callbacks
Token Utilitieslib/auth/utils.tsValidate, refresh, extract tokens
Server Sessionlib/auth/session.tsGet current user on server
Auth Actionslib/auth/actions.tsLogin/logout server actions
Middlewaremiddleware.tsProtect routes

Auth Pages

PageRouteDescription
Login/loginEmail + password form
Register/registerAccount creation → email verification
Activate/user-activation/[uid]/[token]Email verification link
Reset Password/reset-passwordRequest password reset email
Confirm Reset/confirm-password-reset/[uid]/[token]Set new password
Resend Activation/resend-activationRequest new activation email

Session Shape

The NextAuth session stores the user profile and both JWT tokens:

interface Session {
  user: {
    id: string;
    email: string;
    name: string;
    username: string;
    image?: string;
    subscription_status?: string;
    has_active_subscription?: boolean;
    accessToken: string;
    refreshToken: string;
    accessTokenExpires: number;  // Unix timestamp
  };
}

Token Refresh

Tokens are automatically refreshed 60 seconds before expiry in the NextAuth JWT callback. If refresh fails, the session is invalidated and the user is redirected to login.

On this page