Skip to content
Auth

使用 WorkOS 的 SSO 和社交登录

使用 WorkOS 社交登录 #

🌐 Use Social Login with WorkOS

第1步：创建一个 WorkOS 组织 #

🌐 Step 1. Create a WorkOS organization

登录 WorkOS 仪表板，然后访问“组织”标签以创建一个组织。 创建组织

🌐 Log in to the WorkOS dashboard and visit the Organizations tab to create an organization. Create an Organization

或者，你可以通过 WorkOS API 创建一个组织。

🌐 Alternatively, you can create an organization via the WorkOS API.

步骤2. 获取你的 Client ID 和 WORKOS_API_KEY#

🌐 Step 2. Obtain your Client ID and WORKOS_API_KEY values

Get your Environment's Client ID and Secret

访问 WorkOS 控制面板 的入门页面。从快速入门面板中复制以下数值：

🌐 Visit the getting started page of the WorkOS Dashboard. Copy the following values from the Quickstart panel:

  • WORKOS_CLIENT_ID
  • WORKOS_API_KEY

步骤 3. 将你的 WorkOS 凭证添加到你的 Supabase 项目中 #

🌐 Step 3. Add your WorkOS credentials to your Supabase project

Enter your WorkOS application details in your Supabase app's auth provider settings panel

  1. 去你的 Supabase 项目仪表板。
  2. 在左侧边栏，点击认证图标（靠近顶部）。
  3. 在配置部分点击“提供商”。
  4. 点击手风琴列表中的 WorkOS 来展开。
  5. 把 WorkOS Enabled 开关切换到开。
  6. 在 WorkOS URL 字段中输入 https://api.workos.com。
  7. 输入你在上一步保存的 WorkOS 客户端 ID 和 WorkOS 客户端密钥。
  8. 从表单中复制 Callback URL (for OAuth) 值，然后把它保存到方便的地方。
  9. 点击保存。

你也可以使用管理 API 配置 WorkOS 认证提供商：

🌐 You can also configure the WorkOS auth provider using the Management API:

1
# Get your access token from https://supabase.com/dashboard/account/tokens
2
export SUPABASE_ACCESS_TOKEN="your-access-token"
3
export PROJECT_REF="your-project-ref"
4
5
# Configure WorkOS auth provider
6
curl -X PATCH "https://api.supabase.com/v1/projects/$PROJECT_REF/config/auth" \
7
  -H "Authorization: Bearer $SUPABASE_ACCESS_TOKEN" \
8
  -H "Content-Type: application/json" \
9
  -d '{
10
    "external_workos_enabled": true,
11
    "external_workos_url": "https://api.workos.com",
12
    "external_workos_client_id": "your-workos-client-id",
13
    "external_workos_secret": "your-workos-client-secret"
14
  }'

第4步。在 WorkOS 控制面板中设置你的 Supabase 重定向 URI #

🌐 Step 4. Set your Supabase redirect URI in the WorkOS Dashboard

访问 WorkOS 仪表板，然后点击左侧导航栏的重定向按钮。

🌐 Visit the WorkOS dashboard and click the redirects button in the left navigation panel.

在重定向页面上，输入你在上一步保存的 Supabase 项目 Callback URL (for OAuth)，如下所示：

🌐 On the redirects page, enter your Supabase project's Callback URL (for OAuth) which you saved in the previous step, as shown below:

Set your Supbase project redirect URL in the WorkOS dashboard

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

🌐 Step 5. Add login code to your client app

当用户登录时，用 workos 作为提供者调用 signInWithOAuth。

🌐 When a user signs in, call signInWithOAuth with workos as the provider.

1
import { createClient } from '@supabase/supabase-js';
2
const supabase = createClient('https://your-project-id.supabase.co', 'sb_publishable_...');
3
const redirect = (url: string) => {}
4
5
// ---cut---
6
async function signInWithWorkOS() {
7
  const { data, error } = await supabase.auth.signInWithOAuth({
8
    provider: 'workos',
9
    options: {
10
      redirectTo: 'http://example.com/auth/v1/callback', // Make sure your redirect URL is configured in the Supabase Dashboard Auth settings
11
      queryParams: {
12
        connection: '<connection_id>',
13
      },
14
    },
15
  })
16
17
  if (data.url) {
18
    redirect(data.url) // use the redirect API for your server or framework
19
  }
20
}

在你指定的回调 URL 中，你将用代码换取一个已登录的用户资料：

🌐 Within your specified callback URL, you'll exchange the code for a logged-in user profile:

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

资源 #

🌐 Resources