Send Additional Parameters to Authorization Endpoint with React SDK

Knowledge Articles
, , , ,
1

Problem Statement

When using the React SDK (GitHub - auth0/auth0-react: Auth0 SDK for React Single Page Applications (SPA) ), how to send additional parameters to the authorization endpoint (/authorize)?

Solution

If the parameter is not covered by one of the explicit properties available in Auth0ProviderOptions, the additional parameter can still be directly set in the Auth0Provider. For example, to send the parameter acr_values we can configure the provider as below:

<Auth0Provider
    domain="[YOUR_AUTH0_DOMAIN]"
    clientId="[YOUR_AUTH0_CLIENT_ID]"
    redirectUri={window.location.origin}
    // additional parameters can be set directly
    acr_values="http://schemas.openid.net/pape/policies/2007/06/multi-factor""
    // ...
>
    <App />
</Auth0Provider>

The approach can be used either for additional standard parameters not explicitly covered by the provider options OR for fully custom parameters. For the additional parameters, the property name set in the provider must exactly match the parameter name that needs to be sent. In other words, a property named acr_values is sent as acr_values.

Please refer to the Indexable section of (Auth0ProviderOptions | @auth0/auth0-react ) for details.

Please be noted that the parameters set at the provider level will be sent for all flows associated with the provider. If the custom parameter needs to be sent only in a specific scenario, it may be possible to achieve that by setting the parameter as an option to the method called as part of that scenario. For example, if the parameter should only apply when getting an access token silently:

getAccessTokenSilently({ "x_custom_parameter": "value" });

Relying on something similar to the above, it is also possible to set a parameter at the provider level and then exclude it only in specific scenarios. Assuming the provider was set with acr_values it would be possible to get an access token silently without including the acr_values set at the provider level by performing the following method call:

getAccessTokenSilently({ "acr_values": undefined });