🐦

SupabaseでTwitter認証失敗時の対応方法が変わっていた

2023/09/06に公開

Supabaseでは認証機能がとても簡単に導入できるのが良いですよね。
今回、個人開発しているサービスにTwitter認証を組み込もうとしたときに少しハマったので備忘録として残しておきます。

メールアドレスの取得許可が必要

本題ですが、SupabaseでTwitterプロパイダによる認証機能を組み込む時、
公式のドキュメント通りに設定・実装を行うと連携画面までは上手くいくのですが、自分のサービスにリダイレクトされてもエラーで認証が通っていませんでした。

http://localhost:3000/?error=server_error&error_description=Error+getting+user+email+from+external+provider

URLに上記エラーが付与されているのが確認できます。
SupabaseダッシュボードでAuthログを確認しても 500: Error getting user email from external providerと出力されていました。

SupabaseのAuthではプロバイダ先のメールアドレスを元に一意性を決めているようで、
今回はTwitterの権限設定の影響でメルアドが取れないよ～と怒られているわけですね。

参考記事にも記載がありますが、これまではTwitterDeveloperPortalで該当プロジェクトの権限状態を「Essential」から 「Elevated」 に昇格させる申請を行う必要がありました。

現在(2023/09/06)はこの申請を行う必要がなくなったようで、TwitterDeveloperPortal上から権限設定を変更するだけで良くなってるみたいです。

まずはご自身のTwitterDeveloperPortalのダッシュボードへアクセスし使用するアプリの設定を開いてください。

すると下部に User authentication settings という項目があるので「Edit」を押して開きます。

変更の必要があるのは App permissions です。
その中の「request email from users」をチェック✅して権限を許可して下さい。

さらに、上記をONにすることで画面下部の App info にある以下2項目がrequiredになると思います。

ご自身のサービス側の利用規約・プライバシーポリシーページURLを入力して完了です。
これらの対応を行うと認証が通るはずです。

こちらの参考記事は以前開発時に同じ問題が発生した時にとても助かりました。
今回の原因究明時にも参考にさせていただきました！ありがとうございました。