@supabase/supabase-js 1.35.5 → 1.36.0-next.11

package/src/SupabaseClient.ts

@@ -1,13 +1,18 @@
-import { DEFAULT_HEADERS, STORAGE_KEY } from './lib/constants'
-import { stripTrailingSlash, isBrowser } from './lib/helpers'
-import { Fetch, GenericObject, SupabaseClientOptions } from './lib/types'
-import { SupabaseAuthClient } from './lib/SupabaseAuthClient'
-import { SupabaseQueryBuilder } from './lib/SupabaseQueryBuilder'
-import { SupabaseStorageClient } from '@supabase/storage-js'
 import { FunctionsClient } from '@supabase/functions-js'
-import { PostgrestClient } from '@supabase/postgrest-js'
 import { AuthChangeEvent } from '@supabase/gotrue-js'
-import { RealtimeClient, RealtimeSubscription, RealtimeClientOptions } from '@supabase/realtime-js'
+import {
+  PostgrestClient,
+  PostgrestFilterBuilder,
+  PostgrestQueryBuilder,
+} from '@supabase/postgrest-js'
+import { RealtimeChannel, RealtimeClient, RealtimeClientOptions } from '@supabase/realtime-js'
+import { SupabaseStorageClient } from '@supabase/storage-js'
+import { DEFAULT_HEADERS } from './lib/constants'
+import { fetchWithAuth } from './lib/fetch'
+import { isBrowser, stripTrailingSlash } from './lib/helpers'
+import { SupabaseAuthClient } from './lib/SupabaseAuthClient'
+import { SupabaseRealtimeClient } from './lib/SupabaseRealtimeClient'
+import { Fetch, GenericSchema, SupabaseClientOptions, SupabaseAuthClientOptions } from './lib/types'
 
 const DEFAULT_OPTIONS = {
   schema: 'public',
@@ -23,20 +28,28 @@ const DEFAULT_OPTIONS = {
  *
  * An isomorphic Javascript client for interacting with Postgres.
  */
-export default class SupabaseClient {
+export default class SupabaseClient<
+  Database = any,
+  SchemaName extends string & keyof Database = 'public' extends keyof Database
+    ? 'public'
+    : string & keyof Database,
+  Schema extends GenericSchema = Database[SchemaName] extends GenericSchema
+    ? Database[SchemaName]
+    : any
+> {
   /**
    * Supabase Auth allows you to create and manage user sessions for access to data that is secured by access policies.
    */
   auth: SupabaseAuthClient
 
-  protected schema: string
-  protected restUrl: string
   protected realtimeUrl: string
   protected authUrl: string
   protected storageUrl: string
   protected functionsUrl: string
   protected realtime: RealtimeClient
+  protected rest: PostgrestClient<Database, SchemaName>
   protected multiTab: boolean
+  protected storageKey: string
   protected fetch?: Fetch
   protected changedAccessToken: string | undefined
   protected shouldThrowOnError: boolean
@@ -61,15 +74,13 @@ export default class SupabaseClient {
   constructor(
     protected supabaseUrl: string,
     protected supabaseKey: string,
-    options?: SupabaseClientOptions
+    options?: SupabaseClientOptions<SchemaName>
   ) {
     if (!supabaseUrl) throw new Error('supabaseUrl is required.')
     if (!supabaseKey) throw new Error('supabaseKey is required.')
 
     const _supabaseUrl = stripTrailingSlash(supabaseUrl)
-    const settings = { ...DEFAULT_OPTIONS, ...options }
 
-    this.restUrl = `${_supabaseUrl}/rest/v1`
     this.realtimeUrl = `${_supabaseUrl}/realtime/v1`.replace('http', 'ws')
     this.authUrl = `${_supabaseUrl}/auth/v1`
     this.storageUrl = `${_supabaseUrl}/storage/v1`
@@ -81,15 +92,26 @@ export default class SupabaseClient {
     } else {
       this.functionsUrl = `${_supabaseUrl}/functions/v1`
     }
+    // default storage key uses the supabase project ref as a namespace
+    const defaultStorageKey = `sb-${new URL(this.authUrl).hostname.split('.')[0]}-auth-token`
+    this.storageKey = options?.auth?.storageKey ?? defaultStorageKey
+
+    const settings = { ...DEFAULT_OPTIONS, ...options, storageKey: this.storageKey }
 
-    this.schema = settings.schema
-    this.multiTab = settings.multiTab
-    this.fetch = settings.fetch
+    this.multiTab = settings.auth?.multiTab ?? false
     this.headers = { ...DEFAULT_HEADERS, ...options?.headers }
     this.shouldThrowOnError = settings.shouldThrowOnError || false
 
-    this.auth = this._initSupabaseAuthClient(settings)
+    this.auth = this._initSupabaseAuthClient(settings.auth || {}, this.headers, settings.fetch)
+    this.fetch = fetchWithAuth(supabaseKey, this._getAccessToken.bind(this), settings.fetch)
+
     this.realtime = this._initRealtimeClient({ headers: this.headers, ...settings.realtime })
+    this.rest = new PostgrestClient(`${_supabaseUrl}/rest/v1`, {
+      headers: this.headers,
+      schema: options?.db?.schema,
+      fetch: this.fetch,
+      throwOnError: this.shouldThrowOnError,
+    })
 
     this._listenForAuthEvents()
     this._listenForMultiTabEvents()
@@ -105,7 +127,7 @@ export default class SupabaseClient {
    */
   get functions() {
     return new FunctionsClient(this.functionsUrl, {
-      headers: this._getAuthHeaders(),
+      headers: this.headers,
       customFetch: this.fetch,
     })
   }
@@ -114,7 +136,7 @@ export default class SupabaseClient {
    * Supabase Storage allows you to manage user-generated content, such as photos or videos.
    */
   get storage() {
-    return new SupabaseStorageClient(this.storageUrl, this._getAuthHeaders(), this.fetch)
+    return new SupabaseStorageClient(this.storageUrl, this.headers, this.fetch)
   }
 
   /**
@@ -122,16 +144,11 @@ export default class SupabaseClient {
    *
    * @param table The table name to operate on.
    */
-  from<T = any>(table: string): SupabaseQueryBuilder<T> {
-    const url = `${this.restUrl}/${table}`
-    return new SupabaseQueryBuilder<T>(url, {
-      headers: this._getAuthHeaders(),
-      schema: this.schema,
-      realtime: this.realtime,
-      table,
-      fetch: this.fetch,
-      shouldThrowOnError: this.shouldThrowOnError,
-    })
+  from<
+    TableName extends string & keyof Schema['Tables'],
+    Table extends Schema['Tables'][TableName]
+  >(table: TableName): PostgrestQueryBuilder<Table> {
+    return this.rest.from(table)
   }
 
   /**
@@ -143,74 +160,96 @@ export default class SupabaseClient {
    * @param count  Count algorithm to use to count rows in a table.
    *
    */
-  rpc<T = any>(
-    fn: string,
-    params?: object,
-    {
-      head = false,
-      count = null,
-    }: { head?: boolean; count?: null | 'exact' | 'planned' | 'estimated' } = {}
-  ) {
-    const rest = this._initPostgRESTClient()
-    return rest.rpc<T>(fn, params, { head, count })
+  rpc<
+    FunctionName extends string & keyof Schema['Functions'],
+    Function_ extends Schema['Functions'][FunctionName]
+  >(
+    fn: FunctionName,
+    args: Function_['Args'] = {},
+    options?: {
+      head?: boolean
+      count?: 'exact' | 'planned' | 'estimated'
+    }
+  ): PostgrestFilterBuilder<
+    Function_['Returns'] extends any[]
+      ? Function_['Returns'][number] extends Record<string, unknown>
+        ? Function_['Returns'][number]
+        : never
+      : never,
+    Function_['Returns']
+  > {
+    return this.rest.rpc(fn, args, options)
   }
 
   /**
-   * Closes and removes all subscriptions and returns a list of removed
-   * subscriptions and their errors.
+   * Creates a channel with Broadcast and Presence.
    */
-  async removeAllSubscriptions(): Promise<
-    { data: { subscription: RealtimeSubscription }; error: Error | null }[]
+  channel(name: string, opts?: { [key: string]: any }): SupabaseRealtimeClient {
+    if (!this.realtime.isConnected()) {
+      this.realtime.connect()
+    }
+
+    return new SupabaseRealtimeClient(this.realtime, name, opts)
+  }
+
+  /**
+   * Closes and removes all channels and returns a list of removed
+   * channels and their errors.
+   */
+  async removeAllChannels(): Promise<
+    { data: { channels: RealtimeChannel }; error: Error | null }[]
   > {
-    const allSubs: RealtimeSubscription[] = this.getSubscriptions().slice()
-    const allSubPromises = allSubs.map((sub) => this.removeSubscription(sub))
-    const allRemovedSubs = await Promise.all(allSubPromises)
+    const allChans: RealtimeChannel[] = this.getChannels().slice()
+    const allChanPromises = allChans.map((chan) => this.removeChannel(chan))
+    const allRemovedChans = await Promise.all(allChanPromises)
 
-    return allRemovedSubs.map(({ error }, i) => {
+    return allRemovedChans.map(({ error }, i) => {
       return {
-        data: { subscription: allSubs[i] },
+        data: { channels: allChans[i] },
         error,
       }
     })
   }
 
   /**
-   * Closes and removes a subscription and returns the number of open subscriptions.
+   * Closes and removes a channel and returns the number of open channels.
    *
-   * @param subscription The subscription you want to close and remove.
+   * @param channel The channel you want to close and remove.
    */
-  async removeSubscription(
-    subscription: RealtimeSubscription
-  ): Promise<{ data: { openSubscriptions: number }; error: Error | null }> {
-    const { error } = await this._closeSubscription(subscription)
-    const allSubs: RealtimeSubscription[] = this.getSubscriptions()
-    const openSubCount = allSubs.filter((chan) => chan.isJoined()).length
+  async removeChannel(
+    channel: RealtimeChannel
+  ): Promise<{ data: { openChannels: number }; error: Error | null }> {
+    const { error } = await this._closeChannel(channel)
+    const allChans: RealtimeChannel[] = this.getChannels()
+    const openChanCount = allChans.filter((chan) => chan.isJoined()).length
 
-    if (allSubs.length === 0) await this.realtime.disconnect()
+    if (allChans.length === 0) await this.realtime.disconnect()
 
-    return { data: { openSubscriptions: openSubCount }, error }
+    return { data: { openChannels: openChanCount }, error }
   }
 
-  private async _closeSubscription(
-    subscription: RealtimeSubscription
-  ): Promise<{ error: Error | null }> {
+  private async _getAccessToken() {
+    const { session } = await this.auth.getSession()
+
+    return session?.access_token ?? null
+  }
+
+  private async _closeChannel(channel: RealtimeChannel): Promise<{ error: Error | null }> {
     let error = null
 
-    if (!subscription.isClosed()) {
-      const { error: unsubError } = await this._unsubscribeSubscription(subscription)
+    if (!channel.isClosed()) {
+      const { error: unsubError } = await this._unsubscribeChannel(channel)
       error = unsubError
     }
 
-    this.realtime.remove(subscription)
+    this.realtime.remove(channel)
 
     return { error }
   }
 
-  private _unsubscribeSubscription(
-    subscription: RealtimeSubscription
-  ): Promise<{ error: Error | null }> {
+  private _unsubscribeChannel(channel: RealtimeChannel): Promise<{ error: Error | null }> {
     return new Promise((resolve) => {
-      subscription
+      channel
         .unsubscribe()
         .receive('ok', () => resolve({ error: null }))
         .receive('error', (error: Error) => resolve({ error }))
@@ -219,22 +258,25 @@ export default class SupabaseClient {
   }
 
   /**
-   * Returns an array of all your subscriptions.
+   * Returns an array of all your channels.
    */
-  getSubscriptions(): RealtimeSubscription[] {
-    return this.realtime.channels as RealtimeSubscription[]
+  getChannels(): RealtimeChannel[] {
+    return this.realtime.channels as RealtimeChannel[]
   }
 
-  private _initSupabaseAuthClient({
-    autoRefreshToken,
-    persistSession,
-    detectSessionInUrl,
-    localStorage,
-    headers,
-    fetch,
-    cookieOptions,
-    multiTab,
-  }: SupabaseClientOptions) {
+  private _initSupabaseAuthClient(
+    {
+      autoRefreshToken,
+      persistSession,
+      detectSessionInUrl,
+      localStorage,
+      cookieOptions,
+      multiTab,
+      storageKey,
+    }: SupabaseAuthClientOptions,
+    headers?: Record<string, string>,
+    fetch?: Fetch
+  ) {
     const authHeaders = {
       Authorization: `Bearer ${this.supabaseKey}`,
       apikey: `${this.supabaseKey}`,
@@ -242,6 +284,7 @@ export default class SupabaseClient {
     return new SupabaseAuthClient({
       url: this.authUrl,
       headers: { ...headers, ...authHeaders },
+      storageKey: storageKey,
       autoRefreshToken,
       persistSession,
       detectSessionInUrl,
@@ -255,27 +298,10 @@ export default class SupabaseClient {
   private _initRealtimeClient(options?: RealtimeClientOptions) {
     return new RealtimeClient(this.realtimeUrl, {
       ...options,
-      params: { ...options?.params, apikey: this.supabaseKey },
+      params: { ...{ apikey: this.supabaseKey, vsndate: '2022' }, ...options?.params },
     })
   }
 
-  private _initPostgRESTClient() {
-    return new PostgrestClient(this.restUrl, {
-      headers: this._getAuthHeaders(),
-      schema: this.schema,
-      fetch: this.fetch,
-      throwOnError: this.shouldThrowOnError,
-    })
-  }
-
-  private _getAuthHeaders(): GenericObject {
-    const headers: GenericObject = { ...this.headers }
-    const authBearer = this.auth.session()?.access_token ?? this.supabaseKey
-    headers['apikey'] = this.supabaseKey
-    headers['Authorization'] = headers['Authorization'] || `Bearer ${authBearer}`
-    return headers
-  }
-
   private _listenForMultiTabEvents() {
     if (!this.multiTab || !isBrowser() || !window?.addEventListener) {
       return null
@@ -283,7 +309,7 @@ export default class SupabaseClient {
 
     try {
       return window?.addEventListener('storage', (e: StorageEvent) => {
-        if (e.key === STORAGE_KEY) {
+        if (e.key === this.storageKey) {
           const newSession = JSON.parse(String(e.newValue))
           const accessToken: string | undefined =
             newSession?.currentSession?.access_token ?? undefined
@@ -304,7 +330,7 @@ export default class SupabaseClient {
   }
 
   private _listenForAuthEvents() {
-    let { data } = this.auth.onAuthStateChange((event, session) => {
+    let data = this.auth.onAuthStateChange((event, session) => {
       this._handleTokenChanged(event, session?.access_token, 'CLIENT')
     })
     return data

package/src/index.ts

@@ -1,31 +1,33 @@
 import SupabaseClient from './SupabaseClient'
-import { SupabaseClientOptions, SupabaseRealtimePayload } from './lib/types'
-import { User as AuthUser, Session as AuthSession } from '@supabase/gotrue-js'
+import type { GenericSchema, SupabaseClientOptions } from './lib/types'
+
 export * from '@supabase/gotrue-js'
-export {
+export type { User as AuthUser, Session as AuthSession } from '@supabase/gotrue-js'
+export type {
   PostgrestResponse,
   PostgrestSingleResponse,
   PostgrestMaybeSingleResponse,
   PostgrestError,
 } from '@supabase/postgrest-js'
 export * from '@supabase/realtime-js'
+export { default as SupabaseClient } from './SupabaseClient'
+export type { SupabaseClientOptions, SupabaseRealtimePayload } from './lib/types'
 
 /**
  * Creates a new Supabase Client.
  */
-const createClient = (
+export const createClient = <
+  Database = any,
+  SchemaName extends string & keyof Database = 'public' extends keyof Database
+    ? 'public'
+    : string & keyof Database,
+  Schema extends GenericSchema = Database[SchemaName] extends GenericSchema
+    ? Database[SchemaName]
+    : any
+>(
   supabaseUrl: string,
   supabaseKey: string,
-  options?: SupabaseClientOptions
-): SupabaseClient => {
+  options?: SupabaseClientOptions<SchemaName>
+): SupabaseClient<Database, SchemaName, Schema> => {
   return new SupabaseClient(supabaseUrl, supabaseKey, options)
 }
-
-export {
-  createClient,
-  SupabaseClient,
-  SupabaseClientOptions,
-  SupabaseRealtimePayload,
-  AuthUser,
-  AuthSession,
-}

package/src/lib/SupabaseRealtimeClient.ts

@@ -1,19 +1,13 @@
-import { RealtimeSubscription, RealtimeClient, Transformers } from '@supabase/realtime-js'
-import { GenericObject, SupabaseEventTypes, SupabaseRealtimePayload } from './types'
+import { RealtimeChannel, RealtimeClient, Transformers } from '@supabase/realtime-js'
+import { SupabaseRealtimePayload } from './types'
 
 export class SupabaseRealtimeClient {
-  subscription: RealtimeSubscription
+  socket: RealtimeClient
+  channel: RealtimeChannel
 
-  constructor(socket: RealtimeClient, headers: GenericObject, schema: string, tableName: string) {
-    const chanParams: GenericObject = {}
-    const topic = tableName === '*' ? `realtime:${schema}` : `realtime:${schema}:${tableName}`
-    const userToken = headers['Authorization'].split(' ')[1]
-
-    if (userToken) {
-      chanParams['user_token'] = userToken
-    }
-
-    this.subscription = socket.channel(topic, chanParams) as RealtimeSubscription
+  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) {
@@ -37,38 +31,61 @@ export class SupabaseRealtimeClient {
    * The event you want to listen to.
    *
    * @param event The event
+   * @param filter An object that specifies what you want to listen to from the event.
    * @param callback A callback function that is called whenever the event occurs.
    */
-  on(event: SupabaseEventTypes, callback: (payload: SupabaseRealtimePayload<any>) => void) {
-    this.subscription.on(event, (payload: any) => {
-      let enrichedPayload: SupabaseRealtimePayload<any> = {
-        schema: payload.schema,
-        table: payload.table,
-        commit_timestamp: payload.commit_timestamp,
-        eventType: payload.type,
-        new: {},
-        old: {},
-        errors: payload.errors,
-      }
+  on(event: string, filter?: Record<string, string>, callback?: (payload: any) => void) {
+    this.channel.on(event, filter ?? {}, ({ payload }: { payload: any }) => {
+      let enrichedPayload = payload
 
-      enrichedPayload = { ...enrichedPayload, ...this.getPayloadRecords(payload) }
+      if (event === 'realtime') {
+        const { schema, table, commit_timestamp, type, errors } = enrichedPayload
+        enrichedPayload = {
+          schema: schema,
+          table: table,
+          commit_timestamp: commit_timestamp,
+          eventType: type,
+          new: {},
+          old: {},
+          errors: errors,
+        }
+        enrichedPayload = { ...enrichedPayload, ...this.getPayloadRecords(payload) }
+      }
 
-      callback(enrichedPayload)
+      callback && callback(enrichedPayload)
     })
+
     return this
   }
 
   /**
-   * Enables the subscription.
+   * Enables the channel.
    */
   subscribe(callback: Function = () => {}) {
-    this.subscription.onError((e: Error) => callback('SUBSCRIPTION_ERROR', e))
-    this.subscription.onClose(() => callback('CLOSED'))
-    this.subscription
+    // 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('error', (e: Error) => callback('SUBSCRIPTION_ERROR', e))
+      .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.subscription
+
+    return this.channel
   }
 }

package/src/lib/constants.ts

@@ -1,4 +1,3 @@
 // 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/fetch.ts

@@ -0,0 +1,47 @@
+import crossFetch, { Headers as CrossFetchHeaders } from 'cross-fetch'
+
+type Fetch = typeof fetch
+
+export const resolveFetch = (customFetch?: Fetch): Fetch => {
+  let _fetch: Fetch
+  if (customFetch) {
+    _fetch = customFetch
+  } else if (typeof fetch === 'undefined') {
+    _fetch = crossFetch as unknown as Fetch
+  } else {
+    _fetch = fetch
+  }
+  return (...args) => _fetch(...args)
+}
+
+export const resolveHeadersConstructor = () => {
+  if (typeof Headers === 'undefined') {
+    return CrossFetchHeaders
+  }
+
+  return Headers
+}
+
+export const fetchWithAuth = (
+  supabaseKey: string,
+  getAccessToken: () => Promise<string | null>,
+  customFetch?: Fetch
+): Fetch => {
+  const fetch = resolveFetch(customFetch)
+  const HeadersConstructor = resolveHeadersConstructor()
+
+  return async (input, init) => {
+    const accessToken = (await getAccessToken()) ?? supabaseKey
+    let headers = new HeadersConstructor(init?.headers)
+
+    if (!headers.has('apikey')) {
+      headers.set('apikey', supabaseKey)
+    }
+
+    if (!headers.has('Authorization')) {
+      headers.set('Authorization', `Bearer ${accessToken}`)
+    }
+
+    return fetch(input, { ...init, headers })
+  }
+}