Logging in with Google, using React hooks, Part 1

If you are making a website or an app, it is very likely that you’ll need to authenticate users somehow. Authenticating and remembering users has become the standard, so it’s good to know how to do it in several different ways. I’ll show you an easy way to log your users in with Google in a React.js app with hooks.

Create the website

The first thing we will do is to create a website that we can visit. We can run create-react-app test to make a new react project in a new folder called ‘test’. If you want a back-end server as well, check out my other article for creating both front-end and back-end. After creation, you can run npm start to visit the website on localhost:3000.

Obtain Google credentials

We need to register our website and get credentials for it. Go to the credentials page of Google Api (you’ll need to create an account if you don’t have one already). On the left navigation bar, click Credentials, then click Create Credentials, choosing Oauth client ID.

Choose Web Application, and while we are here, we need to add our domain name to the list of authorized domains:

Notice that we are using https://localhost:3000. Google will not allow you to use their APIs without https, so we’ll need to use it on our server. Click create, and you should be able to see the name of the website you just created and its client id. Keep that id handy.

To make our server run using https, we can give ourselves a self-signed certificate. In the package.json file, change the start script to be the following: "start":”HTTPS=true react-scripts-start . A self-signed certificate is not a good idea in production, but in development it’s okay. Be aware that you will get a security notification the first time you visit the website.

Back in in the head of our public/index.html file, we’ll import a script to give us access to Google Sign in: <script src="https://apis.google.com/js/platform.js" async defer></script> .

Get login and logout buttons

Although you can do this manually, there is an npm package we can import to make it much easier: react-google-login. Install it by running npm i react-google-login . Then import it in the top of App.js like so: import { GoogleLogout, GoogleLogin } from ‘react-google-login

Let’s add these buttons right in the middle of our page:

<GoogleLogin
clientId="YOUR ID HERE.apps.googleusercontent.com"
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
/>
<GoogleLogout
clientId="YOUR ID HERE.apps.googleusercontent.com"
buttonText="Logout"
onLogoutSuccess={logout}
/>

Notice the Login button has an onSuccess and onFailure; these run a function depending on if the login was successful or not. They don’t have to both be the same. The Logout button has a similar feature, running a function only if the logout is successful.

Let’s make it so that the user is saved in App.js’s state when they log in. Import useState from react: import React, { useState } from 'react' . Then change the following:

And right above the Login button add this.

Let me break this down. React hooks hold their data in state, so we need to import useState from react. We tell the component to have a state called ‘user’, and we make a function that matches it, ‘setUser’, which we will use to modify the ‘user’ state. useState() means the state starts off empty, but we could pass it anything to be the default state. And now responseGoogle will set the user to be the user object that Google sends back.

In the bottom picture, {user && (...is like an if statement. If user evaluates to true, render that <h1> element. User starts off undefined, so this element will not render until we click login, setting the user state, and making user truthy.

Let’s go ahead and add this to our logout function: setUser(); . Now when we click logout our user becomes undefined again, and that <h1> tag no longer renders.

We have successfully allowed users to log into and out of our website! And you might have noticed that this login already is persisting. You can test it yourself: the logout function does not run unless a logout was successful. Clicking logout when you aren’t logged in will not log anything. So login, close the browser, and reopen it. Immediately click logout, and you can see the log of ‘logged out’, meaning you were still logged in from the last time. So the next step is to check to see if a user is already logged in when the page loads. I’ll likely write my next blog about that, but here’s a hint: it involves useEffect() and the GoogleAuth object found here.

Until next time!