[Auth Providers] how to add scope for google

@Gwenole_Midy Instead of overriding whole user permissions just to add scope for SSO auth.
I used a different approach for it which found out to be a easy solution.
I copied the purest SSO code into my src\extensions\users-permissions\strapi-server.js and added the scopes I wanted from Facebook but please note there isn’t any way to add scopes for google.

I hope this will help someone :slight_smile: .

Seems way better !

Do you have the whole completes files and folder ?

No. You don’t have to copy any file or folder for this, just the provider callback code to use for SSO purpose.

In case someone finds this thread through Google like I did, I think this is an easier and better way to achieve this:

In the server bootstrap use the register functionality of the provider-registry to override the logic of an existing provider or add a new one.


[Note: Strapi v4.12.6]
For example in my case I wanted to add saving a users firstname and lastname when they log in via the microsoft provider:

  1. The original Strapi code for calling and processing the provider – as mentioned by Shekhar above – can be found in
    /node_modules/@strapi/plugin-users-permissions/server/services/providers-registry.js

  2. Copy the existing function for the provider you want to modify. I.e. in my case:

// node_modules/@strapi/plugin-users-permissions/server/services/providers-registry.js

// ...
async microsoft({ accessToken }) {
    const microsoft = purest({ provider: 'microsoft' });

    return microsoft
      .get('me')
      .auth(accessToken)
      .request()
      .then(({ body }) => ({
        username: body.userPrincipalName,
        email: body.userPrincipalName,
      }));
  },
// ...
  1. In /src/index.jsbootstrap() create a function that returns your own provider-function. You can use the code we just copied as a basis and modify it to your needs. For example as Shekhar mentioned above adding scopes to facebook or in my case just adding firstname and lastname to the user object.
    Then lastly, call the register function of the provider-registry to register your provider logic. If there was already an entry registered for the provider, it will be overridden.
// src/index.js
'use strict';

module.exports = {
  // ...
  async bootstrap(/*{ strapi }*/) {
    //...

    //  declare a provider function, which gets firstname and lastname
    const microsoftProvider = ({ purest }) => {
      return async ({ accessToken }) => {
        const microsoft = purest({ provider: 'microsoft' });
    
        return microsoft
          .get('me')
          .auth(accessToken)
          .request()
          .then(({ body }) => ({
              username: body.userPrincipalName,
              email: body.userPrincipalName,
              firstname: body.givenName, // added
              lastname: body.surname, // added
          }));
      };
    }

    // register new provider, overriding existing microsoft provider
    strapi.plugin('users-permissions').service('providers-registry').register('microsoft', microsoftProvider);
  },
};

There are probably other (and maybe better?) ways to do this, but generally I think this is an ok approach, achieving the goal by adding only a few lines of code to the bootstrap and staying generally relatively update-safe.
It’s also pretty flexible, since all you need to do is make sure you return a proper user object and can achieve that in whatever way you wish.

I hope this helps someone :slight_smile:

1 Like

in production mode user information was reduced to the essential user information includes the user’s email, picture, and email verification status, how should i do to retrieve all the above data?
how to oblige the “https://www.googleapis.com/oauth2/v3/userinfo” in production mode to return more than the essentials user info.

Thank you! This is exactly what I was looking for. I was trying to save additional details from the OAuth profile response.

:raised_hands: