fix: Pass custom headers on each network request of every client (auth, realtime, REST, storage) (#311)

Author: mgm1313

src/SupabaseClient.ts

@@ -33,6 +33,9 @@ export default class SupabaseClient {
   protected storageUrl: string
   protected realtime: RealtimeClient
   protected fetch?: Fetch
+  protected headers: {
+    [key: string]: string
+  }
 
   /**
    * Create a new client for use in the browser.
@@ -63,9 +66,10 @@ export default class SupabaseClient {
     this.storageUrl = `${supabaseUrl}/storage/v1`
     this.schema = settings.schema
     this.fetch = settings.fetch
+    this.headers = { ...DEFAULT_HEADERS, ...options?.headers }
 
     this.auth = this._initSupabaseAuthClient(settings)
-    this.realtime = this._initRealtimeClient(settings.realtime)
+    this.realtime = this._initRealtimeClient({ headers: this.headers, ...settings.realtime })
 
     // In the future we might allow the user to pass in a logger to receive these events.
     // this.realtime.onOpen(() => console.log('OPEN'))
@@ -191,7 +195,7 @@ export default class SupabaseClient {
   }
 
   private _getAuthHeaders(): { [key: string]: string } {
-    const headers: { [key: string]: string } = DEFAULT_HEADERS
+    const headers: { [key: string]: string } = this.headers
     const authBearer = this.auth.session()?.access_token ?? this.supabaseKey
     headers['apikey'] = this.supabaseKey
     headers['Authorization'] = `Bearer ${authBearer}`

test/client.test.ts

@@ -1,4 +1,5 @@
 import { createClient, SupabaseClient } from '../src/index'
+import { DEFAULT_HEADERS } from '../src/lib/constants'
 
 const URL = 'http://localhost:3000'
 const KEY = 'some.fake.key'
@@ -15,6 +16,19 @@ test('it should throw an error if no valid params are provided', async () => {
   expect(() => createClient(URL, '')).toThrowError('supabaseKey is required.')
 })
 
+describe('Custom Headers', () => {
+  const customHeader = { 'X-Test-Header': 'value' }
+
+  test('should have custom header set', () => {
+    const checkHeadersSpy = jest.spyOn(SupabaseClient.prototype as any, '_getAuthHeaders')
+    createClient(URL, KEY, { headers: customHeader }).rpc('') // Calling public method `rpc` calls private method _getAuthHeaders which result we want to test
+    const getHeaders = checkHeadersSpy.mock.results[0].value
+
+    expect(checkHeadersSpy).toBeCalled()
+    expect(getHeaders).toHaveProperty('X-Test-Header', 'value')
+  })
+})
+
 // Socket should close when there are no open connections
 // https://github.com/supabase/supabase-js/issues/44