Implementación

• Instalar bibliotecas de Amplify

  Necesitaremos 2 bibliotecas Amplify para nuestro proyecto. La biblioteca aws-amplify principal contiene todas las API del lado del cliente para interactuar con los diferentes servicios de AWS con los que trabajaremos y la biblioteca @aws-amplify/ui-react contiene componentes de IU específicas para el marco. Instale estas bibliotecas en la raíz del proyecto.
  

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

• Cree el servicio de autenticación

  Para crear el servicio de autenticación, use la CLI de 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.

• Implemente el servicio de autenticación

  Ahora que se ha configurado el servicio de autenticación en forma local, podemos implementarlo ejecutando el comando de envío de Amplify:
  

  amplify push --y

• Configure el proyecto React con recursos de Amplify

  La CLI ha creado y seguirá actualizando un archivo denominado aws-exports.js que se encuentra en el directorio src de nuestro proyecto. Usaremos este archivo para permitir que el proyecto React conozca los diferentes recursos de AWS que están disponibles en nuestros proyecto de Amplify.

  Para configurar nuestra aplicación con estos recursos, abra src/index.js y agregue el siguiente código debajo de la última importación:

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

• Agregue el flujo de autenticación en App.js

  Luego, abra src/App.js y actualice el siguiente 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);
  

  En este componente hemos utilizando el componente withAuthenticator. Este componente armará un andamio de un flujo completo de autenticación de usuarios lo que permitirá que los usuarios se registren, inicien sesión, restablezcan su contraseña y confirmen el inicio de sesión para lograr una autenticación de múltiples factores (MFA). También hemos utilizado el componente AmplifySignOut que mostrará un botón de Cierre de sesión.
  

• Ejecute la aplicación en forma local

  Luego, ejecute la aplicación para ver el nuevo flujo de autenticación que protege a la aplicación:
  

  npm start

  

  Aquí, puede intentar iniciar sesión, lo que automáticamente iniciará su sesión. Cuando haya iniciado sesión, debería ver un botón de cierre de sesión que cerrará la sesión del usuario y reiniciará el flujo de autenticación.

• Implemente los cambios en el entorno en vivo

  Implemente los cambios en GitHub para iniciar una nueva creación en la consola de Amplify:

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