Docs

Implement Passwordless SMS in Single-Page Apps

With an SMS connection, the user is asked to enter a phone number, to which Auth0 sends a one-time code using Twilio. The user then enters the code into your application.

If the phone number attached to the code matches an existing user, Auth0 authenticates the user:

Existing User Flow

If the user is new, their user profile is created for the sms connection before they are authenticated by Auth0.

New User Flow

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

Setup

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

  1. Navigate to the Connections > Passwordless page in the Auth0 Dashboard, and enable the SMS toggle.

Enable SMS Passwordless

  1. Enter your Twilio Account SID and Twilio Auth Token.

To learn how to find your Twilio SID and Auth Token, see Twilio docs: How to create an Application SID and Auth Tokens and how to change them.

Configure SMS Passwordless

  1. Select your SMS Source and depending on your selection, enter either your Twilio Messaging Service SID or a From phone number. Users will see what you enter as the sender of the SMS.

To learn about using Twilio Copilot, see Twilio docs: Sending Messages with Copilot.

  1. In Message, enter the body text of the SMS.

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

  1. Adjust settings for your OTP Expiry and OTP Length, and click SAVE.

If you choose to extend the amount of time it takes for your one-time password to expire, you should also extend the length of the one-time password code. Otherwise, an attacker has a larger window of time to attempt to guess a short code.

Multi-language support

The Message area supports multiple languages.

To choose the language, call the /passwordless/start authentication endpoint and set the value of the 'x-request-language' header. When this header is not set, the language is extracted from the 'accept-language' header, which is automatically set by the browser.

Message syntax

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:

The following parameters are available when defining the message template:

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

Enable your apps

Click the Apps tab, and enable the apps for which you would like to use Passwordless SMS.

Configure Cross-Origin Resource Sharing (CORS)

For security purposes, your app's origin URL must be listed as an approved URL. If you have not already added it to the Allowed Callback URLS for your application, you will need to add it to the list of Allowed Origins (CORS).

  1. Navigate to the Applications page in the Auth0 Dashboard.

  2. Click the name of your application to see its settings.

View Application Settings

  1. Scroll to Allowed Origins (CORS), enter your app's origin URL, then click Save Changes.

Enter Allowed Origin URL

Implementation

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:

If you use custom domains, replace YOUR_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'.

If you use custom domains, replace YOUR_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 input.phone-number):

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 input.phone-number and input.code):

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:

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