Amplify プレビューで割り当てられたURLを参照する

認証に Auth0 を利用する場合、戻り先のURLを指定する必要があります。 本番環境なら固定されたURLを指定することが出来ますが、Pull Request ごとに Amplify プレビューを利用する場合はURLを固定することが出来ません。 このため、ビルド処理で割り当てられたURLを環境変数へセットするようにしてみました。

プルリクエストのウェブプレビュー - AWS Amplifyホブ

検証した環境は、Next.js で Auth0 を利用したものです。 この際、Next.js も Auth0 も最新のバージョンにする必要がありました。 どちらかのバージョンが古いと、ログイン・ログアウトの際に503エラーが発生してしまいました。

amplify.yml の設定では、以下のように Auth0 で利用する環境変数をセットする処理を記述していました。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands:
        - npm run build
        - echo "AUTH0_CUSTOM_DOMAIN=$AUTH0_CUSTOM_DOMAIN" >> .env
        - echo "AUTH0_SECRET=$AUTH0_SECRET" >> .env
        - echo "AUTH0_BASE_URL=$AUTH0_BASE_URL" >> .env
        - echo "AUTH0_ISSUER_BASE_URL=$AUTH0_ISSUER_BASE_URL" >> .env
        - echo "AUTH0_CLIENT_ID=$AUTH0_CLIENT_ID" >> .env
        - echo "AUTH0_CLIENT_SECRET=$AUTH0_CLIENT_SECRET" >> .env

Amplify の環境変数で指定した AUTH0_BASE_URL が戻り先URLに利用されます。 これでは Amplify プレビューで認証後に元のアプリケーションに戻ることが出来ません。 そこで、Amplify に提供される環境変数を利用して、Amplify プレビューのURLを環境変数にセットするように変更しました。

-        - echo "AUTH0_BASE_URL=$AUTH0_BASE_URL" >> .env
+       - echo "AUTH0_BASE_URL=https://pr-${AWS_PULL_REQUEST_ID}.${AWS_APP_ID}.amplifyapp.com" >> .env

この変更で、Next.js + Auth0 が参照する環境変数 AUTH0_BASE_URL が Amplify プレビューごとのURLになり認証後に元のアプリケーションへ戻ることが出来るようになります。