Add Authentication

Add Amplify Authentication

The Authentication category of the Amplify Framework uses Amazon Cognito as the main authentication provider. Amazon Cognito is a robust user directory service that handles user registration, authentication, account recovery & other operations. Amplify supports various types of Authentication (e.g. Social sign-in) and configuration options (e.g. additional fields or MFA).

  1. Run this Amplify CLI command to start configuration process:
amplify auth add

We are going to use Default configuration with Cognito User Pools and sign in with Username:

Using service: Cognito, provided by: awscloudformation
 
 The current configured provider is Amazon Cognito. 
 
 Do you want to use the default authentication and security configuration? Default configuration
 Warning: you will not be able to edit these selections. 
 How do you want users to be able to sign in? Username
 Do you want to configure advanced settings? No, I am done.

  1. Push Backend changes to the Cloud:
amplify push

Confirm your decision, when prompted.

✔ Successfully pulled backend environment dev from the cloud.

Current Environment: dev

| Category | Resource name       | Operation | Provider plugin   |
| -------- | ------------------- | --------- | ----------------- |
| Auth     | traveldealsXXXXXXXX | Create    | awscloudformation |
? Are you sure you want to continue? Yes
  Updating resources in the cloud. This may take a few minutes...

While the backend is pushed, you can continue with following sections to modify Web Application. However, functionality will not be available until amplify push is complete.

Update Web Application with Authentication

A simple way to add authentication flows into your app is to use the Authenticator component. The Authenticator component encapsulates an authentication workflow in the framework of your choice and is backed by the cloud resources set up in your Auth cloud resources.

  1. Install NPM modules for Amplify Libraries and Semantic UI React:
npm install --save aws-amplify @aws-amplify/ui-react semantic-ui-react
  1. Update the code of src/App.js to:
import React from 'react';
import './App.css';
import Amplify, { Auth } from 'aws-amplify';
import { AmplifyAuthenticator, AmplifySignUp } from '@aws-amplify/ui-react';
import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';

import { Icon, Menu, Dropdown } from 'semantic-ui-react'

import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

function AuthStateApp() {
  const [authState, setAuthState] = React.useState();
  const [user, setUser] = React.useState();

  React.useEffect(() => {
    onAuthUIStateChange((nextAuthState, authData) => {
      setAuthState(nextAuthState);
      setUser(authData);
    });
  }, []);
  document.title = 'Travel Deals';
  return authState === AuthState.SignedIn && user ? (
      <div className='App'>
        <Menu fixed='top' color='teal' inverted>
          <Menu.Menu>
            <Menu.Item header href='/'><Icon name='globe'/>Travel Deals</Menu.Item>
          </Menu.Menu>
          <Menu.Menu position='right'>
            <Dropdown item simple text={user.username}>
              <Dropdown.Menu>
                <Dropdown.Item onClick={() => Auth.signOut()}><Icon name='power off'/>Log Out</Dropdown.Item>
              </Dropdown.Menu>
            </Dropdown>
          </Menu.Menu>
        </Menu>
      </div>
    ) : (
      <AmplifyAuthenticator>
        <AmplifySignUp slot='sign-up' formFields={[
            { type: 'username' },
            { type: 'password' },
            { type: 'email' }
          ]}/>
      </AmplifyAuthenticator>
  );
};

export default AuthStateApp;
  1. Add import of Semantic UI stylesheet inside of <head> in public/index.html (e.g. right after <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />):
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css"/>

Run Web Application locally

Functionality is available only after amplify push is complete.

Now we can run web application locally:

npm start

Console output:

Compiled successfully!

You can now view traveldeals in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.1.2:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

Use Local URL to access web application:

Authentication form in Web Application

Create Application User

  1. When you open the Web Application, you will be able to create a new User account:
    Create a new account in Web Application
  2. After registration, you will receive a confirmation email with code. Use this code to confirm registration:
    Confirm sign up in Web Application
  3. After successful login you will see the empty screen with Log Out button.
    Web Application empty screen for logged in User