How to use Google SSO with Strapi

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

1. Oauth
   Enter the name of your Application + your e-mail
   Application homepage: Front-End URL
2. Access
   …/auth/userinfo.email
   …/auth/userinfo.profile
3. Save

Identifiers

1. Creating identifiers
   Select OAuth customer ID and select Web application
2. Javascript autorisation
   - Front-End URL
   - http://localhost:1337
3. Authorized redirect URIs
   - http://localhost:1337/api/connect/google/callback (it’s the disabled field URL in strapi/providers/google)
4. 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?

1. Go to the Strapi folder and go to this file: src/index.js
2. 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