fix: Bump up realtime-js (#1418)

* fix: Bump up realtime; add integration tests (#1395)

* fix: bump up realtime-js (#1409)

* fix: bump up realtime-js; await on token change (#1411)

* fix: prevent async calls in _listenForAuthEvents (#1412)

* fix: bump up realtime-js (#1413)

* bump up realtime-js (#1419)

* resolve conflict

---------

Co-authored-by: Guilherme Souza <guilherme@supabase.io>
Co-authored-by: Guilherme Souza <ogrsouza@gmail.com>

Author: filipecabaco

.github/workflows/ci.yml

@@ -36,6 +36,11 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
 
+      - name: Set up Supabase CLI
+        uses: supabase/setup-cli@v1
+        with:
+          version: latest
+
       - name: Run tests
         run: |
           npm clean-install

README.md

@@ -86,6 +86,21 @@ const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key
 })
 ```
 
+## Testing
+
+### Unit Testing
+
+```bash
+pnpm test
+```
+
+### Integration Testing
+
+```bash
+supabase start
+pnpm run test:integration
+```
+
 ## Badges
 
 [![Coverage Status](https://coveralls.io/repos/github/supabase/supabase-js/badge.svg?branch=master)](https://coveralls.io/github/supabase/supabase-js?branch=master)

package-lock.json

@@ -29,8 +29,9 @@
     "build:umd": "webpack",
     "types-generate": "dts-gen -m '@supabase/supabase-js' -s",
     "test": "run-s test:types test:run",
-    "test:run": "jest --runInBand",
-    "test:coverage": "jest --runInBand --coverage",
+    "test:run": "jest --runInBand --detectOpenHandles",
+    "test:integration": "jest --runInBand test/integration.test.ts",
+    "test:coverage": "jest --runInBand --coverage --testPathIgnorePatterns=\"test/integration.test.ts\"",
     "test:db": "cd infra/db && docker-compose down && docker-compose up -d && sleep 5",
     "test:watch": "jest --watch --verbose false --silent false",
     "test:clean": "cd infra/db && docker-compose down",
@@ -44,7 +45,7 @@
     "@supabase/functions-js": "2.4.4",
     "@supabase/node-fetch": "2.6.15",
     "@supabase/postgrest-js": "1.19.4",
-    "@supabase/realtime-js": "2.11.2",
+    "@supabase/realtime-js": "2.11.8",
     "@supabase/storage-js": "2.7.1"
   },
   "devDependencies": {

package.json

@@ -19,7 +19,7 @@ import {
   DEFAULT_REALTIME_OPTIONS,
 } from './lib/constants'
 import { fetchWithAuth } from './lib/fetch'
-import { stripTrailingSlash, applySettingDefaults } from './lib/helpers'
+import { cleanUrl, applySettingDefaults } from './lib/helpers'
 import { SupabaseAuthClient } from './lib/SupabaseAuthClient'
 import { Fetch, GenericSchema, SupabaseClientOptions, SupabaseAuthClientOptions } from './lib/types'
 
@@ -75,7 +75,7 @@ export default class SupabaseClient<
     if (!supabaseUrl) throw new Error('supabaseUrl is required.')
     if (!supabaseKey) throw new Error('supabaseKey is required.')
 
-    const _supabaseUrl = stripTrailingSlash(supabaseUrl)
+    const _supabaseUrl = cleanUrl(supabaseUrl)
     const baseUrl = new URL(_supabaseUrl)
 
     this.realtimeUrl = new URL('/realtime/v1', baseUrl)
@@ -119,11 +119,13 @@ export default class SupabaseClient<
     }
 
     this.fetch = fetchWithAuth(supabaseKey, this._getAccessToken.bind(this), settings.global.fetch)
+
     this.realtime = this._initRealtimeClient({
       headers: this.headers,
       accessToken: this._getAccessToken.bind(this),
       ...settings.realtime,
     })
+
     this.rest = new PostgrestClient(`${_supabaseUrl}/rest/v1`, {
       headers: this.headers,
       schema: settings.db.schema,
@@ -321,14 +323,16 @@ export default class SupabaseClient<
     })
   }
 
-  private _listenForAuthEvents() {
-    let data = this.auth.onAuthStateChange((event, session) => {
-      this._handleTokenChanged(event, 'CLIENT', session?.access_token)
+  private async _listenForAuthEvents() {
+    return await this.auth.onAuthStateChange((event, session) => {
+      setTimeout(
+        async () => await this._handleTokenChanged(event, 'CLIENT', session?.access_token),
+        0
+      )
     })
-    return data
   }
 
-  private _handleTokenChanged(
+  private async _handleTokenChanged(
     event: AuthChangeEvent,
     source: 'CLIENT' | 'STORAGE',
     token?: string
@@ -339,7 +343,7 @@ export default class SupabaseClient<
     ) {
       this.changedAccessToken = token
     } else if (event === 'SIGNED_OUT') {
-      this.realtime.setAuth()
+      await this.realtime.setAuth()
       if (source == 'STORAGE') this.auth.signOut()
       this.changedAccessToken = undefined
     }

pnpm-lock.yaml

@@ -9,8 +9,8 @@ export function uuid() {
   })
 }
 
-export function stripTrailingSlash(url: string): string {
-  return url.replace(/\/$/, '')
+export function cleanUrl(url: string): string {
+  return url.replace(/[\/\s]*$/, '')
 }
 
 export const isBrowser = () => typeof window !== 'undefined'

src/SupabaseClient.ts

@@ -0,0 +1 @@
+main

src/lib/helpers.ts

@@ -0,0 +1 @@
+v2.22.12

supabase/.branches/_current_branch

@@ -0,0 +1,17 @@
+-- Create todos table
+CREATE TABLE IF NOT EXISTS public.todos (
+    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+    task TEXT NOT NULL,
+    is_complete BOOLEAN NOT NULL DEFAULT FALSE,
+    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
+);
+
+-- Set up Row Level Security (RLS)
+ALTER TABLE public.todos ENABLE ROW LEVEL SECURITY;
+
+-- Create policies
+CREATE POLICY "Allow anonymous access to todos" ON public.todos
+    FOR ALL
+    TO anon
+    USING (true)
+    WITH CHECK (true);

supabase/.temp/cli-latest

@@ -0,0 +1,11 @@
+create policy "authenticated can read all messages on topic"
+on "realtime"."messages"
+for select
+to authenticated
+using ( realtime.topic() like '%channel%' );
+
+create policy "authenticated can insert messages on topic"
+on "realtime"."messages"
+for insert
+to authenticated
+with check (realtime.topic() like '%channel%');

supabase/migrations/20250422000000_create_todos_table.sql

@@ -0,0 +1,8 @@
+-- Seed data for todos table
+INSERT INTO public.todos (task, is_complete)
+VALUES
+    ('Buy groceries', false),
+    ('Complete project report', true),
+    ('Call mom', false),
+    ('Schedule dentist appointment', false),
+    ('Pay bills', true);

supabase/migrations/20250423000000_realtime_rls_setup.sql

@@ -1,13 +1,25 @@
-import { stripTrailingSlash } from '../src/lib/helpers'
+import { cleanUrl } from '../src/lib/helpers'
 
 test('Strip trailing slash from URL', () => {
   const URL = 'http://localhost:3000/'
   const expectedURL = URL.slice(0, -1)
-  expect(stripTrailingSlash(URL)).toBe(expectedURL)
+  expect(cleanUrl(URL)).toBe(expectedURL)
 })
 
-test('Return the original URL if there is no slash at the end', () => {
+test('Return the original URL if there is no slash or white space at the end', () => {
   const URL = 'http://localhost:3000'
   const expectedURL = URL
-  expect(stripTrailingSlash(URL)).toBe(expectedURL)
+  expect(cleanUrl(URL)).toBe(expectedURL)
+})
+
+test('Strip trailing white space from URL', () => {
+  const URL = 'http://localhost:3000 '
+  const expectedURL = URL.slice(0, -1)
+  expect(cleanUrl(URL)).toBe(expectedURL)
+})
+
+test('Strip trailing slash followed by white space from URL', () => {
+  const URL = 'http://localhost:3000/ '
+  const expectedURL = URL.slice(0, -2)
+  expect(cleanUrl(URL)).toBe(expectedURL)
 })

supabase/seed/seed_todos.sql

@@ -0,0 +1,135 @@
+import { createClient, RealtimeChannel, SupabaseClient } from '../src/index'
+
+// These tests assume that a local Supabase server is already running
+// Start a local Supabase instance with 'supabase start' before running these tests
+describe('Supabase Integration Tests', () => {
+  // Default local dev credentials from Supabase CLI
+  const SUPABASE_URL = 'http://127.0.0.1:54321'
+  const ANON_KEY =
+    'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24iLCJleHAiOjE5ODM4MTI5OTZ9.CRXP1A7WOeoJeXxjNni43kdQwgnWNReilDMblYTn_I0'
+
+  const supabase = createClient(SUPABASE_URL, ANON_KEY, {
+    realtime: { heartbeatIntervalMs: 500 },
+  })
+
+  test('should connect to Supabase instance', async () => {
+    expect(supabase).toBeDefined()
+    expect(supabase).toBeInstanceOf(SupabaseClient)
+  })
+
+  describe('PostgREST', () => {
+    test('should query data from public schema', async () => {
+      const { data, error } = await supabase.from('todos').select('*').limit(5)
+
+      // The default schema includes a 'todos' table, but it might be empty
+      expect(error).toBeNull()
+      expect(Array.isArray(data)).toBe(true)
+    })
+
+    // Test creating and deleting data
+    test('should create and delete a todo', async () => {
+      // Create a new todo
+      const { data: createdTodo, error: createError } = await supabase
+        .from('todos')
+        .insert({ task: 'Integration Test Todo', is_complete: false })
+        .select()
+        .single()
+
+      expect(createError).toBeNull()
+      expect(createdTodo).toBeDefined()
+      expect(createdTodo!.task).toBe('Integration Test Todo')
+      expect(createdTodo!.is_complete).toBe(false)
+
+      // Delete the created todo
+      const { error: deleteError } = await supabase.from('todos').delete().eq('id', createdTodo!.id)
+
+      expect(deleteError).toBeNull()
+
+      // Verify the todo was deleted
+      const { data: fetchedTodo, error: fetchError } = await supabase
+        .from('todos')
+        .select('*')
+        .eq('id', createdTodo!.id)
+        .single()
+
+      expect(fetchError).not.toBeNull()
+      expect(fetchedTodo).toBeNull()
+    })
+  })
+
+  describe('Authentication', () => {
+    afterAll(async () => {
+      // Clean up by signing out the user
+      await supabase.auth.signOut()
+    })
+    test('should sign up a user', async () => {
+      const email = `test-${Date.now()}@example.com`
+      const password = 'password123'
+
+      const { data, error } = await supabase.auth.signUp({
+        email,
+        password,
+      })
+
+      expect(error).toBeNull()
+      expect(data.user).toBeDefined()
+      expect(data.user!.email).toBe(email)
+    })
+  })
+
+  describe('Realtime', () => {
+    const channelName = `channel-${crypto.randomUUID()}`
+    let channel: RealtimeChannel
+    let email: string
+    let password: string
+
+    beforeEach(async () => {
+      await supabase.auth.signOut()
+      email = `test-${Date.now()}@example.com`
+      password = 'password123'
+      await supabase.auth.signUp({ email, password })
+
+      const config = { broadcast: { self: true }, private: true }
+      channel = supabase.channel(channelName, { config })
+
+      await supabase.realtime.setAuth()
+    })
+
+    afterEach(async () => {
+      await supabase.removeAllChannels()
+    })
+
+    test('is able to connect and broadcast', async () => {
+      const testMessage = { message: 'test' }
+      let receivedMessage: any
+      let subscribed = false
+      let attempts = 0
+
+      channel
+        .on('broadcast', { event: '*' }, (payload) => (receivedMessage = payload))
+        .subscribe((status) => {
+          if (status == 'SUBSCRIBED') subscribed = true
+        })
+
+      // Wait for subscription
+      while (!subscribed) {
+        if (attempts > 50) throw new Error('Timeout waiting for subscription')
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        attempts++
+      }
+
+      attempts = 0
+
+      channel.send({ type: 'broadcast', event: 'test-event', payload: testMessage })
+
+      // Wait on message
+      while (!receivedMessage) {
+        if (attempts > 50) throw new Error('Timeout waiting for message')
+        await new Promise((resolve) => setTimeout(resolve, 100))
+        attempts++
+      }
+      expect(receivedMessage).toBeDefined()
+      expect(supabase.realtime.getChannels().length).toBe(1)
+    }, 10000)
+  })
+})