Supabase Auth导致NextJS页面路由应用登录后陷入重渲染循环

我在基于*Pages目录（非App Router）*的NextJS应用中配置Supabase Auth，已按照教程完成设置，但首次登录时应用会陷入刷新循环。我确信这与Session的使用方式有关，但无法完全确定问题所在。以下是相关代码片段：

app.tsx #

const App = ({
  Component,
  pageProps,
}: AppProps<{ initialSession: Session }>) => {
  const [supabase] = useState(() => createPagesBrowserClient());

  return (
    <SessionContextProvider
      supabaseClient={supabase}
      initialSession={pageProps.initialSession}
    >
      <Head>
        <link
          rel="apple-touch-icon"
          sizes="180x180"
          href="/apple-touch-icon.png"
        />
        <link rel="icon" href="/icons/favicon.ico" />
      </Head>
      <NextSeo
        title={siteTitle}
        description={siteDescription}
        openGraph={{
          title: siteTitle,
          description: siteDescription,
        }}
      />
      <Component {...pageProps} />
    </SessionContextProvider>
  );
};

export default App;

callback.ts #

import { createPagesServerClient } from '@supabase/auth-helpers-nextjs'

const handler = async (req, res) => {
  const { code } = req.query

  if (code) {
    const supabase = createPagesServerClient({ req, res })
    await supabase.auth.exchangeCodeForSession(String(code))
  }

  res.redirect('/')
}

export default handler

MainContent.tsx #

export const MainContent = ({ override }: { override?: any }) => {
  const [messages, setMessages] = useState<Array<Messages>>([]);
  const [currentConversation, setCurrentConversation] = useStore((state) => [
    state.currentConversation,
    state.setCurrentConversation,
  ]);
  const [currentUser, setCurrentUser] = useStore((state) => [
    state.currentUser,
    state.setCurrentUser,
  ]);

  const [sentMessages, setSentMessages] = useState(0);

  const session = useSession();

  useEffect(() => {
    const getUserID = async () => {
      const auth_id = session.user.id;
      const userIDResponse = await axios.get("api/load-auth-user-id", {
        params: { auth_id: auth_id },
      });
      setCurrentUser(userIDResponse.data);
    };
    if (session) getUserID();
  }, [session]);

  return (
    <div
      style={override}
      className="flex flex-row items-start relative w-full h-full"
    >
      <Sidebar />
      <div className="flex flex-col items-start flex-1 bg-white h-full">
        <CurrentRecipient />
        <div className="flex flex-col justify-end items-center p-3 relative w-full gap-2 overflow-y-scroll h-3/4">
          {messages &&
            messages.map(
              (message, i) =>
                message.from_id &&
                message.text && (
                  <MessageWrapper
                    from={message.from_id}
                    message={message.text}
                    key={i}
                  />
                )
            )}
        </div>
        <CurrentMessage setSentMessages={setSentMessages} messages={messages} />
      </div>
    </div>
  );
};

Auth UI组件调用 #

<Auth
  supabaseClient={supabase}
  appearance={{ theme: ThemeSupa }}
  redirectTo="http://localhost:3000/api/auth/callback"
  providers={["google"]}
/>

起初我怀疑是MainContent中的useEffect重复触发，但由于页面会完全重渲染，日志和性能分析结果无法在重渲染间留存，没法验证这个猜测。

内容的提问来源于stack exchange，提问作者Aryaman Khandelwal