Switching from Email/Password to Phone + OTP on Hosted Login Page (Next.js + Auth0)

Get Help
,
1

Hi Auth0 Community :waving_hand:

I’m working on a Next.js project where Auth0 is being used for authentication. Initially, we implemented the hosted login page with Email + Password login, along with Google login as a social connection.

Everything was working fine.

:pushpin: What was the existing flow?

  • Hosted login page was used (Universal Login)
  • Enabled Database connection for email/password
  • Enabled Google connection for social login
  • In the frontend, we simply redirect to /api/auth/login to trigger the login flow.

:red_exclamation_mark: New Requirement:

The client now wants to remove email/password login completely, and instead:

  • Enable Phone number + OTP (SMS) login
  • Keep Google login as it is
  • Continue using Auth0’s hosted login page, right now im using auth0 universal login page.

They have already provided:

  • A working Twilio account (SID, Auth Token, phone number)
  • Full access to the Auth0 dashboard
  • Environment variables are correctly set in the project

:wrench: What I’ve done so far:

The code in my custom login when i select lock(password option) from the template option.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Sign In with Auth0</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>

  <!--[if IE 8]>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ie8/0.2.5/ie8.js"></script>
  <![endif]-->

  <!--[if lte IE 9]>
  <script src="https://cdn.auth0.com/js/base64.js"></script>
  <script src="https://cdn.auth0.com/js/es5-shim.min.js"></script>
  <![endif]-->

  <script src="https://cdn.auth0.com/js/lock/13.0/lock.min.js"></script>
  <script>
    // Decode utf8 characters properly
    var config = JSON.parse(decodeURIComponent(escape(window.atob('@@config@@'))));
    config.extraParams = config.extraParams || {};
    var connection = config.connection;
    var prompt = config.prompt;
    var languageDictionary;
    var language;

    if (config.dict && config.dict.signin && config.dict.signin.title) {
      languageDictionary = { title: config.dict.signin.title };
    } else if (typeof config.dict === 'string') {
      language = config.dict;
    }
    var loginHint = config.extraParams.login_hint;

    var lock = new Auth0LockPasswordless(config.clientID, config.auth0Domain, {
      auth: {
        redirectUrl: config.callbackURL,
        responseType: (config.internalOptions || {}).response_type ||
          (config.callbackOnLocationHash ? 'token' : 'code'),
        params: config.internalOptions
      },
      configurationBaseUrl: config.clientConfigurationBaseUrl,
      overrides: {
        __tenant: config.auth0Tenant,
        __token_issuer: config.authorizationServer.issuer
      },
      assetsUrl:  config.assetsUrl,
      allowedConnections: connection ? [connection] : null,
      rememberLastLogin: !prompt,
      language: language,
      languageBaseUrl: config.languageBaseUrl,
      languageDictionary: languageDictionary,
      theme: {
        //logo:            'YOUR LOGO HERE',
        //primaryColor:    'green'
      },
      closable: false
    });

    lock.show();
  </script>
</body>
</html>

Finally i got this Screen but when try to login then i’m getting bad request.

image
image1243×647 107 KB

I have tried all the thing but not working. Community please help me to out this. I’m suffering with this issue from last 20 days.

Any guidance, examples, or working configs would be really helpful — I have a client meeting soon and would love to clarify the flow properly.

Thanks in advance!

3

Hi @yadavshivharakhyadav

I was able to replicate the error that you are receiving when setting up the phone provider configuration inside the SMS Passwordless configuration.

Could you please try to set up Twilio under Branding → Phone Provider and set it up either under Twilio or a Custom Phone Provider? Once you have done so, under the SMS Passwordless configuration, enable Use Tenant-Level Messaging Provider.

Let me know if that fixes the issue!

Kind Regards,
Nik

4

Thanks for your response.

I’m now able to receive the OTP, but I’m facing an issue with receiving the actual message. I’m using a US-based Twilio number in my Auth0 passwordless connection. When I try to send an OTP to an Indian number, it works fine. However, when I try to send it to a US number, the OTP message is not being received.

Can you help me on this?

5

Did you try sending the sms code to the same number multiple times or tried different numbers?

I would suggest to try different phone providers to see if the sms messages are being received, if you are unable to try other numbers, please try to contact your phone provider to see if the messages are not being blocked on their end.

Kind Regards,
Nik