ACUL - Access to ext-* variables from login request

[brycen.rogers]

I need to send the referrer domain from the login request in order to implement a custom Forgot Password flow. My thought was to use the ext-* variable pattern that is supported by the existing Universal Login flow.

Reference: https://auth0.com/docs/customize/login-pages/universal-login/customize-templates#custom-query-parameters

However, I am not able to access these variables anywhere. It appears that they should be available on loginInstance.authorizationParams.untrustedData but it is always null.

import LoginInstance from "@auth0/auth0-acul-js/login";
const loginInstance = useMemo(() => new LoginInstance(), []);
const { transaction, screen, untrustedData } = loginInstance;

// Access authorization params
console.log(untrustedData.authorizationParams); <--- null

Here is an example login URL that is sent:

http://localhost:3000/auth/login?organization=org_123456789abc&audience=https%3A%2F%2Fauth-testing-api.example.io%2F&prompt=login&returnTo=http%3A%2F%2Flocalhost%3A3000%2F&ext-referrer=localhost%3A3000

I would expect to have access to untrustedData.authorizationParams['ext-referrer'] in this case, but all authorizationParams are empty.

I have filed Github issues for this question in two repositories but have not received any replies on them yet.

[QUESTION] Access to ext-* variables from login request

[QUESTION] Access to ext-* variables from login request

[nik.baleca]

Hi @brycen.rogers

Welcome to the Auth0 Community!

By any chance, is the external parameter you are passing through the URL available in the transaction? What I want to know if the passed in parameter is available if accessed as transaction.params.ext-referrer or transaction.params?

Kind Regards,
Nik

[brycen.rogers]

Hey @nik.baleca thanks for the reply,

I checked all properties available on the LoginManager with dev tools and I do not see it anywhere in the transaction. Based on the documentation of the LoginInstance in "@auth0/auth0-acul-js/login" it appears this data is expected to be within the untrustedData property.

Here is a screenshot of the dev tools to give you some insight, I have expanded the transaction object on the right

[nik.baleca]

Hi again @brycen.rogers

This might be caused by the fact that the custom query parameters are a feature of New Universal Login and they might not be parsed arbitrarily by LoginInstance since the configuration is populated by the Auth0 server and not by the current URL passed to the browser.

However, as a possible solution, you can try reading the parameter directly from the location of the browser by using window.location. You can do this as seen in this example below:

import LoginInstance from "@auth0/auth0-acul-js/login";

const loginInstance = useMemo(() => new LoginInstance(), []);
const { transaction, screen } = loginInstance;

// Read the parameter directly from the browser's URL as such:
const urlParams = useMemo(() => 
  new URLSearchParams(window.location.search)
, []);

const referrerDomain = urlParams.get('ext-referrer');

if (referrerDomain) {
  console.log('Referrer found:', referrerDomain);
}

Let me know if the proposed solution is able to fix your issue and if you have any other questions/challenges on the matter.

Kind Regards,
Nik

[brycen.rogers]

Hey @nik.baleca

Unfortunately the only query parameter available at the login screen at this part of the flow is the state parameter.

Example:

https://auth-testing.example.io/u/login?state=hqFo2SBwanB2T1dKS21JRzlaZE9xRzgzazhfRHpp...

Is this just simply not supported in ACUL anymore, or is this a bug?

Thanks

[nik.baleca]

Hi again!

Sorry, I completely forgot about the second redirect to the /u/login URL, that was an oversight on my part.

Could you please let me know what is the screen that you have configured for the specific transaction? Login/LoginId etc?

I would suggest to check out this documentation about the context object in ACUL where you should be able to access the passed in query parameters.

Also, what is the Node version you have configured your tenant to be using? You can find that under Settings → Advanced → Extensibility.

Kind Regards,
Nik

[brycen.rogers]

Thanks @nik.baleca - I got it working!

I needed to define the "context_configuraiton” on the settings.json file for the screen.

{
	"rendering_mode": "advanced",	
    "context_configuration": [
		"untrusted_data.authorization_params.ext-referrer"
	],
...

After deploying those changes, I am able to access the ext-referrer variable.

Thanks again!

[nik.baleca]

Thanks for letting me know and for sharing the solution with the rest of us!

If you ever run into any other issue, you can always post and I will be looking forward to seeing you around!

Kind Regards,
Nik