AWS Amplify | Custom Authentication

AWS Amplify is a fantastic tool for quickly getting up and running with a full-fledged application. It has the amazing capability to incorporate features such as user Authentication.

If you’re using React then you can use the withAuthenticator Higher-Order Component to handle your full-suite of Authentication. As useful as this is, for production you’d typically want to customize this to meet your app’s needs and styling. I took on the challenge of breaking out the Amplify Auth method and building my own Sign-In process to see how it all fits together.

Getting Started

I’m going to assume you’ve gone through the process of setting up your Amplify configuration. If you’re looking for a complete intro I recommend this lengthy but really instructive introduction to Amplify: Video.

Let’s start by creating a new React app and initializing Amplify in the application.

yarn create react-app <APP-NAME>
amplify init

Let’s now add Authentication to our Amplify project. Once that’s done we push the Auth addition to AWS. Once we push it, AWS will scaffold AWS Cognito and User pools.

amplify add auth
amplify push

Once that’d done you’ll see that an aws-exports.js file is created within our React app’s src folder. We need to link this auto-generated config to our React app manually:

import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

Let’s get Coding

I started out by creating a component called Authentication. This will handle the local state for the various sub-components of the authentication process. Those include:

• SignUp
• Verification
• Sign In
• Welcome (once the authentication is completed).

Authentication also handles switching between the various stages shown above.

Our App component looks like this:

Here’s the Authentication component. We have state values for all the various form input fields across all sub-components. We use componentDidMount to see if there is a persisted, authenticated user from a previous session. We use Auth.currentAuthenticatedUser to check for this. handleFormInput is a callback used to handle changes to all of the input fields in sub-components. AuthComponent is used to handle switching between the sub-components. switchComponent is a callback function used for switching the rendered component.

Here’s the SignUp Component. It’s mostly just a form. It also has a method called handleSignUp which triggers the AWS command to sign up the user and then switch the rendered component to Verify.

Now we can move on to the Verify authentication component. AWS makes this really easy to handle. Straight out of the box it handles email authentication.

Now we can move on to SignIn. This will complete the authentication.

Now we finally have our verified user in the AWS Cognito User Pool!