Open2022/11/28にコメント追加7

SupabaseでTwitterLoginを実装する

Supabase公式DocのTwitterでログインを参考に進めていく。

Twitterログインを追加したいプロジェクトのダッシュボードへアクセス。

⚙アイコンから「Settings」へ移動。
サイドバーの「API」をクリック。
「Config」のURL欄にAPI URL（画像の赤枠）をコピー。
コピーしたURLの末尾へ/auth/v1/callbackを追加し、OAuth Redirect URIになります。
https://~~~/auth/v1/callback

Twitter 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を押す。設定画面が表示されます。

AppSettingsでUser authentication settingsをセットアップする。

Setupをクリック。User Authenticationの設定画面へ移動する。

App permissions を必要に応じて変更する。

Type of App でアプリで使うのかWebで使うのかを選択する。

アプリの情報を追加していきます。

Callback URIに 1コメント目で取得したsupabaseのCallbackURIを入れます。
WebsiteURL / Terms of service / Privacy pollicy を追加します。

Supabaseのプロジェクトのダッシュボードに戻ります。

SidebarのAuthnticationアイコンをクリックして認証の設定画面を開きます。
リストからSettingsをクリックし、Authentication Settingsページを表示します。
URL Configurationを選択。

Site URLへSiteのURLを入力する。
開発中はlocalhostなどを追加しておく。

Twitterログインを有効にする

サイドバーから「Providers」へ移動

TwitteをDisabledへ
Twitterから取得した「API Key」「API Secret Key」へ入力する。

上記の手順後に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が通った。
参考↓