Auth0 Home Blog Docs

SMS login: Country code undefined after reopening widget

login
auth0-lock
react
passwordless-sms

#1

I am using Auth0 Lock (SMS Passwordless login) within a React app. I have a button that prompts the user to login, which displays the Lock widget. When I first load the page and click to login, the Lock dialog pops up with the correct default fields: a dropdown select field for country code and a field for phone number. I am able to login without issue.

However, if I close the Lock dialog without logging in, and click the button again to login, the country code field displays ‘undefined undefined’ – and if I attempt to click the dropdown, the console shows an error: Cannot read property ‘map’ of undefined (list.js:203).

If I refresh the page, the dialog works properly again.

I checked the logs and see the following:

Failed silent auth

"error": {
      "message": "Login required",
      "oauthError": "login_required",
      "type": "oauth-authorization"
    }

Not sure what is happening here. Any thoughts? Happy to provide additional information / code as applicable.


#2

UPDATE: I tried cloning the embedded-login branch from the auth0-react-sample. In src/Auth/Auth.js, I imported Auth0LockPasswordless and changed the instantiation from new Auth0Lock to new Auth0LockPasswordless. The above bug still occurs.

For now, the workaround I’ve found is setting the closable: false parameter when creating the instance of Auth0LockPasswordless:

lock = new Auth0LockPasswordless(AUTH_CONFIG.clientId, AUTH_CONFIG.domain, {
    autoclose: true,
    auth: {
      redirectUrl: AUTH_CONFIG.callbackUrl,
      responseType: 'token id_token',
      params: {
        scope: 'openid'
      }
  },
  closable: false
  });

I’m leaving this open in case someone from Auth0 has any additional insights or fixes.