我在用户使用supabase.auth.onAuthStateChange()登录或注销后实现了一个吐司操作。但它似乎无法正常工作。
我的应用程序运行在NextJs 13和React 18上，使用的是旧的page结构。

_应用程序.tsx

export default function App({ Component, pageProps, router }) {
  let [supabase] = useState(() => createBrowserSupabaseClient())

  useEffect(() => {
    supabase.auth.onAuthStateChange((event, session) => {
      if (event === 'SIGNED_IN') console.log('signed in')
      if (event === 'SIGNED_OUT') console.log('signed out')
    })
  })

  return (
    <SessionContextProvider
      supabaseClient={supabase}
      initialSession={pageProps.initialSession}
    >
        <div className="fixed inset-0 flex justify-center sm:px-8">
          <div className="flex w-full max-w-7xl lg:px-8">
            <div className="w-full bg-white ring-1 ring-gray-100 dark:bg-zinc-900 dark:ring-zinc-300/20" />
          </div>
        </div>
        <div className="relative">
          <Header />
          <main>
            <Component previousPathname={previousPathname} {...pageProps} />
          </main>
          <Footer />
        </div>
        <Analytics />
        <Toaster />
    </SessionContextProvider>
  )
}