Autentique a los usuarios de la aplicación React mediante las interfaces de usuario de Amazon Cognito y AWS Amplify

Cree un grupo de usuarios.

Crear un grupo de usuarios de Amazon Cognito. Configure las opciones de inicio de sesión y los requisitos de seguridad del grupo de usuarios según su caso de uso.

Agregar un cliente de aplicación.

Configure un cliente de aplicación para un grupo de usuarios. Este cliente es necesario para que la aplicación interactúe con el grupo de usuarios de Amazon Cognito.

Instale las dependencias.

Para instalar los paquetes aws-amplify y @aws-amplify/ui-react, ejecute el comando siguiente desde el directorio raíz de la aplicación:

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

Configure el grupo de usuarios.

Según el siguiente ejemplo, cree un archivo aws-exports.js y guárdelo en la carpeta src. El archivo dene tener la información siguiente:

// replace the user pool region, id, and app client id details
const awsmobile = {
    "aws_project_region": "put_your_region_here",
    "aws_cognito_region": "put_your_region_here",
    "aws_user_pools_id": "put_your_user_pool_id_here",
    "aws_user_pools_web_client_id": "put_your_user_pool_app_id_here"
}

export default awsmobile;

Importe y configure el servicio Amplify.

Agregue el componente de interfaz de usuario de Authenticator.

Para mostrar el componente de interfaz de usuario de Authenticator, añada las siguientes líneas de código al archivo de punto de entrada de la aplicación (App.js):

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

El componente de interfaz de usuario Authenticator proporciona dos valores de retorno:

Vea el siguiente ejemplo de componente:

function App() {
    return (
        <Authenticator>
            {({ signOut, user }) => (
                <div>
                    <p>Welcome {user.username}</p>
                    <button onClick={signOut}>Sign out</button>
                </div>
            )}
        </Authenticator>
    );
}

(Opcional) Recupere la información de la sesión.

Una vez autenticado un usuario, puede recuperar sus datos de sesión del cliente Amplify. Por ejemplo, puede recuperar el token web JSON (JWT) de la sesión de un usuario para autenticar las solicitudes de su sesión en una API de backend.

Consulte el siguiente ejemplo de un encabezado de solicitud que incluye un JWT:

import { fetchAuthSession } from 'aws-amplify/auth';
(await fetchAuthSession()).tokens?.idToken?.toString();