Multi-factor Authentication (MFA) with Auth0 Guardian

Instructor: [0:00] What's up, everybody? Today, I'm going to show you how to set up multi-factor authentication using the push notifications from the Auth0 Guardian app. Head over to auth0.com, and sign into your account, or create a new one if you don't have one already.

[0:17] Once you get to your dashboard, on the left-hand side here, we're going to create a new application inside of my own tenant. Inside of Applications, I'm going to create a new application. For this example, I'm going to create a single-page web app. It's going to be a React app. It's going to be pretty basic.

[0:33] We're going to use the starter code that's provided on the next screen to hook it all up. Single-Page Web App, and I'll say Guardian Example. Once we push Create on this, I'm going to click on the React option here of the screen. Then, if you don't have this setup already that you can play around with, feel free to download this sample, view it on GitHub, and get it running locally.

[0:56] After cloning, NPM installing, and running this locally, you'll see an application that looks like this. A basic React SPA example here where you already get the login button built in for you. We're going to hook it up with Auth0.

[1:09] Go ahead and open up that code on your machine. We're going to need to update two values. This is the basic structure of that React code. Basically, a React app with a server file set up for us, this API-server.

[1:22] What we need to do is update values inside of the auth_config.json. We need to add the domain and client ID. I'm going to delete the audience, because we're not going to be using that today. Go ahead and remove the values inside of that.

[1:36] Then we need to go back to the application that we just created and insert the correct ones. Inside of that application, go to settings and then grab the domain and the client ID. Make sure you save and then npm start again. Make sure you got that running.

[2:01] Before we go and view that app, the last thing we need to do is add our localhost URL to three different places, the Callbacks, the Logouts, and the Allowed Web Origins. In my case, again, it's localhost:3000. I'm going to go ahead and add that. Perfect. Then don't forget to save so that our changes are alive. Awesome.

[2:24] With the credentials inside of our Auth0 React app, the URLs updated inside of our Auth0 application, we're ready to test this out. I'm going to go back to my app here that's running and try to log in.

[2:37] Now, I've already created this user. It's asking me permissions to view my profile and email. Going to accept that. Then you can see that I successfully log in and authenticate. I'm even able to see my profile and a bit about myself.

[2:51] Now, the next part here, let's set up multi-factor authentication with Auth0 Guardian. Before we go to our dashboard to flip the switch for this, let's first talk about Auth0 Guardian. Guardian is a mobile app that lives on a user's device, typically a phone or a tablet. It delivers push notifications so that users can instantly accept or deny access via the push of a button.

[3:16] It can also generate a one-time password if that factor is preferred, instead of integrating with each vendor-specific push notification service. You'll find the Guardian mobile app in both iOS and Android. The technology is also available as Guardian SDK, which can be used in custom mobile applications to act as a second-factor push responder.

[3:37] It's simple to enable this inside of your tenant. Go back to your dashboard. Then on the security tab, go ahead and click on Multi-Factor Off. As you scroll down, you can see all the different factors involved, but we're looking for this Auth0 Guardian. By simply toggling this On, this is going to enforce all your users use Auth0 Guardian to authenticate within your app.

[4:01] Notice that you can also build your own multi-factor authentication app with the control on look-and-feel using the Guardian SDK. I'm not going to get into that. We're going to enable this and use the Guardian mobile app. With this option enabled, back on to the first screen past the factors.

[4:20] We didn't set how often we want to enforce this multi-factor authentication. There is the Never option, the Adaptive MFA, which we'll talk about here in a second, and the Always, which is self-explanatory, always requiring multi-factor authentication. This Use Adaptive MFA basically requires an additional factor if the log in appears to be high risk.

[4:42] I'm going to use Always. Perfect. Now if we scroll to my app and log out and then try to re-log in. I'm going to enter in the same username and password that I had last time and press continue. Though this time, unlike last time, you can see that we get a new module here that's telling me to download the Auth0 Guardian mobile app from either the app store or Google Play.

[5:13] Take a moment and go ahead and do that. I already have the Guardian app on my phone. I'm going to push continue. The next thing is going to register your phone with your account here. Go ahead and open up the Guardian app on your mobile device. Press on the plus sign in the corner, and then you're going to scan the QR code.

[5:31] Once it scans and registers on your phone, back on the website, you'll see a recovery code that's going to be the user's to keep in case they need to log in without a phone around. Copy this somewhere safe. Then you can see we are successfully authenticated.

[5:45] If we log out and then to retry to log in now that we have Guardian installed, typing in the same username and password, you'll notice that now it's sent a notification to our iPhone device. Back on my phone, you'll see I get this push notification with information about where I'm trying to sign in. I press Allow, and then back in the site, it successfully completes the authentication flow.

[6:10] Hopefully, you see now how easy it is to turn on multi-factor authentication using the Auth0 Guardian app.