Using Passwordless Authentication in SPA with SMS

With the SMS connection, the user is requested to enter a phone number. Auth0 then uses Twilio to send a one time code to that number.

Once the user enters this code into your application, a new user will be created in the sms connection. The user is then authenticated by Auth0.

If the phone number matches an existing user, Auth0 just authenticates the user:

On mobile platforms, your application will receive an ID Token, the user profile and, optionally, a Refresh Token.


Open an account with Twilio

You will need a Twilio Account SID and a Twilio Auth Token. These are the Twilio API credentials that Auth0 will use to send an SMS to the user.

Configure the connection

In the Dashboard under Connections > Passwordless, set the SMS slider to the right to enable the SMS Passwordless feature.

Enter your Twilio Account SID and Twilio Auth Token in the appropriate fields.

For information on obtaining a Twilio SID and Auth Token, see: How to create an Application SID and Auth Tokens and how to change them.

Select the SMS Source that users will see as the sender of the SMS.

For information on using Copilot, see: Sending Messages with Copilot.

Enter either your Twilio Messaging Service SID or a From phone number, depending on the SMS Source selected above.

Lastly, enter the Message that will appear in the body of the SMS.

The @@password@@ placeholder in the Message will be automatically replaced with the one-time password that is sent to the user.

Click SAVE.

Multi-Language Support

The Message area supports usage of multiple languages.

By making a call to the /passwordless/start authentication endpoint, you can set the value of an 'x-request-language' header to the language of your choice. If the value of this header is not set, the language will be extracted from the value in the 'accept-language' header that is automatically set by the browser.

The Message area accepts Liquid syntax. You can use this syntax, combined with exposed parameter values, to programmatically construct elements of the message. For example, you can reference the request_language parameter to change the language of the message:

{% if request_language contains 'dutch' %}
   Hier is uw verificatie code: {{ password }}
{% endif %}

{% if request_language contains 'fr-FR' %}
   Ceci est votre code: {{ password }}
{% endif %}

The following parameters are available when defining the template:

Exposed Parameter Description
password or code the password to use
phone_number the user's phone number the name of the application name where the user is signing up
request_language the requested language for the message content

Enable your apps

Go to the Apps tab of the SMS settings and enable the apps for which you would like to use Passwordless SMS.

Configure CORS

For security purposes, you must add your app's origin URL to the list of Allowed Origins (CORS) in your app's Settings Section of the Dashboard, unless this origin URL has been already added to the Allowed callback URLs list.


Use Lock

Lock with Passwordless Mode is a professional-looking dialog that allows users to log in after receiving a one-time password via email or text message.

After installing Lock (version 11.2.0 or later), you must initialize it with your Client Id and domain. You can find this information in the Dashboard on your application settings page.

You can then trigger the login widget with the following code:

<script src=""></script>
<script type="text/javascript">
   var lock = new Auth0LockPasswordless('YOUR_CLIENT_ID', 'YOUR_AUTH0_DOMAIN', {
    allowedConnections: ['sms'],       
    auth: {
      redirectUrl: 'https://YOUR_APP/callback',
      responseType: 'token id_token'

  lock.on('authenticated', function(authResult) {
     localStorage.setItem('id_token', authResult.idToken);
     localStorage.setItem('access_token', authResult.accessToken);

  function login() {; 
<a href="javascript:login()">Login</a>

If you use custom domains, replace YOUR_AUTH0_DOMAIN with your custom domain.

This will open a dialog that asks the user for their phone number.

Then Auth0 will use Twilio to send to the user an SMS containing the one-time code:

SMS one-time code

Lock will ask for the code that has been sent via SMS to the provided number. The code can then be used as a one-time password to log in:

If the code is correct, the user will be authenticated. This will trigger the authenticated event where the ID Token and Access Token will be available. Then the user will be allowed to continue to the authenticated part of the application.

Use your own UI

Sample Project

Download a sample project specific to this tutorial configured with your Auth0 API Keys.

You can perform passwordless authentication in your SPA with your own custom UI using the Auth0 JavaScript client library.

First, initialize Auth0.js. Be sure to provide a redirectUri and to set the responseType: 'token id_token'.

var webAuth = new auth0.WebAuth({
  clientID: 'YOUR_CLIENT_ID',
  domain: 'YOUR_AUTH0_DOMAIN',
  redirectUri: '',
  responseType: 'token id_token'

If you use custom domains, replace YOUR_AUTH0_DOMAIN with your custom domain.

You must provide a way for the user to enter a phone number to which the SMS will be sent. Then you can begin the passwordless authentication as follows (assuming the name of your form input as

function sendSMS(){
  var phone = $('').val();

    connection: 'sms',
    send: 'code',
    phoneNumber: phone
  }, function (err,res) {
    if (err) {
      // Handle error
    // Hide the input and show the code entry screen

This will send an SMS to the provided phone number. The user must now enter the code they received into your custom UI. Then you can continue with the login as follows (assuming the name of your form inputs as and input.code):

function login(){
  var phone = $('').val();
  var code = $('input.code').val();

    connection: 'sms',
    phoneNumber: phone,
    verificationCode: code
  }, function (err,res) {
    if (err) {
      // Handle error
    // If successful, save the user's token and proceed

The passwordlessLogin method will verify the Passwordless transaction, then redirect the user back to the redirectUri that was set. You will then need to parse the URL hash in order to acquire the token, and then call the client.userInfo method to acquire your user's information, as in the following example:

$(document).ready(function() {
    webAuth.parseHash({hash: window.location.hash}, function(err, authResult) {
      if (err) {
        return console.log(err);
      } else if (authResult){
        localStorage.setItem('accessToken', authResult.accessToken);
        webAuth.client.userInfo(authResult.accessToken, function(err, user) {
          if (err){
            alert('There was an error retrieving your profile: ' + err.message);
          } else {
            // Hide the login UI, show a user profile element with name and image
            localStorage.setItem('user', user);
            $('.avatar').attr('src', user.picture);

Check out the Auth0.js SDK reference documentation for more information.