🦔
SupabaseのOAuthログインにGithub Appを追加する
SupabaseのOAuthログインするための備忘録
前提
- SupabaseにOrganizationを追加し、Projectを作成している状態
- Githubアカウントが存在している状態
- ここではローカルだけの確認環境を対象
流れ
- Github OAuth Applicationで該当アプリのApplicationを作成(登録)する。
- Supabaseの設定でGithub OAuthを有効にする。
- Supabaseの設定のGithub OAuthにClient IDとSecretを記入する。
Github OAuth Applicationで該当アプリのApplicationを作成(登録)する。
以下のSettingsへアクセスする。
以下のDeveloper Settingsへアクセスする。
以下のタブからNew OAuth Appから登録できます。
App Register
以下のページで必須の項目を埋めていきます。
Application name
アプリの名前、リポジトリの名前と一緒にするなどして管理しやすい名前をつける。
Homepage URL
ローカル確認なのでlocalhost:XXXX
のような形
Authorization callback URL
https://<your-project>.supabase.co/auth/v1/callback
このような形
以下でURLを取得
参考:
supabase公式
クライアントIDとクライアントシークレットを取得し、supabaseに登録する。
(シークレットは作成直後しか確認できないので、保存しておく方がいいです。)
参考
以下に追加方法が書いてあります。
Supabaseの設定でGithub OAuthを有効にする。 && Supabaseの設定でGithub OAuthを有効にする。
Supabaseにログインし、該当Organization, Projectにアクセスし
以下のタブへアクセスする。
External OAuth Providers 項目でOAuthでログインするプロバイダーの設定できます。
ここに先ほどのクライアントIDとシークレットを記入し更新で登録完了。
Supabaseログイン例
以下はSupabase SDKを利用したログイン例(公式参照)
JavaScript
const { user, error } = await supabase.auth.signIn({
// provider can be 'github', 'google', 'gitlab', or 'bitbucket'
provider: 'github'
})
Discussion