Create a cognito protected react-app

On this page there is an explaination to create a simple react app that is protected with an login....
This page can be hosted in an web-hosting enabled S3-Bucket

http://react.amazoninstructor.info.s3-website-eu-west-1.amazonaws.com/

I used several sources for this.

A youtube video
It was demonstrated with version 1 I was able to up gade it to v2

Setup guide

Install Amplify

npm install -g @aws-amplify/cli

Amplify installation Guide

install react

npm install react react-dom --save

create react app

npx create-react-app name-amplify-react-app

Configure Amplify

amplify configure

Amplify installation Guide

Initiate Amplify setup

This init id one from the root of the app.

cd name-amplify-react-app
amplify init

App Name
Environment (dev)
Default Editor (vscode)
App type (javascript)
Javascript framework (react)
Source Directory Path (src)
Build command: npm run-script build
Start command: npm run-script start
Build provider (cloudformation)
AWS profile (any of the above, created in the configure phase)

The folder amplify is created and a file /src/aws-exports.js.

add authentication to the back end

amplify add auth

setup default configuration
Sign in usning E-Mail
No need to setup advanced settings

push the backend to the cloud

amplify push

select the proposed name and continue

insert the code for cognito

Open the file /src/App.js.

We need to import a couple of things:

Import amplify items
replace the code for our application
replace the default export wit the export that includes authentication

Import amplify items

replace the import codeblock at the top of the file:

import { Amplify } from 'aws-amplify';
import { withAuthenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
import awsExports from './aws-exports';
import React from 'react';
import './App.css'
Amplify.configure(awsExports);

Replace the code for our application

Remove all content between <header classname=App-header> and </header> elements. and replace it by the following:

<div>
  <h1>Hello {user.username}{user.emailaddress}</h1>
  <p>this is just a test to see if it works</p>
  <p>Is it automaticly deployed?</p>
  <button class="amplify-button amplify-field-group__control amplify-button--primary" onClick={signOut}>Sign out</button>
</div>

replace the default export

export default withAuthenticator(App);

install final npm packages

npm install --save aws-amplify @aws-amplify/ui-react

test react app locally

npm start