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:
- Verify the Google token,
- Get user information from Google,
- Find user by Google User ID,
- Find user by Google User email if not found by ID,
- Create user if not found,
- 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
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.
add_route uses the
$path with the provided
$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
$version we are creating an endpoint that will look like this:
Let’s overview the helper methods here.
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
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).
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.
Let’s now define the method used for logging with google. Add this code to the method
Since our Headless WordPress will probably work from a different domain, to allow signing up with Google, we are enabling the CORS with
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.
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:
Don’t forget to activate the plugin.
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.
The code here contains everything except the
vendor which you need to do it by yourself.
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