如何使用 Nextjs 设置 Supabase 进行身份验证 | Supabase Auth

Supabase 是什么？

Supabase 提供身份验证、数据库、存储和实时功能，让开发人员能够构建全栈应用。此后端即服务 (BaaS) 是 Firebase 的热门替代品，采用开源技术构建。

Supabase Auth 支持轻松的应用程序身份验证，支持 OAuth、电子邮件密码和无密码方法。

**注意**：本博客是我 YouTube 频道上的视频系列的一部分。您也可以查看视频版本。

如何设置 Supabase 项目？

在 Supabase 中创建一个新项目。如果您没有组织，则可能需要创建一个新组织。

然后输入你的项目名称和数据库密码

创建项目后，您将获得项目 URL 和匿名密钥。您可以使用它们连接到您的项目。请注意，这些是公钥，您可以共享它们。与 Firebase 一样，您可以使用规则保护您的数据。

现在我们需要一个 nextjs 应用程序。

如何设置 Nextjs 15？

创建一个新的 Nextjs 项目：

npx create-next-app supabase-auth-yt

安装 Supabase 客户端：

npm install @supabase/supabase-js @supabase/ssr

我还安装了 daisyui（一个 tailwind ui 库）用于样式设置：

npm i -D daisyui

创建一个名为 .env.local 的新文件并添加您的 supabase URL 和 anon 密钥：

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=

创建一个名为 utils/supabase/server.js 的新文件并添加以下代码：

import { createServerClient } from '@supabase/ssr'
import { cookies } from 'next/headers'

export async function createClientForServer() {
  const cookieStore = await cookies()

  return createServerClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
    {
      cookies: {
        getAll() {
          return cookieStore.getAll()
        },
        setAll(cookiesToSet) {
          try {
            cookiesToSet.forEach(({ name, value, options }) =>
              cookieStore.set(name, value, options),
            )
          } catch {
            // The `setAll` method was called from a Server Component.
            // This can be ignored if you have middleware refreshing
            // user sessions.
          }
        },
      },
    },
  )
}

要从服务器与 Supabase 交互，我们必须为服务器端代码创建一个客户端。代码也是从 supabase 文档中复制而来。

对于客户端代码，我们需要在 `utils/supabase/client.js` 文件中创建一个客户端：

'use client'

import { createBrowserClient } from '@supabase/ssr'

const createClientForBrowser = () =>
  createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY,
  )

export default createClientForBrowser

现在，您可以使用这些客户端从 nextjs 项目与 supabase 进行交互。

接下来，你可以观看这些视频：

CLIS.CC

如何使用 Nextjs 设置 Supabase 进行身份验证 | Supabase Auth

Supabase 是什么？

如何设置 Supabase 项目？

如何设置 Nextjs 15？