Google Login with Django & React — Part 1

Hey, guys let’s check out how we can use Google Oauth 2.0 with React & Django Rest Framework.

TL;DR source code: https://github.com/aashutoshPanda/google-oauth-django-react

This tutorial is a part of a three-part series

• PART 1: Getting Client id & Client secret from Google Developer Console
• PART 2: Making Django Rest Framework backend
• PART 3:Making our React App

PART 1: Getting Client id & Client secret from Google Developer Console

Step 1: Go to https://console.cloud.google.com/ and make a new Project

Click on “CREATE PROJECT” to make a new project

Click on “CREATE” to make your project

Step 2: Configuring Oauth Screen

Click on “CREATE CREDENTIALS” then “Oauth Client ID”.On the new Screen click on “Configure Consent Screen”.

Click on “CONFIGURE CONSENT SCREEN”

Click “CREATE”

In the next screen fill the App Name (ex. Oauth Demo), support email, and developer contact information, and leave all other fields empty. Leave all the other fields unchanged in the following screens.

Step 3: Making the client id & client Secret

Now from the dashboard hit “CREATE CREDENTIALS” > “OAuth client ID” then fill these fields

• Application Type: Web Application
• Name: Oauth Demo
• URIs & Authorised redirect URIs: http://localhost:3000

Note: There are no trailing ‘/’ after localhost:3000

Step 4: Copy your client id & client secret somewhere

Copy your client ID & client secret

With this, we are done with the First Part of the series.

Other Parts of this tutorial series

• PART 2: Making Django Rest Framework backend
• PART 3:Making our React App

I hope you have gained something from this article ✌️.