Steps 1: Create react app
npx create-react-app
Step 2: Install react-google-login package
npm i react-google-login
Step-3: put Google Login button in React App
import GoogleLogin from 'react-google-login';
const responseSuccessGoogle = (response) => {
console.log(response);
}
const responseFailureGoogle = (response) => {
console.log(response);
}
ReactDOM.render(
<GoogleLogin
clientId=<put_client_Id_here>
buttonText="Login"
onSuccess={responseSuccessGoogle}
onFailure={responseFailureGoogle}
cookiePolicy={'single_host_origin'}
/>,
document.getElementById('googleButton')
);
Step 5: Get clientId for your React app.
- Go to https://console.cloud.google.com
- Create new project.
- Go to API & Services
=> Credentials
=> select your project
- Go to create credentials
=> oAuth client ID
=> configure consent screen - create
=> give app name and save
=> select website and give URL of our React app and create
=> Now Copy oAuth client Id and paste in React app
=> send tokenId received from response of Google Login to backed
const responseSuccessGoogle = (response) => {
console.log(response);
axios({
method: "POST",
url: "<your_backend_URL>",
data: { tokenId: response.tokenId },
}).then((response) => {
console.log(response);
});
};
=> For content security policy issue refer to:
https://content-security-policy.com/
- Backend side
=> create an api to receive the sent token
=> install google auth library
=> npm i google-auth-library
=> import {OAuth2Client} = require('google-auth-library');
=> verify if token sent from client side and the token we are using in backend are same or not using OAuthClient
