Implementazione

• Installazione delle librerie Amplify

  Avremo bisogno di due librerie Amplify per il nostro progetto. La libreria aws-amplify contiene tutte le API lato cliente per interagire con i vari servizi AWS con cui lavoreremo e la libreria @aws-amplify/ui-react contiene componenti UI specifici del framework. Installa queste librerie nella cartella root del progetto.
  

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

• Creazione del servizio di autenticazione

  Per creare il servizio di autenticazione, usa l'interfaccia a riga di comando (CLI) di 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.

• Distribuzione del servizio di autenticazione

  Ora che il servizio di autenticazione è stato configurato localmente, può essere distribuito eseguendo il comando push di Amplify:
  

  amplify push --y

• Configurazione del progetto React con le risorse Amplify

  L'interfaccia a riga di comando (CLI) ha creato e continuerà ad aggiornare un file chiamato aws-exports.js che si trova nella directory src del nostro progetto. Useremo questo file per fare in modo che il progetto React conosca le diverse risorse AWS disponibili nel nostro progetto Amplify.

  Per configurare la nostra app con queste risorse, apri src/index.js e aggiungi il seguente codice all'ultima importazione:

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

• Aggiungere il flusso di autenticazione in App.js

  Successivamente, apri src/App.js e aggiornalo con il seguente codice:

  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);
  

  In questo componente abbiamo usato il componente withAuthenticator. Questo componente eseguirà lo scaffolding di un intero flusso di autenticazione dell'utente consentendo agli utenti di registrarsi, accedere, ripristinare la password e confermare l'accesso per l'autenticazione a più fattori (MFA). Abbiamo anche usato il componente AmplifySignOut che fornirà il pulsante Disconnetti.
  

• Eseguire l'app localmente

  Successivamente, esegui l'app per vedere il nuovo flusso di autenticazione che protegge l'app:
  

  npm start

  

  Qui puoi provare la registrazione che poi ti farà accedere automaticamente. Una volta effettuato l'accesso, dovresti vedere un pulsante di disconnessione per disconnettere l'utente e riavviare il flusso di autenticazione.

• Distribuire le modifiche nell'ambiente reale

  Distribuisci le modifiche su GitHub per avviare una nuova build nella console Amplify:

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