SignIn with Google according to new update
Tags: javascript, react, googlecloud
Published: 2022-07-16 10:49:56

##Since SignIn forms are always first steps that every web developers take let's add Google services to them.
Things we need to do get a Google enabled signin form is just to follows the given steps.
* First goto the [Google Cloud Platform](https://console.cloud.google.com) and create new project or use already created one.
* Move to credentials in APIs & Services which will look something like given below.
![A1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bvtxi4dhohsfk3jdvw31.jpg)
* Inside configure consent screen select `External`  as option and  Click `Create`. This will lead us to form which asks for information regarding what you are creating.
![A2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5bx9codeq3a9r7xosnid.jpg)
* Fill the form with proper name and Email make sure you use your GCP mail in the form and click on `Save and Continue`; 
you can skip scopes part arrive directly at `Test Users` part of the form here you have to `add Email` which will we used to check services on localhost.
![A3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxzvduyw9y611c70u9cm.jpg)
* Now go back to credentials and `CREATE CREDENTIALS` for ` OAuth client ID` and select application type to whatever you want here we will we using `Web application`.
Then fill the form, make sure you use `port number` which you are using and click on `CREATE` and save the `client secret and id` .
![A4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7zy2d3h3w8wzco568r4n.jpg)
* Our GCP preparation are complete lets start or create our application . Lets start with creating react app.

```
npx create-react-app authloginapp
```
* Most important part of application is adding `Google Script`
 inside head section of `public/index.html`.

```
<script src="https://accounts.google.com/gsi/client" async defer></script>
```
`Make sure to add async and defer as they will manage delay.`
* Now lets change the things to display on screen from `src/App.js`.
![v1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4d0fhf4fs92cxupbqzte.jpg)
* We will use react hooks such as `useEffect` and `useSate` for creating simple login-form. Add following code in App function .

> useEffect will Provide us with Jwt-token.
* Add the following hook to enable google in app
```
 useEffect(() => {
    /* global google */
    google.accounts.id.initialize({
      client_id:
        'Your-Google-client-Id',
      callback: handleCallbackResponse,
    });
   google.accounts.id.renderButton(document.getElementById('signInDiv'), {
      theme: 'outline',
      size: 'large',
    });
  }, []);
```
`Here google.accounts.id is because the script provided.`
`Google also Provide various different buttons and function.`
* Now let's define the function `handleCallbackResponse` inside App function.
```
function handleCallbackResponse(response) {
    console.log('Encoded JWT ID token: ' + response.credential);
  } 
```
* Let's check our progress by running
```
npm start
```
`On inspecting in console we will get our `jwt-token` which is provided by google as verification and also holds user details.`
* Now it's our job to convert and use the token for that we will we required decoder such as jwt-decode.
```
npm install jwt-decode
```
Later Update handleCallbackResponse with 
```
var userObject = jwt_decode(response.credential);
console.log(userObject);
```
`We can now see detailed inscription of user.`
* Now displaying details we first have to store info in something let's use another use hook `useState` for storing user. Add useState for use in app function.
```
const [user, setUser] = useState({});
```
Later update handleCallbackResponse with 
```
setUser(userObject);
```
* Here, we have information of user now we can display on screen by applying following code.
```
<div id="signInDiv"></div>
{user && (
  <div>
    <img src={user.picture}></img>
    <h3>{user.name}</h3>
    <h4>{user.email}</h4>
  </div>
)}
```
`Now we can see name, image and email on screen after login.`
* Lastly give finishing touch by adding one line to hide signin option after signin in handleCallbackResponse function.
```
document.getElementById('signInDiv').hidden = false;
```
* Our Complete `src/App.js` looks something like.
```
import React, { useEffect, useState } from 'react';
import jwt_decode from 'jwt-decode';
import './App.css';

function App() {
  const [user, setUser] = useState({});

  function handleCallbackResponse(response) {
    console.log('Encoded JWT ID token: ' + response.credential);
    var userObject = jwt_decode(response.credential);
    console.log(userObject);
    setUser(userObject);
    document.getElementById('signInDiv').hidden = true;
  }

  function handleSignOut(event) {
    setUser({});
    document.getElementById('signInDiv').hidden = false;
  }

  useEffect(() => {
    /* global google */
    google.accounts.id.initialize({
      client_id:
        'Your-Google-Client-Id',
      callback: handleCallbackResponse,
    });  google.accounts.id.renderButton(document.getElementById('signInDiv'), {
      theme: 'outline',
      size: 'large',
    });
  }, []);
 return (
    <div className="App">
      <div id="signInDiv"></div>
      {user && (
        <div>
          <img src={user.picture}></img>
          <h3>{user.name}</h3>
        </div>
      )}
    </div>
  );
}

export default App;
```
### This is all required for basic Google enabled authentication system all it required 10 mins. 
####Note:
* You can use `redux` in place of `useState` if you are using it in Stack application.
* You can check other button and functions for Google Auth at [Google Identity](https://developers.google.com/identity).
* Check the [FULL CODE](https://github.com/201B153/authloginapp) at for better picture.