Supabase Auth-Helpers-NextJS登录后无法跳转至订单页问题

我在项目中使用Supabase Auth Helper包，预期用户输入登录信息后会跳转至订单页，且在订单页配置了Supabase鉴权逻辑，但实际登录后并未跳转至订单页。

订单页鉴权代码 #

export const getServerSideProps = withPageAuth({ redirectTo: '/admin/login',
    async getServerSideProps(ctx) {
        // Access the user object
        const { user, accessToken } = await getUser(ctx);
        return { props: { email: user?.email } };
    }
});

登录页代码 #

async function handleSubmit(e) {
        e.preventDefault();
        const { user, error } = await supabase.auth.signIn({
            email,
            password
        })
        router.push('/orders')
    }
    return (
        <Layout>
            <div className="flex items-center justify-center h-screen">
                <form onSubmit={handleSubmit}>
                    <p className="text-center text-[27px] text-white">Admin Login</p>
                    <div className="mt-4 text-white">
                        <p className="text-[14px]">Email</p>
                        <input type="text" className="bg-[#4A4949] rounded-md py-2 px-1 w-[300px]"
                            placeholder="Email Address"
                            value={email}
                            onChange={(e) => setEmail(e.target.value)}
                        />
                    </div>
                    <div className="mt-4 text-white">
                        <p className="text-[14px]">Password</p>
                        <input type="password" className="bg-[#4A4949] rounded-md py-2 px-1 w-[300px]"
                            placeholder="Password"
                            value={password}
                            onChange={(e) => setPassword(e.target.value)}
                        />
                    </div>
                    <button className="mt-8 bg-[#4A4949] text-white rounded w-[300px] py-2">Login</button>
                </form>
            </div>
        </Layout >
    )
}

1. 先处理登录错误再跳转 #

当前代码不管登录成功与否都会执行router.push，如果登录失败（比如密码错误），订单页的鉴权逻辑会检测不到用户，直接重定向回登录页，看起来像是没跳转。修改登录逻辑，只有在无错误且用户存在时才跳转：

async function handleSubmit(e) {
    e.preventDefault();
    const { user, error } = await supabase.auth.signIn({
        email,
        password
    });

    if (error) {
        console.error('登录失败:', error.message);
        // 可添加用户可见的错误提示，比如alert或Toast组件
        return;
    }

    if (user) {
        router.push('/orders');
    }
}

2. 等待会话同步完成后跳转（更可靠） #

有时候signIn返回后，服务器端的会话可能还未同步完成，导致订单页的withPageAuth检测不到用户。可以通过监听Auth状态变化来确保会话建立后再跳转：

async function handleSubmit(e) {
    e.preventDefault();
    const { error } = await supabase.auth.signIn({
        email,
        password
    });

    if (error) {
        console.error('登录失败:', error.message);
        return;
    }

    // 监听登录状态，确认用户已登录后跳转并取消监听
    const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
        if (event === 'SIGNED_IN' && session?.user) {
            router.push('/orders');
            subscription.unsubscribe();
        }
    });
}

3. 验证订单页鉴权配置 #

• 确认redirectTo: '/admin/login'是正确的登录页路由，和你的实际登录页路径一致。
• 确保getUser方法已正确从Supabase Auth Helper包导入：

  import { withPageAuth, getUser } from '@supabase/auth-helpers-nextjs';
  

4. 检查Supabase客户端初始化 #

确保在项目中已正确配置Supabase环境变量（NEXT_PUBLIC_SUPABASE_URL和NEXT_PUBLIC_SUPABASE_ANON_KEY），并且服务器端的Supabase客户端初始化正确，保证getServerSideProps能获取到会话信息。

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