Login with Google using React
Today we’ll show you how to implement the login with google using React. In this article, we will add the Google Sign-In and Sign-Out button to manage the authentication process with google account.
Here, we have to use the OAuth Client Id with npm package. Will also show you the process to generate the OAuth Client Id.
Steps to Implement Login with Google using React
- Create Google App and generate OAuth Client Id
- Create react application
- Install npm dependency
- Authenticate component with Google using Auth0
- Output
1. Create Google App and generate OAuth Client Id
First of all, we have to generate an OAuth Client Id for use with requests from a browser.
Follow the steps to get Client Id.
Step 1: Go to the Google API Console and click on Credentials.
Step 2: Now click on the Create Credentials and select OAuth client ID.
Step 3: Select the Web application from the dropdown of the Application type.
Step 4: Now enter the name of the OAuth client and add the project URL. At last click on the Create button to create an OAuth client.
Step 5: After successful creation, you will get the Client ID and Client Secret for the application but we will only use the Client ID in the React App.
2. Create react application
Let’s use the create-react-app package to create a react app. Run the following command to set up the react project.
1 | npx create-react-app login-with-google-react |
3. Install npm dependency
We will use the react-google-login to implement the Google Sign-In and Sign-Out button. Run the following command to install the package in the react app.
1 | npm i react-google-login |
4. Authenticate component with Google using Auth0
In this example, we’ll use the state variable to handle the authentication. In the live project, you have to use the access token for authentication.
Let’s import the GoogleLogin and GoogleLogout button from the react-google-login package. Check the following code and pass the Google App OAuth Client ID through variable.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | import React, { useState } from 'react'; import { GoogleLogin, GoogleLogout } from 'react-google-login'; const clientId = "<Google_OAuth_Client_ID>"; function App() { const [loading, setLoading] = useState('Loading...'); const [user, setUser] = useState(null); // ... // write a method to handle events // ... return ( <div> <h3>Login with Google using React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> {user ? <div> <div className="name">Welcome {user.name}!</div> <GoogleLogout clientId={clientId} onLogoutSuccess={handleLogoutSuccess} onFailure={handleLogoutFailure} /> <pre>{JSON.stringify(user, null, 2)}</pre> </div> : <GoogleLogin clientId={clientId} buttonText={loading} onSuccess={handleLoginSuccess} onFailure={handleLoginFailure} onRequest={handleRequest} onAutoLoadFinished={handleAutoLoadFinished} isSignedIn={true} />} </div> ); } export default App; |
In the above code, we have also printed the logged in user information in the pre tag. To validate the user on page load, we have set the isSignedIn props to the true. Check out the more props of the package.
Let’s write a method to handle several events. Check the below code.
App.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | import React, { useState } from 'react'; import { GoogleLogin, GoogleLogout } from 'react-google-login'; const clientId = "<Google_OAuth_Client_ID>"; function App() { const [loading, setLoading] = useState('Loading...'); const [user, setUser] = useState(null); const handleLoginSuccess = (response) => { console.log("Login Success ", response); setUser(response.profileObj); setLoading(); } const handleLoginFailure = error => { console.log("Login Failure ", error); setLoading(); } const handleLogoutSuccess = (response) => { console.log("Logout Success ", response); setUser(null); } const handleLogoutFailure = error => { console.log("Logout Failure ", error); } const handleRequest = () => { setLoading("Loading..."); } const handleAutoLoadFinished = () => { setLoading(); } return ( <div> <h3>Login with Google using React - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a></h3> {user ? <div> <div className="name">Welcome {user.name}!</div> <GoogleLogout clientId={clientId} onLogoutSuccess={handleLogoutSuccess} onFailure={handleLogoutFailure} /> <pre>{JSON.stringify(user, null, 2)}</pre> </div> : <GoogleLogin clientId={clientId} buttonText={loading} onSuccess={handleLoginSuccess} onFailure={handleLoginFailure} onRequest={handleRequest} onAutoLoadFinished={handleAutoLoadFinished} isSignedIn={true} />} </div> ); } export default App; |
5. Output
Run the application and check the output in the browser.
That’s it for today.
Thank you for reading. Happy Coding..!!
