Learn how phone number authentication works and how you can implement it easily with Auth0!
TL;DR: Passwordless is not a new concept in the world of authentication. Platforms like Slack and Whatsapp already adopt this form of authentication. There are different forms of strategy that requires authentication without passwords. However, there are different forms of passwordless authentication. In this article, you'll get to understand how SMS passwordless authentication works and build an app alongside. Check out the repo to get the code.
What is SMS Passwordless Authentication?
SMS Passwordless authentication is a type of authentication where users do not need to login with passwords. This form of authentication totally makes passwords obsolete. With this form of authentication, users are presented with the option of logging in simply via a one time unique code that is delivered via text message.
Benefits of Passwordless Authentication
Without much ado, passwordless authentication helps:
Improve User Experience: The faster users can sign up and use your service, the more users your app tends to attract. Users dread having to fill out forms and go through a rigorous registration process. Imagine eliminating that extra five minutes of asking users to remember their grandmother's maiden name as a security question. Passwordless authentication helps improve user experience in this regard!
Increase Security: 59% of internet users admit to using the same password for multiple accounts. Once an attacker gets hold of one account's password, he or she can compromise other accounts that use the same password. However, once you go passwordless, there are no passwords to be hacked.
How Does SMS Passwordless Authentication Work?
Let's take a look at how SMS passwordless authentication actually works. Check out the process below:
The user is asked to enter a valid phone number.
User enters a valid phone number
A unique onetime code is then sent to the phone number.
One time code is received
Once the user enters this code into your application, your app validates that the code is correct and that the phone number exists and belongs to a user, a session is initiated, and the user is logged in.
In Auth0's case, the user has five minutes to input the code into the app & get logged-in
Take a look at Auth0's onetime code via SMS implementation below:
If the phone number matches an existing user, Auth0 just authenticates the user like so:
Other forms of passwordless authentication are:
- Authentication with a magic link via email
- Authentication with a onetime code via e-mail
Check out this excellent article to have an in-depth understanding of how these other forms of passwordless authentication work!
Aside: Phone Number / SMS Passwordless Authentication with Auth0
With Auth0, SMS passwordless authentication otherwise known as phone number authentication is dead simple to implement. There are diagrams earlier in this post that already show the SMS passwordless authentication flow using Auth0. The Passwordless API is an efficient API implementation of passwordless authentication.
We'll build an application that allows you login via your mobile phone number. Let's get started.
index.html file in your directory and add this piece of code to it:
If you don't have an Auth0 account: Sign up for free.
auth0-variables.js. We'll add auth0 variables to this file
var AUTH0_CLIENT_ID='CLIENT_ID'; var AUTH0_DOMAIN='AUTH0_DOMAIN';
app.css file and add the code here to it.
Run your app. The landing page should look like this:
When you click on Signin, you should see this:
On the Auth0 dashboard, click on the red
Create Clientbutton to create a new app like so:
Head over to the Passwordless Connections side of the dashboard and enable SMS option. It should show something similar to the image below:
Enable Swapart App
The next page will show you a page to fill in your
Twilio Auth Tokenand the
- Head over to Twilio, sign up and get the
Auth Tokenvalues, then add them to the Auth0 page and save.
- Head over to your settings tab for the
Swapartapp and copy your
- Open up
auth0-variables.jsin your code and replace the
AUTH0_DOMAINvalues with your real Auth0 keys.
- Make sure you add your app URL to the Allowed Origins(CORS) in the Auth0 dashboard. Your app has to run on a server.
nginxare good options.
Let's try our app. Click the Login button and put your phone number.
Login with Phone Number
Code from Auth0 delivered to your Phone
Enter code from Phone number
Submit and be logged in
Check out the token saved in the localStorage
You can go further and use the token to determine the
logged-out auth status of a user.
Auth0 provides the simplest and easiest to use user interface tools to help administrators manage user identities including password resets, creating and provisioning, blocking and deleting users. A generous free tier is offered so you can get started with modern authentication.
There is no doubt that passwords have become more susceptible to being compromised in recent years. Passwordless authentication aims to eliminate authentication vulnerabilities. This recent analysis of passwordless connections shows that passwordless adoption is increasing. If you really care about security, you should look into passwordless authentication!