Pular para o conteúdo
@aws/nx-plugin
Blog

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

Seção intitulada “Utilização”

Adicionar autenticação ao seu website React

Seção intitulada “Adicionar autenticação ao seu website React”

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

  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#react-website#auth
  5. Preencha os parâmetros obrigatórios
    • Clique em Generate

    Opções

    Seção intitulada “Opções”
    Parâmetro Tipo Padrão Descrição
    project Obrigatório string - The root directory of the React website.
    cognitoDomain Obrigatório 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.

    Saída do Gerador

    Seção intitulada “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

    Seção intitulada “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:

    • 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

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

    • Directorypackages/common/constructs/src
      • Directorycore
        • user-identity.ts Construct que define o user pool e identity pool

    Uso da Infraestrutura

    Seção intitulada “Uso da Infraestrutura”

    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.

    Concedendo Acesso a Usuários Autenticados

    Seção intitulada “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:

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