JWT Authentication System in Django and React.js Full Stack Application | Complete Project Tutorial

We will create Restful APIs to handle user registration, login, logout, user information retrieval, and token refreshing using Django Rest Framework. After that we will consume our API endpoints by making HTTP requests using Axios in our frontend application.

Following along this video should help you:
Learn more about authentication and authorization and gain a deeper understanding of how authentication and authorization mechanisms work, especially with JWT tokens and the Django Rest Framework.

Understand RESTful API Development, and how to develop RESTful APIs using Django Rest Framework, including creating endpoints for user registration, login, logout, and retrieving user information.

Learn about Frontend-Backend Integration: You'll learn how to integrate a frontend application (built with React) with a backend API (built with Django), including making HTTP requests, handling responses, and managing user sessions.

🕗 Chapters:

00:00 - Objectives

Project Setup:
00:46 - Create Project Directory + frontend + backend directories

Backend Setup:
01:26 - Create venv environment in backend directory
02:07 - Install Django
02:32 - Start Django project
03:11 - Create Accounts Application

Models:
03:40 - Define Custom User Model

Forms:
06:39 - Create User Creation Form
07:48 - Create User Change form for updating user info in Django admin

Admin:
08:34 - Create Super User
09:40 - Register User Model and Forms in Admin

Auth APIs:
12:07 Install Django Rest Framework
12:48 - Install Django Rest Framework Simple JWT and set it up as Rest Framework’s Default Authentication Class
13:35 - Configure JWT Settings

Serializers:
15:16 - Serializers
15:55 - Define Custom User Serializer
16:29 - Define User Registration Serializer
21:52 - Define User Login Serializer

Views:
24:07 - Define User Registration View (Inherit from GenericAPIView)
28:57 - Define User Login View (Inherit from GenericAPIView)
31:30 - Define User Logout View

URLs:
33:53 - Configure URL patterns

Cross-Origin Resource Sharing (CORS) :
37:88 - Install Django CORS Headers and set allowed origins

Frontend:
39:36 - Create React Application with Vite
40:54 - Create pages/routes [ Layout , Home , Register , Login ]

Routing:
42:09 - Install React Router DOM and Create Routes

Registration/Login on the Frontend:

55:44 - Install Axios
57:13 - Post Request to Register Endpoint
01:09:29 - Make Post Request to Login Endpoint
01:12:08 - Dynamically render content based on whether user is Authenticated/Logged in.
01:01:14 - Check if user is Authenticated

01:15:32 - Create an Endpoint to Get information about user
01:18:56 - Make Get Request

01:21:00 - Logout Users by making a post request to logout endpoint ( Blacklist refresh Token )

🔗Important Resources and Links:

Django Docs:

Django Rest Framework Docs:

Django Rest Framework Simple JWT Docs:

Axios Docs:

ES7+ React/Redux/React-Native snippets

Github Repo:

🧡 If you have found this content useful consider becoming my Patreon: 💜

#django
#reactjs
#jwt
#fullstack
#authentication
#codingtutorial
#guide
#tutorial
#api

[MarcoBustos-oebv]

I would like you publish more videos about django, you helped me with another videos...thanks very much. Greetings from Arica, CL ❤

[kristijanstojanovski]

These videos are quite nice and serve as a great guidance! However it would be amazing if you could also give short explanations on what's happening in the background and shed light on some of the in-built DRF functionalities to make everything a bit clearer! Keep up the good work! :)

[bymrfireball]

This video gave me another life, thank you very much :')

[OlajireStephen]

Thank you for the simplicity of this video. Pls how do we handle the access token when it expires to avoid login out the user

[coffandprograming]

New subscriber, you have very good content

[davidmukoro]

Great. Can you modify it such that we use cookie which is more secure compare to localstorage?

[gowriprasadventuri]

home.jsx i was getting forbidden error for user info api

[Anelka]

Great video, can you add or show us in a video how to store the tokens in state other than local storage.😊

[DanielMartinez-welr]

Thank you mush Piko your video help me to understand the process of backend in Django and frontend in React, but I have question regarding the the forms, login and register is necessary to use CSFT to avoid vulnerabilities or only using JWS. I other words we need to protect the forms. Thank you again for your explanation : ) <3

[navaneeth]

should venv folder stay inside django project or along with it outside

[alexdin]

thats amazing please can you add a video on how we can deploy this on server?

[navaneeth]

i have not started the project but does doing this give us session also like i want the app to have user logged in . i am a beginner

[navaneeth]

is this how profuction grade live projects do auth too, do they set items like this in localstorage

[TechnicalSuperNova]

Can you make a video on Stripe payment gateway on Django REST Framework and React with Vite.

[shubhamranjan]

can I get ur api endpoints so I can use it mam?