@supabase/supabase-js 1.28.2 → 1.28.6

package/src/SupabaseClient.ts

@@ -1,10 +1,11 @@
-import { DEFAULT_HEADERS } from './lib/constants'
-import { stripTrailingSlash } from './lib/helpers'
+import { DEFAULT_HEADERS, STORAGE_KEY } from './lib/constants'
+import { stripTrailingSlash, isBrowser } from './lib/helpers'
 import { Fetch, SupabaseClientOptions } from './lib/types'
 import { SupabaseAuthClient } from './lib/SupabaseAuthClient'
 import { SupabaseQueryBuilder } from './lib/SupabaseQueryBuilder'
 import { SupabaseStorageClient } from '@supabase/storage-js'
 import { PostgrestClient } from '@supabase/postgrest-js'
+import { AuthChangeEvent, Session, Subscription } from '@supabase/gotrue-js'
 import { RealtimeClient, RealtimeSubscription, RealtimeClientOptions } from '@supabase/realtime-js'
 
 const DEFAULT_OPTIONS = {
@@ -12,6 +13,7 @@ const DEFAULT_OPTIONS = {
   autoRefreshToken: true,
   persistSession: true,
   detectSessionInUrl: true,
+  multiTab: true,
   headers: DEFAULT_HEADERS,
 }
 
@@ -32,7 +34,9 @@ export default class SupabaseClient {
   protected authUrl: string
   protected storageUrl: string
   protected realtime: RealtimeClient
+  protected multiTab: boolean
   protected fetch?: Fetch
+  protected changedAccessToken: string | undefined
   protected headers: {
     [key: string]: string
   }
@@ -47,6 +51,7 @@ export default class SupabaseClient {
    * @param options.detectSessionInUrl Set to "true" if you want to automatically detects OAuth grants in the URL and signs in the user.
    * @param options.headers Any additional headers to send with each network request.
    * @param options.realtime Options passed along to realtime-js constructor.
+   * @param options.multiTab Set to "false" if you want to disable multi-tab/window events.
    * @param options.fetch A custom fetch implementation.
    */
   constructor(
@@ -65,12 +70,16 @@ export default class SupabaseClient {
     this.authUrl = `${supabaseUrl}/auth/v1`
     this.storageUrl = `${supabaseUrl}/storage/v1`
     this.schema = settings.schema
+    this.multiTab = settings.multiTab
     this.fetch = settings.fetch
     this.headers = { ...DEFAULT_HEADERS, ...options?.headers }
 
     this.auth = this._initSupabaseAuthClient(settings)
     this.realtime = this._initRealtimeClient({ headers: this.headers, ...settings.realtime })
 
+    this._listenForAuthEvents()
+    this._listenForMultiTabEvents()
+
     // In the future we might allow the user to pass in a logger to receive these events.
     // this.realtime.onOpen(() => console.log('OPEN'))
     // this.realtime.onClose(() => console.log('CLOSED'))
@@ -121,6 +130,14 @@ export default class SupabaseClient {
     return rest.rpc<T>(fn, params, { head, count })
   }
 
+  /**
+   * Remove all subscriptions.
+   */
+  async removeAllSubscriptions() {
+    const subscriptions = this.realtime.channels.slice()
+    return await Promise.allSettled(subscriptions.map((sub) => this.removeSubscription(sub)))
+  }
+
   /**
    * Removes an active subscription and returns the number of open connections.
    *
@@ -131,12 +148,14 @@ export default class SupabaseClient {
       try {
         await this._closeSubscription(subscription)
 
-        const openSubscriptions = this.getSubscriptions().length
-        if (!openSubscriptions) {
+        const allSubscriptions = this.getSubscriptions()
+        const openSubscriptionsCount = allSubscriptions.filter((chan) => chan.isJoined()).length
+
+        if (!allSubscriptions.length) {
           const { error } = await this.realtime.disconnect()
           if (error) return resolve({ error })
         }
-        return resolve({ error: null, data: { openSubscriptions } })
+        return resolve({ error: null, data: { openSubscriptions: openSubscriptionsCount } })
       } catch (error) {
         return resolve({ error })
       }
@@ -147,6 +166,11 @@ export default class SupabaseClient {
     if (!subscription.isClosed()) {
       await this._closeChannel(subscription)
     }
+
+    return new Promise((resolve) => {
+      this.realtime.remove(subscription)
+      return resolve(true)
+    })
   }
 
   /**
@@ -207,10 +231,66 @@ export default class SupabaseClient {
       subscription
         .unsubscribe()
         .receive('ok', () => {
-          this.realtime.remove(subscription)
           return resolve(true)
         })
         .receive('error', (e: Error) => reject(e))
     })
   }
+
+  private _listenForMultiTabEvents() {
+    if (!this.multiTab || !isBrowser() || !window?.addEventListener) {
+      return null
+    }
+
+    try {
+      return window?.addEventListener('storage', (e: StorageEvent) => {
+        if (e.key === STORAGE_KEY) {
+          const newSession = JSON.parse(String(e.newValue))
+          const accessToken: string | undefined =
+            newSession?.currentSession?.access_token ?? undefined
+          const previousAccessToken = this.auth.session()?.access_token
+          if (!accessToken) {
+            this._handleTokenChanged('SIGNED_OUT', accessToken, 'STORAGE')
+          } else if (!previousAccessToken && accessToken) {
+            this._handleTokenChanged('SIGNED_IN', accessToken, 'STORAGE')
+          } else if (previousAccessToken !== accessToken) {
+            this._handleTokenChanged('TOKEN_REFRESHED', accessToken, 'STORAGE')
+          }
+        }
+      })
+    } catch (error) {
+      console.error('_listenForMultiTabEvents', error)
+      return null
+    }
+  }
+
+  private _listenForAuthEvents() {
+    let { data } = this.auth.onAuthStateChange((event, session) => {
+      this._handleTokenChanged(event, session?.access_token, 'CLIENT')
+    })
+    return data
+  }
+
+  private _handleTokenChanged(
+    event: AuthChangeEvent,
+    token: string | undefined,
+    source: 'CLIENT' | 'STORAGE'
+  ) {
+    if (
+      (event === 'TOKEN_REFRESHED' || event === 'SIGNED_IN') &&
+      this.changedAccessToken !== token
+    ) {
+      // Token has changed
+      this.realtime.setAuth(token!)
+      // Ideally we should call this.auth.recoverSession() - need to make public
+      // to trigger a "SIGNED_IN" event on this client.
+      if (source == 'STORAGE') this.auth.setAuth(token!)
+
+      this.changedAccessToken = token
+    } else if (event === 'SIGNED_OUT' || event === 'USER_DELETED') {
+      // Token is removed
+      this.removeAllSubscriptions()
+      if (source == 'STORAGE') this.auth.signOut()
+    }
+  }
 }

package/src/lib/SupabaseQueryBuilder.ts

@@ -4,8 +4,11 @@ import { RealtimeClient } from '@supabase/realtime-js'
 import { Fetch, SupabaseEventTypes, SupabaseRealtimePayload } from './types'
 
 export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
-  private _subscription: SupabaseRealtimeClient
+  private _subscription: SupabaseRealtimeClient | null = null
   private _realtime: RealtimeClient
+  private _headers: { [key: string]: string }
+  private _schema: string
+  private _table: string
 
   constructor(
     url: string,
@@ -25,12 +28,14 @@ export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
   ) {
     super(url, { headers, schema, fetch })
 
-    this._subscription = new SupabaseRealtimeClient(realtime, headers, schema, table)
     this._realtime = realtime
+    this._headers = headers
+    this._schema = schema
+    this._table = table
   }
 
   /**
-   * Subscribe to realtime changes in your databse.
+   * Subscribe to realtime changes in your database.
    * @param event The database event which you would like to receive updates for, or you can use the special wildcard `*` to listen to all changes.
    * @param callback A callback that will handle the payload that is sent whenever your database changes.
    */
@@ -41,6 +46,14 @@ export class SupabaseQueryBuilder<T> extends PostgrestQueryBuilder<T> {
     if (!this._realtime.isConnected()) {
       this._realtime.connect()
     }
+    if (!this._subscription) {
+      this._subscription = new SupabaseRealtimeClient(
+        this._realtime,
+        this._headers,
+        this._schema,
+        this._table
+      )
+    }
     return this._subscription.on(event, callback)
   }
 }

package/src/lib/constants.ts

@@ -1,3 +1,4 @@
 // constants.ts
 import { version } from './version'
 export const DEFAULT_HEADERS = { 'X-Client-Info': `supabase-js/${version}` }
+export const STORAGE_KEY = 'supabase.auth.token'

package/src/lib/helpers.ts

@@ -11,3 +11,5 @@ export function uuid() {
 export function stripTrailingSlash(url: string) {
   return url.replace(/\/$/, '')
 }
+
+export const isBrowser = () => typeof window !== 'undefined'

package/src/lib/version.ts

@@ -1,2 +1,2 @@
 // generated by genversion
-export const version = '1.28.2'
+export const version = '1.28.6'