Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

PWA x firebase x Auth0 での認証

Avatar for Kenta TSUNEMI Kenta TSUNEMI
October 21, 2020
Programming
1
560

PWA x firebase x Auth0 での認証

2020/10/21 PWA Night vol.21 ～認証～

Avatar for Kenta TSUNEMI

Kenta TSUNEMI

October 21, 2020
Tweet

More Decks by Kenta TSUNEMI

See All by Kenta TSUNEMI
配列にまつわる型検査をしたら思ったより大変だった話
Avatar for Kenta TSUNEMI tocomi
0
86
型チェック 速度改善 奮闘記⌛
Avatar for Kenta TSUNEMI tocomi
4
1.1k
CSSセレクタを戦わせてみた⚔️
Avatar for Kenta TSUNEMI tocomi
0
43
フロントエンド一年生がテストを考える
Avatar for Kenta TSUNEMI tocomi
1
360

Other Decks in Programming

See All in Programming
堅牢なフロントエンドテスト基盤を構築するために行った取り組み
Avatar for Shogo Fukami shogo4131
8
2.5k
20251212 AI 時代的 Legacy Code 營救術 2025 WebConf
Avatar for mouson(墨嗓) mouson
0
200
メルカリのリーダビリティチームが取り組む、AI時代のスケーラブルな品質文化
Avatar for osari.k cloverrose
0
120
LLMで複雑な検索条件アセットから脱却する！！ 生成的検索インタフェースの設計論
Avatar for po3rin po3rin
4
910
AI時代を生き抜く 新卒エンジニアの生きる道
Avatar for coconala_engineer coconala_engineer
1
370
The Art of Re-Architecture - Droidcon India 2025
Avatar for Sid Patil siddroid
0
120
複数人でのCLI/Infrastructure as Codeの暮らしを良くする
Avatar for Shoma Okamoto shmokmt
5
2.3k
ELYZA_Findy AI Engineering Summit登壇資料_AIコーディング時代に「ちゃんと」やること_toB LLMプロダクト開発舞台裏_20251216
Avatar for 株式会社ELYZA elyza
2
460
Full-Cycle Reactivity in Angular: SignalStore mit Signal Forms und Resources
Avatar for Manfred Steyer manfredsteyer
PRO
0
160
AIエージェントの設計で注意するべきポイント6選
Avatar for Har1101 har1101
5
1.6k
マスタデータ問題、マイクロサービスでどう解くか
Avatar for Kato Keisuke kts
0
110
Canon EOS R50 V と R5 Mark II 購入でみえてきた最近のデジイチ VR180 事情、そして VR180 静止画に活路を見出すまで
Avatar for kazuhiro hara karad
0
130

Featured

See All Featured
Everyday Curiosity
Avatar for Cassini Nazir cassininazir
0
110
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
120
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
110
From π to Pie charts
Avatar for Rasagy Sharma rasagy
0
86
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
355
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
35
2.3k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
34
2.6k
Building Adaptive Systems
Avatar for Chris Keathley keathley
44
2.9k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
220
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
120
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
66

Transcript

  1. PWA x firebase x Auth0 での認証 2020/10/21 PWA Night vol.21

    ～認証～

  2. 自己紹介 Kenta TSUNEMI tocomi0112 tocomi 2015年に新卒でERPベンダーに入社。 2019年にWebエンジニアに転身。 新規サービスを複数開発する部署で コミュニティサービスを開発中。 趣味は野球観戦、競馬、ゲーム。

  3. Agenda 1. はじめに 2. Auth0 3. Firebase 4. PWA

  4. はじめに

  5. はじめに PWA x Firebase x Auth0での認証について、 実際に作成しているアプリケーションを例に挙げてお話します。

  6. 認証認可 アプリ

  7. 登録 認証フロー メールアドレス、パスワード 認証メール メールの認証アドレスをクリック

  8. ログイン 認証フロー メールアドレス、パスワード アクセストークン (+リフレッシュトークン) アクセストークン カスタムトークン カスタムトークンでサインイン firebaseアクセストークン

  9. トークンリフレッシュ 認証フロー リフレッシュトークン アクセストークン (+リフレッシュトークン) アクセストークン カスタムトークン カスタムトークンでサインイン firebaseアクセストークン

  10. Auth0

  11. Auth0を併用する理由 FirebaseにもAuthenticationの機能はある。 Auth0を併用している理由とは

  12. Auth0を併用する理由 ソーシャルログインの対応範囲 ソーシャルログイン対応を見据えている。実装はこれからの予定。 firebaseで対応しているのは、メジャーどころはGoogle, Facebook, Twitter あたり。 Auth0ではそれに加えてLINEも利用することができる。

  13. Auth0を併用する理由 マネージドな領域の広さ 本人確認やパスワードリセットなど認証にまつわる部分をマネージドな機能と して提供してくれる。 アプリへの組み込みが容易であり、実装・運用コストを削減できる。

  14. Firebase

  15. firebaseとの連携 カスタムトークンを使った連携 カスタムトークンを利用することでAuth0と連携した認証が可能。 カスタムトークンの生成にAuth0のuidを用いることで、 firebaseのユーザーuidがAuth0と同一になる。 カスタムトークン発行後、それを利用してサインインすることで firebaseの各サービスで利用できるアクセストークンが発行される。

  16. firebaseとの連携 カスタムトークンを使った連携 アクセストークン Auth0アクセストークン firebaseカスタムトークン Auth0から受け取ったアクセストークン を使ってカスタムトークンを作成。 カスタムトークン生成に最低限必要なのは ユーザーを一意に識別できるuidのみ。 カスタムトークンの生成にはサーバーサイ

    ドでAdminSDKを利用する必要がある。

  17. firebaseとの連携 カスタムトークンを使った連携 firebaseカスタムトークン firebaseカスタムトークン firebaseアクセストークン 受け取ったカスタムトークンを使って firebaseにサインインする。 サインインしたときにfirebaseにユーザー が作成される。 返却されたトークンを使って、以後は

    firebaseのサービスにアクセスできる。

  18. PWA

  19. PWAでの工夫 永久ログイン コミュニティサービスという特性上、一度ログインしたら再度ログインを挟ま ずにサービスを利用してもらいたい。 リフレッシュトークンを利用することで一度ログインしたらログイン状態を維 持するようトークンのライフサイクルを管理。

  20. PWAでの工夫 永久ログイン firebaseカスタムトークン firebaseカスタムトークン firebaseアクセストークン Auth0アクセストークン アクセストークン (+リフレッシュトークン) リフレッシュトー クン

    Auth0のアクセストークンの期限が切れ ていればリフレッシュトークンを使ってア クセストークンを更新。 Auth0のアクセストークン期限は1時間 (変更可) トークンを更新したあとはログインしたと きのフローと一緒。

  21. PWAでの工夫 永久ログイン firebaseのトークンを直接リフレッシュできないのか？

  22. PWAでの工夫 永久ログイン firebaseリフレッシュトークン firebaseアクセストークン (+リフレッシュトークン) firebaseにもリフレッシュトークンがある ので、それを使ってアクセストークンの更 新が可能。 firebaseのアクセストークンの期限は1時 間(変更不可)

    firebaseカスタムトークン firebaseアクセストークン リフレッシュトークン

  23. おわり