Attention

This workshop content is over a year old and AWS Amplify has made a great deal of improvements since this content was originally written.

Instead of this content, please check out some of the more up-to-date Amplify content. One great example is the AWS Serverless Airline Booking project. Besides that, you can find lots more excellent AWS Amplify content on the AWS Amplify Community site.

If you would still like to review the content of this workshop, these instructions should still work, provided you use the specific version of AWS Amplify noted in the Prerequisites section.

Rendering the Front End

Now that we have our backend set up for managing registrations and sign-in, all we need to do is use the withAuthenticator higher-order React component from AWS Amplify to wrap our existing App component. This will take care of rendering a simple UI for letting users sign up, confirm their account, sign in, sign out, or reset their password.

Adding Amplify NPM dependencies

We haven’t yet added the aws-amplify and aws-amplify-react modules to our app, so let’s add them.

  1. Run npm install --save aws-amplify aws-amplify-react

  2. Replace the contents of src/App.js with the following:

    // src/App.js
    
    import React, { Component } from 'react';
    import { Header } from 'semantic-ui-react';
    
    import Amplify from 'aws-amplify';
    import aws_exports from './aws-exports';
    import { withAuthenticator } from 'aws-amplify-react';
    Amplify.configure(aws_exports);
    
    
    class App extends Component { 
        render() { 
            return (
                <div>
                    <Header as='h1'>Hello World!</Header>
                </div>
            );
        }
    }
    
    export default withAuthenticator(App, {includeGreetings: true});

Take a look at the web app now and you should have a sign-up / sign-in form!

What we changed in App.js

  • Imported and configured the AWS Amplify JS library

  • Imported the withAuthenticator higher order component from aws-amplify-react

  • Wrapped the App component using withAuthenticator

Creating an account

Create an account in the app by providing a username, password, and a valid email address (to receive a confirmation code at).

You’ll be taken to a screen asking you to confirm a code. This is because Amazon Cognito wants to verify a user’s email address before it lets them sign in.

Check your email. You should have received a confirmation code message. Copy and paste the confirmation code into your app and you should then be able to log in with the username and password you entered during sign up.

Once you sign in, the form disappears and you can see our App component rendered below a header bar that contains your username and a ‘Sign Out’ button.

This is a pretty simple authentication UI, but there’s a lot you can do to customize it, including replacing parts with your own React components or using a completely hosted UI that can redirect back to your app. See the Customization section of the AWS Amplify Authentication Guide for more information.