Quickly integrate Twilio for SMS-based multi-factor authentication.
Your users' most trustworthy interaction with your business is when they type each letter on their keyboard to enter their username and password into your login box. After they hit enter and send this confidential information through the internet tubes, they trust that your application has done everything possible to keep their data safe from bad actors.
Even with proper protocols, expert attackers still find shortcuts and backdoors to access users' credentials and confidential information. The good news is you can add another layer of protection for your users by adding Multi-factor Authentication (MFA) to your Application. MFA lets you add another factor to verify so users can prove who they say they are. There are several types of MFA methods. Some of them are SMS-based, One-time passwords (OTP), Authenticator apps, and Biometrics, to name a few.
To learn more about MFA methods, check out this MFA Guide.
Today, you will add SMS-based MFA with Auth0 using Twilio as the SMS provider. Twilio is a popular customer engagement platform that you can easily integrate with Auth0.
If you prefer, you can also watch this video on the same topic:
What Will You Need?
- An Auth0 Account. If you don't have one, you can register for free
- A Twilio Account
- A mobile phone
Set Up and Configure Auth0 React Demo Application
If you already have a Single Page Application registered in your Auth0 dashboard, you can skip to Create Twilio Account and Get Credentials.
Clone the demo application
Start by cloning the Auth0 React SDK Sample Application from GitHub. This is a sample React app set up and connected with Auth0. Once you have the Application installed on your machine cd into auth0-react-samples then again into Sample-01, use npm to install the project's dependencies.
npm install
Once the dependencies are finished installing, run npm run dev in your terminal and in your browser visit http://localhost:3000, if it doesn't automatically start. Now you'll see the React sample project with a login button in the upper right corner of the screen.
In the project's src folder, you'll find the auth_config.json.example file. There's a JSON object with placeholder values inside this file. Copy it, then create a new file in the same folder named auth_config.json. With this file created, you need to replace the placeholder values with your own credentials from the Auth0 dashboard.
Top comments (0)