Postgres Realtime when using third party auth JWT tokens

[strangebot]

Hello all,

The problem

I want to use the Realtime feature of Postgres with a third party auth token so I can use RLS without anon, but this does not appear to be working. The websocket is being generated okay, when using the client generated above. I can see system messages coming through okay but I don't get any events when I subscribe to postgres_changes. Well, actually I just receive DELETE events, but nothing else.

If I change the RLS for my Select policy to the anon role then come through, suggesting the realtime component is not passing my custom JWT (see below).

If I inspect the websocket, I do see a message for a access_token event for my custom channel. The contents for this appear to contain my anon api key and not the custom JWT. But I do not know the exact nature or meaning of this event.

Background

I am building a NextJs app that is making use of the Supabase client's ability to use third party auth via a generated JWT. In my case I am using PropelAuth for user management/authentication. I have got this working across all the operations I need to make in my app (select, insert, etc). Initially I used the custom header option when creating my client. For example,

const accessToken = token-generated-using-my-supabase-jwt-secret

const options: SupabaseClientOptions<any> = {
  global: {
    headers: {
      Authorization: `Bearer ${accessToken}`,
    }
  },
  auth: {
    persistSession: false,
    detectSessionInUrl: false,
    autoRefreshToken: false,
  },
}

client = createBrowserClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  options,
)

More recently the feat: add third-party auth support #1004 allows me to simplify the options to this,

const options: SupabaseClientOptions<'public'> = {
  accessToken: async () => accessToken,
}

Both approaches work when combined with RLS policies that target the authenticated role.

I understand that Realtime uses the SELECT RLS policy to determine its right to transmit events. It clearly is not passing this when the role is authenticated but only when set to anon which is not suitable in this case.

Questions

Has anyone else got this working in the same or a similar way?
Does anyone know if I am missing something to enable the realtime component to use a third party auth JWT?

Any help or insights would be gratefully welcome.
Oh and I've I have been a complete idiot and missed the obvious, then please forgive me.

Thank you.

[GaryAustin1]

Maybe this required extra call when using a custom token with realtime.
https://supabase.com/docs/guides/realtime/postgres-changes?queryGroups=database-method&database-method=sql&queryGroups=language&language=js#custom-tokens

[strangebot]

Thanks @GaryAustin1 for the quick response. I had missed this part of the realtime guides!

I added the auth call and replaced my create client function with the one in the docs (import { createClient } from '@supabase/supabase-js') but it doesn't appear to have resolved the issue.

  client =createClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
  )

  // Set your custom JWT here
  client.realtime.setAuth(accessToken)

I'll revisit this in the morning and hopefully a break will spark a revelation or two.

[strangebot]

I have managed to solve my issue. The solution for me was to use client.realtime.setAuth(accessToken) as prescribed in the Realtime docs and to specify the typ header in my JWT sign method call. I'm using the jose library and the typ header is optional.

The missing typ value is mostly thanks to a comment I stumbled upon after spotting a error_generating_signer error message from the Realtime socket when trying to authenticate my channel connection.

import { createBrowserClient } from '@supabase/ssr'

const jwtPayload = {
  sub: user.userId,   
  email: user.email,
  role: 'authenticated'  // note: I needed this for my RLS select policy with `authenticated` role to pass
}

const key = new TextEncoder().encode('jwt-secret-from-supabase',)

const accessToken = await new jose.SignJWT(jwtPayload)
  .setProtectedHeader({ alg: 'HS256', typ: 'JWT' })
  .setIssuedAt()
  .setExpirationTime('15m')
  .sign(key)

client = createBrowserClient<Database>(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
  process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
)

client.realtime.setAuth(accessToken)