概要

AWS AmplifyのアプリケーションにBasic認証をつけたい

検討した選択肢

Option A: AWS Amplify Access Control（環境変数）
Option B: AWS Amplify Access Control（CfnParameter）
Option C: Next.js Middleware による認証
Option D: CloudFront Functions による認証
Option E: Amazon Cognito による認証

選択肢を図にすると以下のようになる。

CloudFront Functionsが使えればBasic認証に加えて、その他の細かい設定も可能だったのだが、AmplifyのCloudFrontにはCloudFront Functionsは使えないらしい。

AmplifyのAccess Controlを使う

Next.jsのMiddleware、Cognitoを使った認証もできるが、できるだけユーザー側で認証をかけたいので用意されているAmplifyのAccess Controlを使う。

Access Controlは追加料金の記載がないので無料と考えられる。（Basic認証で弾いたリクエスト数に応じた従量課金が発生するかは不明）

CDKで実装する

以下の2つを考える。

Option A: AWS Amplify Access Control（環境変数）
Option B: AWS Amplify Access Control（CfnParameter）

パスワードという機密情報を扱うため、パラメータストアやSecrets Managerから呼び出すのが筋だが、L1コンストラクタのため平文でしか指定できない。
環境変数を使用してもBasic認証の情報を設定するとテンプレートに平文で保存されてしまう。

ちなみにaws-amplify-alphaではSecrets Managerにパスワードを生成して使用できるらしい。
alphaはバージョンアップの際にコードが変わるので今回は使用しなかった。
https://docs.aws.amazon.com/cdk/api/v2/docs/@aws-cdk_aws-amplify-alpha.BasicAuthProps.html

環境変数を使う

以下のようなコードであれば環境変数経由でユーザー名とパスワードを指定できるので、これらの認証情報は（適切に管理していれば）問題ないはず。

  const username = process.env.BASIC_AUTH_USERNAME;
  const password = process.env.BASIC_AUTH_PASSWORD;

  basicAuthConfig = {
    enableBasicAuth: true, username, password
  }

しかし上のコードで生成されるテンプレートには平文で埋め込まれてしまう。

Resources:
  MyApp:
    Type: AWS::Amplify::App
    Properties:
      BasicAuthConfig:
        Username: "user"      # ← 平文でテンプレートに保存
        Password: "password"  # ← 平文でテンプレートに保存

CfnParameterを使う

CfnParameterのnoEchoプロパティをtrueにするとパラメータ値をマスクすることができる。

  const usernameParam = new cdk.CfnParameter(this, 'BasicAuthUsername', {
    type: 'String',
    description: 'BASIC_AUTH_USERNAME',
    noEcho: true
  })
  const passwordParam = new cdk.CfnParameter(this, 'BasicAuthPassword', {
    type: 'String',
    description: 'BASIC_AUTH_PASSWORD',
    noEcho: true
  })
  basicAuthConfig = {
    enableBasicAuth: true,
    username: usernameParam.valueAsString,
    password: passwordParam.valueAsString
  }
}

テンプレートで以下のように表現される。

Resources:
  MyApp:
    Type: AWS::Amplify::App
    Properties:
      BasicAuthConfig:
        Password: !Ref BasicAuthPassword
        Username: !Ref BasicAuthUsername
Parameters:
  BasicAuthUsername:
    Type: String
    Description: BASIC_AUTH_USERNAME
    NoEcho: true
  BasicAuthPassword:
    Type: String
    Description: BASIC_AUTH_PASSWORD
    NoEcho: true

CDKコマンド実行時は、以下のようにparametersオプションを設定する必要がある。

cdk deploy --parameters BasicAuthUsername=$BASIC_AUTH_USERNAME \
           --parameters BasicAuthPassword=$BASIC_AUTH_PASSWORD

設定忘れ防止のため、これらの値が未指定だったらbasicAuthConfigの指定をしないようif文を仕込んでおいたほうがいい。

// cdk.jsonにBasic認証を使用するかのフラグを設定する
const useFrontBasicAuth = this.node.tryGetContext('useFrontBasicAuth') || false

// 環境変数から値を読み込む
const username = process.env.BASIC_AUTH_USERNAME
const password = process.env.BASIC_AUTH_PASSWORD
let basicAuthConfig

if (useFrontBasicAuth && username && password) {
  const usernameParam = new cdk.CfnParameter(this, 'BasicAuthUsername', {
    type: 'String',
    description: 'BASIC_AUTH_USERNAME',
    noEcho: true
  })
  const passwordParam = new cdk.CfnParameter(this, 'BasicAuthPassword', {
    type: 'String',
    description: 'BASIC_AUTH_PASSWORD',
    noEcho: true
  })
  basicAuthConfig = {
    enableBasicAuth: true,
    username: usernameParam.valueAsString,
    password: passwordParam.valueAsString
  }
}

参考リンク