Passing custom parameters to pre-registration action from New Universal Login

[sanjin.o]

Hi all,

We are investigating pre-registration actions and we are using GitHub - auth0/auth0-react: Auth0 SDK for React Single Page Applications (SPA) library with “New Universal Login”.

Are we able to pass a custom parameter from to Auth0 sign-up page and forward it to the pre-registration action (after the user clicks on the sign-up button)?

We need those parameters only during the registration process. We need to use that parameter to determine if the user is eligible for registration or not by calling some external API from pre-registration action.

Our users are stored in the Auth0 database and we do not use social login, only registration with the user’s email address. Our Auth0 flow is Authorization Code Flow with PKCE.

Thank you very much in advance.
Sanjin

[rueben.tiow]

Hi @sanjin.o,

Thanks for reaching out to the Auth0 Community!

I understand that you’d like to know if you can pass a custom parameter from the sign-up page to a Pre-Registration Action to determine a user’s eligibility to sign up on your app.

Yes! This is possible. The custom parameters you pass to the /authorize request can be retrieved in the event.request property in the Pre-Registration Action. See the Event Object for more properties.

Below is an example that denies access to a user conditionally on some custom parameter passed.

exports.onExecutePreUserRegistration = async (event, api) => {
  if (event.request.YOUR_PARAMETER === "SOMETHING") {
    api.access.deny(YOUR_REASON, YOUR_MESSAGE);
  }
};

Please let me know how this works for you.

Thank you.

[sanjin.o]

Hi @rueben.tiow,

thank you for your reply.

Please explain to me how to call /authorize endpoint from GitHub - auth0/auth0-react: Auth0 SDK for React Single Page Applications (SPA) as there is only loginWithRedirect(options) available to call from createAuth0Client function.

.

Also, do we have to have a custom Login/Sign up Page which will hold custom parameter and pass it to Auth0 sign-up/registration endpoint ? If the custom login page is required, how to fetch custom parameter from the Auth0 React SDK ?

This is our desired flow:
1.) Auth0 SDK sends “customParameter”
2.) Auth0 Sign-up Page receives “customParameter” and forwards it to “Pre-Registration Action” where we can fetch it with the example which you have provided in “onExecutePreUserRegistration” function. If it is necessary.

Note: We are not using Auth0 Management API for sign-up or login process. We only want to use Auth0 React SDK.

Thank you very much in advance for your help.
Sanjin

[rueben.tiow]

Hi @sanjin.o,

Thank you for your response.

Let me take a step back and clarify a few things.

When calling the loginWithRedirect(options) function, you are inherently calling the /authorize endpoint. This endpoint is a reference to the Auth0 Authentication API.

In essence, the Auth0 React SDK uses Authorization Code flow with PKCE, which begins by calling the /authorize endpoint to exchange for an authorization code.

Now, circling back to your desired use-case, what you’ll need to do is to pass the custom parameter to the loginWithRedirect function as you’ve done so, and it will be passed into the query URL.

Then you can use this parameter with the Pre-User Registration Action, to obtain that parameter to allow or deny access.

See below: I passed person_1=true as my custom parameter and it’s in the Request URL.

Then, from here, you can use the Pre-User Registration Action Script to get your custom parameter and allow/deny access to the user. The script will trigger after the user presses the Sign Up button.

Finally, I’d like to point out that the screenshots you have shared with me are consistent with the Auth0-spa-js and not the Auth0-react.

Regardless, the approach I offered will work with the Auth0-spa-js SDK.

Please let me know if you have any other questions. I’d be happy to clarify!

Thank you.

[sanjin.o]

Hi @rueben.tiow,

thank you for the explanation in your reply above.

1.) I’m able to see my custom parameter when the /authorize endpoint is called:

2.) After clicking “Continue” button (screenshot below), I’m not able to find the custom parameter named “myCustomRegisterParam” in the Pre-User Registration action and object event.request. I have also console.logged the entire event.request object and observed it in monitoring logs (also in the Real-time Webtask Logs extension) but the custom parameter is not present in the event.request object.

My Pre-User Registration action:

Webtask log:

I had some hooks and rules present in my Auth0 account and I have deleted them all just to be sure that something is not interrupting this process, but I had no luck.

What we can do next? Thank you very much in advance.
Sanjin

[rueben.tiow]

Hi @sanjin.o,

Thank you for your response and clarification.

After further testing, I found that the event.request.query parameters are only shown during Post-Login and never during Pre-User or Post-User Registration scripts.

Initially, I tested using the internal debugger in Actions and did not encounter this issue. That was because the test event request could be manipulated to my desire and always produced the results within the event.request object.

Since we are passing custom parameters to the URL, we need to be able to get the query parameters.

At this point, there does not seem to be a way to obtain these query parameters with the Pre-User Registration Hook. Meaning that you can only allow/deny access based only on the defined event object properties.

For now, I will reach out to our Engineers to see if there are any workarounds to make this work.

Once I receive new information, I will relay that to you.

Thank you.

[sanjin.o]

Hi @rueben.tiow,

thank you for your answer. Do you have any workaround or solution to make this work ?

Best regards,
Sanjin

[rueben.tiow]

Hi @sanjin.o,

Thank you for your response.

After collaborating with other Engineers, I confirmed that it is not possible to obtain the query parameters with the Pre-User Registration Action. Our Engineers also informed me that this could present the risk of the end-user manipulating the URL.

If applicable for a workaround, you could try using an invitation flow by sending an email inviting the user to register. The invitation will allow the user to set their password and gain access to your application. A user invitation is essentially a change password link repurposed as an invitation. You can learn more about this in our Send Email Invitations for Application Signup documentation.

Please let me know if this works for you. Otherwise, could you please provide more clarity on your intended flow on allowing/denying users to sign up?

Thank you.