Auth0 React: Pass custom data to liquid forms

[david48]

Hi there. I’m working with a react front end application using the Universal Login. I have a use case that requires me to show some messaging on the login/signup form depending on the guarded route that was chosen. So far all attempts at getting the data into the liquid template have failed. Should I avoid liquid templates all together? Do i need to revert to embedded login to get the interaction i require?

I configured my route:

<Route
            path="/dashboard"
            element={
              <AuthenticationBoundary component={Dashboard} args={{
                loginOptions: {
                  appState: {
                    'testing123': 'foo',
                    'ext-something': 'hello'
                  }
                }
              }}/>
            }
          />

My authentication boundary

type RequireAuthProps = RootProps & {
  component: React.ComponentType<object>;
  args?: WithAuthenticationRequiredOptions;
};

function AuthenticationBoundary({
  component,
  args,
}: RequireAuthProps): JSX.Element {
  const Component = withAuthenticationRequired(component, args);
  return <Component />;
}
export default AuthenticationBoundary;

And the auth0 provider code:

return (
    <Auth0Provider
      domain={Tenant}
      clientId={ClientID}
      authorizationParams={{
        redirect_uri: `${window.location.origin}${nextPage}`,
        responseType: 'response_type',
        forgotPasswordLink: 'uri',
        'ext-randomText': 'Hello there',
      }}
      cacheLocation="localstorage"
      onRedirectCallback={onRedirectCallback}
    >
      {children}
    </Auth0Provider>
  );

The liquid template syntax (just to confirm the output… or lack there of):

<h1>{{ ext-sample | default: "Sample param not available"}}</h1>
<h1>{{ sample | default: "Sample param not available"}}</h1>

[keov5991]

[keov5991]

@david48

window

**
![1708323970354|366x499](upload://sq4GqncsfrkbaxBINp9ntLUHtEi.png)


**

128000

[david48]

Here’s the guide i used to create the liquid template: Building Beautiful Login Pages with Auth0

[david48]

Please ignore the obvious error in the code snippets. I did replace the variables in the liquid template to match the code examples above and got the “Sample param not available” text

[bajcmartinez]

hi @david48, welcome to the Auth0 community!

There are a few things to keep into consideration with what you are trying to build, first let me point out, since you read the article on “Building Beautiful Pages” that the command mentioned on the article is outdated, and though still valid, there’s a new recommended command:

auth0 universal-login customize

This provides a new interface, which makes it much easier to fully customize your login experience. You probably already found this out, as the CLI will advice this new command when using the previous one.

On regards to your code, I wouldn’t recommend to alter appState when calling withAuthenticationRequired, instead pass your parameters using authorizationParams as follows:

export default withAuthenticationRequired(YourComponent, {
  loginOptions: {
    authorizationParams: {
      'ext-testing123': 'foo',
      'ext-something': 'hello'
    }
  }
});

Please name your param names with the prefix ext-. Then you can add the following on your liquid template:

<b>testing123:</b>{{ transaction.params.ext-testing123 }}
<b>something:</b>{{ transaction.params.ext-something }}

Hope this helps,
Thanks!

Juan

[david48]

Thank you so much, Juan. I tested it out and it worked as expected. Thank you for pointing out the use of the authorizationParams over appState.

I went further to test to see if adding the authorizationParams in the Route component would overwrite the ones added on the Auth0Provider component. It does not, I was able to access params from both as long as they were prefixed with the ext- so that’s a huge plus. Thanks again!