How to implement world 2 factor authentication (both email and TOTP) using , React Router, and Amazon Cognito React To view Part 2, implementing React Router & TOTP, click . here In this post, we’ll walk through how to implement real world user sign up and sign in with two factor authentication along with a routing and an authentication flow in a React web application. When the user is logged out, we will protect certain routes from being accessed and redirect them to sign in, and allow access these protected routes only when a user is signed in. We also want to check on route change whether the user is currently signed in, and if not redirect them to the sign in / sign up route. still The tools we will be using are Create React App, Glamor for styling, React Router for routing, Amazon Cognito for authentication, and for interacting with AWS services. AWS Amplify This is part 1 of a 2 part series and follows that was very well received. a similar post I did on React Native Authentication will show how to set up the authentication provider and methods that will interact with our provider, signing up and signing in a user. Part 1 will go into how to add React Router and implement a real world authentication flow, including protected routes, signing out, , and more. Part 2 TOTP Getting Started Creating the project and installing dependencies The first thing we will do is create our new project, install our dependencies, and set up the Authentication provider. First, let’s go ahead and create our React project using , and change into the new project’s directory: Create React App create-react-app react-authcd react-auth Next, let’s install React Router and using either npm or yarn: Glamor yarn add react-router-dom glamor or npm i react-router-dom glamor --save Adding the identity provider You can use any identity provider you would like, but we will be using along with the library and the to autogenerate the resources for us from the command line. Amazon Cognito AWS Amplify JavaScript AWS Amplify CLI If not already installed, go ahead and install the AWS Amplify CLI: npm i -g @aws-amplify/cli Next configure the CLI with AWS IAM credentials: amplify configure Click for a video walkthrough of how to create credentials and configure the CLI here Now, we’ll create a new project (choose the default for all options, or choose a name for your project if you would like) amplify init # Here you can choose your text editor of choice & the default for all other options. This creates a new Amplify project, as well as an file in the src directory. aws-exports.js Next we’ll add authentication (Amazon Cognito) and deploy the new configuration: amplify add auth # choose Y when asked if we would like to use the default configuration amplify push will enable Amazon Cognito in our project with default settings, including 2 factor authentication on signup with email (we will add TOTP later). amplify add auth Adding and testing basic user sign up Let’s go ahead and add basic user sign up form to our app to see if we can go ahead and sign up a user. We will be working with the class from AWS Amplify to interact with Amazon Cognito. Auth has quite a few different methods allowing everything from user sign up & sign in to changing and retrieving passwords and everything in between. Auth The main methods that we will be using are the following: — signs up a new user signUp signUp(username: string, password: string, attributes?: object) — submits 2 factor authentication for new user sign up confirmSignUp confirmSignUp(username: string, authenticationCode: string) — signs in an existing user signIn signIn(username: string, password: string) Now, let’s wire this up! The first thing we need to do is configure AWS Amplify at the root of our project, : src/index.js We will begin implementing authorization by allowing users to sign up. Let’s create a new component called , & place it in the src directory. Here, we will create a basic form that allows users to sign up: SignUp.js Next, let’s add some state: We’ve added the items we need to create a user and allow two factor authentication. We will need to also create inputs that will allow us to capture the user information as well as the authorization code. When the user signs up using the method, they will receive an authorization code via email, and will need to input this value into the form and we will then confirm that this code is correct by calling : signUp confirmSignUp Let’s now create the inputs, buttons, and the method that will record the input into our state: onChange Now we’ve created our UI, and we now only need to do one thing: call the Auth methods to sign up and confirm our user, so let’s add these within a couple of class methods now: Finally, we’ll import and use this component in : App.js Now, let’s try this out. You should be able to sign up, get an email with the authorization code, then input the code, and get a confirmation in your console when the user is created. Where is this user data now? We can see this in our console. To check this out, go to dashboard, click on “Manage your User Pools”, and then choose the name of your application, and click “Users and Settings”. There, you can view a list of users that have signed up for your app. Amazon Cognito Now, we can sign the user in! The sign in process is very similar to sign up. We capture the user’s username and password and call , which will sign the user in if successful: Auth.signIn(username, password) signIn() {Auth.signIn(this.state.username, this.state.password).then(user => console.log('user:', user)).catch(err => console.log('error signing in! :', err))} This code works, but we will continue by implementing proper user sign in in part 2 when we add routes to our app, but feel free to try it out and see if you can get it working before you see my implementation in Part 2. If we wanted to access the user data in the above response, we could get it from which would look like this: user.signInUserSession.idToken.payload There are multiple ways of getting this data though at any time once the user is logged in, including . For the full Auth API, click . Auth.currentAuthenticatedUser() here Once the user is logged in, their session is persisted in by Amplify until they call the method. So the user can leave the page, come back, and still be logged in! localStorage Auth.signOut In part two, we will continue by adding routing and styling as well as TOTP so you can work with Google Authenticator or your TOTP provider of choice vs SMS! My Name is . I am a Developer Advocate at working with projects like and , and the founder of . Nader Dabit AWS Mobile AppSync Amplify React Native Training Currently I’m specializing in GraphQL with AWS AppSync as well as authentication & authorization for JavaScript applications, so if this interests you follow me for more future info & tutorials! If you enjoyed this article, and share it! Thanks for your time. please clap n number of times

Flow

Amazon

Facebook

Google

Twitter

YouTube

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

React Authentication in Depth

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Coin Mentioned

Nader Dabit

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

React Authentication in Depth

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Coin Mentioned

Nader Dabit

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES