Enable Multi-factor Authentication with Auth0 and Twilio
Tags: webdev, programming, security
Published: 2022-01-06 15:19:43

### Quickly integrate Twilio for SMS-based multi-factor authentication.

### <br>

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](https://auth0.com/blog/multifactor-authentication-mfa/).

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:

{% youtube lF7stm2nUHQ %}

## What Will You Need?

* An Auth0 Account. If you don't have one, <a href="https://auth0.com/signup" data-amp-replace="CLIENT_ID" data-amp-addparams="anonId=CLIENT_ID(cid-scope-cookie-fallback-name)">you can register for free</a>
* 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](#Create-Twilio-Account-and-Get-Credentials).

### Clone the demo application

Start by cloning the [Auth0 React SDK Sample Application from GitHub](https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01). 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.

```bash
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.

![Auth0 Sample Project Login Screen](https://images.ctfassets.net/23aumh6u8s0i/4B7KxXicKfMF4SS7an6RxB/9c29ccdcc08572b11dd9691923c328c5/React_SDK_Local.png)

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. 

![Auth0 Config File](https://images.ctfassets.net/23aumh6u8s0i/6cM6y7s5CqxfC4DpMbDI8r/0b22c0cdc5ed736bc0631b52e2028080/Screen_Shot_2021-12-02_at_7.44.45_PM.png)

[Read more...](https://auth0.com/blog/enable-mfa-with-twilio-and-auth0/?utm_source=content_synd&utm_medium=sc&utm_campaign=actions)