SupabaseのOAuthログインにGithub Appを追加する

SupabaseのOAuthログインするための備忘録

前提

• SupabaseにOrganizationを追加し、Projectを作成している状態
• Githubアカウントが存在している状態
• ここではローカルだけの確認環境を対象

流れ

1. Github OAuth Applicationで該当アプリのApplicationを作成（登録）する。
2. Supabaseの設定でGithub OAuthを有効にする。
3. 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に登録する。
（シークレットは作成直後しか確認できないので、保存しておく方がいいです。）

参考

以下に追加方法が書いてあります。
https://docs.github.com/ja/developers/apps/building-github-apps/creating-a-github-app

Supabaseの設定でGithub OAuthを有効にする。 && Supabaseの設定でGithub OAuthを有効にする。

Supabaseにログインし、該当Organization, Projectにアクセスし
以下のタブへアクセスする。

External OAuth Providers 項目でOAuthでログインするプロバイダーの設定できます。

ここに先ほどのクライアントIDとシークレットを記入し更新で登録完了。

Supabaseログイン例

以下はSupabase SDKを利用したログイン例（公式参照）
https://supabase.io/docs/guides/client-libraries

JavaScript

const { user, error } = await supabase.auth.signIn({
  // provider can be 'github', 'google', 'gitlab', or 'bitbucket'
  provider: 'github'
})