Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Amplify でも Auth0 をいい感じに使いたい! - Cognito Identity...

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on.

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

Avatar for Kihara, Takuya

Kihara, Takuya PRO

April 23, 2026

More Decks by Kihara, Takuya

Other Decks in Technology

Transcript

  1. 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
  2. 今日のお話  AWS Amplify とは?  なぜ Amplify x Auth0

    ?  Amplify x Auth0 の認証と認可  実装例  まとめ dev_night Tokyo #5 3
  3. AWS Amplify とは?  AWS の提供する、主にフロントエンド・モバイル向けの サービス。  Amplify 独自機能(ホスティング)をベースに、

    既存の AWS サービスとの連携を手軽に実装できる。  Authentication: Amazon Cognito  Data: AWS AppSync + Amazon DynamoDB  Storage: Amazon S3  その他各種サービス dev_night Tokyo #5 5
  4. AWS Amplify とは?  AWS の提供する、主にフロントエンド・モバイル向けの サービス。  Amplify 独自機能(ホスティング)をベースに、

    既存の AWS サービスとの連携を手軽に実装できる。  Authentication: Amazon Cognito  Data: AWS AppSync + Amazon DynamoDB  Storage: Amazon S3  その他各種サービス dev_night Tokyo #5 認証があるが? 6
  5. なぜ Amplify x Auth0 ?  大人の事情でそうなることはありそう。  Auth0 を使った既存のフロントエンドシステム。

     新たな機能として、バックエンドが必要な開発が発生。  組織の方針として、バックエンドインフラは AWS 一択。 dev_night Tokyo #5 8
  6. Amplify x Auth0 の認証と認可  Auth0 との連携を順に見ていく  AWS Amplify

    (Amazon Cognito) のみ  Cognito User Pool を使った Auth0 との連携  Cognito Identity Pool を使った Auth0 との連携 dev_night Tokyo #5 10
  7. AWS Amplify (Amazon Cognito) のみ  Auth0 を使わない、 AWS Amplify

    の標準パターン。  認証を Cognito User Pool で実施。  認証画面も Cognito User Pool のもの。  認可を Cognito Identity Pool で実施。 dev_night Tokyo #5 11
  8. Cognito User Pool を使った Auth0 との連携  認証を Cognito User

    Pool 経由で Auth0 に移譲  認証画面は Auth0 のもの。  認証結果を Cognito User Pool で受け取り、 以降の認可は従来通り Cognito Identity Pool を利用。  メリット  アプリケーションは Amplify 標準パターンで実装可能。  デメリット  既存の Auth0 ベースアプリケーションでは大幅な書き換えの可能性。 dev_night Tokyo #5 13
  9. Cognito Identity Pool を使った Auth0 との連携  認証を直接 Auth0 に移譲

     認証画面は Auth0 のもの。  事前に Auth0 をプロバイダーとして Cognito へ登録。 これにより Cognito Identity Pool で認可可能。  メリット  アプリケーションは Auth0 のトークン利用ベースで実装可能。  デメリット  Amplify 実装が少し複雑。というより、情報が少ない。 dev_night Tokyo #5 15
  10. backend – Amplify + CDK amplify/backend.ts dev_night Tokyo #5 18

    CDK で バックエンドリソース作成 Cognito IdP 作成し OIDC プロバイダーとして Auth0 設定
  11. backend – Amplify + CDK amplify/backend.ts dev_night Tokyo #5 19

    Amplify の バックエンドリソース指定
  12. backend – Amplify amplify/data/resource.ts dev_night Tokyo #5 21 Amplify の

    Data リソース スキーマに OIDC 利用指定
  13. frontend – use AppSync src/App.tsx dev_night Tokyo #5 26 Amplify

    の Data リソース スキーマに OIDC 利用指定
  14. まとめ  AWS Amplify を使うことで、 AWS の機能を手軽に フロントエンドに組み込める。  Amplify

    x Auth0 によって、 Auth0 で構築している サービスに AWS の機能を組み込めるようになる。  Amplify 使っていこうぜ!! dev_night Tokyo #5 28