Prefilling email address for hosted login page

[ttchuah]

I have a React app that’s connecting to a new Auth0 tenant for login. I am using the hosted login page.

I’m interested in prefilling the login page with an email address that would be passed in from the client side. The closest I’ve been able to get to this is:

WebAuth.authorize({
          prompt: "login",
          state: "test@email.com"
 });

However, I’m unable to get the value of state on the login page.

Any ideas on how I can accomplish this?

[nicolas_sabena]

Hi @ttchuah

The OIDC parameter for this is login_hint.You can do something like this:

WebAuth.authorize({
          prompt: "login",
          login_hint: "test@email.com"
 });

On the hosted login page, you will be able to access that value. The default template picks it up and passes it to Lock’s prefill option, like this:

    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    [...]
    var loginHint = config.extraParams.login_hint;
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      [...], // other Lock options
      prefill: loginHint ? { email: loginHint, username: loginHint } : null,
      [...] 
    };

The state parameter has a different use: is for the client application to pick up any previous state and to validate that the response received from the authorization server matches a corresponding authorization response (and thus prevent CSRF login attacks).