Aller au contenu
@aws/nx-plugin
Blog

Authentification de site web React

Le générateur d’authentification pour site web React ajoute une authentification à votre site React en utilisant Amazon Cognito.

Ce générateur configure l’infrastructure CDK ou Terraform pour créer un User Pool Cognito et un Identity Pool associé, ainsi qu’une interface hébergée pour gérer les flux de connexion utilisateur et son intégration avec votre site React.

Utilisation

Section intitulée « Utilisation »

Ajouter l’authentification à votre site web React

Section intitulée « Ajouter l’authentification à votre site web React »

Vous pouvez ajouter l’authentification à votre site web React de deux manières :

  1. Installez le Nx Console VSCode Plugin si ce n'est pas déjà fait
  2. Ouvrez la console Nx dans VSCode
  3. Cliquez sur Generate (UI) dans la section "Common Nx Commands"
  4. Recherchez @aws/nx-plugin - ts#react-website#auth
  5. Remplissez les paramètres requis
    • Cliquez sur Generate

    Options

    Section intitulée « Options »
    Paramètre Type Par défaut Description
    project Requis string - The root directory of the React website.
    cognitoDomain Requis 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.

    Sortie du générateur

    Section intitulée « Sortie du générateur »

    Vous trouverez les modifications suivantes dans votre site web React :

    • Répertoiresrc
      • Répertoirecomponents
        • RépertoireCognitoAuth
          • index.tsx Composant principal d’authentification
      • main.tsx Mis à jour pour intégrer le composant CognitoAuth

    Infrastructure

    Section intitulée « Infrastructure »

    Ce générateur fournit de l’infrastructure as code basée sur votre iacProvider choisi. Il créera un projet dans packages/common qui inclut les constructions CDK ou modules Terraform pertinents.

    Le projet commun d’infrastructure as code est structuré comme suit :

    • Répertoirepackages/common/constructs
      • Répertoiresrc
        • Répertoireapp/ Constructions pour l’infrastructure spécifique à un projet/générateur
          • …
        • Répertoirecore/ Constructions génériques réutilisées par celles dans app
          • …
        • index.ts Point d’entrée exportant les constructions depuis app
      • project.json Cibles de build et configuration du projet

    Vous trouverez également le code d’infrastructure suivant généré en fonction du iacProvider sélectionné :

    • Répertoirepackages/common/constructs/src
      • Répertoirecore
        • user-identity.ts Construct définissant le user pool et l’identity pool

    Utilisation de l’infrastructure

    Section intitulée « Utilisation de l’infrastructure »

    Vous devrez ajouter l’infrastructure d’identité utilisateur à votre stack, en la déclarant avant le site 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');
      }
    }

    Le construct UserIdentity ajoute automatiquement la Configuration d’exécution nécessaire pour que votre site web puisse pointer vers le bon Cognito User Pool pour l’authentification.

    Accorder l’accès aux utilisateurs authentifiés

    Section intitulée « Accorder l’accès aux utilisateurs authentifiés »

    Pour accorder aux utilisateurs authentifiés l’accès à certaines actions, comme l’autorisation d’appeler une API, vous pouvez ajouter des déclarations de politique IAM au rôle authentifié de l’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');
      }
    }