Next.js and Django JWT Authentication | Part 1 - Backend API

Опубликовано: 27 Март 2026
на канале: Bryan Berk

45,482

1.1k

🔥 Subscribe to my YouTube + Turn on Notification Bells!
👉 / @bryanberk

Final project code:
Next.js Frontend: https://github.com/linkedweb/full-auth
Django Backend: https://github.com/linkedweb/full-aut...

Hey, Bryan here. I share videos that help web developers up their development skills!

Today I'll be sharing the first of two parts of a tutorial series showing you how to implement json web token authentication using Next.js 13 with the app router, TypeScript, Redux Toolkit and RTK Query, Tailwind CSS and Headless UI, Django with the Django REST Framework, and with a Postgres database in production. This app will also include oauth2 login with google and facebook oauth2, and we'll be doing a digitalocean deployment of this application.

Here is an overview of the things you will learn in this tutorial project:
1. How to set up jwt authentication using Next.js 13 with the app router for the frontend, and Django with the Django REST Framework for the backend.
2. How to store jwt credentials in httponly cookies and how to handle cookies getting sent cross-origin.
3. How to set up Google and Facebook OAuth2 login.
4. How to set up account activation and password reset.
5. How to use Redux Toolkit along with RTK Query to implement state management, client-side data fetching and caching, and automatic re-authorization.
6. How to use TypeScript, Tailwind CSS, and Headless UI with Next.js 13.
7. How to deploy this stack on digitalocean using digitalocean app platform, digitalocean spaces, digitalocean domain management, and AWS Simple Email Service for managing sending of emails.
8. And more!

Timestamps
0:00 - Intro
6:54 - Overview
13:07 - Initial Setup
20:01 - Initial Settings
27:39 - Djoser Setup
39:23 - Custom User Model
49:30 - AWS SES Setup
1:06:07 - Djoser Endpoint Testing
1:18:38 - Modifying Email Template Text
1:22:08 - Continuing Endpoint Testing
1:26:28 - CORS Headers
1:30:04 - Customizing Authorization
1:34:28 - Customizing Authentication
1:53:18 - Testing Customized Endpoints
1:56:55 - OAuth2 Setup
2:07:18 - Google OAuth2 Setup
2:13:06 - Customizing OAuth2
2:16:50 - Testing Google OAuth2
2:20:45 - Facebook OAuth2 Setup
2:26:22 - Testing Facebook OAuth2
2:29:45 - Production Database Settings
2:35:39 - Production Static File Settings
2:42:35 - GitHub Repo Setup
2:47:14 - Digital Ocean Deployment
3:09:04 - Testing Production App
3:15:02 - Testing Production OAuth2
3:23:00 - Customizing Media File Location
3:26:17 - Outro

To stay up to date with the best web development content, make sure you subscribe to My YouTube channel Today!

Documentation links used in the video:

Django: https://www.djangoproject.com/
Django REST Framework: https://www.django-rest-framework.org/
Djoser: https://djoser.readthedocs.io/en/late...
Simple JWT: https://django-rest-framework-simplej...
CORS Headers: https://pypi.org/project/django-cors-...
Django SES: https://github.com/django-ses/django-ses
Django Storages: https://django-storages.readthedocs.i...
Digitalocean Deployment: https://docs.digitalocean.com/tutoria...
Google Cloud: https://console.cloud.google.com/
Developers Facebook: https://developers.facebook.com/
AWS: https://aws.amazon.com/