Supabase onAuthStateChange在Remix中持续触发引发无限重渲染问题

问题背景 #

按教程在Remix中配置Supabase认证后，组件陷入无限重循环；通过魔法链接进入页面时，onAuthStateChange事件始终输出INITIAL_SESSION，仅出现一次SIGNED_IN，需确认该行为是否正常并解决重循环问题。

涉事代码 #

const [supabase] = useState(() => createBrowserClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY));
const revalidator = useRevalidator();

// useEffect only depends on revalidator and supabase (which are memoized)
useEffect(() => {
  const { data: { subscription } } = supabase.auth.onAuthStateChange((event) => {
    console.log(event)
    // Revalidate or trigger page refresh when auth state changes
    revalidator.revalidate();
  });

  return () => subscription.unsubscribe(); // Clean up the subscription when component unmounts
}, [revalidator, supabase]);

问题分析与解决方案 #

无限重循环的根源 #

每次调用revalidator.revalidate()会触发Remix页面重新验证，导致组件重新渲染。而组件挂载时onAuthStateChange会先触发INITIAL_SESSION事件，此时调用revalidate()又会引发新一轮的渲染与事件触发，形成闭环。

解决重循环的具体方案 #

1. 过滤非关键事件：仅在实际认证状态变更时触发重验证，忽略初始化类型的INITIAL_SESSION事件：

const [supabase] = useState(() => createBrowserClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY));
const revalidator = useRevalidator();

useEffect(() => {
  const { data: { subscription } } = supabase.auth.onAuthStateChange((event) => {
    console.log(event);
    // 仅在登录/登出状态变更时触发重验证
    if (event === 'SIGNED_IN' || event === 'SIGNED_OUT') {
      revalidator.revalidate();
    }
  });

  return () => subscription.unsubscribe();
}, [revalidator, supabase]);

2. 优化Supabase客户端实例：将客户端实例移出组件，创建全局单例，避免组件重复初始化（可选，但能提升稳定性）：

// 组件外部创建全局Supabase客户端
const supabase = createBrowserClient(env.SUPABASE_URL, env.SUPABASE_ANON_KEY);

// 组件内部使用
const revalidator = useRevalidator();

useEffect(() => {
  const { data: { subscription } } = supabase.auth.onAuthStateChange((event) => {
    console.log(event);
    if (event === 'SIGNED_IN' || event === 'SIGNED_OUT') {
      revalidator.revalidate();
    }
  });

  return () => subscription.unsubscribe();
}, [revalidator]);

魔法链接的事件行为是否正常？ #

这是预期行为：

• 通过魔法链接进入页面时，Supabase会先触发INITIAL_SESSION同步当前会话状态，完成登录流程后触发一次SIGNED_IN事件；后续若无状态变更（如登出），不会再触发其他事件。
• INITIAL_SESSION是组件挂载时的初始化事件，仅用于同步会话，不属于主动状态变更，可安全过滤。

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