Auth0 Application Setup for Passwordless OTP Login

Auth0 has proved to be a game changer in the space of identity management. The simplicity that it provides has been a boon for businesses that do not want to get into the hassle of storing user identification details and worry about their safety.

In this article, we will be going through the detailed steps to create a passwordless application which will use phone number to validate the user via OTP(one time password). For SMS gateway, we are using Twilio which is easy to set up and is easy to integrate with Auth0. You can find a working example with this GitHub Repo.

Steps to create an Auth0 account

  1. Log into the your Auth0 account and create a tenant.
  2. Navigate to the Applications section from the sidebar navigation and click on Create Application.
  3. Enter the name for the application and then select the Regular Web Applications option and click on create.
  1. Once created, click on the Settings tab. We will find the Domain, Client ID, and Client Secret which will be used to connect your web app. Fill in the Callback and Logout URLs with the required values.
  2. From the sidebar navigation, expand the Authentication menu and click on Passwordless.
  3. Click on the SMS tab and fill in the Twilio SID, Twilio AuthToken, and From fields. We can edit the markdown to add custom text if required. Then click on save.
  1. In the same modal, navigate to the Applications tab and enable the integration with the newly created app and click on Save.
  1. Navigate back to the Applications menu from the sidebar and select the newly created app. From the tabs menu, go to the Connections page and enable the Passwordless connection.
  1. Navigate to the Universal Login menu in the Branding section of the sidebar. Scroll down and open the Advanced Options page.
  2. Select the Classic option for the Universal Login Experience. We could also add customisations like company logo URL or colour themes. Once we are done with this, click on save.
  3. From the tab options above, click on the login tab. Enable the Customise Login Page option and then select the Lock(passwordless) option and click on Save Changes.

We now have a working Auth0 interface to integrate with our web app.We can verify the existing login experience by navigating to the Authentication Profile option under the Authentication menu in the sidebar and then clicking on the Try button.

Medium Link