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

Ajouter l’authentification à votre site web React

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

VSCode

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#website#auth
5. Remplissez les paramètres requis
6. Cliquez sur 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

Vous pouvez également effectuer une simulation pour voir quels fichiers seraient modifiés

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

Options

Paramètre	Type	Par défaut	Description
project Requis	string	-	Le répertoire racine du site web.
cognitoDomain	string	-	Le préfixe de domaine Cognito à utiliser. Si omis, une valeur est dérivée du scope npm et du nom du projet de site web.
allowSignup	boolean		Autoriser ou non l'auto-inscription
iac	inherit | cdk | terraform	inherit	Le fournisseur IaC préféré. Par défaut, celui-ci est hérité de votre sélection initiale.
preferInstallDependencies	boolean	true	Indique s'il faut privilégier l'installation des dépendances après l'exécution du générateur. Définir sur false pour différer l'installation lors de l'exécution de plusieurs générateurs en lot (une installation s'exécute quand même si nécessaire pour que les générateurs suivants puissent calculer le graphe de projet Nx) ; installer une seule fois à la fin.

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

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 :

CDK

• 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

Projet généré

Ce projet est généré avec le générateur ts#project et configure donc les mêmes cibles de build.

Terraform

• Répertoirepackages/common/terraform

  • Répertoiresrc

    • Répertoireapp/ Modules Terraform pour l’infrastructure spécifique à un projet/générateur

      • …
    • Répertoirecore/ Modules génériques réutilisés par ceux dans app

      • …
  • project.json Cibles de build et configuration du projet

Projet généré

Ce projet est généré avec le générateur terraform#project et configure donc les mêmes cibles de build.

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

CDK

• Répertoirepackages/common/constructs/src

  • Répertoirecore

    • user-identity.ts Construct définissant le user pool et l’identity pool

Terraform

• Répertoirepackages/common/terraform/src

  • Répertoirecore

    • Répertoireuser-identity

      • main.tf Module wrapper pour la configuration d’identité
      • Répertoireidentity

        • identity.tf Infrastructure d’identité principale incluant Cognito User Pool et Identity Pool
      • Répertoireadd-callback-url

        • add-callback-url.tf Module pour ajouter des URLs de callback aux clients existants du user pool

Architecture

Ce générateur ajoute un user pool Amazon Cognito (pour la connexion) et un identity pool (pour fédérer les utilisateurs connectés vers des identifiants IAM à portée limitée) à l’architecture de site web statique existante :

Threat protection

Le User Pool est créé sur le plan de fonctionnalités Plus de Cognito avec la protection contre les menaces définie en mode AUDIT pour l’authentification standard. En mode audit, Cognito attribue un niveau de risque à chaque connexion et enregistre l’évaluation dans CloudWatch sans bloquer les utilisateurs.

Une fois que vous avez observé les évaluations de risque pour vos utilisateurs, vous pouvez passer à l’application complète pour répondre automatiquement aux activités à risque (par exemple en exigeant MFA ou en bloquant la connexion) :

CDK

Définissez standardThreatProtectionMode sur StandardThreatProtectionMode.FULL_FUNCTION dans packages/common/constructs/src/core/user-identity.ts.

Terraform

Définissez advanced_security_mode sur ENFORCED dans le bloc user_pool_add_ons dans packages/common/terraform/src/core/user-identity/identity/identity.tf.

Web Application Firewall (WAF)

Par défaut, le User Pool est associé à une Web ACL AWS WAFv2 utilisant les groupes de règles gérées AWSManagedRulesCommonRuleSet et AWSManagedRulesKnownBadInputsRuleSet. Vous pouvez désactiver cela si vous souhaitez gérer votre propre Web ACL ou si vous n’en avez pas besoin :

CDK

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

Terraform

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

  enable_waf = false
}

Utilisation de l’infrastructure

CDK

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.

Rétention du rôle SMS

Le User Pool est soutenu par un rôle IAM que Cognito assume pour envoyer des messages SMS. La politique de suppression du rôle reflète celle du User Pool — par défaut, le UserPool de CDK utilise RemovalPolicy.RETAIN, donc lors d’un cdk destroy, le User Pool et son rôle SMS sont tous deux conservés et devront être nettoyés manuellement s’ils ne sont plus nécessaires.

Terraform

Vous devrez ajouter le module d’identité utilisateur et vous assurer que votre site web en dépend :

packages/infra/src/main.tf

# Déployer d'abord l'identité utilisateur pour l'ajouter à la config d'exécution
module "user_identity" {
  source = "../../common/terraform/src/core/user-identity"
}

# Déployer le site web après l'identité pour inclure la config d'exécution
module "my_website" {
  source = "../../common/terraform/src/app/static-websites/my-website"

  providers = {
    aws.us_east_1 = aws.us_east_1
  }

  # S'assurer que l'identité est déployée en premier
  depends_on = [module.user_identity]
}

Le module d’identité utilisateur 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.

Supprimer les URLs de callback localhost pour la production

Le client User Pool généré autorise l’URL de votre distribution CloudFront comme URL de callback/déconnexion OAuth, ainsi que http://localhost:4200 et http://localhost:4300 pour le développement local contre le pool déployé.

Il est recommandé de supprimer les URLs de callback/déconnexion http://localhost pour les environnements de production, en limitant la liste d’autorisation à vos origines d’application réelles.

CDK

Modifiez les URLs de callback/déconnexion dans packages/common/constructs/src/core/user-identity.ts.

Terraform

Modifiez les callback_urls/logout_urls dans packages/common/terraform/src/core/user-identity/identity/identity.tf.

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 :

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
}

# Ajouter des permissions pour les utilisateurs authentifiés d'appeler 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}/*"
      }
    ]
  })
}