Pass Additional Parameters to the Universal Login URL in Auth0
Last Updated:
Overview
This article details how to pass additional parameters to the Universal Login URL.
Applies To
- Universal Login
- Additional Query Parameters
- Authorize request
Solution
It is possible to send custom parameters when performing an /authorize request that can be used by the Universal Login page templates. These custom query parameters must have an ext- prefix. These parameters can be added manually to the request, as in the following example:
http://{tenant-name}.{region}.auth0.com/authorize?response_type=code&client_id={client_id}&ext-CustomParam=1&ext-TestParam=2
If using one of the Auth0 SDKs to create the /authorize request, pass the custom parameters to the /authorize request when creating the Auth0 object in the application code. This is an example of how the additional parameters can be added to the /authorize request when using NextJS-Auth0 SDK:
export const auth0 = new Auth0Client({
authorizationParameters: {
scope: "openid profile email",
audience: "urn:custom:api",
ext-param: "value"
}
});NOTE: The query parameters cannot be passed to /login. Extra parameters must be added to the /authorize request and then accessed in the login page template.
Accessing Custom Parameters in the Login Page Template
Once the custom query parameters have been passed to the /authorize request, they can be accessed within the Universal Login page template using Liquid syntax. The parameters are exposed through the transaction.params object, with the ext- prefix preserved.
For example, to access the ext-CustomParam and ext-TestParam values sent in the URL above, reference {{ transaction.params.ext-CustomParam }} and {{ transaction.params.ext-TestParam }} in the HTML:
<!DOCTYPE html>
<html>
<head>
{%- auth0:head -%}
</head>
<body>
{%- auth0:widget -%}
</body>
<pre style='background: wheat'>
<b>Value of the ext-CustomParam parameter:</b> {{ transaction.params.ext-CustomParam }}
<b>Value of the ext-TestParam parameter:</b> {{ transaction.params.ext-TestParam }}
</pre>
</html>
