Implementing JWT Authentication with FastAPI and Next.js

SubGame — Wed, 24 Sep 2025 08:30:19 +0000

Introduction

Authentication is one of the most important aspects of modern web applications. Whether you’re building a small personal project or a large-scale marketplace, you need a secure and scalable way to handle user login, registration, and session management.

In this article, I’ll share my experience implementing JWT-based authentication using FastAPI for the backend and Next.js for the frontend

Why JWT?

JWT (JSON Web Token) is widely used because:
It’s stateless (no need to store sessions in the backend).
It works perfectly with APIs and SPAs.
It can securely store claims about the user (like user ID, roles, permissions)

Backend: FastAPI Setup

First, let’s create a simple FastAPI app with JWT authentication.

from fastapi import FastAPI, Depends, HTTPException
from fastapi.security import OAuth2PasswordBearer
from jose import JWTError, jwt
from datetime import datetime, timedelta

app = FastAPI()

SECRET_KEY = "your-secret-key"
ALGORITHM = "HS256"
ACCESS_TOKEN_EXPIRE_MINUTES = 30

oauth2_scheme = OAuth2PasswordBearer(tokenUrl="token")

def create_access_token(data: dict, expires_delta: timedelta | None = None):
    to_encode = data.copy()
    expire = datetime.utcnow() + (expires_delta or timedelta(minutes=15))
    to_encode.update({"exp": expire})
    return jwt.encode(to_encode, SECRET_KEY, algorithm=ALGORITHM)

This function creates a JWT with an expiration time.

Frontend: Next.js Integration

On the frontend, we’ll store the JWT securely and send it with each request.

Here’s a simple example using fetch:

async function fetchUserProfile(token) {
  const res = await fetch("http://localhost:8000/users/me", {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  });

  if (!res.ok) {
    throw new Error("Failed to fetch user profile");
  }

  return res.json();
}

Best Practices

Don’t store JWT in localStorage – use HTTP-only cookies when possible.
Use refresh tokens for longer sessions.
Rotate tokens regularly for better security.
Handle expiration gracefully on the frontend.

Conclusion

Implementing JWT authentication with FastAPI and Next.js is straightforward, but security best practices must always be followed. By combining a fast Python backend with a modern React-based frontend, you can build secure and scalable applications with ease.