Autenticación de Sitios Web con React

El generador de Autenticación para Sitio Web React añade autenticación a tu sitio web React usando Amazon Cognito.

Este generador configura la infraestructura CDK o Terraform para crear un User Pool de Cognito y un Identity Pool asociado, así como una interfaz de usuario alojada para manejar flujos de inicio de sesión y su integración con tu sitio web React.

Uso

Agregar autenticación a tu sitio web React

Puedes agregar autenticación a tu sitio web React de dos formas:

VSCode
CLI

Instale el Nx Console VSCode Plugin si aún no lo ha hecho
Abra la consola Nx en VSCode
Haga clic en Generate (UI) en la sección "Common Nx Commands"
Busque @aws/nx-plugin - ts#react-website#auth
Complete los parámetros requeridos
Haga clic en Generate

pnpm nx g @aws/nx-plugin:ts#react-website#auth

yarn nx g @aws/nx-plugin:ts#react-website#auth

npx nx g @aws/nx-plugin:ts#react-website#auth

bunx nx g @aws/nx-plugin:ts#react-website#auth

También puede realizar una ejecución en seco para ver qué archivos se cambiarían

pnpm nx g @aws/nx-plugin:ts#react-website#auth --dry-run

yarn nx g @aws/nx-plugin:ts#react-website#auth --dry-run

npx nx g @aws/nx-plugin:ts#react-website#auth --dry-run

bunx nx g @aws/nx-plugin:ts#react-website#auth --dry-run

Opciones

Parámetro	Tipo	Predeterminado	Descripción
project Requerido	string	-	The root directory of the React website.
cognitoDomain Requerido	string	-	The cognito domain prefix to use
allowSignup	boolean		Whether to allow self-signup
iacProvider	string	Inherit	The preferred IaC provider. By default this is inherited from your initial selection.

Salida del Generador

Encontrarás los siguientes cambios en tu sitio web React:

Directorysrc
- Directorycomponents
  - DirectoryCognitoAuth
    index.tsx Componente principal de autenticación
- main.tsx Actualizado para instrumentar el componente CognitoAuth

Infraestructura

Dado que este generador proporciona infraestructura como código basada en tu proveedor de iacProvider seleccionado, creará un proyecto en packages/common que incluye los constructos CDK o módulos de Terraform correspondientes.

El proyecto común de infraestructura como código tiene la siguiente estructura:

CDK
Terraform

Directorypackages/common/constructs
- Directorysrc
  - Directoryapp/ Constructos para infraestructura específica de un proyecto/generador
    …
  - Directorycore/ Constructos genéricos reutilizados por los constructos en app
    …
  - index.ts Punto de entrada que exporta los constructos de app
- project.json Objetivos de compilación y configuración del proyecto

Directorypackages/common/terraform
- Directorysrc
  - Directoryapp/ Módulos de Terraform para infraestructura específica de un proyecto/generador
    …
  - Directorycore/ Módulos genéricos reutilizados por los módulos en app
    …
- project.json Objetivos de compilación y configuración del proyecto

También encontrarás el siguiente código de infraestructura generado según el iacProvider seleccionado:

CDK
Terraform

Directorypackages/common/constructs/src
- Directorycore
  - user-identity.ts Constructo que define el user pool y identity pool

Necesitarás agregar la infraestructura de identidad de usuario a tu stack, declarándola antes que el sitio web:

import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { MyWebsite, UserIdentity } from ':my-scope/common-constructs';

export class ApplicationStack extends Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    new UserIdentity(this, 'Identity');

    new MyWebsite(this, 'MyWebsite');
  }
}

El constructo UserIdentity agrega automáticamente la Configuración en tiempo de ejecución necesaria para que tu sitio web pueda apuntar al Cognito User Pool correcto para autenticación.

Necesitarás agregar el módulo de identidad de usuario y asegurarte que tu sitio web dependa de él:

# Implementar identidad de usuario primero para agregar a la configuración de runtime
module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

# Implementar sitio web después de la identidad para incluir configuración de runtime
module "my_website" {
  source = "../../common/terraform/src/app/static-websites/my-website"

  providers = {
    aws.us_east_1 = aws.us_east_1
  }

  # Asegurar que la identidad se implemente primero para agregar a la configuración de runtime
  depends_on = [module.user_identity]
}

El módulo de identidad de usuario agrega automáticamente la Configuración en tiempo de ejecución necesaria para que tu sitio web pueda apuntar al Cognito User Pool correcto para autenticación.

Otorgar acceso a usuarios autenticados

Para permitir que usuarios autenticados realicen ciertas acciones, como otorgar permisos para invocar una API, puedes agregar políticas IAM al rol autenticado del identity pool:

CDK
Terraform

import { Stack } from 'aws-cdk-lib';
import { Construct } from 'constructs';
import { MyWebsite, UserIdentity, MyApi } from ':my-scope/common-constructs';

export class ApplicationStack extends Stack {
  constructor(scope: Construct, id: string) {
    super(scope, id);

    const identity = new UserIdentity(this, 'Identity');
    const api = new MyApi(this, 'MyApi');

    api.grantInvokeAccess(identity.identityPool.authenticatedRole);

    new MyWebsite(this, 'MyWebsite');
  }
}

module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

module "my_api" {
  source = "../../common/terraform/src/app/apis/my-api"
}

# Agregar permisos para usuarios autenticados para invocar Fast API
resource "aws_iam_role_policy" "authenticated_fast_api_invoke" {
  name = "authenticated-user-invoke-my-api"
  role = module.user_identity.authenticated_role_name

  policy = jsonencode({
    Version = "2012-10-17"
    Statement = [
      {
        Effect = "Allow"
        Action = [
          "execute-api:Invoke"
        ]
        Resource = "${module.my_api.api_execution_arn}/*"
      }
    ]
  })
}