How to pass additional parameters as object from react js(Client) to Auth0 Universal Login page

[vora.da]

Hey Folks!

I’m using additionalSignUpFields for my custom SignUp page in Auth0 custom Classic Universal Login page. I am trying to pass the object from the client to Classic Universal Login when I redirect to the My_Domain_Name/login. I want to set the drop-down values which I get from my client(in select type fields in additionalSignUpFields options). I’m not sure how to pass the object with loginWithRedirect() while redirecting to the universal login page.

It would be really great if someone can help me to implement this functionality.

Best,
Darshana

[stephanie.chamblee]

Hi @vora.da,

I will do some research on this! Just to make sure I understand the functionality you’d like to implement, do you want to be able to pre-populate the group and/or role fields in your screenshot based on values passed to the loginWithRedirect method?

[vora.da]

Yes, that is correct! I want to pre-populate the drop-downs by passing the parameters with loginWithRedirect method or by any other possible way. Just to be clear I’m using the custom login page option in the universal login page and for signup fields, I’m using additionalSignUpFields.

additionalSignUpFields: [
{
name: “name”,
placeholder: “enter full name”
},
{
name: “university”,
placeholder: “university”
},
{
type: “select”,
name: “group”,
placeholder: “choose group”,
options:[
{value: “na”, label: “N/A”}
]
},
{
type: “select”,
name: “role”,
placeholder: “choose your role”,
options: [
{value: “faculty_pi”, label: “Faculty PI”},
{value: “student”, label: “Student”},
]
},
{
name: “phone”,
placeholder: “enter your phone number”,
validator: function(phone) {
return {
valid: phone.length >= 10,
hint: “must have 10 Digits”
};
}
}
]
});

So in the above code snippet, I don’t want to hardcode the select option values instead, I want to set the values from the object I pass from the client. Thank you.

[stephanie.chamblee]

Thank you for clarifying!

What you can do is pass the role and group values in the config.extraParams object.

In your application you could pass:

loginWithRedirect({role: “faculty_pi”})

And in the Lock configurations, you could reference the parameters:

var role = config.extraParams.role;

var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      // ... other configs
      additionalSignUpFields: [
        {
        type: 'select',
        name: 'role',
        placeholder: 'choose your role',
        prefill: role,
        options: [
          {value: 'faculty_pi', label: 'Faculty PI'},
          {value: 'student', label: 'Student'},
        ]
        }
      ]
    });

However, the role value in this example would have to be listed in the field options. You could pre-fill the option you’d like with the prefill parameter.

[vora.da]

Hi Stephanie,

Thank you for your response!

I’m passing loginWithRedirect({role: “faculty_pi”}) in my application but I’m not getting faculty_pi option on the signup page. Do you there is any other way I could pass the {role: “faculty_pi”} object and prefill this option?

What prefill option does is it sets one of the option values which I have already hard coded into my additionalSignUpFields. Basically, it pre-populates the faculty_pi option for the role when the sign-up page appears.

What I’m trying to do is populate the value I pass with loginWithRedirect. I will not have that option hardcoded in my option to pre-populate it.

Let me know if you need any further clarification.

Thank you.

[stephanie.chamblee]

Oh, I see! Unfortunately, there is not a built-in way to implement dynamic options that are not hard-coded in the configs. You could pass an array of options like this:

loginWithRedirect({roleOptions: ['faculty_pi', 'student']})

and then in the Universal Login template, parse out the option values and labels with something like this:

    function formatOptionLabel(value) {
      var words = value.split("_");
      return words.map(function (word) { 
          return word[0].toUpperCase() + word.substring(1); 
      }).join(" ");
    }

    var roleOptions = (config.extraParams.roleOptions || '').split(',');
    var roles = roleOptions.map(function(role) {
      var roleLabel = formatOptionLabel(role);
      return {value: role, label: roleLabel}
    });

    // Available Lock configuration options: https://auth0.com/docs/libraries/lock/v11/configuration
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
   // ... other configs
      additionalSignUpFields: [
        {
        type: 'select',
        name: 'role',
        placeholder: 'choose your role',
        options: roles
        }
      ]

[vora.da]

Thank you, Stephanie! The above solution works fine.

As I mentioned earlier, I’m not sure how to pass the object with loginWithRedirect() while redirecting to the universal login page. I’m getting undefined in config.extraParams.role. I’m passing these extra paramters from /login endpoint.

[stephanie.chamblee]

Glad to hear the solution is working for you!

Regarding loginWithRedirect, which SDK are you using in your app? This code is what you’d use for SPAs (auth0-react, auth0-spa-js, etc.) If you are able to pass the params directly, then that works!

[vora.da]

Yes, I’m using auth0-react and I’m sending the parameter through loginWithRedirect options.

const LoginButton = () => {
const { loginWithRedirect } = useAuth0();
return (

<button className=“login-button” onClick={() => loginWithRedirect({role: ‘Student,N/A’})}> Log In

);
};

When I’m trying to access config.extraParams.role on the customized Universal Login Lock page, it shows undefined.