Passing custom query parameters in authorize endpoint

[mtolkas]

What problem does this feature solve?

The option to pass custom query params in the authorize endpoint (in this scenario for Auth0) can help in the following scenarios:

1. Extract and use the params in Auth0 Rules (for example, on sign up, a parameter can be used to determine the Role that a user should be assigned to, via a Rule)
2. Setting the language for the Universal Login page (by passing the relevant passcode via the language param, and then extracting it at the Auth0 side)
3. Setting the audience in the configuration without the need to set a global one in the Auth0 dashboard (this point is also discussed here and is pending merge, but only for the audience param)

What does the proposed changes look like?

Looking at /lib/schemes/oauth2.js, method login(), we see that the options are hardcoded before passed for encoding. Inside this opts object we can destructure the custom properties that we’ll want to pass to the authorize endpoint, like so:

  login () {
    const opts = {
      // no change needed, only adding the line below  
      ...(this.options.custom_props.length ? Object.assign({}, ...this.options.custom_props.map(el => el)): {}),
    }
     //no change needed

Then, in the app's code we can add an arbitrary set of query parameters like so:

this.$auth.strategies.auth0.options.custom_props = [{ customParamKey: 'customParamValue' }, { language: 'fr' }];

_{This feature request is available on Nuxt community (#c321)}

[web3devin]

I would reread the documentation for schemes. You can write your own scheme. This is useful if you are using a more complex auth0 configuration than what the default provider can provide.

For instance, if you need to use the cross-origin authentication then you can also write your own scheme for that purpose.

[mtolkas]

@web3devin thanks a lot this helped. For any future reader, what I ended up doing is basically copy the existing oauth2 scheme mentioned on my 1st comment into a js file in the app and referenced it as a custom scheme. Inside the login() method, I added the additional options I needed to pass to the authorize endpoint and it works as expected.

In a bit more detail, the module config in nuxtconfig.js looks like:

    strategies: {
      auth0custom: {
        _scheme: '~/pathTo/customAuthStrategy.js',
        authorization_endpoint: `https://${domain}.auth0.com/authorize`,
        userinfo_endpoint: `https://${domain}.auth0.com/userinfo`,
        scope: ['openid', 'profile', 'email'],
        domain: `${domain}.auth0.com`,
        client_id: 'the_client_id',
        language: 'en',
        audience: 'your_audience_here',
        customProp: 'custom_value',
      },
    }

The login() method in the customStrategy.js now includes my custom options like so:

  login() {
    const opts = {
      protocol: 'oauth2',
      response_type: this.options.response_type,
      client_id: this.options.client_id,
      redirect_uri: this._redirectURI,
      scope: this._scope,
      state: randomString(),
      language: this.options.language,
      audience: this.options.audience,
      customProp: this.options.customProp,
    };

Then before calling the login() in the page, I will set any options on the fly e.g. when I want to change the language etc.

this.$auth.strategies.auth0custom.options.language = 'el';
await this.$auth.loginWith('auth0custom');

Thanks.

[zhangpengchen]

@web3devin thanks a lot this helped. For any future reader, what I ended up doing is basically copy the existing oauth2 scheme mentioned on my 1st comment into a js file in the app and referenced it as a custom scheme. Inside the login() method, I added the additional options I needed to pass to the authorize endpoint and it works as expected.

In a bit more detail, the module config in nuxtconfig.js looks like:

    strategies: {
      auth0custom: {
        _scheme: '~/pathTo/customAuthStrategy.js',
        authorization_endpoint: `https://${domain}.auth0.com/authorize`,
        userinfo_endpoint: `https://${domain}.auth0.com/userinfo`,
        scope: ['openid', 'profile', 'email'],
        domain: `${domain}.auth0.com`,
        client_id: 'the_client_id',
        language: 'en',
        audience: 'your_audience_here',
        customProp: 'custom_value',
      },
    }

The login() method in the customStrategy.js now includes my custom options like so:

  login() {
    const opts = {
      protocol: 'oauth2',
      response_type: this.options.response_type,
      client_id: this.options.client_id,
      redirect_uri: this._redirectURI,
      scope: this._scope,
      state: randomString(),
      language: this.options.language,
      audience: this.options.audience,
      customProp: this.options.customProp,
    };

Then before calling the login() in the page, I will set any options on the fly e.g. when I want to change the language etc.

this.$auth.strategies.auth0custom.options.language = 'el';
await this.$auth.loginWith('auth0custom');

Thanks.

In 2020 you can try loginWith('auth0', { params: { prompt: 'login', ui_locales: 'nl' } })