Autenticação de Website em React

O gerador de Autenticação para Website React adiciona autenticação ao seu site React usando Amazon Cognito.

Este gerador configura a infraestrutura CDK ou Terraform para criar um User Pool do Cognito e um Identity Pool associado, além de uma interface hospedada para gerenciar fluxos de login de usuários e sua integração com seu website React.

Utilização

Adicionar autenticação ao seu website React

Você pode adicionar autenticação ao seu website React de duas formas:

VSCode

1. Instale o Nx Console VSCode Plugin se ainda não o fez
2. Abra o console Nx no VSCode
3. Clique em Generate (UI) na seção "Common Nx Commands"
4. Procure por @aws/nx-plugin - ts#website#auth
5. Preencha os parâmetros obrigatórios
6. Clique em 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

Você também pode realizar uma execução simulada para ver quais arquivos seriam alterados

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

Opções

Parâmetro	Tipo	Padrão	Descrição
project Obrigatório	string	-	O diretório raiz do website.
cognitoDomain	string	-	O prefixo do domínio Cognito a ser usado. Se omitido, um valor é derivado do escopo npm e do nome do projeto do website.
allowSignup	boolean		Se deve permitir auto-registro
iac	inherit | cdk | terraform	inherit	O provedor IaC preferido. Por padrão, isso é herdado da sua seleção inicial.
preferInstallDependencies	boolean	true	Se deve preferir instalar dependências após a execução do gerador. Defina como false para adiar a instalação ao executar múltiplos geradores em lote (uma instalação ainda é executada se necessário para que geradores subsequentes possam calcular o grafo de projetos Nx); instale uma vez no final.

Saída do Gerador

Você encontrará as seguintes alterações no seu website React:

• Directorysrc

  • Directorycomponents

    • DirectoryCognitoAuth

      • index.tsx Componente principal de autenticação
  • main.tsx Atualizado para instrumentar o componente CognitoAuth

Infraestrutura

Como este gerador fornece infraestrutura como código com base no iacProvider escolhido, ele criará um projeto em packages/common que inclui os constructs CDK ou módulos Terraform relevantes.

O projeto comum de infraestrutura como código está estruturado da seguinte forma:

CDK

• Directorypackages/common/constructs

  • Directorysrc

    • Directoryapp/ Constructs para infraestrutura específica de um projeto/gerador

      • …
    • Directorycore/ Constructs genéricos reutilizados pelos constructs em app

      • …
    • index.ts Ponto de entrada exportando os constructs de app
  • project.json Metas de build e configuração do projeto

Projeto gerado

Este projeto é gerado usando o gerador ts#project e portanto configura as mesmas metas de build.

Terraform

• Directorypackages/common/terraform

  • Directorysrc

    • Directoryapp/ Módulos Terraform para infraestrutura específica de um projeto/gerador

      • …
    • Directorycore/ Módulos genéricos reutilizados pelos módulos em app

      • …
  • project.json Metas de build e configuração do projeto

Projeto gerado

Este projeto é gerado usando o gerador terraform#project e portanto configura as mesmas metas de build.

Você também encontrará o seguinte código de infraestrutura gerado com base no iacProvider selecionado:

CDK

• Directorypackages/common/constructs/src

  • Directorycore

    • user-identity.ts Construct que define o user pool e identity pool

Terraform

• Directorypackages/common/terraform/src

  • Directorycore

    • Directoryuser-identity

      • main.tf Módulo wrapper para configuração de identidade
      • Directoryidentity

        • identity.tf Infraestrutura principal de identidade incluindo Cognito User Pool e Identity Pool
      • Directoryadd-callback-url

        • add-callback-url.tf Módulo para adicionar URLs de callback a clientes existentes do user pool

Arquitetura

Este gerador adiciona um user pool do Amazon Cognito (para login) e um identity pool (para federar usuários autenticados a credenciais IAM com escopo definido) à arquitetura existente de website estático:

Proteção contra ameaças

O User Pool é criado no plano de recursos Plus do Cognito com proteção contra ameaças definida no modo AUDIT para autenticação padrão. No modo de auditoria, o Cognito atribui um nível de risco a cada login e registra a avaliação no CloudWatch sem bloquear usuários.

Depois de observar as avaliações de risco para seus usuários, você pode alternar para a aplicação de função completa para responder automaticamente a atividades arriscadas (por exemplo, exigindo MFA ou bloqueando o login):

CDK

Defina standardThreatProtectionMode como StandardThreatProtectionMode.FULL_FUNCTION em packages/common/constructs/src/core/user-identity.ts.

Terraform

Defina advanced_security_mode como ENFORCED no bloco user_pool_add_ons em packages/common/terraform/src/core/user-identity/identity/identity.tf.

Web Application Firewall (WAF)

Por padrão, o User Pool é associado a um AWS WAFv2 Web ACL usando os grupos de regras gerenciadas AWSManagedRulesCommonRuleSet e AWSManagedRulesKnownBadInputsRuleSet. Você pode desabilitar isso se desejar gerenciar seu próprio Web ACL ou não precisar de um:

CDK

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

Terraform

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

  enable_waf = false
}

Uso da Infraestrutura

CDK

Você precisará adicionar a infraestrutura de identidade do usuário à sua stack, declarando-a antes do website:

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

O construct UserIdentity adiciona automaticamente a Configuração de Runtime necessária para garantir que seu website possa apontar para o Cognito User Pool correto para autenticação.

Retenção da função SMS

O User Pool é apoiado por uma função IAM que o Cognito assume para enviar mensagens SMS. A política de remoção da função espelha a do User Pool — por padrão, o UserPool do CDK usa RemovalPolicy.RETAIN, então ao executar cdk destroy tanto o User Pool quanto sua função SMS são retidos e precisarão ser limpos manualmente se não forem mais necessários.

Terraform

Você precisará adicionar o módulo de identidade do usuário e garantir que seu website dependa dele:

packages/infra/src/main.tf

# Implanta identidade primeiro para adicionar à configuração de runtime
module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

# Implanta website após identidade para incluir configuração de runtime
module "my_website" {
  source = "../../common/terraform/src/app/static-websites/my-website"

  providers = {
    aws.us_east_1 = aws.us_east_1
  }

  # Garante que identidade seja implantada primeiro
  depends_on = [module.user_identity]
}

O módulo de identidade do usuário adiciona automaticamente a Configuração de Runtime necessária para garantir que seu website possa apontar para o Cognito User Pool correto para autenticação.

Remova URLs de callback localhost para produção

O cliente do User Pool gerado permite a URL de distribuição do CloudFront como URL de callback/logout OAuth, além de http://localhost:4200 e http://localhost:4300 para desenvolvimento local contra o pool implantado.

É recomendado remover as URLs de callback/logout http://localhost para ambientes de produção, mantendo a lista de permissões limitada às origens reais da sua aplicação.

CDK

Edite as URLs de callback/logout em packages/common/constructs/src/core/user-identity.ts.

Terraform

Edite os callback_urls/logout_urls em packages/common/terraform/src/core/user-identity/identity/identity.tf.

Concedendo Acesso a Usuários Autenticados

Para conceder acesso a usuários autenticados para realizar determinadas ações, como conceder permissões para invocar uma API, você pode adicionar políticas IAM à função autenticada do 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
}

# Adiciona permissões para usuários autenticados invocarem 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}/*"
      }
    ]
  })
}