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

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

CLI

pnpm

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

yarn

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

npm

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

bun

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

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

pnpm

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

yarn

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

npm

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

bun

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

Opciones

Parámetro	Tipo	Predeterminado	Descripción
project Requerido	string	-	El directorio raíz del sitio web.
cognitoDomain	string	-	El prefijo del dominio de Cognito a utilizar. Si se omite, se deriva un valor del scope de npm y el nombre del proyecto del sitio web.
allowSignup	boolean		Si se permite el auto-registro
iac	inherit | cdk | terraform	inherit	El proveedor de IaC preferido. Por defecto, se hereda de tu selección inicial.
preferInstallDependencies	boolean	true	Si se prefiere instalar las dependencias después de que se ejecute el generador. Establece en false para diferir la instalación cuando se ejecutan múltiples generadores en lote (la instalación aún se ejecuta si es necesario para que los generadores subsiguientes puedan calcular el grafo de proyectos de Nx); instala una vez al final.

Salida del Generador

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

• Directoriosrc

  • Directoriocomponents

    • DirectorioCognitoAuth

      • 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

• Directoriopackages/common/constructs

  • Directoriosrc

    • Directorioapp/ Constructos para infraestructura específica de un proyecto/generador

      • …
    • Directoriocore/ 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

Proyecto generado

Este proyecto se genera utilizando el ts#project generator y por lo tanto configura los mismos objetivos de compilación.

Terraform

• Directoriopackages/common/terraform

  • Directoriosrc

    • Directorioapp/ Módulos de Terraform para infraestructura específica de un proyecto/generador

      • …
    • Directoriocore/ Módulos genéricos reutilizados por los módulos en app

      • …
  • project.json Objetivos de compilación y configuración del proyecto

Proyecto generado

Este proyecto se genera utilizando el terraform#project generator y por lo tanto configura los mismos objetivos de compilación.

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

CDK

• Directoriopackages/common/constructs/src

  • Directoriocore

    • user-identity.ts Constructo que define el user pool y identity pool

Terraform

• Directoriopackages/common/terraform/src

  • Directoriocore

    • Directoriouser-identity

      • main.tf Módulo contenedor para la configuración de identidad
      • Directorioidentity

        • identity.tf Infraestructura principal de identidad incluyendo Cognito User Pool e Identity Pool
      • Directorioadd-callback-url

        • add-callback-url.tf Módulo para añadir URLs de callback a clientes existentes del user pool

Arquitectura

Este generador añade un user pool de Amazon Cognito (para inicio de sesión) y un identity pool (para federar usuarios autenticados a credenciales IAM con alcance limitado) a la arquitectura existente de sitio web estático:

Protección contra amenazas

El User Pool se crea en el plan de funciones Plus de Cognito con protección contra amenazas configurada en modo AUDIT para autenticación estándar. En modo auditoría, Cognito asigna un nivel de riesgo a cada inicio de sesión y registra la evaluación en CloudWatch sin bloquear a los usuarios.

Una vez que hayas observado las evaluaciones de riesgo para tus usuarios, puedes cambiar a la aplicación de función completa para responder automáticamente a actividades riesgosas (por ejemplo, requerir MFA o bloquear el inicio de sesión):

CDK

Establece standardThreatProtectionMode a StandardThreatProtectionMode.FULL_FUNCTION en packages/common/constructs/src/core/user-identity.ts.

Terraform

Establece advanced_security_mode a ENFORCED en el bloque user_pool_add_ons en packages/common/terraform/src/core/user-identity/identity/identity.tf.

Web Application Firewall (WAF)

Por defecto, el User Pool está asociado con una Web ACL de AWS WAFv2 usando los grupos de reglas administradas AWSManagedRulesCommonRuleSet y AWSManagedRulesKnownBadInputsRuleSet. Puedes desactivar esto si deseas administrar tu propia Web ACL o no requieres una:

CDK

new UserIdentity(this, 'Identity', { enableWaf: false });

Terraform

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

  enable_waf = false
}

Uso de la Infraestructura

CDK

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

packages/infra/src/stacks/application-stack.ts

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.

Retención del rol de SMS

El User Pool está respaldado por un rol IAM que Cognito asume para enviar mensajes SMS. La política de eliminación del rol refleja la del User Pool — por defecto el UserPool de CDK usa RemovalPolicy.RETAIN, por lo que al ejecutar cdk destroy tanto el User Pool como su rol de SMS se retienen y deberán limpiarse manualmente si ya no son necesarios.

Terraform

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

packages/infra/src/main.tf

# 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.

Eliminar URLs de callback localhost para producción

El cliente del User Pool generado permite la URL de tu distribución CloudFront como URL de callback/logout de OAuth, además de http://localhost:4200 y http://localhost:4300 para desarrollo local contra el pool implementado.

Se recomienda eliminar las URLs de callback/logout http://localhost para etapas de producción, manteniendo la lista de permitidos limitada a los orígenes reales de tu aplicación.

CDK

Edita las URLs de callback/logout en packages/common/constructs/src/core/user-identity.ts.

Terraform

Edita los callback_urls/logout_urls en packages/common/terraform/src/core/user-identity/identity/identity.tf.

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

packages/infra/src/stacks/application-stack.ts

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

Terraform

packages/infra/src/main.tf

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

module "asset_bucket" {
  source = "../../common/terraform/src/core/asset-bucket"
}

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

  asset_bucket_name = module.asset_bucket.bucket_name
}

# 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}/*"
      }
    ]
  })
}