Merge pull request #468 from supabase/fix/gotrue2-realtime

Fix: Realtime setup with GoTrue v2

Author: alaister

src/SupabaseClient.ts

@@ -97,9 +97,9 @@ export default class SupabaseClient<
     this.headers = { ...DEFAULT_HEADERS, ...options?.headers }
     this.shouldThrowOnError = settings.shouldThrowOnError || false
 
+    this.auth = this._initSupabaseAuthClient(settings.auth || {}, this.headers, settings.fetch)
     this.fetch = fetchWithAuth(supabaseKey, this._getAccessToken.bind(this), settings.fetch)
 
-    this.auth = this._initSupabaseAuthClient(settings.auth || {}, this.headers, this.fetch)
     this.realtime = this._initRealtimeClient({ headers: this.headers, ...settings.realtime })
     this.rest = new PostgrestClient(`${_supabaseUrl}/rest/v1`, {
       headers: this.headers,
@@ -180,13 +180,11 @@ export default class SupabaseClient<
    * Creates a channel with Broadcast and Presence.
    */
   channel(name: string, opts?: { [key: string]: any }): SupabaseRealtimeClient {
-    const token = this.realtime.accessToken ?? this.supabaseKey
-
     if (!this.realtime.isConnected()) {
       this.realtime.connect()
     }
 
-    return new SupabaseRealtimeClient(this.realtime, name, token, opts)
+    return new SupabaseRealtimeClient(this.realtime, name, opts)
   }
 
   /**

src/lib/SupabaseRealtimeClient.ts

@@ -2,16 +2,12 @@ import { RealtimeChannel, RealtimeClient, Transformers } from '@supabase/realtim
 import { SupabaseRealtimePayload } from './types'
 
 export class SupabaseRealtimeClient {
+  socket: RealtimeClient
   channel: RealtimeChannel
 
-  constructor(socket: RealtimeClient, name: string, token: string, opts?: { [key: string]: any }) {
-    let chanParams: Record<string, string> = { user_token: token }
-
-    if (opts) {
-      chanParams = { ...chanParams, ...opts }
-    }
-
-    this.channel = socket.channel(`realtime:${name}`, chanParams) as RealtimeChannel
+  constructor(socket: RealtimeClient, name: string, opts: { [key: string]: any } = {}) {
+    this.socket = socket
+    this.channel = socket.channel(`realtime:${name}`, opts) as RealtimeChannel
   }
 
   private getPayloadRecords(payload: any) {
@@ -66,13 +62,30 @@ export class SupabaseRealtimeClient {
    * Enables the channel.
    */
   subscribe(callback: Function = () => {}) {
+    // if the socket already has a good accessToken
+    // we can just use it straight away
+    if (this.socket.accessToken) {
+      this.channel.updateJoinPayload({
+        user_token: this.socket.accessToken,
+      })
+    }
+
     this.channel.onError((e: Error) => callback('CHANNEL_ERROR', e))
     this.channel.onClose(() => callback('CLOSED'))
     this.channel
       .subscribe()
-      .receive('ok', () => callback('SUBSCRIBED'))
+      .receive('ok', () => {
+        callback('SUBSCRIBED')
+
+        // re-set the accessToken again in case it was set while
+        // the subscription was isJoining
+        if (this.socket.accessToken) {
+          this.socket.setAuth(this.socket.accessToken)
+        }
+      })
       .receive('error', (e: Error) => callback('CHANNEL_ERROR', e))
       .receive('timeout', () => callback('RETRYING_AFTER_TIMEOUT'))
+
     return this.channel
   }
 }