Social Logins with Google Auth

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

• Click on the credential section, and click on the create credential button
• Select the Oauth option

• 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 😂