Authentification de site Web React

Le générateur d’authentification de site Web React ajoute l’authentification à votre site Web React en utilisant Amazon Cognito.

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

Utilisation

Ajouter l’authentification à votre site Web React

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

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

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

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

Infrastructure

Étant donné que ce générateur fournit de l’infrastructure en tant que code basée sur votre iac choisi, il créera un projet dans packages/common qui inclut les constructs CDK ou modules Terraform pertinents.

Le projet d’infrastructure en tant que code commun est structuré comme suit :

CDK

• Répertoirepackages/common/constructs

  • Répertoiresrc

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

      • …
    • Répertoirecore/ Constructs génériques qui sont réutilisés par les constructs dans app

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

Projet généré

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

Terraform

• Répertoirepackages/common/terraform

  • Répertoiresrc

    • Répertoireapp/ Terraform modules for infrastructure specific to a project/generator

      • …
    • Répertoirecore/ Generic modules which are reused by modules in app

      • …
  • project.json Project build targets and configuration

Projet généré

Ce projet est généré en utilisant 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 de votre iac sélectionné :

CDK

• Répertoirepackages/common/constructs/src

  • Répertoirecore

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

Terraform

• Répertoirepackages/common/terraform/src

  • Répertoirecore

    • Répertoireuser-identity

      • main.tf Module wrapper for the identity configuration
      • Répertoireidentity

        • identity.tf Core identity infrastructure including Cognito User Pool and Identity Pool
      • Répertoireadd-callback-url

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

Architecture

Ce générateur ajoute un pool d’utilisateurs Amazon Cognito (pour la connexion) et un pool d’identités (pour fédérer les utilisateurs connectés aux informations d’identification IAM délimitées) à l’architecture de site Web statique existante :

Protection contre les menaces

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, exiger l’authentification multifacteur ou bloquer 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.

Authentification multifacteur (MFA)

Par défaut, les utilisateurs doivent configurer l’authentification multifacteur (un code SMS ou un mot de passe à usage unique basé sur le temps) avant de pouvoir se connecter. Vous pouvez rendre l’authentification multifacteur facultative, la désactiver entièrement ou restreindre les méthodes de second facteur disponibles :

CDK

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

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

mfa accepte Mfa.OFF / Mfa.OPTIONAL / Mfa.REQUIRED. mfaSecondFactor.sms et mfaSecondFactor.otp activent ou désactivent chaque méthode de second facteur indépendamment ; ils n’ont aucun effet lorsque mfa est Mfa.OFF. Définir mfa: Mfa.REQUIRED avec les deux méthodes désactivées est rejeté au moment de la synthèse, car personne ne pourrait alors terminer la connexion.

Terraform

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

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

mfa accepte "OFF" / "OPTIONAL" / "ON". mfa_second_factor_sms et mfa_second_factor_otp activent ou désactivent chaque méthode de second facteur indépendamment ; ils n’ont aucun effet lorsque mfa est "OFF".

L’authentification multifacteur par SMS est liée à la vérification du numéro de téléphone

Cognito rejette la vérification du numéro de téléphone par SMS sauf si le SMS est également une méthode d’authentification multifacteur activée lorsque l’authentification multifacteur n’est pas désactivée, à la fois dans CDK et Terraform. Désactiver mfaSecondFactor.sms / mfa_second_factor_sms lorsque mfa est activé désactive donc également la vérification du numéro de téléphone par SMS pour le pool d’utilisateurs.

Pare-feu d’application Web (WAF)

Par défaut, le User Pool est associé à un 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
}

EC2MetaDataSSRF_QUERYARGUMENTS est défini sur Count

Cette règle signale les adresses de bouclage dans les arguments de requête comme des tentatives SSRF, ce qui bloquerait la connexion locale puisque l’interface utilisateur hébergée reçoit un redirect_uri localhost. Elle est donc définie sur Count tant que les URL de rappel locales sont configurées — les correspondances sont toujours enregistrées et toutes les autres règles bloquent. Supprimez les URL de rappel locales pour la restaurer en Block.

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 garantir que votre site Web peut 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 de cdk destroy, le User Pool et son rôle SMS sont 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

# 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]
}

Le module d’identité utilisateur ajoute automatiquement la Configuration d’exécution nécessaire pour garantir que votre site Web peut pointer vers le bon Cognito User Pool pour l’authentification.

Supprimez les URL de rappel localhost pour la production

Le client User Pool généré autorise l’URL de votre distribution CloudFront (et tous les noms de domaine personnalisés configurés dessus) comme URL de rappel/déconnexion OAuth, plus http://localhost:4200 et http://localhost:4300 pour le développement local contre le pool déployé.

Il est recommandé de supprimer les URL de rappel/déconnexion http://localhost pour les environnements de production, en gardant la liste d’autorisation limitée aux origines réelles de votre application.

CDK

Modifiez les URL de rappel/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

Afin d’accorder aux utilisateurs authentifiés l’accès pour effectuer certaines actions, comme accorder des autorisations pour invoquer une API, vous pouvez ajouter des instructions de politique IAM au rôle authentifié du pool d’identités :

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}/*"
      }
    ]
  })
}