Introduction

In this article, we will learn the step-by-step process of allowing users to log into an application with Gmail using ReactJS. Login with Gmail makes it safe and easy for users to use applications. When a user clicks on the “Login with Gmail” button, the user is navigated to Google to give the app permission. In response, the user receives a Token key and other personal details.

Prerequisites:

Topics Covered in This Article:

  • Create a ReactJS project
  • Install react-google-login  React plugin
  • Install Axios and Bootstrap
  • Add React Router
  • Install Bootstrap and React strap
  • Create a Google App and Get client Id
  • Create a database and table
  • Create a Web API Project

You may also like: Login With Facebook and Google Using Angular 8

Create ReactJS Project

Create a ReactJS  project by using the following command:

Open the newly-created project in Visual Studio Code and install Reactstrap and Bootstrap in this project by using the following commands respectively. Learn more about Reactstrap.

Now, open the index.js file and add import Bootstrap.

Now install the Axios library by using the following command. Learn more about Axios.

Now install the react-google-login React plugin using the following command:

Create a Google App and select “Get Client ID.” The first thing we need is to create a Google Project to get user credentials. Go to the Google API Console and click on Credentials. Click on Create Credentials and choose “OAuth client ID.”

Google API Console Credentials

Google API Console Credentials

Select web application, enter your project URL, and click on the Create button.

Creating OAuth client ID

Creating OAuth client ID

It will create a client ID and secret key.

OAuth Client

OAuth Client

Now, in Visual Studio Code, go to the src folder and create a new folder. Inside this folder add two new components: Logintbygoogle.js, and Dashboard.js.

Add Routing in ReactJS

Install react-router-dom package by using the following command:

Open app.js file and imports of Router and Route (react-router-dom) and two components:

Add the following code in app.js file:

Now, open the Logintbygoogle.js file and add the following code.

Now, open the Dashboard.js file and add the following code.

Create a Table in The Database 

Open SQL Server Management Studio, create a database named “Demotest,” and in this database, create a table. Give that table a name like “sociallogin.”

Create a Web API Project

Now open Visual Studio and create a new project.

Creating new VSC project

Creating new VSC project

Change the name to LoginApplication.

LoginApplication

LoginApplication

Choose the template as Web API.

Choosing the Web API

Choosing the Web API

Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.

Add Data

Add Data

Click on the “ADO.NET Entity Data Model” option and click “Add.”

Entity Data Model

Entity Data Model

Select EF Designer from the database and click the “Next” button .

EF Designer

EF Designer

Add the connection properties and select database name on the next page and click OK.

Adding connection properties

Adding connection properties

Check the “Table” checkbox. The internal options will be selected by default. Now, click the “Finish” button. 

Table checkbox

Table checkbox

Now, our data model is successfully created. 

Now, right-click on the model folder and add two classes,  Userdetails and  Response. Now, paste the following code in these classes. 

Userdetails Class

Response Class

Right-click on the Controllers folder and add a new controller. Name it “Login controller” and add the following namespace.

Create a method in this controller to save data. Add the following code in this controller.

Now, let’s enable Cors. Go to Tools, open NuGet Package Manager, search for Cors and install the Microsoft.Asp.Net.WebApi.Cors package. Open Webapiconfig.cs, and add the following lines.

Now to go Visual Studio code and run the project.
Running the project

Running the project

Click on “Login with Google” button

Login with Google

Login with Google

Enter e-mail and password.  

Email and password

Email and password

Now if the login is successful, then it redirects to the dashboard page.

Dashboard page

Dashboard page

In this article, we discussed the process of logging in with Gmail using React and Web API.

Further Reading

Getting Started With Google Sign-In and Spring Boot.

How to Learn React.js, Part 1: The React Road Map for Modern Web Developer.



Source link

Write A Comment