Django JWT + Next.js Authentication Tutorial

Question

A complete guide to implementing JWT authentication with Django REST Framework backend and Next.js frontend. Table of Contents Prerequisites Backend Setup (Django) Frontend Setup (Next.js) Testing the Authentication Flow Prerequisites Python 3.8+ Node.js 18+ Basic knowledge of Django and React PostgreSQL (optional, SQLite works for development)

KFSys · Accepted Answer

Backend Setup (Django) Step 1: Create Django Project # Create and activate virtual environment python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate # Install dependencies pip install django djangorestframework djangorestframework-simplejwt django-cors-headers # Create project django-admin startproject backend cd backend python manage.py startapp accounts Step 2: Configure Settings Edit backend/settings.py: INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'rest_framework', 'rest_framework_simplejwt', 'corsheaders', 'accounts', ] MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions.middleware.SessionMiddleware', 'corsheaders.middleware.CorsMiddleware', 'django.middleware.common.CommonMiddleware', 'django.middleware.csrf.CsrfViewMiddleware', 'django.contrib.auth.middleware.AuthenticationMiddleware', 'django.contrib.messages.middleware.MessageMiddleware', 'django.middleware.clickjacking.XFrameOptionsMiddleware', ] # CORS Settings CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", ] CORS_ALLOW_CREDENTIALS = True # REST Framework Settings REST_FRAMEWORK = { 'DEFAULT_AUTHENTICATION_CLASSES': ( 'rest_framework_simplejwt.authentication.JWTAuthentication', ), } # JWT Settings from datetime import timedelta SIMPLE_JWT = { 'ACCESS_TOKEN_LIFETIME': timedelta(minutes=60), 'REFRESH_TOKEN_LIFETIME': timedelta(days=7), 'ROTATE_REFRESH_TOKENS': True, 'BLACKLIST_AFTER_ROTATION': True, 'UPDATE_LAST_LOGIN': True, } Step 3: Create Serializers Create accounts/serializers.py: from rest_framework import serializers from django.contrib.auth.models import User from django.contrib.auth.password_validation import validate_password class UserSerializer(serializers.ModelSerializer): class Meta: model = User fields = ('id', 'username', 'email', 'first_name', 'last_name') class RegisterSerializer(serializers.ModelSerializer): password = serializers.CharField(write_only=True, required=True, validators=[validate_password]) password2 = serializers.CharField(write_only=True, required=True) class Meta: model = User fields = ('username', 'password', 'password2', 'email', 'first_name', 'last_name') def validate(self, attrs): if attrs['password'] != attrs['password2']: raise serializers.ValidationError({"password": "Password fields didn't match."}) return attrs def create(self, validated_data): validated_data.pop('password2') user = User.objects.create_user(**validated_data) return user Step 4: Create Views Create accounts/views.py: from rest_framework import generics, status from rest_framework.permissions import AllowAny, IsAuthenticated from rest_framework.response import Response from rest_framework.views import APIView from django.contrib.auth.models import User from .serializers import RegisterSerializer, UserSerializer class RegisterView(generics.CreateAPIView): queryset = User.objects.all() permission_classes = (AllowAny,) serializer_class = RegisterSerializer class UserDetailView(APIView): permission_classes = (IsAuthenticated,) def get(self, request): serializer = UserSerializer(request.user) return Response(serializer.data) Step 5: Configure URLs Create accounts/urls.py: from django.urls import path from rest_framework_simplejwt.views import TokenObtainPairView, TokenRefreshView from .views import RegisterView, UserDetailView urlpatterns = [ path('register/', RegisterView.as_view(), name='register'), path('login/', TokenObtainPairView.as_view(), name='token_obtain_pair'), path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'), path('user/', UserDetailView.as_view(), name='user_detail'), ] Update backend/urls.py: from django.contrib import admin from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('api/auth/', include('accounts.urls')), ] Step 6: Run Migrations python manage.py makemigrations python manage.py migrate python manage.py runserver Frontend Setup (Next.js) Step 1: Create Next.js Project npx create-next-app@latest frontend cd frontend npm install axios js-cookie When prompted, choose: TypeScript: Yes ESLint: Yes Tailwind CSS: Yes App Router: Yes Step 2: Create Auth Context Create src/context/AuthContext.tsx: 'use client'; import React, { createContext, useState, useContext, useEffect } from 'react'; import axios from 'axios'; import Cookies from 'js-cookie'; interface User { id: number; username: string; email: string; first_name: string; last_name: string; } interface AuthContextType { user: User | null; loading: boolean; login: (username: string, password: string) => Promise; register: (username: string, email: string, password: string, password2: string) => Promise; logout: () => void; } const AuthContext = createContext(undefined); export const AuthProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => { const [user, setUser] = useState(null); const [loading, setLoading] = useState(true); const api = axios.create({ baseURL: 'http://localhost:8000/api/auth', headers: { 'Content-Type': 'application/json', }, }); // Add token to requests api.interceptors.request.use((config) => { const token = Cookies.get('access_token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }); // Handle token refresh api.interceptors.response.use( (response) => response, async (error) => { const originalRequest = error.config; if (error.response?.status === 401 && !originalRequest._retry) { originalRequest._retry = true; try { const refreshToken = Cookies.get('refresh_token'); const response = await axios.post('http://localhost:8000/api/auth/token/refresh/', { refresh: refreshToken, }); const { access } = response.data; Cookies.set('access_token', access); originalRequest.headers.Authorization = `Bearer ${access}`; return api(originalRequest); } catch (refreshError) { logout(); return Promise.reject(refreshError); } } return Promise.reject(error); } ); useEffect(() => { const loadUser = async () => { const token = Cookies.get('access_token'); if (token) { try { const response = await api.get('/user/'); setUser(response.data); } catch (error) { console.error('Failed to load user', error); Cookies.remove('access_token'); Cookies.remove('refresh_token'); } } setLoading(false); }; loadUser(); }, []); const login = async (username: string, password: string) => { const response = await api.post('/login/', { username, password }); const { access, refresh } = response.data; Cookies.set('access_token', access); Cookies.set('refresh_token', refresh); const userResponse = await api.get('/user/'); setUser(userResponse.data); }; const register = async (username: string, email: string, password: string, password2: string) => { await api.post('/register/', { username, email, password, password2 }); await login(username, password); }; const logout = () => { Cookies.remove('access_token'); Cookies.remove('refresh_token'); setUser(null); }; return ( {children} ); }; export const useAuth = () => { const context = useContext(AuthContext); if (!context) { throw new Error('useAuth must be used within AuthProvider'); } return context; }; Step 3: Update Root Layout Update src/app/layout.tsx: import { AuthProvider } from '@/context/AuthContext'; import './globals.css'; export default function RootLayout({ children, }: { children: React.ReactNode; }) { return ( {children} ); } Step 4: Create Login Page Create src/app/login/page.tsx: 'use client'; import { useState } from 'react'; import { useRouter } from 'next/navigation'; import { useAuth } from '@/context/AuthContext'; import Link from 'next/link'; export default function LoginPage() { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(''); const { login } = useAuth(); const router = useRouter(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(''); try { await login(username, password); router.push('/dashboard'); } catch (err: any) { setError(err.response?.data?.detail || 'Invalid credentials'); } }; return (

Sign In

{error && (

{error}

)}

Don't have an account?{' '} Sign up

); } Step 5: Create Register Page Create src/app/register/page.tsx: 'use client'; import { useState } from 'react'; import { useRouter } from 'next/navigation'; import { useAuth } from '@/context/AuthContext'; import Link from 'next/link'; export default function RegisterPage() { const [username, setUsername] = useState(''); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [password2, setPassword2] = useState(''); const [error, setError] = useState(''); const { register } = useAuth(); const router = useRouter(); const handleSubmit = async (e: React.FormEvent) => { e.preventDefault(); setError(''); if (password !== password2) { setError('Passwords do not match'); return; } try { await register(username, email, password, password2); router.push('/dashboard'); } catch (err: any) { setError(err.response?.data?.username?.[0] || 'Registration failed'); } }; return (

Create Account

{error && (

{error}

)}

Already have an account?{' '} Sign in

); } Step 6: Create Protected Dashboard Create src/app/dashboard/page.tsx: 'use client'; import { useEffect } from 'react'; import { useRouter } from 'next/navigation'; import { useAuth } from '@/context/AuthContext'; export default function DashboardPage() { const { user, loading, logout } = useAuth(); const router = useRouter(); useEffect(() => { if (!loading && !user) { router.push('/login'); } }, [user, loading, router]); if (loading) { return (

Loading...

); } if (!user) { return null; } return (

Welcome back, {user.username}!

Email: {user.email}

Username: {user.username}

User ID: {user.id}

); } Step 7: Update Home Page Update src/app/page.tsx: 'use client'; import { useAuth } from '@/context/AuthContext'; import { useRouter } from 'next/navigation'; import { useEffect } from 'react'; import Link from 'next/link'; export default function Home() { const { user, loading } = useAuth(); const router = useRouter(); useEffect(() => { if (!loading && user) { router.push('/dashboard'); } }, [user, loading, router]); return (

Welcome to JWT Auth Demo

Django + Next.js Authentication

Sign In Sign Up

); } Step 8: Run Frontend npm run dev Testing the Authentication Flow Test Registration Navigate to http://localhost:3000 Click “Sign Up” Fill in the registration form Submit and verify redirect to dashboard Test Login Logout from dashboard Navigate to login page Enter credentials Verify redirect to dashboard Test Token Refresh Login and stay on dashboard Wait for access token to expire (60 minutes by default) Perform an action that requires authentication Verify token is automatically refreshed Test Protected Routes Logout from application Try to access /dashboard directly Verify redirect to login page Security Best Practices Use HTTPS in production - Never send JWTs over HTTP Set secure cookie flags - Add secure: true, httpOnly: true, sameSite: 'strict' in production Implement rate limiting - Prevent brute force attacks Add email verification - Verify user emails before activation Use environment variables - Store secrets in .env files Implement CSRF protection - Add CSRF tokens for state-changing operations Rotate refresh tokens - Already configured with ROTATE_REFRESH_TOKENS: True Add token blacklisting - Install djangorestframework-simplejwt[blacklist] Next Steps Add password reset functionality Implement email verification Add social authentication (Google, GitHub) Create user profile management Add role-based access control (RBAC) Implement two-factor authentication (2FA) Add refresh token rotation Create API documentation with Swagger Troubleshooting CORS errors : Verify CORS_ALLOWED_ORIGINS includes your frontend URL 401 errors : Check token expiration times and refresh logic Cookie issues : Ensure cookies are being set correctly with proper domain/path Token not refreshing : Verify interceptor logic and refresh endpoint Conclusion You now have a fully functional JWT authentication system with Django and Next.js! This setup provides secure, scalable authentication with automatic token refresh and proper separation of concerns between frontend and backend.

Become a contributor for community

DigitalOcean Documentation

Resources for startups and AI-native businesses

The developer cloud

Start building today

Report this

Django JWT + Next.js Authentication Tutorial

Table of Contents

Prerequisites

Related questions

How to Deploy a Django + Next.js Application on DigitalOcean App Platform

Best practices for deploying a Next.js SaaS app with PostgreSQL on DigitalOcean App Platform?

How to send the correct IP Address from my NextJS app on App Platform

How to convert my exisitng nextjs 14 project to nextjs 15.2

Nextjs build error - ENOENT: no such file or directory BUILD_ID

How to upload static files to s3 when building nextjs app on app platform?

Proxy protocol on k8s

Deployment on App Platform Successful but Local Host Error

Next JS returning 500 error after adding new product

Page Not Found (404) with Next.js Static Website

[NextJS + App Platform) NextResponse.redirect() doesn't work, status code 200 instead of 3xx

Link to appropriane guide, I ask advice

Report this

Django JWT + Next.js Authentication Tutorial

Table of Contents

Prerequisites

Related questions

How to Deploy a Django + Next.js Application on DigitalOcean App Platform

Best practices for deploying a Next.js SaaS app with PostgreSQL on DigitalOcean App Platform?

How to send the correct IP Address from my NextJS app on App Platform

How to convert my exisitng nextjs 14 project to nextjs 15.2

Nextjs build error - ENOENT: no such file or directory BUILD_ID

How to upload static files to s3 when building nextjs app on app platform?

Proxy protocol on k8s

Deployment on App Platform Successful but Local Host Error

Next JS returning 500 error after adding new product

Page Not Found (404) with Next.js Static Website

[NextJS + App Platform) NextResponse.redirect() doesn't work, status code 200 instead of 3xx

Link to appropriane guide, I ask advice