Implementação

• Instalar as bibliotecas do Amplify

  Precisaremos de 2 bibliotecas do Amplify para este projeto. A biblioteca aws-amplify principal contém todas as APIs do cliente para interação com os vários serviços da AWS com os quais trabalharemos, e a biblioteca @aws-amplify/ui-react contém componentes da interface de usuário específicos da estrutura de trabalho. Instale essas bibliotecas na raiz do projeto.
  

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

• Criar o serviço de autenticação

  Para criar o serviço de autenticação, use a CLI do Amplify:
  

  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.

• Implantar o serviço de autenticação

  Agora que o serviço de autenticação foi configurado localmente, podemos implantá-lo executando o comando push do Amplify:
  

  amplify push --y

• Configurar o projeto React com os recursos do Amplify

  A CLI criou e continuará a atualizar um arquivo chamado aws-exports.js, localizado no diretório src do nosso projeto. Usaremos este arquivo para informar o projeto do React sobre os diferentes recursos da AWS, disponíveis em nosso projeto do Amplify.

  Para configurar o aplicativo com esses recursos, abra o src/index.js e adicione o código abaixo à última importação:

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

• Adicione o fluxo de autenticação no App.js

  Depois, abra o src/App.js e atualize-o com o seguinte código:

  import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'
  
  function App() {
    return (
      <div className="App">
        <header>
          <img src={logo} className="App-logo" alt="logo" />
          <h1>We now have Auth!</h1>
        </header>
        <AmplifySignOut />
      </div>
    );
  }
  
  export default withAuthenticator(App);
  

  Neste componente, usamos o componente withAuthenticator. Esse componente estruturará todo o fluxo de autenticação do usuário, permitindo que eles se cadastrem, façam login, redefinam senhas e confirmem o login para a autenticação multifator (MFA). Usamos também o componente AmplifySignOut, que renderizará o botão Sign Out (Sair).
  

• Executar o aplicativo localmente

  Em seguida, execute o aplicativo para visualizar o novo fluxo de autenticação que o protege:
  

  npm start

  

  Aqui você pode tentar se cadastrar, o que automaticamente fará seu login. Depois de fazer login, você verá o botão Sign out (Sair), que encerrará a sessão do usuário e reiniciará o fluxo de autenticação.

• Implantar as alterações no ambiente ativo

  Implante as alterações no GitHub para iniciar uma nova compilação no console do Amplify:

  git add .
  git commit -m “added auth”
  git push origin master