GitHubでログイン
プロジェクトでGitHub認証を有効にするには、GitHub OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。
概要
アプリケーションにGitHubログインを設定するための手順は、3つのパートで構成されています。
- GitHubでGitHub OAuth Appを作成・設定
- SupabaseプロジェクトにGitHub OAuthキーを追加
- SupabaseのJSクライアント・アプリにログインのコードを追加
手順
GitHubアカウントへアクセス
- github.comにアクセスします。
- 右上の
Sign In
をクリックしてログインします。
GitHub Oauth Appの作成
GitHub Developer Settingsページにアクセスします。
- 右上の自分のプロフィール写真をクリックします。
- メニューの一番下にある「Settings」をクリックします。
- 左側のサイドバーで、
Developer settings
をクリックします(一番下にあります)。 - 左側のサイドバーで
OAuth Apps
をクリックします。
コールバックURLを入手
次の手順では、次のようなコールバックURLが必要になります。
https://<project-ref>.supabase.co/auth/v1/callback
- Supabaseプロジェクトのダッシュボードにアクセスします。
- 左サイドバーの下部にある
Settings
アイコンをクリックします。 - リストの中の
API
をクリックします。 Config
のURL
の下にAPI URLがあるので、Copy
をクリックしてクリップボードにコピーします。- 末尾に
/auth/v1/callback
を追加することで、完全なOAuth Redirect URI
を取得できます。
新しいOAuthアプリケーションを登録
Register a new application
をクリックします。以前にアプリを作成したことがある場合は、New OAuth App
をクリックします。Application name
には、アプリの名前を入力します。Homepage URL
には、アプリのウェブサイトの完全なURLを入力します。Authorization callback URL
には、アプリのコールバックURLを入力します。Valid OAuth Redirect URIs
ボックスにURLを入力します。- 右下の
Save Changes
をクリックします。 Register Application
をクリックします。
新しく登録したOAuthの認証情報をコピーします。
Client ID
をコピーして保持します。Generate a new client secret
をクリックします。Client secret
をコピーして保持します。
SupabaseのプロジェクトにGitHubの認証情報を入力
- Supabaseプロジェクトのダッシュボードに移動します。
- 左側のサイドバーで、
Authentication
アイコンをクリックします(上部付近)。 - リストから
Settings
をクリックし、Authentication Settings
ページを表示します。 Site URL
にアプリの最終的な(ホストされた)URLを入力します(これは重要です)。External OAuth Providers
でGitHub Enabled
をオンにします。- 前の手順で保存した
GitHub Client ID
とGitHub Client Secret
を入力します。 Save
をクリックします。
クライアント・アプリにログインのコードを追加
JavaScriptのクライアント・コードはこちらに記載:Supabase OAuthクライアントコード
const { user, session, error } = await supabase.auth.signIn({
provider: 'github',
})
ボタン、リンク、またはUI要素から呼びだすための関数を追加します。
async function signInWithGithub() {
const { user, session, error } = await supabase.auth.signIn({
provider: 'github',
})
}
ログアウトするには次の関数を使います。
async function signout() {
const { error } = await supabase.auth.signOut()
}