Supabase realtime postgres changes, no payload. Doubting chat gpt fix.
This is the first time I am implementing postgres changes in my app. I checked the documentation and some videos and all they said I had to do was add this code after handling the RLS:
const channelA = supabase
.channel('schema-db-changes')
.on(
'postgres_changes',
{
event: '',
schema: 'public',
},
(payload) => console.log(payload)
)
.subscribe()
But I tried that and nothing was showing up. So as the advanced software engineer I am, I asked chat gpt for answers and he said that it was probably because the auth token was not already set. Since I only allow for authenticated to check the updates on the table I added the realtime, chat said that I needed to subscribe after I had the token.
I don't see anything in the documentation for this solution, of course it makes a lot of sense but since I haven't found anything similar to this I don't know if it's correct. Here is the solution chat said I'd do:
useEffect(() => {
const supabase = createClient();
let channel: ReturnType<typeof supabase.channel> | null = null;
(async () => { // 1) Wait for a real session (JWT) const { data, error } = await supabase.auth.getSession(); const session = data?.session; if (error || !session?.access_token) return; // 2) Bind the JWT to Realtime (prevents “SUBSCRIBED but silent”) supabase.realtime.setAuth(session.access_token); // 3) Subscribe channel = supabase .channel("reservation-changes") .on( "postgres_changes", { event: "", schema: "eatsy", table: "reservations" }, (payload) => console.log("change:", payload) ) .subscribe((status) => console.log("subscription:", status)); })();
return () => { if (channel) supabase.removeChannel(channel); }; }, []); supabase.realtime.setAuth(session.access_token); This is for example something the supabase documentation never mentions.
(async () => { // 1) Wait for a real session (JWT) const { data, error } = await supabase.auth.getSession(); const session = data?.session; if (error || !session?.access_token) return; // 2) Bind the JWT to Realtime (prevents “SUBSCRIBED but silent”) supabase.realtime.setAuth(session.access_token); // 3) Subscribe channel = supabase .channel("reservation-changes") .on( "postgres_changes", { event: "", schema: "eatsy", table: "reservations" }, (payload) => console.log("change:", payload) ) .subscribe((status) => console.log("subscription:", status)); })();
return () => { if (channel) supabase.removeChannel(channel); }; }, []); supabase.realtime.setAuth(session.access_token); This is for example something the supabase documentation never mentions.
22 Replies
Check the dashboard realtime monitor tab and see if you are getting your changes there to rule out RLS or you not setting up realtime for your table on the server.
You are logging out status, so I assume you are not seeing an error or close after the subscribed message.
Error yes, close no.
The console log on the payload only shows up if I add these lines:
const { data, error } = await supabase.auth.getSession();
const session = data?.session;
if (error || !session?.access_token) return;
// 2) Bind the JWT to Realtime (prevents “SUBSCRIBED but silent”)
supabase.realtime.setAuth(session.access_token);
But the documentation doesn't say anything on this so I don't know if it is correct. The documentation only says to add this:
channel = supabase
.channel("reservation-changes")
.on(
"postgres_changes",
{ event: "", schema: "eatsy", table: "reservations" },
(payload) => console.log("change:", payload)
)
.subscribe((status) => console.log("subscription:", status));
})();
And I should get the payload but it isn't
You are gettng an error? From this?
Try the dashboard and confirm it is getting your change payloads there.
If you are not using a custom auth solution or passing access_tokens(JWT) around on your own, supabase-js will handle setting up the realtime correctly with the user token. BUT you must subscribe after you have a user session in the client.
I am trying to modify the parameters in the dashboard (for the realtime) but I cannot select the schema I created, do I need to add a permission?
Your schema has to be accessible to the API and have grants for any API users using it.
GRANT USAGE ON SCHEMA eatsy TO anon, authenticated, service_role;
GRANT ALL ON ALL TABLES IN SCHEMA eatsy TO anon, authenticated, service_role;
GRANT ALL ON ALL ROUTINES IN SCHEMA eatsy TO anon, authenticated, service_role;
GRANT ALL ON ALL SEQUENCES IN SCHEMA eatsy TO anon, authenticated, service_role;
ALTER DEFAULT PRIVILEGES FOR ROLE postgres IN SCHEMA eatsy GRANT ALL ON TABLES TO anon, authenticated, service_role;
ALTER DEFAULT PRIVILEGES FOR ROLE postgres IN SCHEMA eatsy GRANT ALL ON ROUTINES TO anon, authenticated, service_role;
ALTER DEFAULT PRIVILEGES FOR ROLE postgres IN SCHEMA eatsy GRANT ALL ON SEQUENCES TO anon, authenticated, service_role;
With these? Or something else?
It is
Both of those look correct (grants at a quick glance).
Ok but these were already set :(, I cannot choose my schema in parameters
In case you wanted to know this returns subscribed, no error
Did you add the table to realtime?
I've not used realtime on another schema but it is supposed to work.
Yes it is added.
I mean, this code works fine:
useEffect(() => {
const supabase = createClient();
let channel: ReturnType<typeof supabase.channel> | null = null;
(async () => {
// 1) Wait for a real session (JWT)
const { data, error } = await supabase.auth.getSession();
const session = data?.session;
if (error || !session?.access_token) return;
// 2) Bind the JWT to Realtime (prevents “SUBSCRIBED but silent”)
supabase.realtime.setAuth(session.access_token);
// 3) Subscribe
channel = supabase
.channel("reservation-changes")
.on(
"postgres_changes",
{ event: "", schema: "eatsy", table: "reservations" },
(payload) => console.log("change:", payload)
)
.subscribe((status) => console.log("subscription:", status));
})();
return () => {
if (channel) supabase.removeChannel(channel);
};
}, []);
But since there is no mentioning of this anywhere I don't know if it is safe/correct to use client side
I could create a view in the public schema on the table and listen to that, if you think the problem could be coming from the schema
So I'm guessing the dashboard realtime monitor has a bug. I have a table enabled in another schema and realtime is getting changes.
So it is not a public schema issue.
You say your last code segment you show is working?
Normally you should not need to do setAuth() with supabase-js. I don't know that it hurts anything (it is mainly for custom auth tokens).
Also your event is
"*" or ""Yes this code is working
useEffect(() => {
const supabase = createClient();
let channel: ReturnType<typeof supabase.channel> | null = null;
(async () => {
// 1) Wait for a real session (JWT)
const { data, error } = await supabase.auth.getSession();
const session = data?.session;
if (error || !session?.access_token) return;
// 2) Bind the JWT to Realtime (prevents “SUBSCRIBED but silent”)
supabase.realtime.setAuth(session.access_token);
// 3) Subscribe
channel = supabase
.channel("reservation-changes")
.on(
"postgres_changes",
{ event: "", schema: "eatsy", table: "reservations" },
(payload) => console.log("change:", payload)
)
.subscribe((status) => console.log("subscription:", status));
})();
return () => {
if (channel) supabase.removeChannel(channel);
};
}, []);
But since there is no mentioning of this anywhere in the docs I don't know if it is safe/correct to use client side
THe event is * I don't know why it doesnt copy it jaja
I don't use next.js/react so can't say the proper way for that.
There are many examples here from users doing realtime in useEffect.
You have to use triple back ticks to surround code here.
But setAuth should not be needed.
aaa okok I get it. But well I will look for other examples here; if it's not needed then i should find the answer somewhere but if you also say it is not unsafe to use it, it's ok
And you do have to have the user session before you do the realtime subscribe.
I don't see how it hurts.
Yes the route I am on is protected so I will always have it
Okok if it is not something to worry about I will leave it like that thank you!