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:
- An Auth0 Account. If you don't have one, you can register for free
- A Twilio Account
- A mobile phone
If you already have a Single Page Application registered in your Auth0 dashboard, you can skip to Create Twilio Account and Get Credentials.
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
auth0-react-samples then again into
Sample-01, use npm to install the project's dependencies.
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.