Multifactor Authentication in your React Apps

TL;DR: Security can’t be overemphasized when it comes to developing software applications. A single authentication factor system (e.g username and password) is no longer safe enough. If credentials are stolen, a user can be impersonated. Implementing a multi-factor authentication system increases security by requiring the user to provide an additional sets of credentials before they are granted access.

Implementing multi-factor authentication can be time-consuming, challenging, and often difficult to get right. However, in this post I’ll show you how to quickly implement multi-factor authentication in your React applications in just a few minutes without breaking a sweat!

Note: You need to have a fair knowledge of React to get the most out of this tutorial.

1. Step Up a React Application

It’s very easy to set up a react application these days, all thanks to Facebook’s infamous create-react-app tool. If you haven’t installed it yet, do so, else go ahead and create a new react app like so:

Create React App

2. Install the following dependencies

There are some modules we’ll need in the later part of this tutorial. Let’s install them now. Open up your terminal and run this command like so:

BeginnerWebDev.com Get Started w/ JavaScript for free!

npm install auth0-lock bootstrap classnames jwt-decode react-bootstrap react-router –save

auth0-lock

bootstrap

classnames – For joining class names together

jwt-decode

react-bootstrap – Bootstrap for React

react-router

3. Set Up Authentication Components, Routing and Styling

There are several ways to set up authentication in a React app but we’ll choose a service that does the heavy lifting for us. With Auth0, you can easily set up authentication in your React apps.

Open up your src/ directory and delete everything inside except the index.js file. Now, replace the code in the index.js file with the following:

index.js

import React from ‘react’;

import ReactDOM from ‘react-dom’;

import App from ‘./containers/App/App’;

import ‘./app.css’;

import ‘bootstrap/dist/css/bootstrap.css’

import {hashHistory} from ‘react-router’;

import makeRoutes from ‘./routes’;

const routes = makeRoutes()

ReactDOM.render(

<App history={hashHistory}

routes={routes}/>,

document.getElementById(‘root’)

);

Go ahead and create a routes.js and app.css file inside the src/ directory. Add code to the files respectively like so:

routes.js

import React from ‘react’

import { Route } from ‘react-router’

import makeMainRoutes from ‘./views/Main/routes’

export const makeRoutes = () => {

const main = makeMainRoutes();

return (

{main}

</Route>

)

}

export default makeRoutes

app.css

@import url(“styles/colors.css”);

*:after,

*:before {

box-sizing: border-box;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

font-smoothing: antialiased;

text-rendering: optimizeLegibility;

font-size: 16px;

}

body {

color: var(–dark);

font-weight: lighter;

font: 400 15px/22px ‘Open Sans’, ‘Helvetica Neue’, Sans-serif;

font-smoothing: antialiased;

padding: 0;

margin: 0;

}

For brevity, head over to https://github.com/auth0-blog/mfa-react/tree/master/src and copy the containers, styles, utils , views directory and its contents into your app. With this, we should have an almost-ready authentication app.

4. Set Up Authentication

We have an Authentication helper class, src/utils/AuthService.js that encapsulates the login functionality and a JWT helper file, src/utils/jwtHelper.js that checks for the validity of JSON Web tokens in our app.

Now, open up src/views/Main/routes.js. In this file, we have a line like so:

….

const auth = new AuthService(_AUTH0_CLIENT_ID_, _AUTH0_DOMAIN_);

We need to replace the AUTH0CLIENT_ID_ and *AUTH0DOMAIN_ *with real values. If you don’t have an account with Auth0, go ahead to the sign up for a free account to continue. Then create a new client app and go to the settings tab to grab the keys like so:

Auth0 Credentials

Now, run npm start, your welcome page should look like this:

. Next, we will set up multi-factor authentication.

5. Set up Multifactor Authentication

With Auth0, it is very easy to set up multi-factor authentication. On your Auth0 dashboard, click on the** Multifactor Auth** tab on the left. You’ll get a page like this below:

You can choose what form of multi-factor authentication you want. In this tutorial, we’ll go with push notification. So go ahead and turn that on by sliding the knob to the right.

After you have done that, run the application again and try to sign up. From clicking on the login button and signing up, we’ll have:

2nd Factor Authentication Interface

Here, there is the option to download the Auth0 Guardian app from either the App Store or from Google Play. Underneath that, there is the option to use Google Authenticator or SMS depending on the application’s settings.

Let’s go with Auth0 Guardian. Once you have downloaded that, the next screen brings out a code that you need to scan with the app like so:

The user will have to open up the Auth0 Guardian app on the mobile device like so:

*Note: * I’m using an IPhone

Opening Auth0 Guardian

The user will have to scan the QR code. Immediately it scans, the next screen is presented like so:

Save the number. It’s useful when you need to login and you don’t have your device with you! Proceed by checking the box like so:

Continue, the next screen that is presented is this below:

Click on continue.

You’ll receive a notification on your phone like the one below:

You can allow or deny the request from the homescreen as shown below:

Or you can open your phone, you’ll see the request as shown below:

Clicking on the request quickly brings out a screen that gives you the option to allow the request with some information about the incoming login request too. Pretty slick right?

Once you allow the request, the web application gets notified that you have accepted the request and proceeds to login like so:

The user has been finally logged in

Multi-factor authentication with Auth0 Guardian is really that simple. No complications, no hassle!

The code for this application is available on Github. Check it out!

Conclusion

Holy Molly! We have been able to integrate multi-factor authentication into a React application within just a few minutes. The awesome goodness about multi-factor authentication with Auth0 is that there are lots of configuration options available to you as a developer or an admin.

There is no whining about this. Go forth and make your applications a massive stronghold by adding second factor authentication to your apps today!

Like this article? Follow @unicodeveloper on Twitter

This content is sponsored via Syndicate Ads.