Google Identity Services: “Sign in with Google” implementation in React Application
“Sign in with Google” has become an increasingly popular method of authentication for web applications. Implementing this feature can greatly simplify the sign-up process for users, saving them time and reducing friction in the user experience. In this article, we will be discussing how to implement “Sign in with Google” in a React application.
Signing in with Google, also known as “Sign in with Google” or “Google Sign-In,” is a secure authentication method that allows users to log into websites and applications using their Google credentials. This feature eliminates the need for users to create separate usernames and passwords for each individual website or service they use.
Let’s separate the article into two parts.
- Preparations to implement the “Sign in with Google” feature from the Google side
- Coding in React
Preparations to implement the “Sign in with Google” feature from the Google side
Step 1: Go to https://console.cloud.google.com
Step 2: In the top search bar search “Credentials” and Click the Credentials APIs & Services.
Step 3: Click “Select a Project” and Click the “New Project” Button.
Step 4: Rename the Project then click Create Button.
Step 5: In the next window, click Configure Consent Screen Button or Search OAuth consent screen.
Google displays a consent screen to the user that includes a summary of your project and its policies and the requested scopes of access.
Step 6: In User, Type select external user and click Create button. In the next window, in the App name text box give your app’s name and in the User support email select your mail address.
And also in the Developer contact information enter your mail address. Then click the “save and continue” button.
Step 7: In the Scopes section, go to the bottom again click save and continue.
Step 8: Only test users are able to access the app. So enter the Gmail address that you are going to use for testing purposes. Here, Click the “Add Users” button and type the Gmail address that you are going to use for testing. Then click Add button. If you are trying to log in using other Gmail accounts without adding them here, It will not work.
Step 9: Click “Save and Continue” and at the bottom click Back to Dashboard button
Step 10: Click Credentials from the sidebar and click “Create Credentials” and select “OAuth client ID”
Step 11: In the Application Type field, Select Web Application then Under the Authorized JavaScript origins click Add URI and add http://localhost and http://localhost:3000
Step 12: In the Authorized redirect URIs section also you need to add both of the URIs again then click Create button
Step 13
Click Download JSON and save the file safely.
Now we finished the Basic configurations from the Google side. Now we can move to build the react application.
Coding in React
Create a react application using
npx create-react-app googleloginWe need to decode the JWT response. So let’s install jwt-decode
npm i jwt-decodeIn the Public folder open index.html and add
<script src="https://accounts.google.com/gsi/client" async defer> </script>into the head section.
Now, Replace the App.js with
Explanation
When the user clicks the “Sign in with Google” button and it got successful, we will get a JWT token with essential information as a response from Google’s side. We can’t access the JWT token without decoding. so, we need to decode that(line 6). Then we will access some essential information about login.
The Decoded Object will look like this,
So we set this object to user state(line 7).
handleCallbackResponse function(line 5) will handle the user login event. If login is successful, it will hide the Sign in with Google Button(line 8). So, the User will not see the Login button again
useEffect(line 14) will render the Sign in with the Google button inside the signInDiv tag(line 29) available inside the return.
google.accounts.id.prompt(); is optional(line 24). It will prompt
this kind of model makes Sign in process easier.
The line /* global google */ (line 15) is a JavaScript comment used to declare the global object “google” in the current scope. This is done to prevent linting errors in the code.
When integrating Google Sign-In into a React app, you need to load the Google API library, and the line /* global google */ is used to inform the linter that the “google” object will be defined in the worldwide scope after the library is loaded. This allows you to use the “google” object without encountering an “undefined variable” error in your code.
In return(), we used conditional rendering. If the length of the user objects keys(line 31) is not equal to zero (that means if login is successful, the user state will be initiated with some value as shown in image ‘Decoded Object’. So, definitely length of the keys is greater than zero, so we can say a user is logged in) It will show the user image that is registered in the Google account, and name of the user, and the sign-out button.
When the user clicks the sign-out button, the handleSignOut function will be called. Inside the handleSignOut function user state will be set with an empty object again. So React app will take that situation as the user is not signed in and hide the sign-out button and show the Sign in with the Google button again.
So, The final output is,
Before Sign in
After Sign in
Find the full React code here: https://github.com/sragu2000/signinWithGoogle
- Don’t forget to replace your client ID in App.js in line 17. You will find your client id in a downloaded JSON file.
Overall, “Sign in with Google” is a valuable addition to any React application. I hope this article has provided you with the necessary information to implement it. Thank You… Will see in the next Article…. 👋
