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

Twitchでログイン

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

概要​

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

手順​

Twitch開発者アカウントへアクセス​

  • dev.twitch.tvにアクセスします。
  • 右上のLog in with Twitchをクリックしてログインします。
  • Twitchアカウントの2段階認証をまだ有効にしていない場合は、続行する前にセキュリティとプライバシーで有効にする必要があります。

Twitch Developer Page

Twitch Developer Console

コールバックURLを入手​

次の手順では、次のようなコールバックURLが必要になります。

https://<project-ref>.supabase.co/auth/v1/callback

  • Supabaseプロジェクトのダッシュボードにアクセスします。
  • 左サイドバーの下部にあるSettingsアイコンをクリックします。
  • リストの中のAPIをクリックします。
  • ConfigのURLの下にAPI URLがあるので、Copyをクリックしてクリップボードにコピーします。
  • 末尾に/auth/v1/callbackを追加することで、完全なOAuth Redirect URIを取得できます。

Twitchアプリケーションを作成​

Twitch Developer Console

  • 右上のアプリケーションを登録をクリックします。

Register Application

  • アプリケーションの名前を入力します。
  • OAuthのリダイレクトURL（前の手順で入手したコールバックURL）を入力または貼り付けます。
  • アプリのカテゴリーを選択します。
  • Captchaにチェックを入れ、作成をクリックします。

Twitch OAuth Client IDとClient Secretを取得します​

  • リスト内のアプリケーション欄の右側にある管理をクリックします。

Twitch Applications List

  • クライアントIDをコピーします。
  • 新しい秘密をクリックして、新しいシークレットを作成します。
  • クライアントの秘密をコピーします。

Get Client ID and Secret

SupabaseのプロジェクトにTwitchの認証情報を入力​

  • Supabaseプロジェクトのダッシュボードに移動します。
  • 左側のサイドバーで、Authenticationアイコンをクリックします（上部付近）。
  • リストからSettingsをクリックし、Authentication Settingsページを表示します。
  • Site URLにアプリの最終的な（ホストされた）URLを入力します（これは重要です）。
  • External OAuth ProvidersでTwitch Enabledをオンにします。
  • 前のステップで保存したclient_idとclient_secretを入力します。
  • Saveをクリックします。

クライアント・アプリにログインのコードを追加​

JavaScriptのクライアント・コードはこちらに記載：Supabase OAuthクライアントコード

const { user, session, error } = await supabase.auth.signIn({
  provider: 'twitch',
})

ボタン、リンク、またはUI要素から呼びだすための関数を追加します。

async function signInWithTwitch() {
  const { user, session, error } = await supabase.auth.signIn({
    provider: 'twitch',
  })
}

ログアウトするには次の関数を使います。

async function signout() {
  const { error } = await supabase.auth.signOut()
}

リソース​