How to configure Google SSO in Django Rest Framework with React?
Single Sign On (SSO) gives your users convenient but secure access to all their web applications with a single set of credentials. This guide explains how we can configure Google SSO(Social Login) in the Django Rest Framework backend with React.
Django (Django rest Framework):
Django REST framework (DRF) is a powerful and flexible toolkit for building Web APIs.Its main benefit is that it makes serialization much easier. Django REST framework is based on Django's class-based views, so it's an excellent option if you're familiar with Django. To know more about relative links click here
Single sign-on (SSO) is a time-saving and highly secure user authentication process. SSO lets users access multiple applications with a single account and sign out instantly with one click.
How it Works:
Django REST Framework
Step 1: Create Google client Id and client Secret
Check out this tutorial, to create a client Id and client secret.
Step 2: Set up a React project
Before we create React App we need to install node.js.
if you already installed node.js please ignore this step 2 and go to step 3
Step 3: Create a React-app
After installing Node.js open the terminal or command prompt and create the React app with the following commands
1npx create-react-app frontend
A sample screenshot of React app files is shown below.
Step 4: Configure the React project to establish a connection with Google.
In your project, go to your /src directory and create a file called GoogleAuth.js.
In src/GoogleAuth.js, add the following code.
For this example, we are using the useEffect,userRef. To know more about Next Routingclick here.
Create the sociallib and register directory in the following hierarchy.
library → socaillib
library → register.
After that, please create a google.py file inside the sociallib directory
In library/sociallib/google.py, add the following snippet.
1from google.auth.transport import requests
2from google.oauth2 import id_token
6 """Google class to fetch the user info and return it"""
9 def validate(auth_token):
11 validate method Queries the Google oAUTH2 api to fetch the user info
14 idinfo = id_token.verify_oauth2_token(
15 auth_token, requests.Request())
1617 if 'accounts.google.com' in idinfo['iss']:
18 return idinfo
21 return "The token is either invalid or has expired"
The sample code for the library/sociallib/google.py file can be found in the following Github URL.