【NextJS】Cognito with Amplify(Gen2)+SSO(Google)

ホーム
BLOG
【Next.js】
【NextJS】Cognito with Amplify…

【Next.js】
2024.07.21

【NextJS】Cognito with Amplify(Gen2)+SSO(Google)

概要
前提条件
外部IDプロバイダーを設定（Google）
Amplifyのシークレット作成（sandbox）
ソースコード
Amplifyのcloud sandboxを立ち上げ
サーバーを起動
ブラウザで確認（ローカル）
Amplifyのシークレット作成（管理画面）
ローカルからAmplifyへデプロイ
ブラウザで確認（Amplifyのデプロイドメイン）
備考
参考

【NextJS】Cognito with Amplify(Gen2)+CRUD(DynamoDB)

1. 概要

前回はAWS Amplify(Gen2)を使い、認証（Cognito）を行うのとTodoアプリを実装する内容でした。今回は前回のものにGoogle Signinを追加する内容となります。

対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. 前提条件

2-1. こちらを完了してる事

【NextJS】Cognito with Amplify(Gen2)+CRUD(DynamoDB) – 株式会社isub

3. 外部IDプロバイダーを設定（Google）

3-1. Cognitoドメインを取得

AWS Console 管理画面
- Amazon Cognito
  - ユーザープール
    - 「アプリケーションの統合」タブ
      - ドメイン

3-2. 許可リダイレクトURIを設定

こちらを参考
- 【NextJS】OAuth authentication with Google account(Auth.js) – 株式会社isub
新しく設定した認証リソースとそのOAuthリダイレクトURIを設定
- 前回は「URIs 2」を追加したため、今回は「URIs 3」を追加
- CognitoドメインをOAuthクライアントに設定

https://<Cognitoドメイン>/oauth2/idpresponse

4. Amplifyのシークレット作成（sandbox）

4-1. こちらを参考

コマンド
- CLI commands – Next.js – AWS Amplify Gen 2 Documentation
下記２つを作成
- GOOGLE_CLIENT_ID
- GOOGLE_CLIENT_SECRET

npx ampx sandbox secret set GOOGLE_CLIENT_ID

npx ampx sandbox secret set GOOGLE_CLIENT_SECRET

npx ampx sandbox secret list

5. ソースコード

5-1-1. amplify/auth/resource.ts

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

/**
 * Define and configure your auth resource
 * @see https://docs.amplify.aws/gen2/build-a-backend/auth
 */
export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      google: {
        clientId: secret("GOOGLE_CLIENT_ID"),
        clientSecret: secret("GOOGLE_CLIENT_SECRET"),
        scopes: ["email"],
      },
      callbackUrls: [
        "http://localhost:3000/",
        "https://main.12345678901234.amplifyapp.com/",
      ],
      logoutUrls: [
        "http://localhost:3000/",
        "https://main.12345678901234.amplifyapp.com/",
      ],
    },
  },
});