Passing Custom Parameters to Pre-User Registration Actions

Overview

This article describes how to capture and pass custom query parameters to a Pre-User Registration Action using Universal Login Flow. 

Applies To
  • Universal Login Page
  • Auth0 Database Connections
  • Pre-User Registration Actions
Solution

By default, custom query parameters passed via the Auth0 SDK are not accessible within the Pre-User Registration Action. To capture these parameters and save them as app_metadata or user_metadata during signup, the parameters must be sent with the ext- prefix, and then Auth0 Universal Login Partials should inject them into a hidden ulp- field.

 

Prerequisites

Custom Domain: This solution relies on Page Templates/Partials, which require a Custom Domain to be configured.

Database Connections Only: This solution works exclusively with Auth0 Database connections during the signup flow.

The tenant must be using Universal Login, and the "Customise Login Page" toggle (Classic Login) must be disabled.

 

Pass the parameter from the application

  1. Locate the login method call within the application code.
  2. Append the custom parameter to the authorizationParams object.
  3. Prefix the parameter name with ext-.
// Example using the Auth0 Angular SDK
this.auth.loginWithPopup({
  authorizationParams: {
  'ext-my_custom_param': 'your_custom_value' // The param to save
  }
});

 

Update the Signup Prompt via Partials

Inject the parameter into the HyperText Markup Language (HTML) payload of the signup form.

NOTE: Auth0 strips out standard <input type="hidden"> elements. To bypass this, use a standard text input but hide it using inline CSS (type="text" style="display: none;").

<input 
  type="text" 
  style="display: none;" 
  name="ulp-my_custom_param" 
  value="{{ transaction.params['ext-my_custom_param'] | escape }}" 
/>

 

Option A: Identifier First Login

If the tenant requests the email first and the password on a separate screen, update the signup-id prompt:

curl --request PUT \
  --url 'https://[TENANT-NAME].[REGION].auth0.com/api/v2/prompts/signup-id/partials' \
  --header 'Authorization: Bearer YOUR_MANAGEMENT_API_TOKEN' \
  --header 'Content-Type: application/json' \
  --data '{
    "signup-id": {
      "form-content-end": "<input type=\"text\" style=\"display: none;\" name=\"ulp-my_custom_param\" value=\"{{ transaction.params['\''ext-my_custom_param'\''] | escape }}\" />"
    }
  }'

Option B: Identifier + Password Login (Standard)

If the tenant asks for both the Email and Password on the exact same screen, update the standard signup prompt:

curl --request PUT \
  --url 'https://[TENANT-NAME].[REGION].auth0.com/api/v2/prompts/signup/partials' \
  --header 'Authorization: Bearer YOUR_MANAGEMENT_API_TOKEN' \
  --header 'Content-Type: application/json' \
  --data '{
    "signup": {
      "form-content-end": "<input type=\"text\" style=\"display: none;\" name=\"ulp-my_custom_param\" value=\"{{ transaction.params['\''ext-my_custom_param'\''] | escape }}\" />"
    }
  }'

 

Access the parameter in the Action

  1. In the Pre-User Registration Action, retrieve the custom parameter from the event.request.body object.
  2. Save the value to the user metadata.
exports.onExecutePreUserRegistration = async (event, api) => {

  // 1. Grab the value from the form submission payload
  const myCustomParam = event.request.body['ulp-my_custom_param'];

  // 2. Validate and write to app_metadata (or user_metadata)
  if (myCustomParam) {
    //api.user.setAppMetadata("my_custom_param", myCustomParam);
    api.user.setUserMetadata("my_custom_param", myCustomParam);
  }
};

 

Warning

  • Query parameters can be easily manipulated by an end-user in their browser's address bar.
  • Perform backend validation inside the Action if the parameter is sensitive (for example, a "beta invite code" or "role ID"), the Action must validate it against an external API or signature before trusting it and saving it to metadata.

 

Recommended content

No recommended content found...