Realtime postgres_changes not working in production

export function useSubmissions({ projectId, initialSubmissions }: UseSubmissionsProps) {
    const { user } = useUser();
    const { session } = useSession();
    const [submissions, setSubmissions] = useState<any[]>(initialSubmissions);

    useEffect(() => {
        if (!user || !session) return;

        const setupRealtime = async () => {
            const token = await session.getToken({ template: 'supabase' });
            console.log('Token:', token);
            if (!token) {
                console.error('Failed to get Clerk token for Supabase');
                return;
            }

            const supabase = createRealtimeClient(token);

            const channel = supabase
                .channel(`submissions:${projectId}`)
                .on('postgres_changes', {
                    event: 'INSERT',
                    schema: 'public',
                    table: 'submissions'
                }, (payload) => {
                    console.log('Submission received', payload);
                    const newSubmission = payload.new;
                    if (newSubmission?.status === 'pending' || newSubmission?.status === 'submitted') {
                        setSubmissions((current) => [...current, newSubmission]);
                    }
                })
                .on('postgres_changes', {
                    event: 'UPDATE',
                    schema: 'public',
                    table: 'submissions'
                }, (payload) => {
                    console.log('Submission updated', payload);
                    const updatedSubmission = payload.new;
                    setSubmissions((current) =>
                        current.map((submission) =>
                            submission.id === updatedSubmission.id ? updatedSubmission : submission
                        )
                    );
                })
                .on('postgres_changes', {
                    event: 'DELETE',
                    schema: 'public',
                    table: 'submissions'
                }, (payload) => {
                    console.log('Submission removed', payload);
                    const deletedSubmission = payload.old;
                    setSubmissions((current) =>
                        current.filter((submission) => submission.id !== deletedSubmission.id)
                    );
                })
                .subscribe((status, err) => {
                    console.log('📡 Subscription status:', status);
                    console.log('📡 Full error object:', err);

                    if (status === 'CHANNEL_ERROR') {
                        console.error('❌ CHANNEL_ERROR details:', {
                            error: err,
                            errorType: typeof err,
                            errorKeys: err ? Object.keys(err) : 'no error object'
                        });
                    }
                });

            return () => {
                channel.unsubscribe();
            };
        };

        setupRealtime();
    }, [user?.id, projectId, session?.id])

    return { submissions }
}

export const createRealtimeClient = (token: string) => {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
    {
      auth: {
        persistSession: false
      },
      global: {
        headers: {
          Authorization: `Bearer ${token}`
        }
      },
      realtime: {
        params: {
          apikey: token,
          access_token: token
        }
      }
    }
  )
}