https://hepokon365.hatenablog.com/entry/2024/06/17/210000

Amplify Gen1からGen2に移行する際、Google認証の設定を行ったが、公式ドキュメント通りに進めるとエラーが発生したのでメモ。

環境

@aws-amplify/backend v1.0.3, @aws-amplify/backend-cli (ampx) v1.0.4。

フロントエンドの実装にはReact + Next.jsを利用。

外部IDプロバイダー設定方法

以下のドキュメントに詳しい。ライブラリやフレームワークを選択できるため、Next.jsを選択しているが、JavaScriptであれば現状同じ設定方法の模様。

docs.amplify.aws

Google以外に、FacebookやApple等の手順あり。

Google認証の設定手順

OAuthクライアントIDの作成

Google Developers Consoleにて、OAuthクライアントIDを作成する。詳細は前述のドキュメント参照。

「アプリケーションの種類」を「ウェブアプリケーション」にし、名前だけ設定して作成。「承認済みの JavaScript 生成元」および「承認済みのリダイレクト URI」は、後ほど設定する。

生成されたクライアントIDとシークレットを保存しておく。

Amplifyのシークレット作成

作成したOAuthクライアントIDとシークレットを、Amplifyのシークレットとして保存する。シークレット名は、ドキュメントにならい、それぞれ「GOOGLE_CLIENT_ID」および「GOOGLE_CLIENT_SECRET」とする。

サンドボックスの場合、 npx ampx sandbox secret set <シークレット名> を実行し、値を登録する。注意点として、実行前に aws sso login しておかないと、「InvalidCredentialError: Failed to load default AWS credentials」エラーが発生する。

# シークレットの登録
npx ampx sandbox secret set GOOGLE_CLIENT_ID
npx ampx sandbox secret set GOOGLE_CLIENT_SECRET

# シークレット名の確認
npx ampx sandbox secret list

シークレットはSystems ManagerにSecureStringとして、 /amplify/<プロジェクト名>/<ユーザー名>-sandbox-<10桁の英数字>/<シークレット名> に保存された。

ブランチ環境の場合、Amplify コンソールから設定する。

amplify/auth/resource.ts の作成

amplify/auth/resource.ts を作成する。

2024/6/17 時点では、ドキュメントの記述に従ってもエラーとなる。

defineAuth の引数として渡すオブジェクトに、 loginWith.email または loginWith.phone が必須のため。ドキュメント通りだとこれらが未設定のため、「At least one of email or phone must be enabled.」エラーが発生する。

import { defineAuth, secret } from '@aws-amplify/backend'

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      google: {
        clientId: secret('GOOGLE_CLIENT_ID'),
        clientSecret: secret('GOOGLE_CLIENT_SECRET'),
        scopes: ['email'],
      },
      // サンドボックス確認用にlocalhostのみ。
      // 必要に応じて各環境のURLを設定する。
      callbackUrls: ['http://localhost:3000/'],
      logoutUrls: ['http://localhost:3000/'],
    },
  },
})

サンドボックスであれば npx ampx sandbox を実行、ブランチ環境であればデプロイするなどで、バックエンドを反映させる。

なお、サンドボックスにて、コード内で参照しているシークレットが存在しない場合、「The secret '<シークレット名>' specified in the backend does not exist.」エラーが発生する。

externalProviders を記述した状態で、バックエンドのデプロイに成功すると、Cognitoユーザープールのドメインが有効となる。AWSコンソールから該当のユーザープールを開き、「アプリケーションの統合」タブを選択、「Cognito ドメイン」を保存しておく。

CognitoドメインをOAuthクライアントに設定

Google Developers Consoleにて、作成したOAuthクライアントIDを開き、「承認済みの JavaScript 生成元」および「承認済みのリダイレクト URI」を設定する。

「承認済みの JavaScript 生成元」にはCognitoドメインを、「承認済みのリダイレクト URI」には ${Cognitoドメイン}/oauth2/idpresponse を設定し、保存。

ログイン画面の設定

これまでの設定を行った状態で、 import { Authenticator } from '@aws-amplify/ui-react' した Authenticator を使うと、メールアドレスによる認証の上に、Google認証用のボタンが表示される。

認証ボタンをクリックすると、Cognitoにユーザーが追加され、ログイン可能となる。

振り返り

ドキュメント通りに作業すると、 defineAuth の記述でエラーになるのが残念。エラーメッセージを見て対応できたが、メールアドレスまたは電話番号による認証も選択可能となるのがこれまた残念。

何とか外部IDプロバイダー認証のみに設定できないか調査するとissueが見つかったが、現状ではAmplifyのコード側では設定不可。

github.com

CSSいじって、UIから消すか。