How to Supply Custom Query Params to okta-auth-js

Need to be able to supply custom query parameters to the /authorize call when using the Okta Widget or Okta Auth JS SDK.

• Okta Identity Engine (OIE)
• Okta Classic Engine
• okta-auth-js
• Embedded Widget
• OAuth/OIDC

As of okta-auth-js 5.9.0 a new option was introduced to the auth configuration to allow setting custom query parameters.

This can be configured in 3 different ways.
 

oktaSignIn = new OktaSignIn({
  baseUrl: baseOktaURL,
  clientId: appClientID,
  authParams: {
  ...
    extraParams: { 
      custom_key: 'custom_value',
    },
    scopes: ['openid', 'profile', 'groups', 'offline_access'], 
  },
...
});

const authClient = new OktaAuth({
  url: baseOktaURL,
  ssuer: baseOktaURL + '/oauth2/default',
...
...
  extraParams: { 
     custom_key: 'custom_value', 
  },
  scopes: ['openid', 'profile', 'email', 'offline_access']
});

  const tokenParams: TokenParams = {
    scopes: ['openid', 'email', 'custom_scope'],
    extraParams: {
      custom_key: 'custom_value',
    },
  };
  authClient.token.getWithRedirect(tokenParams);

Any of the above will result in a /authorize call which includes the custom_key=custom_value as part of the query params sent to Okta.

https://{DOMAIN}.okta.com/oauth2/default/v1/authorize?client_id=0o...&response_type=code&response_mode=form_post&scope=openid offline_access&redirect_uri=https://...&state=state...&nonce=855...&custom_key=custom_value

A common use case to supply custom parameters for the authorize call is the ability to retrieve those values via a token inline hook .