SAuth

SAuth - a little web-application which demonstrates implementation of social authentication (Google OAuth as an example) with Django Rest Framework and React.

Installation

Create project folder, setup and activate virtual environment:

mkdir project
cd project
python3.8.5 -m venv env
. env/bin/activate

Clone this repository and install requirements:

git clone https://github.com/vladkomudrich/react-django-socialAuth
cd react-django-socialAuth
pip install -r requirements.txt

Install dependencies for React-Application:

cd sauth-web
yarn install

Setting Up Backend

Generate and provide your own Django-SECRET_KEY:

SECRET_KEY = 'your own SECRET_KEY'

Get CLIENT_ID and SECRET_KEY from https://console.developers.google.com in sauth/settings.py: (learn more)

SOCIAL_AUTH_GOOGLE_OAUTH2_KEY = 'your client_id'
SOCIAL_AUTH_GOOGLE_OAUTH2_SECRET = 'your secret_key'

Make migrations and create superuser:

python manage.py makemigrations users profiles
python manage.py migrate
python manage.py createsuperuser

Run server, login Django Admin and set up DJANGO OAUTH TOOLKIT/Applications

• Add application
• User: 1
• Client-type: Confidential
• Authorization grant type: Resource owner password-based

Learn more about social authentication with Django Rest Framework drf-social-oauth2

Setting Up Frontend

In React we are using special component react-google-login in which we must put Client ID from Google OAuth. In sauth-web/src/components/Login.js provide clientID in GoogleLogin component. When you login it calls googleLogin function in which we must put client_id and secret_key from Django Admin -> DJANGO OAUTH TOOLKIT -> Applications -> Your application. This function converts token from google and set access_token and refresh_token to localStorage.

Launch

python manage.py runserver
yarn start