Account administration application using React-Saga

The client needed account administration to integrate into a ReactJS, Redux, and React-Saga application that used AWS Amplify and Cognito for user account authentication. The React app was designed to be rendered on desktops and any smart devices so they needed us to develop a cross-platform application.

According to the client, the solution must support sign-up with email verification, sign-in, remembering device on sign-in, sign-out, password change (prompt for current password), forgot password (with e-mail verification) with two factors (TOTP) registration post account creation. They didn’t want the option to require TOTP on remembered devices, identifying all devices currently signed in, individual device sign-out or sign-out all. Functionality had to be in accordance with AWS Amplify guidelines (https://aws-amplify.github.io/docs/js/authentication). The authentication framework must be wrapped with components of "withAuthenticator" to gain access to the Amplify framework.

The solution must be based on ReactJS, React-Redux, React-Saga, Material-UI, and Material design standards as the app was getting built from a react/material template (https://demos.creative-tim.com/material-kit-pro-react/#/) more or less.

More Specifications about the User Registration

• Username - required, must be validated as unique prior to creating an account, all usernames would be stored as lower case and converted to lower case for authentication

• Birthday: required, a valid birthday in an acceptable format

• Gender: required, display Female/Male 

• Given name: required and >= 2 characters in length

• Family name: required and >= 2 characters in length

• e-mail: required, must be a valid email address, must be verified as unique prior to account creation, must be stored in Cognito as a lower

Users should have the option of entering a username or password to sign-in. Again, all entries must be converted to lowercase to validate against the entries stored in Cognito in lower case.

• The sign-in components should allow the users to click to sign-up as well as recover the password.

• Upon sign-out, the user should be routed back to the root page and presented with the sign-in/up screen.

• Any unauthenticated user should be presented with the registration screen.

• They needed us either to customize the AWS provided components or develop custom components

Our Approach

We created a web-based CMS with an OTP. We built all three OTP.  

• The first one was an Event-based OTP which uses HMAC One Time Password. This is the HOTP. 

• The second one, TOTP, was Time based OTP where the changing factor is time instead of the counter. The time increment was 45 seconds.

• The third was the Mobile OTP, MOTP was an authentication protocol.

Technology Used

• HMAC

• SHA

• OTP

• Mobile

• Radius

• Auth

• Authentication