reactjssupabasereal-time-dataclerk

Supabase realtime client with clerk auth


Will supabase.realtime.setAuth(token) do the magic or am I missing anything?

Full code here

import { useAuth } from '@clerk/clerk-react'

...

useEffect(() => {
    const fetchTokenAndSubscribe = async () => {
      const token = await getToken()
      supabase.realtime.setAuth(token)
      const channel = supabase.channel('public:messages')

      channel
        .on(
          'postgres_changes',
          {
            event: 'INSERT',
            schema: 'public',
            table: 'messages',
          },
          handleMessageInsertOrUpdate,
        )
        .subscribe()

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

    fetchTokenAndSubscribe()
  }, [])

I enabled the real time on messages table but got nothing from the messages. I was speculating this might be the issue regarding to RLS, I thus disabled it but still, no luck. Did I miss anything in my implementation or configuration?


Solution

  • To start using realtime, you need to enable realtime on a per table basis. You can do it through the dashboard by going to Database > Replication and clicking on the button at the right of the row on supabase_realtime, or enable it through SQL.

    -- add a table to the publication
    alter
      publication supabase_realtime add table messages;
    

    https://supabase.com/docs/guides/realtime/extensions/postgres-changes#replication-setup