Merge branch 'master' into fix/gotrue_auth_events

Author: kiwicopple

README.md

@@ -1,15 +1,19 @@
 # `supabase-js`
 
-An isomorphic Javascript client for Supabase.
+An isomorphic JavaScript client for Supabase.
 
-- Documentation: https://supabase.io/docs/client/supabase-client
+**Documentation:** https://supabase.io/docs/client/supabase-client
 
 ## Usage
 
+First of all, you need to install the library:
+
 ```sh
 npm install @supabase/supabase-js
 ```
 
+Then you're able to import the library and establish the connection with the database:
+
 ```js
 import { createClient } from '@supabase/supabase-js'
 
@@ -19,19 +23,27 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
 
 ### UMD
 
-You can now use plain `<script>`s to import supabase-js from CDNs, like
+You can now use plain `<script>`s to import supabase-js from CDNs, like:
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>
+```
 
-`<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js"></script>`
-or
-`<script src="https://unpkg.com/@supabase/supabase-js"></script>`.
+or even:
+
+```html
+<script src="https://unpkg.com/@supabase/supabase-js"></script>
+```
 
 Then you can use it from a global `supabase` variable:
 
 ```html
 <script>
-    const { createClient } = supabase
-    supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
-  ...
+  const { createClient } = supabase
+  const _supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
+
+  console.log('Supabase Instance: ', _supabase)
+  // ...
 </script>
 ```
 

src/SupabaseClient.ts

@@ -37,6 +37,9 @@ export default class SupabaseClient {
   protected multiTab: boolean
   protected fetch?: Fetch
   protected changedAccessToken: string | undefined
+  protected headers: {
+    [key: string]: string
+  }
 
   /**
    * Create a new client for use in the browser.
@@ -68,11 +71,11 @@ export default class SupabaseClient {
     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(settings.realtime)
-
-    this.fetch = settings.fetch
+    this.realtime = this._initRealtimeClient({ headers: this.headers, ...settings.realtime })
 
     this._listenForAuthEvents()
     this._listenForMultiTabEvents()
@@ -177,6 +180,7 @@ export default class SupabaseClient {
     detectSessionInUrl,
     localStorage,
     headers,
+    fetch,
   }: SupabaseClientOptions) {
     const authHeaders = {
       Authorization: `Bearer ${this.supabaseKey}`,
@@ -189,7 +193,7 @@ export default class SupabaseClient {
       persistSession,
       detectSessionInUrl,
       localStorage,
-      fetch: this.fetch,
+      fetch,
     })
   }
 
@@ -209,7 +213,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