Made withStrapiClip

Strapi Authentication Provider - Google

A

Alex the Entreprenerd

Creator on the Strapi channel

Watch on YouTube ↗

34K viewsJun 30, 202014:31 runtime

Learn how to implement Google authentication in your Strapi application with this step-by-step guide. This tutorial demonstrates how to use ngrok to expose your local development environment, a necessary step for configuring third-party providers. You'll walk through the entire…

Chapters

#strapi#clip#cmscrm

Prerequisites

A running Strapi v3 project.
ngrok to create a public URL for your local Strapi instance, as Google requires a live URL for OAuth.

Exposing Localhost with ngrok

Download ngrok and authenticate your account using the token from your ngrok dashboard: ./ngrok authtoken YOUR_TOKEN.
Expose your local Strapi port (default is 1337) to the web: ./ngrok http 1337.
Keep the ngrok terminal running and use the public HTTPS URL it provides.

Google Developer Console Configuration

Create a Project: Go to console.developers.google.com and create a new project.
Configure OAuth Consent Screen:
- Set the user type to External.
- Provide an application name.
- Add your ngrok domain to Authorized domains (e.g., random-string.ngrok.io), ensuring there is no protocol or trailing slash.
Important
Do not add an application logo. Doing so will trigger a manual verification process by Google, causing significant delays.
Create Credentials:
- Navigate to Credentials and click Create Credentials > OAuth client ID.
- Set Application type to Web application.
- Authorized JavaScript origins: Add your full ngrok URL (e.g., https://random-string.ngrok.io).
- Authorized redirect URIs: Add your ngrok URL followed by the specific Strapi callback path: https://random-string.ngrok.io/connect/google/callback.

Strapi Provider Configuration

In your Strapi admin panel, go to Plugins > Users & Permissions Plugin > Providers.
Enable the Google provider.
Copy the Client ID and Client Secret from the Google Console into the corresponding fields in Strapi.
Optionally, set the Redirect URL to your front-end application's URL if you are building an SPA.

Solving the Redirect URI Error

A common issue is a 400 Bad Request error stating redirect_uri is missing a scheme. This occurs because Strapi is unaware of its own public URL when running locally through a tunnel.

Tip
To fix this, you must explicitly set the server URL in your Strapi project. Open the file config/server.js and add the url key with your public ngrok URL.
module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: 'https://your-ngrok-url.ngrok.io', // Add this line!
  admin: {
    auth: {
      secret: env('ADMIN_JWT_SECRET', '...'),
    },
  },
});
After adding the URL, restart your Strapi server for the change to take effect.

Authentication Flow for a Single-Page App (SPA)

Initiate Login: Your front-end app should link the user to YOUR_STRAPI_URL/connect/google.
User Authenticates: The user is redirected to Google, logs in, and authorizes the application.
Callback to SPA: Google redirects the user back to the redirect URL specified in the Strapi provider settings (e.g., your SPA's callback page). This URL will contain query parameters like id_token.
Finalize Authentication: Your SPA captures these query parameters from the URL and makes a final GET request to the Strapi backend at YOUR_STRAPI_URL/auth/google/callback?id_token=... (passing along all received parameters).
Receive JWT: Strapi validates the token and returns a JWT and user object to your SPA, completing the login process.

Introduction & Project Setup

What's up? I'm Alexandria nerd. In this video, I'll show you how to use authentication providers for Strapi. More specifically, we will set up Google as an auth provider, and this process will be very similar for other authentication providers.

Since Google requires a live URL, we're gonna use ngrok to turn our local Strapi install and make it available to the world wide web. Alternatively, you could also deploy your live app, for example, to Heroku, and that will work as well.

The first thing you'll do is install Strapi, which you can do by using the command npx create-strapi-app then the name of the app, in my case strapi-auth-demo, and then the flag --quickstart so that we don't have to do all the setting up of the database. However, any 3.0 Strapi install will work, so if you have a Strapi installation, you should be good to go.

Exposing Local Strapi with ngrok

And now that Strapi is ready, we can tunnel it with ngrok. So at this point, I have my local Strapi running. I'm on localhost:1337. And I've navigated to ngrok.com. I would recommend you do the same. And again, if Strapi is open and basically works, we're good to go. There's nothing else that we're going to need to do on the Strapi side; we just need to have an install running.

I'm going to go on ngrok. I'm going to click on "Get started for free." You may have to register. I've already registered my account for the sake of saving time. And then you can click up here to download your binaries. Once you have downloaded them, in my case, they're going to be in the downloads folder. This should be in a similar folder for you as well.

Then the next thing to do will be to unzip them. In my case, I can unzip them by just double-clicking on them. So I have it here, and by clicking on it, it's going to automatically unzip them for me. So I have an ngrok file down here.

And the next thing that I'll do is there's going to be this command that it's going to be a little different for you because you're going to have your own token. So you're going to need to use this file. So I'm going to open the terminal, a new terminal window from from scratch, and we'll navigate to my downloads folder. Then I'll just copy this command, which basically means locally use the ngrok that is locally to the folder in which you're at, and then pass this auth token parameter, which is this code which basically associates my account with my ngrok installation. So I'm going to copy it, I'm going to go into the terminal, I'm going to paste it, I'm going to run it, and it's going to basically say that this worked. That's really all it's going to do.

And now we can actually run ngrok by just using ./ngrok and then http and then the port that we want to bind, in our case 1337 or "leet" as we like to call it. So we can type ./ngrok http leet, there we go, boom. Now we have a ngrok connection. So I can try and connect to it and I should see Strapi. Basically, if you visit this URL while I'm hosting it from ngrok, you should be able to visit my own Strapi install as well.

Google Developer Console Project Setup

Now that we did that, we're ready to set up the Google console, right? We have set up ngrok so that we're tunneling our local Strapi install. Let's go ahead and set up our Google developer console. So navigate to console.developers.google.com and you may have to create an account and it may also ask you for billing information. However, Google offers a free tier so even though you're providing your credit card info, you should not be charged for this specific setup.

At this point, you can click up here on the top left to get access to and find all of your projects. And then you can click here on the right to create a new project. I'm going to give my project a name, in my case, I'll just call it strapi-auth-demo. And you can tell that I tried this multiple times if you paid attention, because I care about you. So at this point, I'm in the strapi-auth-demo screen.

And the first thing we need to do is set up an OAuth consent screen. And we're going to set that to a type "external," which means that anybody can register. And one big gotcha when you set this up is do not touch the application logo. If you touch the application logo, you're going to need to have your consent screen validated manually by a Google employee, which is going to waste a lot of time. So do not touch this.

But do add the application name, in my case, again, strapi-auth-demo, and then I'm going to use my authorized domain. So I'll just scroll down here and I find the authorized domains. And in the authorized domain, I'm going to literally just copy the ngrok domain. I'm going to paste it in. One big gotcha here is that you must not specify the protocol and there must be no trailing slash. So it's just the second-level domain, then the top-level domain, and then the extension. Press enter. I'm good to go.

And then I will need to... and you are going to have to actually set up the homepage link, privacy policy, and terms of service. And just because this is a toy project, I'm not going to put real links, I'm just going to put the URL from ngrok because I'm going to take this down the second I'm done recording the video. But you may have to actually put a valid, legally binding set of documents. That said, at this point, we've set up our auth screens.

Creating OAuth Credentials

Let's set up our auth credentials. Click on Credentials on the left, then click up here on the blue button "Create credentials" and select "OAuth client ID," which is the second option. Set the application type to "Web application" and put a name, I'm going to put strapi-auth.

And for authorized JavaScript origins, we're going to use Strapi's URL, which is the ngrok URL. So I'm just going to copy that again. And this time you can leave the HTTP, but we have to remove the trailing slash. And for authorized redirect URIs, I'm going to use the same URL followed up by /connect/google/callback. This is a hardcoded value that Strapi will use to provide us with the authenticated user object. Click on Save.

And at this point, we created our credentials. Then we have these two credentials: the client ID and the client secret.

Configuring the Google Provider in Strapi

So I'm going to set them up in Strapi. Due to a sake of time, I'm not going to use the ngrok version. I'm just going to go to localhost:1337/admin. Otherwise, it's going to be stuck loading for a while.

Once you're inside of Strapi, you can click on Roles & Permissions, then on Providers, and then search for Google. Click on Google, enable it. And then you have a field called Client ID and a field called Client Secret. Go on the credentials, copy the Client ID, paste it in the Client ID field. Copy the Client Secret, paste that in the Client Secret field. Then our redirect URL is currently set up to /auth/google/callback. But instead of that, put a proper URL. So copy the URL from ngrok and just add it as a prefix so that way we're going to be redirecting to a real, complete URL.

Solving the Redirect URI Error

And the reason why I say this is because we're going to see a bug that I want you to be aware of as soon as we're done with this. So I'm going to click on Done. And at this point, our settings have been saved. And the way to connect through Google Auth will be to use the ngrok URL followed up by /connect/google.

And this will redirect us to an auth screen. However, you're going to see this error. You know, it says authorization error, we have a 400 code with a message of "invalid request" saying that the redirect URI is missing a scheme and is saying /connect/google/callback. The reason why you're getting this error is because Strapi, for whatever reason, uses a parameter called strapi.config.server.url—so the config.server.url parameter—to determine the current URL which Strapi is located at. And as of now, that parameter is empty. So Strapi doesn't actually know where to send us through the callback. So that means that whenever we're trying to set up a callback, it will reject it because it's basically using the wrong URL.

In order to solve this, we can open up with Visual Studio Code our Strapi installation, then go in the config folder, click on server.js, and then you can add a new entry after line 3. You can add a comma, new line, type url, and then put in quotes as a string put the ngrok URL without the trailing slash. Then let the server restart. And once the server is restarted, you can see that in your logs for Strapi, you're going to see that the new URL is actually the URL that you just pasted in.

Testing the Google Authentication Flow

So at this point, if we try making the same request to our ngrok URL /connect/google... I think I mistyped Google there. There we go. We can now access Google and try logging in. And you can see that I get redirected to /auth/google/callback with an ID token and a bunch of data. And most importantly, my JSON response is my JWT object, which will allow me to make authenticated requests inside of Strapi. And I also have all of my user data.

So if I navigate to localhost:1337 and click on Users, you can see that now there is a new user which contains my information. So I was successfully able to sign in with Google through this process.

Integrating with a Single-Page Application (SPA)

At this point, you've successfully set up Google as an authentication provider for Strapi. However, you may be wondering how to actually use this with a single-page application. So that's what I'm going to be showing you as an example now.

At this point, we set up our Google authentication providers in roles and permission to have a redirect URL which is the same as Strapi. However, if we had a single page application hosted somewhere else, we could actually point to it. So what I'm going to do is I'm going to point to an application that I've been working with called http://poly.market. You may have a different application at a different URL. And so that means that instead of sending us back to the Strapi URL /auth/google/callback, we will actually be forwarded to this specific URL once the authentication is done. And instead of receiving this GET response, we will actually—basically the JSON field with the user—we'll actually only receive this query parameter. So I'll show you what happens.

I'm going to go on the ngrok URL which I'm going to just copy again /connect/google. This is step one, you basically still link to that specific URL so that this triggers the login operation. Then you get the callback. And the callback will send you to your own single-page application and it will pass all of these info through, ID token, etc, etc. So what you can do is you can select all of them. And clearly, you can do that programmatically, but in my case, I'm just going to show you the demo. So I'm just going to select all of them.

And then I'm going to navigate and let me just paste this this huge object which begins with ?id_token. Then I'm going to add the ngrok URL at the beginning of it, and then I'm going to add a slash and the slash will be followed up so I have the ngrok URL /auth/google/callback. Let's try navigating to this... no access token. Okay, so I made a mistake in copying the data. You want to make sure you copy all of the data. So you know, whatever it takes, we're going to scroll through it. Pretty sure there is a shortcut for this by the way. So basically, I'm going to select from the question mark, then I'll press shift command and I'll select all of it. And I'll try pasting it again. And there we go.

So basically if you can provide those query parameters and then do a GET request to /auth/google/callback, then you're going to receive your JWT token and the user information. What does this mean? This means that in your single-page application flow, you can have a button that links to the /connect/google URL. Then a user will authenticate through Google, and lastly, you're going to send them back. By receiving the token, you can then use the token to make a GET request to your Strapi URL /auth/google/callback while providing your access token. And that way, you successfully set up Google as an authentication provider.

Conclusion

So there you have it, using Google as an authentication provider with Strapi. Please like the video if you've enjoyed it, and make sure to subscribe for more, and leave a comment telling me which topics you want me to cover next. If you want to take your Strapi learning even further, make sure to check out the complete Strapi course available on Udemy. Link in the description. Thank you for watching and have an amazing day.