SupabaseでTwitterLoginを実装する
t0m0120Supabase公式DocのTwitterでログインを参考に進めていく。
t0m0120Twitterログインを追加したいプロジェクトのダッシュボードへアクセス。
⚙アイコンから「Settings」へ移動。
サイドバーの「API」をクリック。
「Config」のURL欄にAPI URL（画像の赤枠）をコピー。
コピーしたURLの末尾へ/auth/v1/callbackを追加し、OAuth Redirect URIになります。
https://~~~/auth/v1/callback
t0m0120Twitter Developer Dashboardで、Twitterプロジェクトとアプリを作成する。
+ Create Project をクリック
Project name を入力
名前を入力し、下部のNextをクリック。
Use case を入力
利用目的を選択肢、下部のNextをクリック。
Project Descriptionを入力
textareaへ内容を入力。
DeepLで翻訳したものを入れてみました。
アプリの名前を入力
App Nameを入力
表示されるKeyを保存する
API KeyとAPI Key Secret を使用するので保存しておく。
下部のSetup your Appを押す。設定画面が表示されます。
t0m0120AppSettingsでUser authentication settingsをセットアップする。
Setupをクリック。User Authenticationの設定画面へ移動する。
App permissions を必要に応じて変更する。
Type of App でアプリで使うのかWebで使うのかを選択する。
アプリの情報を追加していきます。
- Callback URIに 1コメント目で取得したsupabaseのCallbackURIを入れます。
- WebsiteURL / Terms of service / Privacy pollicy を追加します。
t0m0120Supabaseのプロジェクトのダッシュボードに戻ります。
SidebarのAuthnticationアイコンをクリックして認証の設定画面を開きます。
リストからSettingsをクリックし、Authentication Settingsページを表示します。
URL Configurationを選択。
Site URLへSiteのURLを入力する。
開発中はlocalhostなどを追加しておく。
t0m0120Twitterログインを有効にする
サイドバーから「Providers」へ移動
TwitteをDisabledへ
Twitterから取得した 「API Key」「API Secret Key」へ入力する。
t0m0120上記の手順後にsupabase/uiなどを用いてTwitterLoginをしようとしても、下記のエラーでリダイレクトされる。
http://localhost:3000/?error=server_error&error_description=Error+getting+user+email+from+external+provider
SupabaseではAuth認証時にメールアドレスが必須ぽく、Twitter API V2ではEssentialでは、メールアドレスが取れないっぽい。
ElevatedのProjectを試しに使うと、無事TwitterLoginが通った。
参考↓