Crear una aplicación React con AWS Amplify y añadir autenticación con Amazon Cognito

Instalar la CLI de Amplify

La CLI de Amplify es una cadena de herramientas unificada para crear servicios en la nube de AWS para su aplicación React. Para instalar la CLI de Amplify, ejecute:

npm install -g @aws-amplify/cli

npm le notificará si hay una nueva versión principal disponible. Si es así, utilice el siguiente comando para actualizar su versión de npm:

npm install -g npm@9.8.0

donde 9.8.0 se refiere a la versión que desea instalar.

Crear una React App.

Para crear una nueva aplicación React, utilice el comando:

npx create-react-app amplify-react-application

donde ampify-react-application es el nombre de la aplicación.

Cuando haya creado correctamente la aplicación, verá el siguiente mensaje:

Success! Created amplify-react-application

Se creará un directorio con varias subcarpetas para la aplicación React.

Inicie la aplicación en el equipo local.

Vaya al directorio amplify-react-application que se creó en el paso anterior y ejecute el comando:

amplify-react-application% npm start

Esto inicia la aplicación React en la máquina local.

Configure Amplify para que se conecte a su cuenta de AWS.

Configure Amplify ejecutando el comando:

amplify-react-application % amplify configure

La CLI de Amplify le pide que siga estos pasos para configurar el acceso a su cuenta de AWS:

Estos pasos se muestran en la terminal de la siguiente manera.

Follow these steps to set up access to your AWS account:
Sign in to your AWS administrator account:
https://console.aws.amazon.com/
Press Enter to continue
Specify the AWS Region
? region:  us-east-1
Follow the instructions at
https://docs.amplify.aws/cli/start/install/#configure-the-amplify-cli
to complete the user creation in the AWS console
https://console.aws.amazon.com/iamv2/home#/users/create
Press Enter to continue
Enter the access key of the newly created user:
? accessKeyId:  ********************
? secretAccessKey:  ****************************************
This would update/create the AWS Profile in your local machine
? Profile Name:  new

Successfully set up the new user.

Para obtener más información sobre estos pasos, consulte la documentación del Amplify Dev Center.

Inicialice Amplify.

Añada la autenticación.

Puede usar el comando amplify add <category> para agregar característica como el inicio de sesión de un usuario o una API de backend. En este paso, utilizará el comando para añadir la autenticación.

Amplify proporciona un servicio de autenticación de backend con Amazon Cognito, bibliotecas de frontend y un componente de Authenticator UI integrado. Las características incluyen el registro de usuarios, el inicio de sesión de los usuarios, la autenticación multifactorial, el cierre de sesión de los usuarios y el inicio de sesión sin contraseña. También puede autenticar a los usuarios mediante la integración con proveedores de identidad federados, como Amazon, Google y Facebook. La categoría de autenticación de Amplify se integra perfectamente con otras categorías de Amplify, como API, análisis y almacenamiento, para que pueda definir reglas de autorización para usuarios autenticados y no autenticados.

Cambie el archivo App.js.

En la carpeta src, abra y revise el archivo App.js. El archivo modificado debe tener el siguiente aspecto:

{  App.Js File after modifications:
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { Amplify } from 'aws-amplify';
import { withAuthenticator, Button, Heading } from '@aws-amplify/ui-react';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
function App({ signOut }) {
  return (
      <div>
      <h1>Thankyou for doing verification</h1>
      <h2>My Content</h2>
       <button onClick={signOut}>Sign out</button>
    </div>
  );
}
export default withAuthenticator(App);

Importe paquetes de React.

El archivo App.js importa dos paquetes de React. Instale estos paquete mediante el comando:

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

Inicie la aplicación.

Inicie la aplicación React en su máquina local:

amplify-react-application1 % npm start

Compruebe la autenticación.

Compruebe si la aplicación solicita los parámetros de autenticación. (En nuestro ejemplo, configuramos el correo electrónico como método de inicio de sesión).

La frontend UI debería pedirle las credenciales de inicio de sesión y ofrecerle la opción de crear una cuenta.

También puede configurar el proceso de compilación de Amplify para añadir el backend como parte de un flujo de trabajo de implementación continua. Sin embargo, este patrón no aborda esa opción.