调用Supabase createClient后页面空白问题求助

核心问题分析 #

1. 重复绑定Auth状态监听：直接在组件函数内调用onAuthStateChange，会导致组件每次渲染都重复添加监听，引发无限导航循环，最终造成页面崩溃空白。
2. 状态判断逻辑不准确：仅通过event !== "SIGNED_OUT"判断跳转，忽略了其他无有效会话的状态（如INITIAL_SESSION、PASSWORD_RECOVERY），会触发错误跳转。
3. 未清理监听：组件卸载时未移除Auth状态监听，会造成内存泄漏。

修复后的完整代码 #

import { createClient } from "@supabase/supabase-js";
import { Auth } from "@supabase/auth-ui-react";
import { useNavigate, useEffect } from "react-router-dom";
import { ThemeSupa } from '@supabase/auth-ui-shared'

// 替换为你Supabase项目的真实URL和公钥
const supabase = createClient(
  'YOUR_SUPABASE_URL',
  'YOUR_SUPABASE_ANON_KEY'
);

function Login() {
    const navigate = useNavigate();

    useEffect(() => {
        // 绑定Auth状态监听，保存卸载函数
        const unsubscribe = supabase.auth.onAuthStateChange(async (event, session) => {
            // 根据有效会话判断跳转，逻辑更可靠
            if (session) {
                navigate("/success");
            } else {
                navigate("/");
            }
        });

        // 组件卸载时清理监听，避免内存泄漏
        return () => unsubscribe();
    }, [navigate]);

  return (
    <div className="App">
      <header className="App-header">
        <Auth 
            supabaseClient={supabase}
            appearance={{theme: ThemeSupa}}
            theme="dark"
            providers={["discord"]}
        />
      </header>
    </div>
  );
}

export default Login;

关键修改说明 #

• 用useEffect包裹监听：确保监听仅在组件挂载时绑定一次，避免重复绑定引发的循环问题。
• 添加监听清理机制：返回unsubscribe函数，组件卸载时自动移除监听，防止内存泄漏。
• 修正跳转判断逻辑：通过session是否存在判断用户登录状态，比单纯依赖event更准确，避免错误跳转。
• 验证Supabase凭证：确保createClient中的URL和KEY是从Supabase控制台复制的真实值，错误凭证会导致客户端初始化失败，页面空白。

内容的提问来源于stack exchange，提问作者Ayush Desai