Partialsを駆使して、 既存のプロダクトにパスワードレス認証を実装した話

2025年10月23日(木)にOkta Japan株式会社で開催された「dev_night Tokyo #3」での発表資料です。
イベントページ：https://auth0-japan.connpass.com/event/370643/
登壇者：株式会社kubell 横井 翔太

Transcript

1. Partialsを駆使して、 既存のプロダクトにパスワードレス認証を実装した話 横井翔太 2025年10月23日
2. 2 自己紹介 • 名前：横井翔太 • 所属：株式会社kubell 　　　コミュニケーションプラットフォームディビジョン 　　　プロダクトユニット 認証グループ ◦ 2024年4月　：入社 ◦ 2024年6月〜：認証グループ
3. 目次 CONTENTS 02 | パスワードレス認証を導入した話 03 | 認証方式の切り替えボタンの実現 04 | まとめ 01 | 会社概要 01 |
4. 01 | 会社概要
5. 5 会社概要 • 「Chatwork」というビジネスチャットを展開しています ◦ 認証基盤としてAuth0を活用しています
6. 02 | パスワードレス認証を導入した話
7. 7 パスワードレス認証をリリースしました • 8月にパスワードレス認証（メール認証）でのログインをリリースしました
8. 8 パスワードレス認証リリース時の背景 • 「Chatwork」の既存のユーザーさんには、 パスワード認証でログインしている人が大勢いる ➡ 既存のユーザーさんが困らないようなUIにしたい
9. 9 Auth0のパスワードレス認証 • Auth0では、/authorizeエンドポイントにリダイレクトする際に connection=emailとパラメータを付与するとパスワードレス認証のログイン画面に ➡ ログイン画面を開こうとする段階でログイン方式を決定することが必要 • ログイン時に認証方式を選択させるランディングページを用意すれば可能だが……
10. 03 | 認証方式の切り替えボタンの実現
11. 11 認証方式の切り替えボタンの実現 • ログイン画面自体にボタンを埋め込みたい
12. 12 認証方式の切り替えボタンの実現 • Auth0のPartials機能が使えそう https://auth0.com/docs/customize/login-pages/universal-login/customize-signup-and-login-prompts ここにボタンを追加できる！
13. 13 認証方式の切り替えボタンの実現 • ボタンのリンク先は？ パスワードレス認証のログイン画面を開くためにはauthorizeURLを叩く必要がある
14. 14 認証方式の切り替えボタンの実現 • 「Chatwork」のログイン画面の前段にはCloudFrontが存在 以前から、CloudFront Functionsを使用してext-parameterにauthorizeURLを付与 CloudFront Auth0 /authorize?XXXXX /authorize?XXXXX &ext-authorize-url=YY YYY
15. 15 認証方式の切り替えボタンの実現 • 「認証コードでサインイン」ボタンのリンク先は ext-parameter内にあるauthorizeURLに対してconnection=emailを付与したもの こちらも同様
16. 16 認証方式の切り替えボタンの実現 • それぞれのログイン画面を切り替え可能に この説明文もPartials
17. 04 | まとめ
18. 18 まとめ • パスワードレス認証を導入しました • ログイン方式の切り替えボタンをPartialsを用いて実装することで、 他認証方式との統一感を出すことができました
19. 働くをもっと楽しく、創造的に