📑

Auth0におけるソーシャルログインUXのベストプラクティス

きよた

2025/10/24に公開

 使いにくいソーシャルログインが溢れているあなたのサービスのソーシャルログインは、ユーザーを迷わせていませんか？
世の中には「便利なはず」のソーシャルログインが、かえってユーザーを混乱させているケースが溢れていると感じます。（それぞれ事情がある故とは思いますが）

「ソーシャルで新規登録ができない…」（事前紐づけ必須パターン）

「ソーシャルで登録したのに、なぜかメールアドレスを聞かれる…」（メールアドレス無視パターン）

「前にGoogleで登録したことを忘れ、LINEでログインしたら別のアカウントができてしまった…」（ソーシャルの数だけアカウントが作成されるパターン）
この記事では、こうした課題をすべて解決するため、私たちがID基盤を構築する際に基本としているゼロフリクションなソーシャルログイン（以下、ZSL）と、それをAuth0で実現する方法を共有します。

 ゼロフリクションなソーシャルログインUX（ZSL）で実現できること新規登録とログインのどちらにでもソーシャルログインが利用できる
メールアドレス（以下、メアド）とパスワードの手入力が不要
ユーザーの意図しない重複アカウントの作成を防げる
ソーシャルプロバイダーからメアドが取得できなくても利用できる
ソーシャルで新規登録をしても、メアドが変更できる
ソーシャルの紐づけを解除して、メアドとパスワードによるログインに移行できる

 ZSLの設計ZSLは、ユーザーが何も意識しなくても、不安や迷いなくサービスに新規登録またはログインできることを目指して設計されています。
最も重要なのが「ユーザーの新規登録またはログインしたいという意図を阻害しないこと」です。例えば、ソーシャルからメアド取得ができない場合、エラー画面を表示して再ログインさせるようなことは避けています。なぜなら、ユーザーはそのソーシャルログインを利用したいという意図があるからです。その意図を実現してこそ良いUXであると考えています。
簡潔にまとめると、全体フローは下の図になります。
ポイントは以下の2つです。
アカウントが重複している場合は、既存のアカウントとしてログインさせる（アカウント紐づけ）
メアドが取得不可または不正*の場合は、手動で登録してもらう

*例: 捨てアドレスなどの特定のドメインを拒否したい場合など
1についてはritouさんの記事が詳しいです。アカウント紐づけの際は、必ず紐づけ先のアカウントの認証を求めることで、セキュリティを担保しています。
2の処理は一見手間に思えるかもしれませんが、「ユーザーが選択したソーシャルログインを使えるようにする」という思想に基づいています。メアドを登録してもらうことで、次回から希望するソーシャルログインでサービスを利用できるようになります。
各処理の条件分岐を詳細に示すと下図のとおりです。

 🛠️ Auth0で実現する方法ここからは、上記で説明したZSLをAuth0で実装する方法を解説します。

Auth0のPost-Login Actionsを利用することで、ZSLの各フローを実現できます。
なお、以降ではAuth0の「Account Linking（以下、アカウントリンク）」機能を使用して、アカウント紐づけを実現します。

 実装における設計方針ZSLをAuth0で実装する際、Auth0の制約を考慮した設計が必要です。
Social Connectionで作成されたアカウントはManagementAPIでメアドの変更ができない
アカウントリンクを無秩序に実行すると、親子関係の組み合わせ爆発が起きて予想外の挙動が発生する
本記事では詳細は割愛しますが、これらの理由から当社では「アカウントリンクを利用する場合はメアドパスワードのアカウントを必ずPrimaryとする」としています。

 実装フローそのため、Actionsでは以下の流れで処理を行います：
メアドの取得（必要な場合）
メアドパスワードのアカウント作成
ソーシャルアカウントをsecondaryとしてアカウントリンク実行

 フローの詳細ご参考までに各Actionsの詳細をシーケンス図で示しておきます。
Actions内処理のシーケンス図
!実際の運用環境ではプロフィール登録チェックなど、これ以外にも多くのActinosが実行されています。

 まとめこの記事では、私たちが基本としているソーシャルログインUX「ZSL」と、それをAuth0で実現する方法を解説しました。
新規登録とログインというサービスの入口の体験が改善されると、ユーザー体験も、開発者体験も、そしてサポート体験も良くなります。みんな幸せです。この記事がみなさんのログイン体験の改善の一助になれば幸いです。

 宣伝ご紹介したZSLは、Auth0と一緒に当社製品の「AuthConnect」を導入いただくと、即実現できます。Auth0導入時の開発コストをごっそり削減できますので、ご興味ある方はぜひお問い合わせください。
また、当社は一緒に働く仲間を募集しています。認証認可領域に興味がある方はぜひ当社採用ページからカジュアル面談にご応募をお願いします。