How to configure Google SSO in Django Rest Framework with Next.js?
Single Sign On (SSO) gives your users convenient but secure access to all their web applications with a single set of credentials. We will learn how to configure Google SSO(Social Login) in the Django Rest Framework backend with a Next.js frontend (Next-Auth app).
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
Next.js is a React framework. Next.js is constitutionally an excellent tool to achieve great SEO performance. building super fast static websites that behave dynamically. Next.js when building UI and UX there is flexibility. and the important great community support. To know more about relative links click here
NextAuth. js is a completely secured authentication solution for implementing authentication in Next.js applications. It is a flexible authentication library designed to sync with any OAuth service, with full support for passwordless sign-in.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 Next.js project
Before we create Next 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 new Next.js app for the Single sign-on process “frontend”
After installing Node.js open the terminal or command prompt and create the next.js app with the following commands.
1npx create-next-app frontend
Step 4: Configure the Next.js project to establish a connection with Google
After creating the Nextjs app then install next-auth commands.
1npm i next-auth
In your project, go to your /pages/api/auth directory and create a file called [...nextauth.js]. This means that all of the routes starting with /api/auth will be handled by the [...nextauth].js file.
In /pages/api/[...nextauth].js, add the following code.
With Next-auth added to our application, we can now build our sign-in page. First, we will set up our page to display the Sign in with google button if the user is not authenticated, else it returns our application. To do this, we modify the index.js file as shown below:
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"
Sample code for the library/sociallib/google.py file can be found in the following Github URL.