Twitchでログイン
プロジェクトでTwitch認証を有効にするには、Twitch OAuthアプリケーションを設定し、Supabaseダッシュボードでそのアプリケーションの認証情報を追加する必要があります。
概要
アプリケーションにTwitchログインを設定するための手順は、3つのパートで構成されています。
- Twitch開発者コンソールで、Twitchアプリケーションの作成と設定
- SupabaseプロジェクトにTwitch OAuth Consumerキーを追加
- SupabaseのJSクライアント・アプリにログインのコードを追加
手順
Twitch開発者アカウントへアクセス
- dev.twitch.tvにアクセスします。
- 右上の
Log in with Twitch
をクリックしてログインします。 - Twitchアカウントの2段階認証をまだ有効にしていない場合は、続行する前にセキュリティとプライバシーで有効にする必要があります。
- ログインしたら、Twitch開発者コンソールにアクセスします。
コールバック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アプリケーションを作成
- 右上の
アプリケーションを登録
をクリックします。
- アプリケーションの名前を入力します。
OAuthのリダイレクトURL
(前の手順で入手したコールバックURL)を入力または貼り付けます。- アプリのカテゴリーを選択します。
- Captchaにチェックを入れ、
作成
をクリックします。
Twitch OAuth Client IDとClient Secretを取得します
- リスト内のアプリケーション欄の右側にある
管理
をクリックします。
- クライアントIDをコピーします。
新しい秘密
をクリックして、新しいシークレットを作成します。クライアントの秘密
をコピーします。
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()
}