メインコンテンツまでスキップ

GitHubでログイン

プロジェクトでGitHub認証を有効にするには、GitHub OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。

概要​

アプリケーションにGitHubログインを設定するための手順は、3つのパートで構成されています。

手順​

GitHubアカウントへアクセス​

  • github.comにアクセスします。
  • 右上のSign Inをクリックしてログインします。

GitHub Developer Portal.

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()
}

リソース​