Merge pull request #303 from supabase/fix/gotrue_auth_events

fix: improve auth for realtime row level security

Author: kiwicopple

.github/workflows/ci.yml

@@ -24,3 +24,12 @@ jobs:
         run: |
           npm ci
           npm t
+
+      - name: Test & publish code coverage
+        uses: paambaati/[email protected]
+        env:
+          CC_TEST_REPORTER_ID: ${{secrets.CC_TEST_REPORTER_ID}}
+        with:
+          coverageCommand: yarn run coverage
+          coverageLocations: |
+            ${{github.workspace}}/test/coverage/lcov.info:lcov

README.md

@@ -28,6 +28,7 @@ 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>
 ```
+
 or even:
 
 ```html
@@ -41,7 +42,7 @@ Then you can use it from a global `supabase` variable:
   const { createClient } = supabase
   const _supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
 
-  console.log('Supabase Instance: ', _supabase);
+  console.log('Supabase Instance: ', _supabase)
   // ...
 </script>
 ```

example/next-todo/package-lock.json

@@ -8,9 +8,9 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "file:../..",
-    "next": "latest",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1"
+    "next": "^11.1.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1"
   },
   "devDependencies": {
     "postcss-flexbugs-fixes": "4.2.1",

example/next-todo/package.json

@@ -1,4 +1,14 @@
 module.exports = {
   preset: 'ts-jest',
   testEnvironment: 'node',
+  collectCoverage: false,
+  coverageDirectory: './test/coverage',
+  coverageReporters: ['json', 'html', 'lcov'],
+  collectCoverageFrom: [
+    './src/**/*.{js,ts}',
+    './src/**/*.unit.test.ts',
+    '!**/node_modules/**',
+    '!**/vendor/**',
+    '!**/vendor/**',
+  ],
 }

jest.config.js

@@ -22,6 +22,7 @@
   "repository": "supabase/supabase-js",
   "scripts": {
     "clean": "rimraf dist docs",
+    "coverage": "jest --runInBand --coverage",
     "format": "prettier --write \"{src,test}/**/*.ts\"",
     "build": "genversion src/lib/version.ts --es6 && run-s clean format build:*",
     "build:main": "tsc -p tsconfig.json",
@@ -36,9 +37,9 @@
     "docs:json": "typedoc --json docs/spec.json --mode modules --includeDeclarations --excludeExternals"
   },
   "dependencies": {
-    "@supabase/gotrue-js": "^1.21.0",
+    "@supabase/gotrue-js": "^1.21.7",
     "@supabase/postgrest-js": "^0.35.0",
-    "@supabase/realtime-js": "1.2.1",
+    "@supabase/realtime-js": "^1.3.2",
     "@supabase/storage-js": "^1.5.0"
   },
   "devDependencies": {

package-lock.json

@@ -1,17 +1,19 @@
-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 = {
   schema: 'public',
   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,15 @@ export default class SupabaseClient {
     return rest.rpc<T>(fn, params, { head, count })
   }
 
+  /**
+   * Remove all active subscriptions.
+   */
+  removeAllSubscriptions() {
+    this.realtime.channels.forEach((sub) => {
+      this.removeSubscription(sub)
+    })
+  }
+
   /**
    * Removes an active subscription and returns the number of open connections.
    *
@@ -213,4 +231,61 @@ export default class SupabaseClient {
         .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.json

@@ -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'

src/SupabaseClient.ts

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