Amplify でも Auth0 をいい感じに使いたい！ - Cognito Identity Pool を使った認証情報の連携 #auth0

dev_night Tokyo #5
https://auth0-japan.connpass.com/event/388529/

Transcript

1. Amplify でも Auth0 を いい感じに使いたい！ - Cognito Identity Pool を使った認証情報の連携 dev_night Tokyo #5 2026/04/23 tacck (木原卓也)
2. Kihara, Takuya CO-OP Sapporo 生活協同組合コープさっぽろ Software Engineer / Flutter, TypeScript, Vue.js, React Amplify Japan User Group 運営メンバー ゆるWeb勉強会@札幌 主催 AWS Community Builder Since Q2 2021 Category: Front-end Web and Mobile / Dev Tools Community 好きなフィギュアスケートの技 スプレッド・イーグル Auth0 Hero Since 2025 New 木原 卓也 / @tacck / Sapporo, Japan dev_night Tokyo #5 2
3. 今日のお話  AWS Amplify とは?  なぜ Amplify x Auth0 ?  Amplify x Auth0 の認証と認可  実装例  まとめ dev_night Tokyo #5 3
4. AWS Amplify とは? dev_night Tokyo #5 4
5. AWS Amplify とは?  AWS の提供する、主にフロントエンド・モバイル向けの サービス。  Amplify 独自機能（ホスティング）をベースに、 既存の AWS サービスとの連携を手軽に実装できる。  Authentication: Amazon Cognito  Data: AWS AppSync + Amazon DynamoDB  Storage: Amazon S3  その他各種サービス dev_night Tokyo #5 5
6. AWS Amplify とは?  AWS の提供する、主にフロントエンド・モバイル向けの サービス。  Amplify 独自機能（ホスティング）をベースに、 既存の AWS サービスとの連携を手軽に実装できる。  Authentication: Amazon Cognito  Data: AWS AppSync + Amazon DynamoDB  Storage: Amazon S3  その他各種サービス dev_night Tokyo #5 認証があるが? 6
7. なぜ Amplify x Auth0 ? dev_night Tokyo #5 7
8. なぜ Amplify x Auth0 ?  大人の事情でそうなることはありそう。  Auth0 を使った既存のフロントエンドシステム。  新たな機能として、バックエンドが必要な開発が発生。  組織の方針として、バックエンドインフラは AWS 一択。 dev_night Tokyo #5 8
9. Amplify x Auth0 の認証と認可 dev_night Tokyo #5 9
10. Amplify x Auth0 の認証と認可  Auth0 との連携を順に見ていく  AWS Amplify (Amazon Cognito) のみ  Cognito User Pool を使った Auth0 との連携  Cognito Identity Pool を使った Auth0 との連携 dev_night Tokyo #5 10
11. AWS Amplify (Amazon Cognito) のみ  Auth0 を使わない、 AWS Amplify の標準パターン。  認証を Cognito User Pool で実施。  認証画面も Cognito User Pool のもの。  認可を Cognito Identity Pool で実施。 dev_night Tokyo #5 11
12. dev_night Tokyo #5 12
13. Cognito User Pool を使った Auth0 との連携  認証を Cognito User Pool 経由で Auth0 に移譲  認証画面は Auth0 のもの。  認証結果を Cognito User Pool で受け取り、 以降の認可は従来通り Cognito Identity Pool を利用。  メリット  アプリケーションは Amplify 標準パターンで実装可能。  デメリット  既存の Auth0 ベースアプリケーションでは大幅な書き換えの可能性。 dev_night Tokyo #5 13
14. dev_night Tokyo #5 14
15. Cognito Identity Pool を使った Auth0 との連携  認証を直接 Auth0 に移譲  認証画面は Auth0 のもの。  事前に Auth0 をプロバイダーとして Cognito へ登録。 これにより Cognito Identity Pool で認可可能。  メリット  アプリケーションは Auth0 のトークン利用ベースで実装可能。  デメリット  Amplify 実装が少し複雑。というより、情報が少ない。 dev_night Tokyo #5 15
16. dev_night Tokyo #5 16
17. 実装例 dev_night Tokyo #5 17
18. backend – Amplify + CDK amplify/backend.ts dev_night Tokyo #5 18 CDK で バックエンドリソース作成 Cognito IdP 作成し OIDC プロバイダーとして Auth0 設定
19. backend – Amplify + CDK amplify/backend.ts dev_night Tokyo #5 19 Amplify の バックエンドリソース指定
20. backend – Amplify amplify/data/resource.ts dev_night Tokyo #5 20 Amplify の Data リソース OIDC 設定
21. backend – Amplify amplify/data/resource.ts dev_night Tokyo #5 21 Amplify の Data リソース スキーマに OIDC 利用指定
22. frontend – Auth0Provider src/main.tsx dev_night Tokyo #5 22 Auth0Provider Auth0 による認証
23. frontend – トークン連携 src/App.tsx dev_night Tokyo #5 23 ログイン後に取得した Auth0 のトークンを Cognito IdP へ連携
24. frontend – トークン連携 src/CustomCredentialsProvider.ts dev_night Tokyo #5 24 ログイン後に取得した Auth0 のトークンを Cognito IdP へ連携
25. frontend – トークン連携 src/CustomCredentialsProvider.ts dev_night Tokyo #5 25 ログイン後に取得した Auth0 のトークンを Cognito IdP へ連携
26. frontend – use AppSync src/App.tsx dev_night Tokyo #5 26 Amplify の Data リソース スキーマに OIDC 利用指定
27. まとめ dev_night Tokyo #5 27
28. まとめ  AWS Amplify を使うことで、 AWS の機能を手軽に フロントエンドに組み込める。  Amplify x Auth0 によって、 Auth0 で構築している サービスに AWS の機能を組み込めるようになる。  Amplify 使っていこうぜ!! dev_night Tokyo #5 28
29. End dev_night Tokyo #5 29