Django React Auth System

This repo contains a Django & React production level authentication functionality. It has most if not all of the features you would expect from a production level authentication feature. It has a fully functional backend with a REST API and a fully functional React frontend. It has the following fully functional features:

• Account registration with email verification/activation
• Sign in with email and password with JWT authentication
• Sign in with Google
• Sign in with Facebook
• Password reset with email verification

A live demo of the project can be found here.

Major Packages used in the backend

1. Django
2. Django REST Framework
3. Django REST Framework Simple JWT
4. Djoser
5. social-auth-app-django

Getting Started

Prerequisites

• Python 3.8
• Node.js
• PostgreSQL
• Google OAuth2 Credentials
• Facebook OAuth2 Credentials

Installation

1. Clone the repo

   git clone https://github.com/justicenyaga/django_react_auth_system.git && cd django_react_auth_system

2. Install Python packages. It is recommended to use a virtual environment.

   virtualenv venv && source venv/bin/activate # Create a virtual environment and activate it
   cd backend && pip install -r requirements.txt

3. (Optional) Install npm packages. You can skip this step if you don't want to run the frontend separately as the frontend is already built and being served by the backend.

   cd frontend && npm install

4. Create a .env file in backend directory and add the variables as shown in the .env-example file. You will need to add your own values for the variables. You can optionally export the variables as environment variables to your terminal.

5. Create a PostgreSQL database and add the database credentials to the .env file or export them as environment variables to your terminal.

6. Run the migrations

   python manage.py migrate

7. Run the backend server

   python manage.py runserver

   This will run the backend server on http://localhost:8000

8. (Optional) Run the frontend server. You can skip this step if you don't want to run the frontend separately as the frontend is already built and being served by the backend.

   cd frontend && npm start

   This will run the frontend server on http://localhost:3000

API Endpoints

The following endpoints are available in the backend API as per the Djoser documentation:

HTTP Method	Endpoint	Body	Headers	Description
POST	/auth/users/	email, password, re_password	Content-Type: application/json	Register a new user
POST	/auth/users/activation/	uid, token	Content-Type: application/json	Activate a new user
POST	/auth/jwt/create/	email, password	Content-Type: application/json	Obtain a JSON web token pair for a given user
POST	/auth/jwt/refresh/	refresh	Content-Type: application/json	Obtain a new access token for a given user
POST	/auth/jwt/verify/	token	Content-Type: application/json	Verify a given access token
GET	/auth/users/me/		Content-Type: application/json, Authorization: JWT <access_token>	Get the current user's details
POST	/auth/users/reset_password/	email	Content-Type: application/json	Send a password reset email to a given user
POST	/auth/users/reset_password_confirm/	uid, token, new_password, re_new_password	Content-Type: application/json	Reset a user's password
GET	/auth/o/google-oauth2/?redirect_uri=http://domain.com/complete/google-oauth2/		Content-Type: application/json	Redirect to Google OAuth2 login page
GET	/auth/o/facebook/?redirect_uri=http//domain.com/complete/facebook/		Content-Type: application/json	Redirect to Facebook OAuth2 login page
POST	/auth/o/google-oauth2/?code=<code>&state=<state>		Content-Type: application/x-www-form-urlencoded	Obtain a JSON web token when using Google OAuth2
POST	/auth/o/facebook/?code=<code>&state=<state>		Content-Type: application/x-www-form-urlencoded	Obtain a JSON web token when using Facebook OAuth2