Can you use Universal Login page for both passwordless AND "standard" login?

Help
,
5

Hi @daniel_p.
A quick clarification is in line first, to avoid confusions. Lock (and Auth0.js) are currently used in two scenarios:

  • Embedded Login, where the SPA application itself collects the user credentials (i.e. you put Lock or a couple of text fields in your own application and Auth0.js to send those to Auth0).
  • Universal Login, where the user credentials are collected by the page hosted by Auth0, either by Lock or by custom-drawn text fields + Auth0.js.

So this line:

As far as I’ve been able to gather from these docs and this forum, the Lock page does not work on certain browsers and it is the Universal Login page that Auth0 is recommending.

should be more like:

[…] embedded login does not work on certain browsers […]

As Dan said, you can use Auth0.js plus custom HTML/CSS/Javascript in the Universal Login page to ask the user which login method they prefer to use (password/passwordless), collect the credentials, and use Auth0.js’s method to continue the login flow.

But there could be a simpler way: customize the hosted login page to show either Lock or Passwordless Lock depending on a user selection done in the login page itself.

I.e. the page loads, you ask the user (via HTML/Javascript) their login method, and then instantiate Lock or LockPasswordless depending on the selection.

You should look at how the default templates for Lock and for Lock Passwordless work for the exact constructor syntax and options, and you’ll need to provide your own logic for the user selection.

You’ll end up with something like this:

[..] // user selects the login method and, based on selection, you call "showLogin()"

function showLogin(usePasswordless) {
  if (usePasswordless) {
    var lockPwdless = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
      [...]
    });
    lockPwdless.show();
  } else
  {
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, {
      [...]
    });
    lock.show();
  }
}

Hope this helps.

2 Likes