[Auth Providers] how to add scope for google

Questions and Answers Strapi Backend
25

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.js → bootstrap() 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