How to Integrate Google Login API Into Your React App
Tags: react, google, tutorial, login
Published: 2021-02-07 17:32:00

We always want to make sign-ups to be frictionless and hassle-free. More people will be willing to try our app if onboarding is as easy as humanly possible. Nothing discourages sign-ups more than a form with a gazillion questions and pages of options.

This article was original posted at [https://www.quod.ai/post/how-to-integrate-google-api-into-your-react-app](https://www.quod.ai/post/how-to-integrate-google-api-into-your-react-app)

It is always advisable to use an authentication mechanism that people are already utilizing at this very moment. You can bet your lunch money that people are logged in to Facebook, Twitter, and Google at this instance while reading this article.

You can never go wrong providing a dead-simple mechanism for people already logged in to Google, Gmail, or YouTube, and just drop them at the center of your app, all logged in and ready to go.

Objectives
==========

In this tutorial, we shall do the following:

*   Create a React application where a user can sign-in using his Google credentials;
*   Retrieve and display the user’s name, email, and profile image;
*   Allow the user to sign out of the app via a click of a button.

Prepare your Google API Project
===============================

To integrate Google Login into our React app, we need a **_Google Client ID_**. We can obtain this when we create a Google API Project.

1.  Go to the Google API’s [Credentials Page](https://console.developers.google.com/apis/credentials)

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*i2KeJ4_PNZWLLpaO.png" width="1600" height="469" srcSet="https://miro.medium.com/max/552/0*i2KeJ4_PNZWLLpaO.png 276w, https://miro.medium.com/max/1104/0*i2KeJ4_PNZWLLpaO.png 552w, https://miro.medium.com/max/1280/0*i2KeJ4_PNZWLLpaO.png 640w, https://miro.medium.com/max/1400/0*i2KeJ4_PNZWLLpaO.png 700w" sizes="700px"/>

1.  Hit the **_Create a project_** link, and choose a name to your fancy.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*rXAGDGtKyuiQIMhu.png" width="1600" height="634" srcSet="https://miro.medium.com/max/552/0*rXAGDGtKyuiQIMhu.png 276w, https://miro.medium.com/max/1104/0*rXAGDGtKyuiQIMhu.png 552w, https://miro.medium.com/max/1280/0*rXAGDGtKyuiQIMhu.png 640w, https://miro.medium.com/max/1400/0*rXAGDGtKyuiQIMhu.png 700w" sizes="700px"/>

1.  Once you have a project in place, proceed to **_Credentials > Create credentials_** **_\> OAuth client ID_**.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*mbENMFX28Qv1__Hd.png" width="1600" height="907" srcSet="https://miro.medium.com/max/552/0*mbENMFX28Qv1__Hd.png 276w, https://miro.medium.com/max/1104/0*mbENMFX28Qv1__Hd.png 552w, https://miro.medium.com/max/1280/0*mbENMFX28Qv1__Hd.png 640w, https://miro.medium.com/max/1400/0*mbENMFX28Qv1__Hd.png 700w" sizes="700px"/>

1.  To proceed any further, we need to create an **_OAuth consent screen_** first. Click on that button.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*oq225TjjWZCscdu2.png" width="1600" height="901" srcSet="https://miro.medium.com/max/552/0*oq225TjjWZCscdu2.png 276w, https://miro.medium.com/max/1104/0*oq225TjjWZCscdu2.png 552w, https://miro.medium.com/max/1280/0*oq225TjjWZCscdu2.png 640w, https://miro.medium.com/max/1400/0*oq225TjjWZCscdu2.png 700w" sizes="700px"/>

1.  We choose **External User Type** since we want to give access to everyone with a Google account. The appropriate selection depends entirely on the app requirements.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*Ayt4AaLh1exxsjVT.png" width="1600" height="905" srcSet="https://miro.medium.com/max/552/0*Ayt4AaLh1exxsjVT.png 276w, https://miro.medium.com/max/1104/0*Ayt4AaLh1exxsjVT.png 552w, https://miro.medium.com/max/1280/0*Ayt4AaLh1exxsjVT.png 640w, https://miro.medium.com/max/1400/0*Ayt4AaLh1exxsjVT.png 700w" sizes="700px"/>

1.  Fill up the app registration form. For the most part, you can leave it blank.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*aOWO8PUhQfUsVp-m.png" width="1600" height="906" srcSet="https://miro.medium.com/max/552/0*aOWO8PUhQfUsVp-m.png 276w, https://miro.medium.com/max/1104/0*aOWO8PUhQfUsVp-m.png 552w, https://miro.medium.com/max/1280/0*aOWO8PUhQfUsVp-m.png 640w, https://miro.medium.com/max/1400/0*aOWO8PUhQfUsVp-m.png 700w" sizes="700px"/>

1.  Choose the scope best suited for the app that you shall develop. Since we are just making a demo application, I chose all available scopes.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*IIJseaXR2MMoQu_8.png" width="1600" height="910" srcSet="https://miro.medium.com/max/552/0*IIJseaXR2MMoQu_8.png 276w, https://miro.medium.com/max/1104/0*IIJseaXR2MMoQu_8.png 552w, https://miro.medium.com/max/1280/0*IIJseaXR2MMoQu_8.png 640w, https://miro.medium.com/max/1400/0*IIJseaXR2MMoQu_8.png 700w" sizes="700px"/>

1.  Provide your email address as a test user. Note that this only matters when the project is in testing. Once we placed the status into production, the test users list will be irrelevant.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*I2SGmgdSsSQuKMLZ.png" width="1600" height="902" srcSet="https://miro.medium.com/max/552/0*I2SGmgdSsSQuKMLZ.png 276w, https://miro.medium.com/max/1104/0*I2SGmgdSsSQuKMLZ.png 552w, https://miro.medium.com/max/1280/0*I2SGmgdSsSQuKMLZ.png 640w, https://miro.medium.com/max/1400/0*I2SGmgdSsSQuKMLZ.png 700w" sizes="700px"/>

1.  You shall see a summary of the OAuth content screen settings at the end of the registration flow.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*V-B2N_pB1kYj9kts.png" width="1600" height="904" srcSet="https://miro.medium.com/max/552/0*V-B2N_pB1kYj9kts.png 276w, https://miro.medium.com/max/1104/0*V-B2N_pB1kYj9kts.png 552w, https://miro.medium.com/max/1280/0*V-B2N_pB1kYj9kts.png 640w, https://miro.medium.com/max/1400/0*V-B2N_pB1kYj9kts.png 700w" sizes="700px"/>

1.  After creating the OAuth consent screen, we head back to **_Credentials > Create credentials > OAuth client ID._** Choose the **_Web application_** type. Choose an appropriate name for your client. Take note that we can provide the **_Authorized JavaScript origins_** and **_Authorized redirect URL’s_** on this page. We will come back to this page later. Hit the blue “Create” button to proceed.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*t94es_ZNnJkBmQD0.png" width="1600" height="904" srcSet="https://miro.medium.com/max/552/0*t94es_ZNnJkBmQD0.png 276w, https://miro.medium.com/max/1104/0*t94es_ZNnJkBmQD0.png 552w, https://miro.medium.com/max/1280/0*t94es_ZNnJkBmQD0.png 640w, https://miro.medium.com/max/1400/0*t94es_ZNnJkBmQD0.png 700w" sizes="700px"/>

1.  We will see our **_Google Client ID._**

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*xozVkddkn2rctags.png" width="1600" height="905" srcSet="https://miro.medium.com/max/552/0*xozVkddkn2rctags.png 276w, https://miro.medium.com/max/1104/0*xozVkddkn2rctags.png 552w, https://miro.medium.com/max/1280/0*xozVkddkn2rctags.png 640w, https://miro.medium.com/max/1400/0*xozVkddkn2rctags.png 700w" sizes="700px"/>

Have your React App ready
=========================

Once you have your Google Client ID with you, it’s time to integrate Google Login into your React application.

We start with a standard create-react-app application for demonstration purposes, but this will work as well with any existing React app that you already have.

`$ npx create-react-app tutorial-react-google-api-login`

We need to modify a couple of files to perform the integration.

Create a file named src/lib/GoogleLogin.js, with the following content:

{% gist https://gist.github.com/QuodAIBlog/fffa6b703b7c094205b3852e9ace2d1e %}

View [GoogleLogin.js](https://beta.quod.ai/github/QuodAI/tutorial-react-google-api-login) in context with [**Quod AI**](https://quod.ai/)

This file contains a single function named loadGoogleScript, which, as the name implies, loads the necessary JavaScript library needed to use Google API.
Upon closer inspection, we can see that this is a standard way of loading _any_ JavaScript library. We can repurpose this function to load any JavaScript library just by replacing the src variable.

**Line 7 (Ref. 1):** This is the complete URL of the necessary JavaScript library that we need to fetch and load before using any of the Google API’s that we need.

**Line 10 (Ref. 2):** We access the first of all `<script>` tags available in our code. We are confident that we have at least one `<script>` tag in our document since React is a JavaScript library.

**Line 13 (Ref. 3):** This ensures that the script is loaded only once by checking the provided id first.

**Line 14–18 (Ref. 4):** We dynamically build our JavaScript tag and insert it before all existing tags.**Line 17 (Ref. 5):** We tell our code to run a globally available function named onGoogleScriptLoad after the Google API library loads properly. onGoogleScriptLoad is an arbitrarily-named function, and as such, can be named anything that you prefer. We shall use this function as an entry point for our React component, as we shall see later.

Proceed to our main application (src/App.js), and perform the following modifications:

{% gist https://gist.github.com/QuodAIBlog/e06eb4fbeb97d618ccc3305395e3bfd6 %}

View [App.js](https://beta.quod.ai/github/QuodAI/tutorial-react-google-api-login) in context with [**Quod AI**](https://quod.ai/)

**Lines 52–66 (Ref. 1):** We define the onGoogleScriptLoad global function, which, as mentioned previously, will be the function to be executed immediately after the Google API Library has fully loaded.

**Lines 54–55 (Ref. 2):** We expose the gapi object as the gapi state to make it available to our whole React application. The gapi object acts like the root object that we use to load all other functionalities such as authentication (via gapi.auth2) and sign-in helper functions (via gapi.signin2)

**Lines 57–65 (Ref. 3):** We need to load gapi.auth2 like so as the library does not do this on the onset. The gapi.auth2.\* family of functions is available for us once the library loads successfully.

**Lines 59–61 (Ref. 4):** We need to initialize gapi.auth2 before we can proceed any further. Remember the Google Client ID that we obtained while creating the Google API Project? We utilize it here.
Security warning: Do NOT commit your Google Client ID, or any sensitive information, in your source repository!
The current best practice is to put the client ID in your environment variable (in this case, as REACT_APP_GOOGLE_CLIENT_ID) to prevent placing the ID in the repository.

**Line 62 (Ref. 5):** Successful initialization of gapi.auth2 gives us a GoogleAuth object. This object allows us to sign in, sign out, and perform several other user-specific functions. There is much to explore with the GoogleAuth object, but for now, we shall use it for the GoogleAuth.signOut()function, as we shall see later on.
We expose this GoogleAuth object to the whole app as the googleAuth state.

**Line 63, Lines 36–45 (Ref. 6):** The Google library provides a nifty helper function called gapi.signin2.render to help us create our sign-in button. Provide the ID of the element where you want the button placed, and the library will automatically create the sign-in button for us.
 ‍
**Lines 16–22, Lines 24–26 (Ref. 7):** The gapi.signin2.render function allows us to declare both a success and a failure callback. The success callback includes the handy googleUser object, which serves the entire activity’s ultimate objective: to retrieve valuable user data, including the user’s name, profile picture, and email address, and place them in their respective states for rendering.

**Lines 28–34 (Ref. 8):** When the user hits “Log Out,” we do two things. First, we invoke the GoogleAuth.signOut() function, and second, we re-render the Google sign-in button via gapi.signin2.render().
The sign-in button re-render is necessary since we removed the button from the DOM after login when it disappeared from view.

**Line 69 (Ref. 9):** Observe that we invoke the actual loadGoogleScript() function only _after_ we defined window.onGoogleScriptLoad completely. We do this to be 100% certain that window.onGoogleScriptLoad is available before the library completes its load, and no race conditions happen.

Run the app, get the URL
========================

Run the following command, replacing XXXXXXXXXX with your Google Client ID:

`$ REACT_APP_GOOGLE_CLIENT_ID=XXXXXXXXXX npm start_`

Our React application is now visible from our local machine, via [http://localhost:8080.](http://localhost:8080.) Such is not enough, though; we must expose our app to the world. We can do this securely by using ngrok.

`$ ngrok http 8080`

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*n-LkTI32teh-RAjj.png" width="1600" height="424" srcSet="https://miro.medium.com/max/552/0*n-LkTI32teh-RAjj.png 276w, https://miro.medium.com/max/1104/0*n-LkTI32teh-RAjj.png 552w, https://miro.medium.com/max/1280/0*n-LkTI32teh-RAjj.png 640w, https://miro.medium.com/max/1400/0*n-LkTI32teh-RAjj.png 700w" sizes="700px"/>

Ngrok provides us with two URL’s that can be accessed anywhere on the Internet: an http version and an https version. Take the https version, in our case [https://805b5b974a6d.ngrok.io](https://805b5b974a6d.ngrok.io/). We shall go back to Google API to plug in the URL.

Reconfigure Google OAuth
========================

Go back to **_Credentials > OAuth 2.0 Client IDs > (Your Client)._** Add the ngrok URL in both **_Authorized JavaScript origins_** and **_Authorized redirect URIs._**

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*J1__JdMG7UhNz0tC.png" width="1600" height="866" srcSet="https://miro.medium.com/max/552/0*J1__JdMG7UhNz0tC.png 276w, https://miro.medium.com/max/1104/0*J1__JdMG7UhNz0tC.png 552w, https://miro.medium.com/max/1280/0*J1__JdMG7UhNz0tC.png 640w, https://miro.medium.com/max/1400/0*J1__JdMG7UhNz0tC.png 700w" sizes="700px"/>

Go back to the **_OAuth consent screen_** and ensure that we set its publishing status to **_production._**

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*uISaaOdPivUvAmVC.png" width="1600" height="633" srcSet="https://miro.medium.com/max/552/0*uISaaOdPivUvAmVC.png 276w, https://miro.medium.com/max/1104/0*uISaaOdPivUvAmVC.png 552w, https://miro.medium.com/max/1280/0*uISaaOdPivUvAmVC.png 640w, https://miro.medium.com/max/1400/0*uISaaOdPivUvAmVC.png 700w" sizes="700px"/>

View app, and enjoy
===================

Now we go to the fun part, where we view and test our finished application.

<img alt="Image for post" class="t u v hr aj" src="https://miro.medium.com/max/3200/0*ziU425Alhs7NeWDO.png" width="1600" height="914" srcSet="https://miro.medium.com/max/552/0*ziU425Alhs7NeWDO.png 276w, https://miro.medium.com/max/1104/0*ziU425Alhs7NeWDO.png 552w, https://miro.medium.com/max/1280/0*ziU425Alhs7NeWDO.png 640w, https://miro.medium.com/max/1400/0*ziU425Alhs7NeWDO.png 700w" sizes="700px"/>

You can play around with the live demo here: [https://compassionate-villani-96963b.netlify.app/](https://compassionate-villani-96963b.netlify.app/)

You can view and download our source code at: [https://github.com/QuodAI/tutorial-react-google-api-login](https://github.com/QuodAI/tutorial-react-google-api-login)

[‍](https://github.com/QuodAI/tutorial-react-google-api-login)I hope that you obtained something valuable today. Happy coding!