Lambda@EdgeとCognitoでJamstackアプリの開発環境に認証を実装する

Parameters:
  # 1. 環境を受け取る
  Environment:
    Type: String
    Description: "デプロイ先環境"
    Default: stg
    AllowedValues:
      - stg
      - prd
# ...

Conditions:
  # 2. 「本番環境であるか」を判定する IsProd 条件
  IsProd: !Equals
    - !Ref Environment
    - 'prd'
  # 3. 「本番環境でない場合」にアクセス制御を有効化する UseAccessControl 条件
  UseAccessControl: !Not
    - !Condition IsProd

# ...
  CognitoUserPool:
    Type: AWS::Cognito::UserPool
    Condition: UseAccessControl
    Properties:
      UserPoolName: !Sub ${AWS::StackName}-userpool
      # (A) デフォルト ESSENTIALS なので注意！
      UserPoolTier: LITE
      Policies:
        PasswordPolicy:
          MinimumLength: 8
          RequireLowercase: true
          RequireNumbers: true
          RequireSymbols: true
          RequireUppercase: true
          TemporaryPasswordValidityDays: 7
      AdminCreateUserConfig:
        AllowAdminCreateUserOnly: true
      AccountRecoverySetting:
        RecoveryMechanisms:
          - Name: verified_email
            Priority: 1
      UsernameConfiguration:
        CaseSensitive: false
      VerificationMessageTemplate:
        DefaultEmailOption: CONFIRM_WITH_CODE
      MfaConfiguration: 'ON'
      EnabledMfas:
        - SOFTWARE_TOKEN_MFA
      Schema:
        - Name: email
          AttributeDataType: String
          Mutable: true
          Required: true
      EmailConfiguration:
        EmailSendingAccount: COGNITO_DEFAULT
  CognitoUserPoolClient:
    Type: AWS::Cognito::UserPoolClient
    Condition: UseAccessControl
    Properties:
      UserPoolId: !Ref CognitoUserPool
      ClientName: !Sub ${AWS::StackName}-userpoolclient
      GenerateSecret: false
      ExplicitAuthFlows:
        - ALLOW_USER_SRP_AUTH
        - ALLOW_REFRESH_TOKEN_AUTH
      PreventUserExistenceErrors: ENABLED
      AllowedOAuthFlows:
        - code
      AllowedOAuthScopes:
        - email
        - openid
        - phone
        - profile
      AllowedOAuthFlowsUserPoolClient: true
      SupportedIdentityProviders:
        - COGNITO
      CallbackURLs:
        # 本番環境以外はサブドメインがつくので条件分岐
        - !If
          - IsProd
          - !Sub https://${Domain}
          - !Sub https://${Environment}.${Domain}
      LogoutURLs: []
  CognitoUserPoolDomain:
    Type: AWS::Cognito::UserPoolDomain
    Condition: UseAccessControl
    Properties:
      UserPoolId: !Ref CognitoUserPool
      Domain: !Sub ${AWS::StackName}
      # (B) 1 を指定すると従来の「 Hosted UI 」となる
      ManagedLoginVersion: 1

# ...
  CognitoUserPoolIdParameter:
    Type: AWS::SSM::Parameter
    Condition: UseAccessControl
    Properties:
      Name: !Sub '/${AWS::StackName}-lambdaedge-access-control/user-pool-id'
      Tier: Standard
      Type: String
      Value: !GetAtt CognitoUserPool.UserPoolId
  CognitoUserPoolClientIdParameter:
    Type: AWS::SSM::Parameter
    Condition: UseAccessControl
    Properties:
      Name: !Sub '/${AWS::StackName}-lambdaedge-access-control/user-pool-client-id'
      Tier: Standard
      Type: String
      Value: !GetAtt CognitoUserPoolClient.ClientId
  CognitoUserPoolDomainParameter:
    Type: AWS::SSM::Parameter
    Condition: UseAccessControl
    Properties:
      Name: !Sub '/${AWS::StackName}-lambdaedge-access-control/user-pool-domain'
      Tier: Standard
      Type: String
      Value: !Sub ${CognitoUserPoolDomain}.auth.${AWS::Region}.amazoncognito.com

import { Authenticator } from "cognito-at-edge";
import type { CloudFrontRequestHandler } from "aws-lambda";
import { fetchParams } from "./fetchParams";

export const handler: CloudFrontRequestHandler = async (request, context) => {
  // NOTE: region が . 区切りで結合されているので、除去
  const functionName = context.functionName.split(".").pop();
  const { userPoolId, userPoolAppId, userPoolDomain } =
    await fetchParams(functionName);

  const authenticator = new Authenticator({
    region: "us-east-1",
    userPoolId,
    userPoolAppId,
    userPoolDomain,
    cookiePath: "/",
  });

  return authenticator.handle(request);
};

  // NOTE: region が . 区切りで結合されているので、除去
  const functionName = context.functionName.split(".").pop();

import { GetParameterCommand, SSMClient } from "@aws-sdk/client-ssm";

/**
 * ハンドラ外領域にキャッシュする
 */
let memo: {
  userPoolId: string;
  userPoolAppId: string;
  userPoolDomain: string;
} | null = null;

/**
 * Lambda@Edge では環境変数が取得できないので SSM Parameter Store から取得
 */
export const fetchParams = async (prefix: string) => {
  if (memo) return memo;

  const ssmClient = new SSMClient({
    region: "us-east-1",
  });

  // NOTE: GetParameters は順序が保証されないので使用しない
  const [
    {
      Parameter: { Value: userPoolId },
    },
    {
      Parameter: { Value: userPoolAppId },
    },
    {
      Parameter: { Value: userPoolDomain },
    },
  ] = await Promise.all([
    ssmClient.send(
      new GetParameterCommand({
        Name: `/${prefix}/user-pool-id`,
      }),
    ),
    ssmClient.send(
      new GetParameterCommand({
        Name: `/${prefix}/user-pool-client-id`,
      }),
    ),
    ssmClient.send(
      new GetParameterCommand({
        Name: `/${prefix}/user-pool-domain`,
      }),
    ),
  ]);

  return memo = { userPoolId, userPoolAppId, userPoolDomain };
};

{
    "errorType": "Error",
    "errorMessage": "Dynamic require of \"crypto\" is not supported",
    "stack": [
        "Error: Dynamic require of \"crypto\" is not supported",
        "    at file:///var/task/app.mjs:12:9",
        "    at node_modules/aws-jwt-verify/dist/cjs/jwt-rsa.js (file:///var/task/app.mjs:819:20)",
        "    at __require2 (file:///var/task/app.mjs:15:50)",
        "    at node_modules/aws-jwt-verify/dist/cjs/index.js (file:///var/task/app.mjs:1245:24)",
        "    at __require2 (file:///var/task/app.mjs:15:50)",
        "    at node_modules/cognito-at-edge/dist/index.js (file:///var/task/app.mjs:18882:28)",
        "    at __require2 (file:///var/task/app.mjs:15:50)",
        "    at file:///var/task/app.mjs:19635:38",
        "    at ModuleJob.run (node:internal/modules/esm/module_job:234:25)",
        "    at async ModuleLoader.import (node:internal/modules/esm/loader:473:24)"
    ]
}

#...
  AccessControlFunction:
    Type: AWS::Serverless::Function
    Condition: UseAccessControl
    Properties:
      # ...
    Metadata:
      BuildMethod: esbuild
      BuildProperties:
        Format: esm
        Minify: false
        OutExtension:
          - .js=.mjs
        Target: "es2020"
        Sourcemap: false
        EntryPoints:
          - app.ts
        External:
          - aws-lambda
          - '@aws-sdk/*'
        # HACK: crypto の dynamic require のエラーを回避する
        # see https://github.com/aws/aws-sam-cli/issues/4827#issuecomment-1574080427
        Banner:
          - js=import { createRequire } from 'module'; const require = createRequire(import.meta.url);

# ...
  Distribution:
    Type: AWS::CloudFront::Distribution
    Properties:
      DistributionConfig:
        DefaultCacheBehavior:
          # ...
          CachePolicyId: 658327ea-f89d-4fab-a63d-7e88639e58f6 # CachingOptimized
          OriginRequestPolicyId: acba4595-bd28-49b8-b9fe-13317c0390fa # UserAgentRefererHeaders
          LambdaFunctionAssociations:
            - !If
              - UseAccessControl
              - LambdaFunctionARN: !Sub ${AccessControlFunction.Version}
                EventType: viewer-request
              - !Ref AWS::NoValue
            - LambdaFunctionARN: !Sub ${IndexSupplierFunction.Version}
              EventType: origin-request
        # ...