If you’re a creative developer like me you’ve probably had some trouble setting SSO with Strapi as there are a thousand ways of doing it to get more information from Google (like the picture, first name, last name, etc…). I tested several ways and I wanted to explain one I found the simplest and cleanest (and which doesn’t require any obscure libraries), Here’s how it works…
Before starting my Front-End APP write in Vue3:
- My Front-End URL is: http://localhost:5173
First, install Strapi
npx create-strapi-app@latest strapi-sso --quickstart
Once the installation is finished, create an account and click on Let’s start
Now go to your Google Console
If you already have your credentials move to the next section => Now in Strapi
Link: https://console.cloud.google.com
OAuth consent screen
- Oauth
Enter the name of your Application + your e-mail
Application homepage: Front-End URL - Access
…/auth/userinfo.email
…/auth/userinfo.profile - Save
Identifiers
- Creating identifiers
Select OAuth customer ID and select Web application - Javascript autorisation
- Front-End URL
- http://localhost:1337 - Authorized redirect URIs
- http://localhost:1337/api/connect/google/callback (it’s the disabled field URL in strapi/providers/google) - Save and download the JSON file
Now in Strapi
- Go to the Settings section and click on Providers
- Click on Google
- Set enable and enter the credentials
The redirect URL to your front-end app:
- http://${Front-End URL}/connect/google/redirect
Front-end
Create the Google Sign-in Button
// I advise you to use environnement variable for the path
<a href="http://localhost:1337/api/connect/google">
Sign-in with Google
</a>
Create a route called Redirect accessible with this URL: /connect/google/redirect
In Vue3:
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '@/views/HomeView.vue'
import Redirect from '@/views/Redirect.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
path: '/',
name: 'home',
component: HomeView
},
{
path: '/connect/google/redirect',
name: 'redirect',
component: () => import('@/views/Redirect.vue')
}
]
})
export default router
Once the page Redirect is loaded launched this code:
try {
const res = await axios.get(`/api/auth/google/callback${location.search}`)
console.log(res) => { jwt, user: { username: string, … } }
/*
Now set the jwt in localStorage or Cookies, once you have finished setting
data, redirect the user to your logged page
*/
} catch (err) {
console.error(err)
}
How to get more info from Google?
- Go to the Strapi folder and go to this file: src/index.js
- Add some magical code 🪄
"use strict";
module.exports = {
register({ strapi }) {},
async bootstrap({ strapi }) {
// Get the Google Provider services
await strapi
.service("plugin::users-permissions.providers-registry")
.register(`google`, ({ purest }) => async ({ query }) => {
const google = purest({ provider: "google" });
/*
Once the user clicks on the Google button get the access_token
and called the Google endpoint oauth2/v3/userinfo to get more
informations about the user
*/
const res = await google
.get("https://www.googleapis.com/oauth2/v3/userinfo")
.auth(query.access_token)
.request();
/*
Do not hesitate to log body looks like and used it to return
some data
*/
const { body } = res;
/*
The returned Object is the Object which sends to the Database
to create a User
*/
return {
email: body.email,
firstname: body.given_name,
lastname: body.family_name,
picture: body.picture,
provider: "google",
username: body.name,
};
});
},
};
Tadam!
If you have followed all the steps described so far, everything should work fine now! Feel free if you have questions and if you know an even better way to do it, please tell me. We’re often looking for passionate people at Le Collectionist, so don’t hesitate to have a look at our job list page but you can also write to me directly here or here.
Credits:
Fluent emoji