Headless WordPress: Google Login with JWT

In the first tutorial of the Headless WordPress series, we have created a way to login with your user account using JWT. This tutorial will show you how you can use the same JWT flow when trying to login users using Google.

To use the Google login, you will need the Google Client ID which can be created using the Google Console. When creating the credentials, you can set the Origin and Redirect URIs to http://localhost:3000 (or any other URL where you host your app).

REST Login Route

To login with Google, we will need to create a custom login route. That route will work like this:

1. Verify the Google token,
2. Get user information from Google,
3. Find user by Google User ID,
4. Find user by Google User email if not found by ID,
5. Create user if not found,
6. Login user using JWT.

We will now create a plugin called Headless (you can call it whatever you want). This plugin will also hold the code from the previous tutorial with the DropZone example where we allowed the user avatar to be saved.

Create a folder headless inside of the plugin folder and create the file headless.php.

Place yourself inside of this folder through the terminal (command prompt) and use this command to install the Google API client that we will use for verifying the token and getting the user information.

composer require google/apiclient:"^2.0"

This will create a folder vendor inside of our plugin. Open the file headless.php and add this to it.

Nothing special is happening in this file. We are including the autoload.php from the vendor folder that will load the classes from the Google API Client library that we have installed. We are also including the abstract class REST_API for creating custom routes and the class REST_APIS that will load all the custom routes.

Abstract REST_API class

Those classes are not defined yet, but we will do that right now. First, let’s define the abstract class. Create a folder includes and inside of that folder, another one called abstracts. Then create a file class-rest-api.php and add this code.

We are defining this class under the namespace Headless\REST_API. That way, we can keep our class names short and the namespaces define where our classes belong.

The method add_route uses the $version and $path with the provided $route and $config to define an array of routes a class defines. We will use that information later to register those routes.

Login REST Class

Let’s now create the login class that will be used to create login routes. Create a new folder rest-api inside of the includes folder. Inside of that folder add a new file class-login.php. Add the following code to it.

When this class is being constructed, it prepares the google client ID (if not added inside of the class, it will look for a constant HEADLESS_GOOGLE_CLIENT_ID). You could add a settings page and get that information from there.

We are using the method add_route to add the google endpoint. With the help of that method and the attributes $path and $version we are creating an endpoint that will look like this: v1/login/google.

Helper methods

Let’s overview the helper methods here.

find_user_by

This method will check for an existing user by a provided value. For now, we are only looking for the user by google ID, so we are creating a \WP_User_Query to find a user with the appropriate google ID.

If we don’t provide a defined $key in the switch, we will use the default WordPress function get_user_by.

create_user

This method will create a user. Since this method is used mostly by logging users with other platforms such as Google, Facebook and such, we will generate a random username if the username is already taken.

It will also generate a random password if no password is provided. This method returns the user ID (WordPress user ID).

create_token

This method is an exact copy of the method used in the JWT plugin to create the token. This will ensure us to have the same JWT flow as when using regular username/password combination.

Google Login

Let’s now define the method used for logging with google. Add this code to the method login_google.

Since our Headless WordPress will probably work from a different domain, to allow signing up with Google, we are enabling the CORS with Access-Control-Allow-Origin: *.

We are then getting the Google_Client object and verify the token. If the token is verified, we get the user information. The $payload can then be used to access all the information we need.

We get the Google user ID and try to find an existing user with that ID. If we have found one, we update the google token of the existing user and create a JWT token that will handle the Authentication afterwards in our app.

If we don’t find one, we try to find one with the email from the Google user information. If we find one, we save the google token and the google user ID and then we create the JWT token.

If we don’t find one with the email, we create the user and update it with the information provided by Google. Then we proceed with the same step as above.

Now we need a way to register this route.

REST_APIS class

This class will include our custom route files and register them. Create the file class-rest-apis.php inside of the includes folder. Put the following code in it.

We include our new rest-api/class-login.php and register the routes inside of the method prepare_route. We instantiate the Login object and merge the registered routes from that object with all other routes registered inside of this class.

Then we register all of them with the rest namespace headless. This will mean that our complete google rest route will be: headless/v1/login/google.

Don’t forget to activate the plugin.

Implementing Google Login inside the JavaScript App

Let’s now go to our JavaScript App that we have created so far in this series Headless WordPress.

Place yourself inside of the main folder of our app through the terminal and install the library react-google-login with the following command:

npm install react-google-login

Create a folder src/components/login, this folder will contain our Login components. Create a file LoginGoogle.js and add this code:

We are importing the component GoogleLogin and rendering it with our component LoginGoogle. Our component will get a property setLogin that will handle the logging into our App.

We pass two methods to the component GoogleLogin. The method loginWithGoogle will use the REST API route that we have created. It will pass the token received from the Google to verify it and maybe login our user.

The other method will just console the error.

Now we need to use our new component LoginGoogle and put it in our Login component which renders the login form. Open the file src/components/Login.js and make this changes:

We have defined a new method setLogin that is binded to this so we can use this inside of it. Then we are using the method defined in the App to login the user. We are importing our component LoginGoogle and rendering it at the bottom of the form.

That’s it. This will now use the JWT token when logging the user and the rest of our JavaScript App will work as if we were logged in with regular username/password combination.

The Code

The code here contains everything except the node_modules and vendor which you need to do it by yourself.

Conclusion

By reusing the JWT logging flow, we can add as many platforms as we want as long as at the end we create the JWT token that the JWT plugin will recognize.

Become a Sponsor