Django Rest Framework + React — Authentication workflow 2023 (Part 1)

In this blog, we will cover the complete authentication workflow. We will go from Project setup, git setup, backend configuration, JWT (access + refresh) configuration, creating APIs, private end point and much more.

Contents

– Requirements
– Project Setup (Backend)
– Lets Start
– Creating a private endpoint
– Code Access

Requirements

• Make sure you have python installed

To check whether it is installed or not, just type, python -V you will get python version back as an output.

• Any IDE, VS Code or pycharm are great
• Git version control (optional but recommended)

Project Setup (Backend)

1. Setting up Main Folder (folder which contents frontend and backend folders).
   Create a new folder, the name of that folder can be your project name. Now, create 2 folders inside it, one will be frontend and other backend. Initialize git repo in the main folder (Folder having frontend and backend folders), ⁣git init
2. Setting up backend Django server.
   Now cdinto backend. cd backend
3. Create and activate a virtual environment
   Create, ⁣python -m venv venv
   Activate, venv\Scripts\activate or venv\bin\activate or source venv/bin/activate (on Mac)
4. Make sure you have activated your environment, Install Django & create project
   Install Django, python -m pip install Django==4.2
   Scaffold Django project in current directory, ⁣django-admin startproject backend .
   Note: backend is basically the name of the project (it can be any, but personally my suggestion is to keep it backend). Also make sure to add a . in previous command so that Django project will be scaffolded in current directory.
5. Install Some additional packages & create requirements.txt file
   Install Django Rest Framework and JWT token, pip install djangorestframework==3.14.0 django-cors-headers==3.14.0 djangorestframework-simplejwt==5.2.2 PyJWT==2.6.0
   Create requirements.txt, ⁣pip freeze > requirements.txt or if it doesn’t work, try, pip freeze -> requirements.txt
6. Create an app.
   Create an app called api(name can be any), python manage.py startapp api

Your requirement.txt should look like this, don’t worry if versions are not the same.

asgiref==3.6.0
autopep8==2.0.2
Django==4.2
django-cors-headers==3.14.0
djangorestframework==3.14.0
djangorestframework-simplejwt==5.2.2
pycodestyle==2.10.0
PyJWT==2.6.0
pytz==2023.3
sqlparse==0.4.3
toml==0.10.2
tomli==2.0.1
tzdata==2023.3

Create a .gitignore file in backend root and add following link content
https://gist.github.com/sushil-kamble/f9ad3b39b024ae04ceae7ffc3931a9fe

Let's Start

• Create a file in api folder called serializer.py

api/serializer.py

Serializers in Django REST Framework are responsible for converting objects into data types understandable by javascript and front-end frameworks.

• What does the above code do?
  MyTokenObtainPairSerializer is used to create a token (more specifically access & refresh tokens) if valid username & password are provided. Decoding the access token, we will get username & email. RegisterSerializer is basically used to register a user in the database.
• Now, Create views and URLs

Directory Structure

• Updating settings.py
  Note: Do not copy and paste directly, update or add this configuration in your settings.py

• Migrate and run the application — python manage.py migrate & then python manage.py runserver. Application will run on port 8000

Create a superuser, In another terminal, go to the backend root and activate venv (venv\Scripts\activate) & python manage.py createsuperuser Enter necessary data.
Note: If your virtual env is not activating, please google search on how to activate it for your system.

• To check Application, Visit http://localhost:8000/api/

• Above are the available endpoints that we have created. We can test them by going to the respective link.
• Visit http://localhost:8000/api/token/ & enter superuser login and password in that form. You will get back access & refresh token.

• Copy that access token. Go to https://jwt.io/, and you will get back user_id, username & email for the user

• You can also register a user, go to http://localhost:8000/api/register/ & enter necessary details & a new user can be created. To check user is created or not, visit http://localhost:8000/admin/auth/user/ (type in superusers credentials)

On every login, a new access token will be generated which have user id, username and email encoded. New access token can also be generated by refresh-token. If same refresh token is used twice it will get blacklisted.

We have also created a private route, which will require the user to be authenticated named /test

We can test that route using postman.
Note: You would need to download Postman REST client to test it locally

If you also want to try testing your API on Postman, then click on Authorization, select type Bearer token. Now paste the latest access token of the user.

Congratulation, you have successfully implemented backend part.
For Frontend part, click on the link below

Django Rest Framework + React - Authentication workflow 2022 (Part 2)

Code Access

Read the README.md of the repository for the steps to run the project.

But it is recommended first to read the part 2 of the blog

GitHub - sushil-kamble/django-react-auth: Authentication template for your future full stack…

Thank you & Happy Hacking…