update pay function

boilerplate-chakra-pro-main/app/supabase-provider.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import type { Database } from '@/types_db';
+import { createPagesBrowserClient } from '@supabase/auth-helpers-nextjs';
+import type { SupabaseClient } from '@supabase/auth-helpers-nextjs';
+import { useRouter } from 'next/navigation';
+import { createContext, useContext, useEffect, useState } from 'react';
+
+type SupabaseContext = {
+  supabase: SupabaseClient<Database>;
+};
+
+const Context = createContext<SupabaseContext | undefined>(undefined);
+
+export default function SupabaseProvider({
+  children
+}: {
+  children: React.ReactNode;
+}) {
+  const [supabase] = useState(() => createPagesBrowserClient());
+  const router = useRouter();
+
+  useEffect(() => {
+    const {
+      data: { subscription }
+    } = supabase.auth.onAuthStateChange((event) => {
+      if (event === 'SIGNED_IN') router.refresh();
+    });
+
+    return () => {
+      subscription.unsubscribe();
+    };
+  }, [router, supabase]);
+
+  return (
+    <Context.Provider value={{ supabase }}>
+      <>{children}</>
+    </Context.Provider>
+  );
+}
+
+export const useSupabase = () => {
+  const context = useContext(Context);
+
+  if (context === undefined) {
+    throw new Error('useSupabase must be used inside SupabaseProvider');
+  }
+
+  return context;
+};