Introduction
As an application developer, implementing apps with authentication is a tedious process. We want to handle user information in the backend with different authentication such as OAuth, multifactor authenticator, etc.. while we could have expected easy ways for it where the google OAuth 2.0 comes into plays. It will help us to make this process very simple and secure.
In this article, we are going to explore on the google cloud console to integrate google-sign into our react application.
Prerequisites
- NPM package react-google-login
- Google account
- Google Client ID
Steps to be followed:
- Login and create a project on the google cloud console.
- Create an OAuth consent screen and configure it.
- Create credentials for web client Id.
- Create react Application and configure NPM package.
- Add Google Login component along with client Id.
Step 1: Login and create a project on the google cloud console
Go to the google cloud console and log in with your Gmail. Create a new project by clicking on the project list button, which is placed on the top left side of the window.
In the project input field, leave a project name whatever your wish. For testing purposes, I entered google-login-01. Choose an organization on the location browse field. If not, let it default.
Step 2: Create an OAuth consent screen and configure it
Once you created a project you will be redirected to the cloud console Dashboard where you can see the “API & Services” in the left sidebar.
Click on the APIs & Services” > choose any on the right popup then you will be taken to the new view.
Click on the OAuth consent screen and choose the User type “External” check box. >> Create.
Under the App information, enter the App name, user support email, and developer contact information. Now the OAuth consent screen configuration has been completed so click on SAVE AND CONTINUE.
Configure the Scope, which helps get what kind of information you want to fetch from the user login. If we want specific, choose whatever you want by clicking on ADD AND REMOVE SCOPES. Otherwise let it default. By default, it will give the user Email, Given-name, Family-name, Name, and profile URL.
Followed by the “ADD AND REMOVE SCOPE” let it be default or testing if required, you can fill it based on your requirements.
Click SAVE AND CONTINUE
Let’s move on test users. We can add several test users who can only able to access this app. For testing purposes, let me leave it as default.
End of the OAuth consent screen, we can check all configurations in the summary screen. Make sure that the user type is “external” and click on BACK TO DASHBOARD.
Step 3: Create credentials for the web client Id
Let’s explore the important part of creating an OAuth client ID. Click on the Credentials on the left pane and choose OAuth client ID to access the user’s data.
A client ID helps us to identify a single application to Google OAuth servers. If you want to run it on multiple platforms? Then, Need to create one for each platform. Our demo, Its react app. So, click on Application as a Web application.
Let's move further to client ID configurations. Enter the app name in the Name field which is a mandatory field.
Authorized JavaScript origins
As you know, we are going to test in localhost therefore add the URI1 is http://localhost and followed by the URI2 combination of port number. If you want to deploy the app somewhere please make it URI2 is your actual domain.
Authorized redirect URIs
Here is the redirect URI configuration, add your local host in URI1 and a combination of the port number in URI2.
Note: For testing purposes, I have given that both JavaScript and redirect URIs are the same. You can modify based on requirements.
Once done with the URIs config, click on CREATE to move further.
Finally, we created an OAuth client. Note: Your client ID, which we are going to add in the react app next.
Step 4: Create react Application and configure the NPM package
Create a fresh new react app by “npx create-react-app myapp –template typescript” ( this commend for TS)
Install NPM package “npm install @react-oauth/google”
Let's play on the coding part.
Create a new file name like google.tsx and add the below code.
import React from 'react';
import { GoogleLogin } from '@react-oauth/google';
const google = () => {
return (
<GoogleLogin
onSuccess={credentialResponse => {
console.log(credentialResponse);
}}
onError={() => {
console.log('Login Failed');
}}
/>
)
}
export default google;
Import GoogleLogin from @react-oauth/google and add it inside render. The on success will give back a response as jwt token once the user has logged in and onError will capture the error.
Step 5: Add the Google Login component along with the client Id
Next, in the app, we are not going to change much just add the below code in the src/App.tsx
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { GoogleOAuthProvider } from '@react-oauth/google';
import Google from './google';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<GoogleOAuthProvider clientId="739106075686-o3iq57fl19qmf50planckptdekklb1du.apps.googleusercontent.com">
<Google />
</GoogleOAuthProvider>
</header>
</div>
);
}
export default App;
Import the Google0AuthProvider tag from ‘@react-oauth/google’ and the Google tag from googel.tsx file which we have created before make sure it has exported default.
Add Google0AuthProvider inside the return and add measurement ID as clientId which got from google analytics/property/ stream. Add the google tag as children inside the provider tag.
Open the terminal on the respective project path and run npm start. Here we have made a simple google button > click on it >> leave your Gmail and password so we can get a response in the console.
Check the below video for reference.
Conclusion
Implemented google sign-in by react-OAuth NPM library, and I hope the quick walkthrough you understood very well. Stay tuned for upcoming examples.
Join the conversation! Your thoughts help the community grow.