用 Twitch 登录

要为你的项目启用 Twitch 认证，你需要先创建一个 Twitch 应用，然后把应用的 OAuth 凭证添加到你的 Supabase 仪表板里。

🌐 To enable Twitch Auth for your project, you need to set up a Twitch Application and add the Application OAuth credentials to your Supabase Dashboard.

概览 #

🌐 Overview

为你的应用设置 Twitch 登录分为三个部分：

🌐 Setting up Twitch logins for your application consists of 3 parts:

• 创建并配置一个 Twitch 应用 Twitch 开发者控制台
• 将你的 Twitch OAuth 消费者密钥添加到你的 Supabase 项目
• 将登录代码添加到你的 Supabase JS 客户端应用

访问你的 Twitch 开发者账号 #

🌐 Access your Twitch Developer account

• 去 dev.twitch.tv。
• 点击右上角的 Log in with Twitch 登录。
• 如果你还没有为你的 Twitch 账号启用两步验证，你需要先在 Twitch 安全设置 启用它，然后才能继续。

• 登录后，前往 Twitch 开发者控制台。

找到你的回调网址 #

🌐 Find your callback URL

下一步需要一个回调 URL，看起来像这样：https://<project-ref>.supabase.co/auth/v1/callback

• 前往你的 Supabase 项目仪表板
• 点击左侧边栏的 Authentication 图标
• 在配置部分点击Sign In / Providers
• 点击手风琴列表中的 Twitch 展开，你就会找到你的 回调 URL，你可以点击 Copy 将其复制到剪贴板

本地开发 #

🌐 Local development

在本地使用 Supabase CLI 测试 OAuth 时，确保你的 OAuth 提供商已配置本地 Supabase Auth 回调 URL：

🌐 When testing OAuth locally with the Supabase CLI, ensure your OAuth provider is configured with the local Supabase Auth callback URL:

http://localhost:54321/auth/v1/callback

如果这个回调 URL 缺失或配置错误，OAuth 登录可能会失败，或者在本地开发时无法正确跳转。

🌐 If this callback URL is missing or misconfigured, OAuth sign-in may fail or not redirect correctly during local development.

有关更多详情，请查看本地开发文档。

🌐 See the local development docs for more details.

要在本地使用 Supabase CLI 测试 OAuth，请参阅本地开发文档。

🌐 For testing OAuth locally with the Supabase CLI see the local development docs.

创建一个Twitch应用 #

🌐 Create a Twitch application

• 点击右上角的 + Register Your Application。

• 输入你的应用名称。
• 输入或粘贴你的 OAuth Redirect URL（上一步的回调 URL）。
• 为你的应用选择一个类别。
• 勾选验证码框，然后点击 Create。

获取你的 Twitch OAuth 客户端 ID 和客户端密钥 #

🌐 Retrieve your Twitch OAuth client ID and client secret

• 点击列表中你应用条目右侧的 Manage。

• 复制你的客户端ID。
• 点击 New Secret 来创建一个新的客户端密钥。
• 复制你的客户端密钥。

在你的 Supabase 项目中添加 Twitch 凭证 #

🌐 Add your Twitch credentials into your Supabase project

• 前往你的 Supabase 项目仪表板
• 在左侧边栏，点击Authentication图标（靠近顶部）
• 在配置部分点击Providers
• 从手风琴列表中点击 Twitch 来展开，然后将 Twitch 启用 切换为开启
• 输入你在上一步保存的 Twitch 客户端 ID 和 Twitch 客户端密钥
• 点击 Save

在你的客户端应用中添加登录代码 #

🌐 Add login code to your client app

1
import { createClient } from '@supabase/supabase-js'
2
3
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
4
5
// ---cut---
6
async function signInWithTwitch() {
7
  const { data, error } = await supabase.auth.signInWithOAuth({
8
    provider: 'twitch',
9
  })
10
}

以 PKCE 流程为例，比如在服务端认证中，你需要一个额外的步骤来处理代码交换。在调用 signInWithOAuth 时，提供一个指向回调路由的 redirectTo URL。这个重定向 URL 应该添加到你的 重定向允许列表 中。

🌐 For a PKCE flow, for example in Server-Side Auth, you need an extra step to handle the code exchange. When calling signInWithOAuth, provide a redirectTo URL which points to a callback route. This redirect URL should be added to your redirect allow list.

1
import { createClient, type Provider } from '@supabase/supabase-js';
2
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
3
const provider = 'provider' as Provider
4
5
// ---cut---
6
await supabase.auth.signInWithOAuth({
7
  provider,
8
  options: {
9
    redirectTo: `http://example.com/auth/callback`,
10
  },
11
})

在回调端点，处理代码交换以保存用户会话。

🌐 At the callback endpoint, handle the code exchange to save the user session.

1
import { NextResponse } from 'next/server'
2
3
// The client you created from the Server-Side Auth instructions
4
import { createClient } from '@/utils/supabase/server'
5
6
export async function GET(request: Request) {
7
  const { searchParams, origin } = new URL(request.url)
8
  const code = searchParams.get('code')
9
  // if "next" is in param, use it as the redirect URL
10
  let next = searchParams.get('next') ?? '/'
11
  if (!next.startsWith('/')) {
12
    // if "next" is not a relative URL, use the default
13
    next = '/'
14
  }
15
16
  if (code) {
17
    const supabase = await createClient()
18
    const { error } = await supabase.auth.exchangeCodeForSession(code)
19
    if (!error) {
20
      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
21
      const isLocalEnv = process.env.NODE_ENV === 'development'
22
      if (isLocalEnv) {
23
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
24
        return NextResponse.redirect(`${origin}${next}`)
25
      } else if (forwardedHost) {
26
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
27
      } else {
28
        return NextResponse.redirect(`${origin}${next}`)
29
      }
30
    }
31
  }
32
33
  // return the user to an error page with instructions
34
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
35
}

1
import { createClient } from '@supabase/supabase-js'
2
3
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...')
4
5
// ---cut---
6
async function signOut() {
7
  const { error } = await supabase.auth.signOut()
8
}

资源 #

🌐 Resources

• Supabase - 免费开始
• Supabase JS 客户端
• Twitch 账户
• Twitch 开发者控制台