小编Rya*_*rts的帖子

Nexts.js 13 + Supabase > 创建用户上下文的正确方法是什么

我正在使用 Next.js 13 和 Supabase 为后端构建一个应用程序，并且我一直致力于找出为当前登录用户创建上下文/提供程序的最佳/正确方法。

从 Supabase 检索用户的流程是这样的：

使用 OAuth 提供商登录。
从 supabase onAuthState Changed 挂钩的会话中获取用户 ID。
使用上面提到的用户 ID 从 supabase DB 获取完整的用户对象。

我的布局中有一个 supabase 侦听器，用于侦听身份验证状态更改，并且非常适合设置和刷新当前会话。我最初的方法是从 onAuthState 更改钩子中添加 fetchUser 调用，但是我遇到了更新水合错误。

直接取自示例，该应用程序的外观如下：

// layout.tsx
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const supabase = createServerComponentSupabaseClient<Database>({
    headers,
    cookies,
  });
  const {
    data: { session },
  } = await supabase.auth.getSession();

  return (
    <html>
      <head />
      <body>
        <NavMenu session={session} />
        <SupabaseListener accessToken={session?.access_token} />
        {children}
      </body>
    </html>
  );
} …

Run Code Online (Sandbox Code Playgroud)

reactjs next.js react-context supabase next.js13

Rya*_*rts

lucky-day

4
推荐指数

1
解决办法

5056
查看次数