Authenticator

In this section, you add the functionality of user authentication to your application.

Authentication

Adding Authentication Features

Execute amplify add auth to add the authentication function to the app. A few questions are asked to you, so please all choose the default answers.

amplify add auth
  • Do you want to use the default authentication and security configuration? Default configuration
  • How do you want users to be able to sign in? Username
  • Do you want to configure advanced settings? No, I am done.
  1. Execute amplify status and verify that the Auth Category resource has been added.

    $ amplify status
    
    Current Environment: production
    
    | Category | Resource name  | Operation | Provider plugin   |
    | -------- | -------------- | --------- | ----------------- |
    | Auth     | boyaki6ab6e661 | Create    | awscloudformation |
    
  2. Execute amplify push to apply the changes to the cloud. The message, Are you sure you want to continue? is appeared, so press Enter.

    amplify push
    ✔ Successfully pulled backend environment production from the cloud.
    
    Current Environment: production
    
    | Category | Resource name  | Operation | Provider plugin   |
    | -------- | -------------- | --------- | ----------------- |
    | Auth     | boyaki6ab6e661 | Create    | awscloudformation |
    ? Are you sure you want to continue? Yes
    
  3. Wait a few minutes for the changes to the cloud to apply.

The amplify add $CATEGORY_NAME command adds any Category resource to the application (learn more). The amplify status command displays a list of resources that are currently added to the application. The amplify push command is a command that applies changes made by the amplify add command to resources in the cloud. In other words, any changes are not applied to the cloud resources until you execute the amplify push command (learn more).

Implementing Authentication Functionality on Front End

Amplify provides aws-amplify-react that is a library of useful components available in React. In this workshop, you use the withAuthenticator component to allow only authenticated users to interact with the application.

  1. Add aws-amplify-react and Amplify Framework to your application.

    npm install --save aws-amplify@2.2.7 aws-amplify-react@3.1.8
    
  2. Replace the code in ./src/App.js file with the following code (please delete all the original code).

import React from 'react';

import Amplify from '@aws-amplify/core';
import awsmobile from './aws-exports';

import { withAuthenticator } from 'aws-amplify-react';

Amplify.configure(awsmobile);

function App() {
  return (
    <h1>
      Hello World!
    </h1>
  );
}

export default withAuthenticator(App, {
  signUpConfig: {
    hiddenDefaults: ['phone_number']
  }
});

withAuthenticator prompts you for a phone number by default. You can skip the phone number input by specifying signUpConfig. For more information on customizing withAuthenticator, see here.

Login Test

Let’s create an account and log in.

  1. Access http://localhost:3000 in web browser.
  2. Click Create account.
  3. Enter Username, Password, Email, and click CREATE ACCOUNT.
  4. Password must be at least 8 characters long.
  5. Enter the Confirmation Code sent to the email address you entered and click CONFIRM.
  6. Enter Username and Password to log in.
  7. Hello World! is displayed, the login is complete.