william_johnson

  Will Johnson is a Developer Advocate at Auth0. He loves teaching topics in a digestible way to empower more developers. He writes blog posts, records screencasts, and writes eBooks to help developers. He's also an instructor on <a target='_blank' rel='noopener noreferrer' href='https://egghead.io'><strong><b>egghead.io</b></strong></a>.


Developer Advocate

Will Johnson

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](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:

<AmpContent>
<amp-youtube
    data-videoid="lF7stm2nUHQ"
    layout="responsive"
    width="480" height="270">
</amp-youtube>
</AmpContent>

<NonAmpContent>
<div
  class='embed-container'
  style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;margin-bottom:40px;">
    <iframe
      style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"
      src='https://www.youtube.com/embed/lF7stm2nUHQ'
      frameborder='0' allowfullscreen>
    </iframe>
</div>
</NonAmpContent>

## What Will You Need?

* An Auth0 Account. If you don't have one, <a href="https://a0.to/blog_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)

## Get Credentials from Auth0 Dashboard

Now go to your Auth0 Dashboard; click _Applications_, then click _Applications_ again when the options dropdown on the right-side panel. Click _Create Application_ if you don't already have an application in your Auth0 account.

![Auth0 Dashboard Application Page](https://images.ctfassets.net/23aumh6u8s0i/3IP95iBgYyz7XJ62rwqbyW/f6862e32b8169566bbd7343ff892966c/Screen_Shot_2021-12-02_at_8.19.52_PM.png)

On the Create Application screen, you'll give your Application a name. You can use "Twilio MFA Test." 

Next, you'll choose the application type; select _Single Page Application_ since this is a React application. Then click _Create_.

![Auth) Dashboard Create Application Page](https://images.ctfassets.net/23aumh6u8s0i/5ZxkkuVUS3nmhqWvQuu8aZ/67bef7be2b4cca5460f8311c2be69655/Screen_Shot_2021-12-02_at_8.45.53_PM.png)

Since you already have the sample application on your machine, skip Quick Start and click _Settings_. This is where you will find the Domain and Client ID, that you need to replace the placeholder values in the `auth_config.json` file. You can copy the values from the dashboard into your code editor.

![Application Settings Page](https://images.ctfassets.net/23aumh6u8s0i/nQMYVh3ZDtMSYUCog7e5r/e8b8b471b7097d36918547037c78ce5f/Screen_Shot_2021-12-02_at_9.11.39_PM.png)

Next, scroll down to the Application URIs section to fill in Allowed Callback URLs, Allowed Logout URL, and Allowed Web Origins. This example is running locally, so enter `http://localhost:3000` into each field. When you're finished, scroll to the bottom of the page and click _Save Changes_.

![Application URIs](https://images.ctfassets.net/23aumh6u8s0i/6kXeY9LVo5sincLcxSdrk1/e25a7bfd89bcda641f6c6625ad143aa5/Screen_Shot_2021-12-03_at_8.37.26_AM.png)

You can now run the Application locally again and click Login; enter a username and password, and the user will be successfully authenticated with Auth0. As you may have noticed the username and the password are the only factor being used to authenticate users. Make your application more secure by adding another factor for the user to verify. Twilio can add SMS-based authentication. You'll set that up next.

## Create Twilio Account and Get Credentials

If you don't have a Twilio account already, you can create one [here](https://www.twilio.com/try-twilio). Once you have created an account and logged in, you'll see the Twilio console. Here you'll see your Account SID and Auth Token, which you'll use later. The next step for a new Twilio account is getting a Twilio phone number. This will be the number that will send a one-time passcode to your user to verify and complete their authentication after they've logged in with their username and password.

### Get a Twilio trial phone number

In the Twilio Console, click _Get a trial phone number_. You'll automatically get assigned a number click Choose this Number. This number will now show on the Project Info section under Phone Number.

### Configure Auth0 to use Twilio for MFA

Back at your Auth0 dashboard, look at the ride side menu, click Security, then Multi-factor Auth. On this page, you'll be shown all the factor options that you can use with Auth0. For this Application, click on _Phone Message_.

The first thing you need to do on the Phone Message page is click the toggle button on the upper left side corner to enable Phone Message MFA. You'll see a pop-in notification confirming it has been enabled.

Next, you'll need to Choose a delivery provider; you'll see that Twilio is one of the listed options making it easy to connect Twilio to your Auth0 account.
For _Choose a delivery method_, you have SMS, SMS, and Voice, or Voice to choose from. For simplicity, select SMS.

![Phone Message Settings Page](https://images.ctfassets.net/23aumh6u8s0i/1Rhy8cNvQn76y81MQ9b81j/59ae57cdd0300d658456ef03b5ff0af9/Screen_Shot_2021-12-03_at_11.40.16_AM.png)

When you select Twilio as the delivery provider, you will have some new fields appear to enter the Twilio SID, Twilio AuthToken, and the From phone number. You'll see all of those values in the Twilio console.

![Twilio Console](https://images.ctfassets.net/23aumh6u8s0i/4SO3LiFDt5wt4MdOZFuFR1/446d53076c18666ac2d705de50b3f7f4/Screen_Shot_2021-12-03_at_10.59.05_PM.png)

Copy each value to the matching field in the Auth0 Dashboard. The two template fields can customize the message the user gets sent. You'll leave these as they are in this example. Now click _Save_.

![Phone Message Twilio Settings](https://images.ctfassets.net/23aumh6u8s0i/12Xd2Mg7Twq6Nk7eV5Ra1s/cfd809f4a460dca1c5c3ee4c82424971/Screen_Shot_2021-12-03_at_11.26.55_PM.png)

Now you have everything configured to use Twilio as an SMS MFA provider, but there is still one more step left to actually make everything work!

## Enable MFA in the Auth0 Dashboard

Back on the Multi-factor Authentication page, there are two sections Factors, which we just completed, and Define Policies. Define Policies will tell Auth0 when you want to prompt the user to use MFA. In the Require Multi-factor Auth section, the default is Never, which is the exact opposite of what you wish to do after doing all that work of configuring MFA.

The second option is an add-on called Adaptive MFA. This takes a look at the user's environment and determines if it's risky and requires another authentication factor. For this example, you'll choose _Always_, then click _Save_.

![Define Policies Section](https://images.ctfassets.net/23aumh6u8s0i/62TwidbXDP7luY9XQHeECD/25425b0cc1c9638401c40922cf61b371/Screen_Shot_2021-12-03_at_11.41.27_PM_1.png)

You'll get a prompt asking if you want to continue and let you know all new and existing users are now required to enroll in MFA click _Continue_. That will update your MFA policy, and now, when a user registers or logins, they will be met with a prompt to add their phone number to enroll in MFA.

Now that everything MFA is enabled in your Application, you want to test it out to ensure everything goes smoothly.

## Test MFA on Login

With your sample application running, click _Login_ and enter your email and password. Next, you'll be prompted to add a phone number to secure the account. This is what your users will see the next time they log in after you enable MFA.

You can select the code for your country on the first line, then type in your phone number and click _Continue_. You'll then have an SMS message come to your phone with a verification code. Enter that code into the input box on your application. 

Now you're successfully logged in, and your users have another layer of protection from their data being compromised. All thanks to you, pat yourself on the back!

## Summary 

You just added Multi-factor authentication to your application using Twilio as the provider. You entered your Auth0 credentials to the `auth_config.json` in the project files of your application. Then, you enabled Phone Message MFA in the Auth0 Dashboard and added your Twilio credentials. 


Enable Multi-factor Authentication with Auth0 and Twilio

kim-noel

Former Auth0 Employee

Kim Noel

What do apple picking, beer festivals, ghosts and goblins, and open-source all have in common?



We at Auth0 are excited to announce our participation in this years Hacktoberfest!

![Hacktoberfest 2018 logo](https://images.ctfassets.net/23aumh6u8s0i/64mee50TQDaqpOjwCo80bw/02fe61e51cd3a3935267e45bbbc652aa/hacktoberfest_logo)

## Hold up — What's Hacktoberfest?

[DigitalOcean](https://digitalocean.com/), [GitHub](https://github.com/), and - new for this year - [Twilio](https://www.twilio.com/) have partnered up for a month-long celebration of open-source software (OSS). This takes place from October 1st to October 31st inclusive, and you can sign up at any time during the month. This event facilitates the ability to be a part of a growing movement to encourage and contribute to open-source software. 

<include src="TweetQuote" quoteText="If you have never contributed to an open-source project before, there is a #hacktoberfest My-First-PR Starter Project at https://my-first-pr.github.io/hacktoberfest-2018/ available that you can use to practice making changes and creating pull requests"/>

Have you been looking for an opportunity to contribute to an open-source project? Had a hard time getting started? Been searching for a sign? _This is your sign!_ This is your chance to give back to the amazing projects that you and others alike use on a daily basis. Take advantage of this opportunity to help build a stronger product and have your voice heard! No contribution is too small: bug fixes to documentation, updates to translations, and much more are valid ways of participating.  

This month we get to see a lot of extra support to help folks get involved in open-source software and it’s with great enthusiasm we want people to take advantage of this! There are a large number of resources available to help you find a project and make your first contribution. Or, if it’s not your first, your next contribution. There are [many stories to read](https://medium.com/@thepriefy/my-first-github-pull-request-and-hacktoberfest-2017-a83622020390), and articles outlining [ways to get involved](https://medium.freecodecamp.org/i-just-got-my-free-hacktoberfest-shirt-heres-a-quick-way-you-can-get-yours-fa78d6e24307).

And guess what? This event has been taking place, every October, for 5 years!

_Happy five years of Hacktoberfest!_

A huge shoutout to DigitalOcean on a happy 5 years of Hacktoberfest. 

## How Do I Get Involved? 

First of all, sign up to the event on the [DigitalOcean Hacktoberfest site](https://hacktoberfest.digitalocean.com/), then head over to GitHub and take a [look through the projects](https://github.com/topics/hacktoberfest). These are all the open-source projects on GitHub that have the designated ‘hacktoberfest’ label. Another way to get started might be to look at the projects you use every day - they may just be open source!

If you have never contributed to an open-source project before, there is a [Hacktoberfest My-First-PR Starter Project](https://auth0.com/blog/a-first-timers-guide-to-an-open-source-project/) available that you can use to practice making changes and creating pull requests, before progressing to adding real value to other repositories that people depend on every day.

Furthermore, if you’re interested in [hosting your own Hacktoberfest event](https://hacktoberfest.digitalocean.com/eventkit), there is an event kit containing a guide on how to get started and run your event in the best possible way. You don’t have to be an expert or professional to host an event, just the passion and the time to get organized!

## It’s Not Just About the Swag 

Did someone say swag? Yes, there is swag! Swag is great and if you are fortunate enough to be a recipient of one of the exclusive Hacktoberfest t-shirts, we encourage you to wear it with pride knowing you were a part of a great movement for OSS. _That_ is why we encourage you to participate and earn the exclusive 2018 Hacktoberfest t-shirt! 

To qualify for your t-shirt, you just have to make 5 valid contributions as pull requests (PRs) into any public GitHub repository (your pull requests don’t have to be merged in that time). Of note is that it's OK to submit one PR to fix a typo, but submitting 5 PRs to remove extra whitespace here and there is not. T-shirts get sent out after October and can take a few weeks to a few months to arrive. 

Therefore, let’s take a quick look: submit **5 or more pull requests** and get an exclusive Hacktoberfest t-shirt courtesy DigitalOcean, GitHub & Twilio.

<include src="TweetQuote" quoteText="All of our #hacktoberfest projects can be found on our GitHub organization. Join us over in https://community.auth0.com if you have any questions or feedback."/>

## What If I Submit to an Auth0 Project?

At Auth0, [we’re heavily invested in the open-source software movement](https://auth0.com/opensource). Look out for a kickass 2018 Hacktoberfest t-shirt courtesy of the awesome Auth0 team, along with a psychedelic Auth0 sticker pack!

All of our qualifying projects can be found on [our primary GitHub organization](https://github.com/auth0), as well as [our community organization](https://github.com/auth0-community). Join us over in [community.auth0.com](https://community.auth0.com/) if you have any questions or feedback.

To notify us of your contribution(s), please submit your details in this [Google form]( https://goo.gl/forms/sNo604XkIMhCX8i03) and we will follow up at the end of the event with your swag! 

## Share Your Journey!
We want to hear how your Hacktoberfest journey is going, so make sure to use the #Hacktoberfest hashtag and, if you’re working with Auth0 this month, use #Auth0OSS. We will be re-sharing our favorites! 

## Have an Open-Source Project, and Looking for Contributions?
Share it in our [Community Corner](https://community.auth0.com/c/community-corner)! If you built something with Auth0 share it in our [Show Your Auth0 section](https://community.auth0.com/c/auth0-community/show-auth0/16). Inspire others and be inspired! Celebrate your hard work and let your project be shared with other amazing developers. 


Celebrate Hacktoberfest 2018 with Auth0!

956290?s=200

R&D Content Engineer

Luke Oliff

Open source is the past, present, and future. Pay it forward by learning how to make your first contribution with Auth0.

"twilio"