Send Additional Parameters to the Authorization Endpoint with the React SDK

Knowledge Articles
, , , ,
1

Last Updated: Nov 12, 2024

Overview

This article describes how to send additional parameters when using React SDK to the authorization endpoint (/authorize), in addition to the ones that can be set using the options explicitly available within Auth0Provider.

Applies To

  • React SDK
  • Additional Parameters
  • /authorize endpoint

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 as the Auth0ProviderOptions allow to set arbitrary keys beyond the ones explicitly covered. For example, in order to send the parameter acr_values the provider could be configured 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 covered explicitly by the provider options or for fully custom parameters. The property name set in the provider for the additional parameter must match the parameter name that needs to be sent exactly. In other words, additional parameters are sent as is, so a property named acr_values is sent as acr_values while a property named acrValues will be sent as acrValues.

The above capability is mentioned in the Indexable section of this document. Keep in mind that 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 for 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 perform an operation 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 });