AWS Amplify Gen 2 で外部IdPによるサインインを試してみた

$ npx ampx sandbox secret set FACEBOOK_CLIENT_ID
? Enter secret value （上記で確認したアプリIDを入力）
Successfully created version 1 of secret FACEBOOK_CLIENT_ID
$ npx ampx sandbox secret set FACEBOOK_CLIENT_SECRET
? Enter secret value （上記で確認したapp secretを入力）
Successfully created version 1 of secret FACEBOOK_CLIENT_SECRET
$ npx ampx sandbox secret set GOOGLE_CLIENT_ID
? Enter secret value （上記で確認したクライアント IDを入力）
Successfully created version 1 of secret GOOGLE_CLIENT_ID
$ npx ampx sandbox secret set GOOGLE_CLIENT_SECRET
? Enter secret value （上記で確認したクライアント シークレットを入力）
Successfully created version 1 of secret GOOGLE_CLIENT_SECRET
$ npx ampx sandbox secret list
 - FACEBOOK_CLIENT_ID
 - FACEBOOK_CLIENT_SECRET
 - GOOGLE_CLIENT_ID
 - GOOGLE_CLIENT_SECRET

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

export const auth = defineAuth({
  loginWith: {
    email: true,
    externalProviders: {
      facebook: {
        clientId: secret('FACEBOOK_CLIENT_ID'),
        clientSecret: secret('FACEBOOK_CLIENT_SECRET'),
        scopes: ['email', 'public_profile'],
        attributeMapping: {
          familyName: 'last_name',
          givenName: 'first_name',
          fullname: 'name',
        }
      },
      google: {
        clientId: secret('GOOGLE_CLIENT_ID'),
        clientSecret: secret('GOOGLE_CLIENT_SECRET'),
        scopes: ['email', 'profile'],
        attributeMapping: {
          familyName: 'family_name',
          givenName: 'given_name',
          fullname: 'name',
        }
      },
      callbackUrls: [
        'http://localhost:5173/',
        'https://（amplifyapp.comドメインやカスタムドメインを必要に応じて指定）/'
      ],
      logoutUrls: [
        'http://localhost:5173/',
        'https://（amplifyapp.comドメインやカスタムドメインを必要に応じて指定）/'
      ]
    }
  }
});

import { useEffect, useState } from "react";
import type { Schema } from "../amplify/data/resource";
import { generateClient } from "aws-amplify/data";
import { Loader, useAuthenticator } from '@aws-amplify/ui-react';
import { FetchUserAttributesOutput, fetchUserAttributes } from 'aws-amplify/auth';

const client = generateClient<Schema>();

function App() {
  const { signOut } = useAuthenticator();
  const [todos, setTodos] = useState<Array<Schema["Todo"]["type"]>>([]);
  const [userAttributes, setUserAttributes] = useState<FetchUserAttributesOutput>();

  useEffect(() => {
    client.models.Todo.observeQuery().subscribe({
      next: (data) => setTodos([...data.items]),
    });

    const fetchAttributes = async () => {
      try {
        const result = await fetchUserAttributes();
        setUserAttributes(result);
      } catch (error) {
        console.error('ユーザー属性の取得に失敗しました:', error);
      }
    };
    fetchAttributes();
  }, []);

  function createTodo() {
    client.models.Todo.create({ content: window.prompt("Todo content") });
  }

  function deleteTodo(id: string) {
    client.models.Todo.delete({ id })
  }

  if (!userAttributes) {
    return <Loader size="large" />;
  }

  return (
    <main>
      <h1>{userAttributes.family_name}'s todos</h1>
      <button onClick={createTodo}>+ new</button>
      <ul>
        {todos.map((todo) => (
          <li
            onClick={() => deleteTodo(todo.id)}
            key={todo.id}>{todo.content}</li>
        ))}
      </ul>
      <div>
        🥳 App successfully hosted. Try creating a new todo.
        <br />
        <a href="https://docs.amplify.aws/react/start/quickstart/#make-frontend-updates">
          Review next step of this tutorial.
        </a>
      </div>
      <button onClick={signOut}>Sign out</button>
    </main>
  );
}

export default App;

import React from "react";
import ReactDOM from "react-dom/client";
import { Authenticator } from '@aws-amplify/ui-react';
import App from "./App.tsx";
import "./index.css";
import { Amplify } from "aws-amplify";
import outputs from "../amplify_outputs.json";
import '@aws-amplify/ui-react/styles.css';
import { I18n } from 'aws-amplify/utils';
import { translations } from '@aws-amplify/ui-react';
I18n.putVocabularies(translations);
I18n.setLanguage('ja');

Amplify.configure(outputs);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <Authenticator hideSignUp>
      <App />
    </Authenticator>
  </React.StrictMode>
);

 ✅  amplify-amplifyvitereacttemplate-nishimuranaoki-sandbox-ae047ccccc

✨  Deployment time: 69.38s

Outputs:
（略）
amplify-amplifyvitereacttemplate-nishimuranaoki-sandbox-ae047ccccc.oauthCognitoDomain = test781f9d3a03ecf4bc.auth.ap-northeast-1.amazoncognito.com
（略）

$ npm run dev

> amplify-vite-react-template@0.0.0 dev
> vite

  VITE v5.4.10  ready in 5564 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

### 対象のAmplifyアプリのIDを確認
$ aws amplify list-apps --query 'apps[].[name,appId]' --output table                        
---------------------------------------------------------
|                       ListApps                        |
+--------------------------------------+----------------+
|  private-amplify-vite-react-template |  d9id5pj81gla  |
+--------------------------------------+----------------+

### 確認したアプリIDを使用してデプロイに使用されたスタック名を取得
$ aws amplify list-branches --app-id d9id5pj81gla --query 'branches[].backend.stackArn' --output text | awk -F'/' '{print $2}'                        
amplify-d9id5pj81gls-main-branch-0b3c495192

### 対象のOutputs(oauthCognitoDomain)を取得
$ aws cloudformation describe-stacks --stack-name amplify-d9id5pj81gls-main-branch-0b3c495192 --query "Stacks[0].Outputs[?OutputKey=='oauthCognitoDomain'].OutputValue" --output text
result4a5b43652256dd.auth.ap-northeast-1.amazoncognito.com