Social Logins with Google Auth
Tags: react, javascript, tutorial
Published: 2019-07-09 16:23:14

---
title: Social Logins with Google Auth
published: true
description: implementing a social login with Google authentication in a react application
tags: react, javascript, tutorial
cover_image: https://thepracticaldev.s3.amazonaws.com/i/tj2nua3wwrulequqa5wr.png
---

>Disclaimer: I would suggest you sit tight because I am about to show you how to easily get Google Auth integrated into your react app, seamlessly.

Following the advent of a unified authentication system, such as Facebook, Google, Github Logins, people tend to prefer to use these methods to get themselves authorized on any platform having such an authentication service.

In this article, we would be discussing, how we can set up one; the Google social login in a react application.

Given a React Login Component with the code below:

         import React, {Component} from 'react'
         
          export default class Login extends Component {
              render(){
                 return(
                     <div>
                        <input type="text" placeholder="username"/>
                        <input type="text" placeholder="username"/> 
                        <button>Login</button>
                     </div>
                 )
              }
          }

We would need to install a package to assist us with setting up the Google Login feature on our application. To do this we would need to install the `react-google-login` package.

       yarn add react-google-login || or you can use || npm i react-google-login

On successful installation of the package, we would have to import it into our project. Our project should look as so:

         import React, {Component} from 'react'
         import GoogleLogin from 'react-google-login'
         
          export default class Login extends Component {
              render(){
                 return(
                     <div>
                        <input type="text" placeholder="username"/>
                        <input type="text" placeholder="username"/> 
                        <button>Login</button>
                     </div>
                 )
              }
          }

So to use the package, all we have to do is render it in our component by adding this `<GoogleLogin />` below `<button>Login</button>`.

The GoogleLogin component rendered, would need some properties passed as a prop to function, these properties include: `clientId`, `buttonText`, `onSuccess`, `onFailure`. I would be discussing each of them, from the easiest to set up to the hardest.


**buttonText**: This is simply the text that would appear on the button. And we could simply do these by assigning a text to buttonText as so: `buttonText = 'Log in With Google';`

**onSuccess and onFailure**: These are actually methods, that serve as callbacks when a request is made to authenticate with Google, so its in these methods that you specify what happens when a response is returned by Google. For our example, an `onSuccess` method could look like what we have below:

      responseGoogle = async (response) => {
        const userObject = {
          username: response.w3.ofa,
          password: 'test'
        }
        if(response.w3.ofa) {
          await localStorage.setItem("user", JSON.stringify(userObject));
          await window.location.reload();
        } else {

        }
        console.log(response);
      }

The response sent by Google has an object called `w3`, which houses the properties `w3` and another property for the user email. This might be different for you, so please kindly log your response when it is returned, to pick the details you need.

Because Google would not return the users password, what I normally do is assign them a default password and store this password in the database. And on another time, if the user tries to log in, all I have to do is send an object with his username and the default password back to the server, which in our case is `test`.  In our example, we would be storing the `userObject` in `local storage`, but if you are persisting your data in a database, you would have to send this object to the method handling the authentication of the user on the server. To complete the process, we would now assign the method created to the `onSuccess` property as so; `onSuccess = responseGoogle;`. For the onFailure property, we can have an alert or log inside a method that outputs an error message and we would assign this method to the `onFailure` property as we did to the `onSuccess`.


**clientId**: 
To get this information, you need to visit the Google API console [Here](https://console.developers.google.com)

- Click on the credential section, and click on the create credential button
![credentials](https://thepracticaldev.s3.amazonaws.com/i/5ltw95u2w3xp2qjo3l8l.png)
- Select the Oauth option
![select 0auth](https://thepracticaldev.s3.amazonaws.com/i/7m771bg51aexq3k24znc.png)
- Note, if you don't a project created before now, it would prompt you to, follow the directions and create the project, then try to generate the credentials again. This time follow the prompt till you get to the part where you are shown your `clientId`, copy the clientId and assign our own `clientId` to it. At the end of the day, our `Login` Component would look as so:



      import React, {Component} from 'react'
         import GoogleLogin from 'react-google-login'
         
          export default class Login extends Component {

              responseGoogle = async (response) => {
                 const userObject = {
                    username: response.w3.ofa,
                    password: 'test'
                 }
                 if(response.w3.ofa) {
                    await localStorage.setItem("user", JSON.stringify(userObject));
                    await window.location.reload();
                 } else {

              }
              console.log(response);
              }
              render(){
                 return(
                     <div>
                        <input type="text" placeholder="username"/>
                        <input type="text" placeholder="username"/> 
                        <button>Login</button>
                        <GoogleLogin
                          clientId="##########" //id gotten from Google
                          buttonText="Log in with Google"
                          onSuccess={this.props.responseGoogle}
                          onFailure={this.props.responseGoogleError}
                        />
                     </div>
                 )
              }
          }
With that we have our React application authenticated with Google 0auth. This is as simple as it comes, if further clarification is needed, please feel free to reach out to me, here or via Google Mail 😂