Autenticación de Sitio Web React

El generador de Autenticación de 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 Cognito User Pool y un Identity Pool asociado, así como una interfaz de usuario alojada para manejar los flujos de inicio de sesión de usuarios, y su integración con tu sitio web React.

Uso

Añadir Autenticación a tu Sitio Web React

Puedes añadir autenticación a tu sitio web React de dos maneras:

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

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

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 Main authentication component
  • main.tsx Updated to instrument the CognitoAuth component

Infraestructura

Dado que este generador proporciona infraestructura como código basada en tu iac elegido, creará un proyecto en packages/common que incluye las construcciones CDK o módulos Terraform relevantes.

El proyecto común de infraestructura como código está estructurado de la siguiente manera:

CDK

• Directoriopackages/common/constructs

  • Directoriosrc

    • Directorioapp/ Constructs for infrastructure specific to a project/generator

      • …
    • Directoriocore/ Generic constructs which are reused by constructs in app

      • …
    • index.ts Entry point exporting constructs from app
  • project.json Project build targets and configuration

Proyecto Generado

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

Terraform

• Directoriopackages/common/terraform

  • Directoriosrc

    • Directorioapp/ Terraform modules for infrastructure specific to a project/generator

      • …
    • Directoriocore/ Generic modules which are reused by modules in app

      • …
  • project.json Project build targets and configuration

Proyecto Generado

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

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

CDK

• Directoriopackages/common/constructs/src

  • Directoriocore

    • user-identity.ts Construct which defines the user pool and identity pool

Terraform

• Directoriopackages/common/terraform/src

  • Directoriocore

    • Directoriouser-identity

      • main.tf Module wrapper for the identity configuration
      • Directorioidentity

        • identity.tf Core identity infrastructure including Cognito User Pool and Identity Pool
      • Directorioadd-callback-url

        • add-callback-url.tf Module for adding callback URLs to existing user pool clients

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) a la arquitectura de sitio web estático existente:

Protección contra amenazas

El User Pool se crea en el plan de características 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.

Autenticación multifactor (MFA)

Por defecto, los usuarios deben configurar MFA (un código SMS o una contraseña de un solo uso basada en tiempo) antes de poder iniciar sesión. Puedes hacer que MFA sea opcional, desactivarlo por completo o restringir qué métodos de segundo factor están disponibles:

CDK

import { Mfa } from 'aws-cdk-lib/aws-cognito';

new UserIdentity(this, 'Identity', {
  mfa: Mfa.OPTIONAL,
  mfaSecondFactor: { sms: false, otp: true },
});

mfa acepta Mfa.OFF / Mfa.OPTIONAL / Mfa.REQUIRED. mfaSecondFactor.sms y mfaSecondFactor.otp habilitan o deshabilitan cada método de segundo factor de forma independiente; no tienen efecto cuando mfa es Mfa.OFF. Establecer mfa: Mfa.REQUIRED con ambos métodos deshabilitados se rechaza en tiempo de síntesis, ya que nadie podría entonces completar el inicio de sesión.

Terraform

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

  mfa = "OPTIONAL"
  mfa_second_factor_sms = false
  mfa_second_factor_otp = true
}

mfa acepta "OFF" / "OPTIONAL" / "ON". mfa_second_factor_sms y mfa_second_factor_otp habilitan o deshabilitan cada método de segundo factor de forma independiente; no tienen efecto cuando mfa es "OFF".

SMS MFA está vinculado a la verificación de número de teléfono

Cognito rechaza la verificación de número de teléfono basada en SMS a menos que SMS también sea un método MFA habilitado cuando MFA no está desactivado, tanto en CDK como en Terraform. Deshabilitar mfaSecondFactor.sms / mfa_second_factor_sms mientras mfa está activado por lo tanto también deshabilita la verificación de número de teléfono basada en SMS para el user pool.

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 deshabilitar 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
}

EC2MetaDataSSRF_QUERYARGUMENTS está configurado en Count

Esta regla marca las direcciones de loopback en argumentos de consulta como intentos de SSRF, lo que bloquearía el inicio de sesión local ya que la Hosted UI recibe un redirect_uri de localhost. Por lo tanto, está configurada en Count mientras las URLs de callback locales están configuradas — las coincidencias aún se registran, y todas las demás reglas bloquean. Elimina las URLs de callback locales para restaurarla a Block.

Uso de Infraestructura

CDK

Necesitarás añadir la infraestructura de identidad de usuario a tu stack, declarándola antes del 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 construct UserIdentity añade automáticamente la Configuración de Tiempo de Ejecución necesaria para asegurar que tu sitio web pueda apuntar al Cognito User Pool correcto para la autenticación.

Retención del rol 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 en cdk destroy tanto el User Pool como su rol SMS se retienen y necesitarán ser limpiados manualmente si ya no se necesitan.

Terraform

Necesitarás añadir el módulo de identidad de usuario, y asegurar que tu sitio web dependa de él:

packages/infra/src/main.tf

# Deploy user identity first to add to runtime config
module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

# Deploy website after identity to include runtime config
module "my_website" {
  source = "../../common/terraform/src/app/static-websites/my-website"

  providers = {
    aws.us_east_1 = aws.us_east_1
  }

  # Ensure identity is deployed first to add to runtime config
  depends_on = [module.user_identity]
}

El módulo de identidad de usuario añade automáticamente la Configuración de Tiempo de Ejecución necesaria para asegurar que tu sitio web pueda apuntar al Cognito User Pool correcto para la autenticación.

Elimina las URLs de callback localhost para producción

El cliente User Pool generado permite la URL de tu distribución CloudFront (y cualquier nombre de dominio personalizado configurado en ella) como URLs de callback/logout de OAuth, más http://localhost:4200 y http://localhost:4300 para desarrollo local contra el pool desplegado.

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 las callback_urls/logout_urls en packages/common/terraform/src/core/user-identity/identity/identity.tf.

Otorgar Acceso a Usuarios Autenticados

Para otorgar a los usuarios autenticados acceso para realizar ciertas acciones, como otorgar permisos para invocar una API, puedes añadir declaraciones de política 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', {
      integrations: MyApi.defaultIntegrations(this).build(),
    });

    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
}

# Add permissions for authenticated users to invoke 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}/*"
      }
    ]
  })
}