🙌

AWS Amplify Gen 2におけるGoogle認証設定

2024/08/10に公開

AWS

Amplify

tech

承認済みのリダイレクト URI

以下がマニュアルですが、分かりづらかったため、設定例を共有します
(マニュアルにはちゃんと書いてありました…)

CognitoでGoogle認証する際に、設定が誤っていると「エラー 400: redirect_uri_mismatch」が表示されます

原因としては、エラー時に表示される「リクエストの詳細:」のURIが、Google API Consoleの認証情報にて「承認済みのリダイレクト URI」に設定されていないためです

・承認済みの JavaScript 生成元の例

https://be1748a04fef8dfa848d.auth.us-west-2.amazoncognito.com

・承認済みのリダイレクト URI の例

https://be1748a04fef8dfa848d.auth.us-west-2.amazoncognito.com/oauth2/idpresponse

Cognitoのドメインは自分の環境に合わせてください

amplify/auth/resource.ts

ついでに共有します
「callbackUrls」や「logoutUrls」は、Cognitoのドメインではなくて、自分のサイトのドメインを指定します
また、email認証は必須みたいです…

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"],
        attributeMapping: {
          email: "email",
        },
      },
      callbackUrls: ["http://localhost:3000/", "https://dev.chatbot.metalmental.net", "https://chatbot.metalmental.net"],
      logoutUrls: ["http://localhost:3000/", "https://dev.chatbot.metalmental.net", "https://chatbot.metalmental.net"],
    },
  },
});

成功例です
見た目が良くないのでCognitoのカスタムドメインを設定したいですね…

シークレット

さらに補足です
Googleのクライアントシークレットの設定は、以下がマニュアルになりますが、
本番環境(ブランチ環境)はAWS Management ConsoleのAmplifyから設定し、ローカルのサンドボックス環境はコマンドで設定します…

GitHubで編集を提案

承認済みのリダイレクト URI

amplify/auth/resource.ts

シークレット

Discussion