In this chapter, we will continue from where we left off in the first chapter that dealt with implementing a Facebook login and initiating a react app structure. We are going to add Google login to the same app we created in the first chapter. This chapter is short, sweet, and simple because we have already completed the problematic section in the previous chapter. We have broken down this tutorial into various sub-headings for you to grasp the concept about React project, Google login, firebase auth, component implementation, etc. and work accordingly.

Now, let’s get on with implementing the Google login!

What you’ll learn …?

How to create a new React app.

How to pass props in React.

How to use Firebase Authentication.

How to create and set up a Google app.

How to use Bit.

Most of the points have already been covered in the first chapter, so this chapter makes the concepts even clearer as we move along.

Problem

As we have done most of the problematic section in the first chapter, this chapter only tackles the issue of implementation of Google login; which is relatively simple compared to Facebook login. So, we need a quick win here without wasting much of our time. We need to generate result quickly, which is an important part that keeps us motivated to reach our end milestones.

Requirements

Here’s a complete list of plugins, packages, and services we’re going to need to gain something from this tutorial:

Nodejs v8.x.x or higher installed along with NPM/yarn.

or higher installed along with NPM/yarn. Firebase and Bit account.

You’ve already completed the project from the previous chapter.

Firebase and Bit package.

Reusable previous code

To make things easier for us, we are going to replicate the Facebook component that we created in the first chapter and change all related names to Google. The project directory structure will look something like below:

The places where we changed the name from Facebook to Google are mentioned in detail below:

Folder FacebookAuth is changed to GoogleAuth.

2. FacebookAuth.jsx file is changed to GoogleAuth.jsx file.

3. In GoogleAuth.jsx file, change the class name to GoogleAuth.

4. In handleLogin() function, change the FacebookAuthProvider to GoogleAuthProvider.

Then, we need to change Facebook to Google in the HTML section as given below in the following code snippet:

<li class="firebaseui-list-item">

<button

onClick={this.handleLogin}

class="firebaseui-idp-button mdl-button mdl-js-button mdl-button--raised firebaseui-idp-google firebaseui-id-idp-button">

<span class="firebaseui-idp-icon-wrapper">



<img class="firebaseui-idp-icon" alt="" src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg">

</span>

<span class="firebaseui-idp-text firebaseui-idp-text-long">

Sign in with Google

</span>

<span class="firebaseui-idp-text firebaseui-idp-text-short">

Google

</span>

</button>

The above code will provide us with the Google login component which we need to import in our App.js file.

Now, we need to copy the code below and add it to our App.js file.

In our GoogleAuth/index.js file, we need to replace all the import of FacebookAuth with GoogleAuth, as shown in the code snippet below:

Now, every change will be made only in our App.js file. We need to change the App.js file to include the component and pass firebase configuration as shown in the code snippet below:

As a result, we will see the following result in our browser screen or app screen:

We can see that this is working fine. Now, we move one to Firebase part of our tutorial chapter.

Activating the Sign-in method in Firebase

In this step, we need to activate the Sign-in method in our firebase console for Google login to work. For that, we need to:

Go to firebase console > Authentication > enable Google Sign-in Method

Lastly, we need to provide a project support email and then click on “save” button as shown in the console screenshot below:

After this is done, we need to return to our app and click on Google Login. We will see the following simulation and result in our browser console: