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

[daniel_p]

I have two categories of users on my application (internal employees and external customers). The former logs in with google-oauth-2 and the latter with passwordless sms links.

Currently I use the Universal Login page for the email/oauth login and it has worked really well.

I’d now like to start sending my passwordless logins to the Universal Login page too. Is it possible for that page to handle both use cases?

[dan.woda]

Hi @daniel_p,

This is not currently supported in the Lock widget itself; our recommendation for handling these requirements is to use Auth0.js with a custom UI, rather than Lock. This provides the flexibility you need to build the UI as per your requirements.

https://auth0.com/docs/libraries/auth0js/v9

Let me know if this helps,
Dan

[daniel_p]

Hi Dan, thank you for the quick turnaround!

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.

My central problem: these days iOS Safari, among other browsers, has third party cookies disabled by default. This causes the Lock page to fail unless you also use a custom domain. Unfortunately, the custom domain is only available to paid plans, and since we are bootstrapping our startup, we can’t afford to pay $745/month right off the bat (we make use the Management API).

[nicolas_sabena]

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.