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.
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
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.”
Select web application, enter your project URL, and click on the Create button.
It will create a client ID and secret key.
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.
Change the name to
Choose the template as Web API.
Right-click the Models folder from Solution Explorer and go to Add >> New Item >> data.
Click on the “ADO.NET Entity Data Model” option and click “Add.”
Select EF Designer from the database and click the “Next” button .
Add the connection properties and select database name on the next page and click OK.
Check the “Table” checkbox. The internal options will be selected by default. Now, click the “Finish” button.
Now, our data model is successfully created.
Now, right-click on the model folder and add two classes,
Response. Now, paste the following code in these classes.
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.
Click on “Login with Google” button
Enter e-mail and password.
Now if the login is successful, then it redirects to the dashboard page.
In this article, we discussed the process of logging in with Gmail using React and Web API.