Skip to content
Auth

使用 Notion 登录

要为你的项目启用 Notion 授权，你需要设置一个 Notion 应用，并将应用的 OAuth 凭证添加到你的 Supabase 仪表板。

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

概览 #

🌐 Overview

为你的应用设置 Notion 登录由三部分组成：

🌐 Setting up Notion sign-in for your application consists of 3 parts:

创建你的 Notion 集成 #

🌐 Create your notion integration

  • 访问 developers.notion.com。
  • 点击“查看我的集成”并登录。 notion.so
  • 登录后，前往 notion.so/my-integrations 并创建一个新的集成。
  • 在创建集成时，请确保在“集成类型”下选择“公共集成”，并在“功能”下选择“读取用户信息，包括电子邮件地址”。
  • 你需要添加一个重定向 URI，见 添加重定向 URI
  • 填写完必要的字段后，点击“提交”完成集成创建。

notion.so

添加重定向 URI #

🌐 Add the redirect URI

  • 选择“公共集成”后，你应该会看到一个添加“重定向 URI”的选项。

notion.so

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

  • 前往你的 Supabase 项目仪表板
  • 点击左侧边栏的 Authentication 图标
  • 在配置部分点击Sign In / Providers
  • 点击手风琴列表中的 Notion 展开，你就会找到你的 回调 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.

把你的 Notion 凭证添加到你的 Supabase 项目里 #

🌐 Add your Notion credentials into your Supabase project

  • 一旦你创建了你的 Notion 集成，你应该能够从“OAuth 域和 URI”标签中获取“OAuth 客户端 ID”和“OAuth 客户端密钥”。

notion.so

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

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

🌐 Add sign-in code to your client app

当你的用户登录时，用 notion 作为 provider 调用 signInWithOAuth() ：

🌐 When your user signs in, call signInWithOAuth() with notion as the provider:

async function () {
  const { ,  } = await ..({
    : 'notion',
  })
}

以 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.

在浏览器中，signInWithOAuth 会自动重定向到 OAuth 提供商的认证端点，然后再重定向到你的端点。

🌐 In the browser, signInWithOAuth automatically redirects to the OAuth provider's authentication endpoint, which then redirects to your endpoint.

await ..({
  ,
  : {
    : `http://example.com/auth/callback`,
  },
})

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

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

在 app/auth/callback/route.ts 创建一个新文件，并填入以下内容：

🌐 Create a new file at app/auth/callback/route.ts and populate with the following:

app/auth/callback/route.ts
import { NextResponse } from 'next/server'
// The client you created from the Server-Side Auth instructions
import { createClient } from '@/utils/supabase/server'
export async function GET(request: Request) {
  const { searchParams, origin } = new URL(request.url)
  const code = searchParams.get('code')
  // if "next" is in param, use it as the redirect URL
  let next = searchParams.get('next') ?? '/'
  if (!next.startsWith('/')) {
    // if "next" is not a relative URL, use the default
    next = '/'
  }
  if (code) {
    const supabase = await createClient()
    const { error } = await supabase.auth.exchangeCodeForSession(code)
    if (!error) {
      const forwardedHost = request.headers.get('x-forwarded-host') // original origin before load balancer
      const isLocalEnv = process.env.NODE_ENV === 'development'
      if (isLocalEnv) {
        // we can be sure that there is no load balancer in between, so no need to watch for X-Forwarded-Host
        return NextResponse.redirect(`${origin}${next}`)
      } else if (forwardedHost) {
        return NextResponse.redirect(`https://${forwardedHost}${next}`)
      } else {
        return NextResponse.redirect(`${origin}${next}`)
      }
    }
  }
  // return the user to an error page with instructions
  return NextResponse.redirect(`${origin}/auth/auth-code-error`)
}

当你的用户注销时，调用 signOut() 来将他们从浏览器会话中移除，并清除 localStorage 中的任何对象：

🌐 When your user signs out, call signOut() to remove them from the browser session and any objects from localStorage:

async function () {
  const {  } = await ..()
}

资源 #

🌐 Resources