Next.js集成Supabase出现onAuthStateChange未定义运行时错误求助

问题根源 #

错误出现在AuthForm组件中：你将createClientComponentClient函数本身赋值给了supabase变量，而非调用该函数生成Supabase客户端实例。Auth组件需要接收一个已初始化的Supabase客户端对象，但传入的是未执行的函数，导致组件无法找到onAuthStateChange方法。

修正代码 #

修改AuthForm组件的客户端初始化逻辑，调用createClientComponentClient函数创建实例，同时修正React属性名（ClassName改为小写className，符合React规范）：

"use client";

import { Auth } from "@supabase/auth-ui-react";
import { createClientComponentClient } from "@supabase/auth-helpers-nextjs";

function AuthForm(){
    // 调用函数生成Supabase客户端实例
    const supabase = createClientComponentClient();
    return (
        <Auth
            supabaseClient={supabase}
            view="magic_link"
            showLinks={false}
            providers={{}}
            redirectTo="http://localhost:3000/auth/callback"
            appearance={{
                theme: "dark",
                button: {
                    className : "bg-white-400 text-grey-900 hover:bg-gray-600",
                },
                input: {
                    className : "bg-white-700 border-grey-600 text-white",
                }
            }}
        />
    )
}

export default AuthForm;

额外排查点（若修正后仍有问题） #

• 确认.env.local中的NEXT_PUBLIC_SUPABASE_URL和NEXT_PUBLIC_SUPABASE_ANON_KEY变量名拼写正确，值与Supabase控制台一致
• 若使用了middleware.js/ts，检查是否正确配置了Supabase认证中间件，避免拦截Auth相关请求
• 确保@supabase/auth-helpers-nextjs和@supabase/auth-ui-react版本兼容，建议升级至最新稳定版

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