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 :

Exécuter ce générateur@aws/nx-plugin:ts#website#auth

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

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

Composez votre commande5

projectRequis

cognitoDomain

allowSignup

false

iac

inheritcdkterraform

preferInstallDependencies

true

--dry-runVous pouvez également effectuer une simulation pour voir quels fichiers seraient modifiés

Options

Options du générateur5 options

projectRequisstring

Le répertoire racine du site web.

cognitoDomainstring

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.

allowSignupbooleanPar défaut: false

Autoriser ou non l'auto-inscription

iacenumPar défaut: inherit

Le fournisseur IaC préféré. Par défaut, celui-ci est hérité de votre sélection initiale.

inheritcdkterraform

preferInstallDependenciesbooleanPar défaut: 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 user pool Amazon Cognito (pour la connexion) et un identity pool (pour fédérer les utilisateurs connectés vers des informations d’identification IAM délimitées) à l’architecture de site Web statique existante :

Loading the diagram…

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 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.

Authentification multi-facteurs (MFA)

Par défaut, les utilisateurs doivent configurer MFA (un code SMS ou un mot de passe à usage unique basé sur le temps) avant de pouvoir se connecter. Vous pouvez rendre MFA optionnel, le 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".

Le MFA par SMS est lié à la vérification du numéro de téléphone

Cognito rejette la vérification du numéro de téléphone par SMS à moins que le SMS ne soit également une méthode MFA activée chaque fois que MFA n’est pas désactivé, à la fois dans CDK et Terraform. Désactiver mfaSecondFactor.sms / mfa_second_factor_sms alors que mfa est activé désactive donc également la vérification du numéro de téléphone par SMS pour le user pool.

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
}

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, StackProps } 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, props?: StackProps) {
    super(scope, id, props);

    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 les propres URL de serveur de développement local et de prévisualisation de chaque site Web connecté (par exemple http://localhost:4200 et http://localhost:4300 pour le premier site Web généré dans un espace de travail) pour le développement local contre le pool déployé. Chaque site Web généré avec ts#website se voit attribuer ses propres ports distincts, donc un espace de travail avec plusieurs sites Web aura plus d’une paire http://localhost:<port> autorisée ici.

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 à vos origines d’application réelles.

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 permissions pour invoquer 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, StackProps } 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, props?: StackProps) {
    super(scope, id, props);

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