WIP: CF SDK: Modified SignalWire Client with auth states

internal/playground-js/src/fabric/index.js

@@ -1,4 +1,4 @@
-import { SignalWire, buildVideoElement } from '@signalwire/js'
+import { SignalWire, SignalWireV4, buildVideoElement } from '@signalwire/js'
 import {
   enumerateDevices,
   checkPermissions,
@@ -251,11 +251,15 @@ function restoreUI() {
 window.connect = async () => {
   connectStatus.innerHTML = 'Connecting...'
 
-  client = await SignalWire({
+  client = await SignalWireV4({
     host: document.getElementById('host').value,
     token: document.getElementById('token').value,
     logLevel: 'debug',
     debug: { logWsTraffic: true },
+    authState: sessionStorage.getItem('fabric.ws.authState'),
+    onAuthStateChange: (authState) => {
+      sessionStorage.setItem('fabric.ws.authState', authState)
+    },
   })
   window.__client = client
 

packages/core/src/BaseComponent.ts

@@ -22,7 +22,7 @@ import {
 } from './types'
 import {
   getAuthError,
-  getAuthState,
+  getAuthorization,
   getAuthStatus,
 } from './redux/features/session/sessionSelectors'
 import { AuthError } from './CustomErrors'
@@ -164,6 +164,7 @@ export class BaseComponent<
     return this.emitter.listenerCount(event)
   }
 
+  /** @internal */
   destroy() {
     this._destroyer?.()
     this.removeAllListeners()
@@ -235,7 +236,7 @@ export class BaseComponent<
   }
 
   /** @internal */
-  select<T>(selectorFn: (state: SDKState) => T) {
+  protected select<T>(selectorFn: (state: SDKState) => T) {
     return selectorFn(this.store.getState())
   }
 
@@ -247,17 +248,17 @@ export class BaseComponent<
 
   /** @internal */
   protected get _sessionAuthStatus(): SessionAuthStatus {
-    return getAuthStatus(this.store.getState())
+    return this.select(getAuthStatus)
   }
 
   /** @internal */
-  protected get _sessionAuthState(): Authorization | undefined {
-    return getAuthState(this.store.getState())
+  protected get _sessionAuthorization(): Authorization | undefined {
+    return this.select(getAuthorization)
   }
 
   /** @internal */
   protected _waitUntilSessionAuthorized(): Promise<this> {
-    const authStatus = getAuthStatus(this.store.getState())
+    const authStatus = this.select(getAuthStatus)
 
     switch (authStatus) {
       case 'authorized':
@@ -277,8 +278,8 @@ export class BaseComponent<
       case 'authorizing':
         return new Promise((resolve, reject) => {
           const unsubscribe = this.store.subscribe(() => {
-            const authStatus = getAuthStatus(this.store.getState())
-            const authError = getAuthError(this.store.getState())
+            const authStatus = this.select(getAuthStatus)
+            const authError = this.select(getAuthError)
 
             if (authStatus === 'authorized') {
               resolve(this)

packages/core/src/index.ts

@@ -23,7 +23,7 @@ import {
   asyncRetry,
   increasingDelay,
   decreasingDelay,
-  constDelay
+  constDelay,
 } from './utils'
 import { WEBRTC_EVENT_TYPES, isWebrtcEventType } from './utils/common'
 import { BaseSession } from './BaseSession'
@@ -34,7 +34,6 @@ import { BaseComponent } from './BaseComponent'
 import { BaseConsumer } from './BaseConsumer'
 import { EventEmitter, getEventEmitter } from './utils/EventEmitter'
 import * as sessionSelectors from './redux/features/session/sessionSelectors'
-import { findNamespaceInPayload } from './redux/features/shared/namespace'
 import { GLOBAL_VIDEO_EVENTS } from './utils/constants'
 import {
   MEMBER_UPDATED_EVENTS,
@@ -67,7 +66,6 @@ export {
   GLOBAL_VIDEO_EVENTS,
   MEMBER_UPDATED_EVENTS,
   INTERNAL_MEMBER_UPDATED_EVENTS,
-  findNamespaceInPayload,
   timeoutPromise,
   debounce,
   SWCloseEvent,
@@ -81,7 +79,7 @@ export {
   asyncRetry,
   increasingDelay,
   decreasingDelay,
-  constDelay
+  constDelay,
 }
 
 export * from './redux/features/component/componentSlice'

packages/core/src/pubSub/BasePubSub.ts

@@ -8,7 +8,7 @@ import {
   validateEventsToSubscribe,
   BaseConsumer,
 } from '..'
-import { getAuthState } from '../redux/features/session/sessionSelectors'
+import { getAuthorization } from '../redux/features/session/sessionSelectors'
 import type {
   PubSubChannel,
   InternalPubSubChannel,
@@ -196,9 +196,13 @@ export class BasePubSubConsumer<
   // `realtime-api`
   async getAllowedChannels() {
     await this._waitUntilSessionAuthorized()
-    const authState = this.select(getAuthState)
-    if (authState && 'channels' in authState && authState.channels) {
-      return authState.channels
+    const authorization = this.select(getAuthorization)
+    if (
+      authorization &&
+      'channels' in authorization &&
+      authorization.channels
+    ) {
+      return authorization.channels
     }
     return {}
   }

packages/core/src/redux/features/component/componentSaga.test.ts

@@ -28,8 +28,11 @@ describe('componentCleanupSaga', () => {
       },
     })
   })
-  it('should cleanup unused components from the store', () => {
-    return expectSaga(componentCleanupSagaWorker)
+
+  it('should cleanup unused components from the store', async () => {
+    jest.useFakeTimers()
+
+    const sagaPromise = expectSaga(componentCleanupSagaWorker)
       .withReducer(rootReducer, store.getState())
       .hasFinalState({
         components: {
@@ -43,11 +46,17 @@ describe('componentCleanupSaga', () => {
           protocol: '',
           iceServers: [],
           authStatus: 'unknown',
-          authState: undefined,
+          authorization: undefined,
+          authorizationState: undefined,
           authError: undefined,
           authCount: 0,
         },
       })
-      .run()
+      .run({ silenceTimeout: true })
+
+    jest.runAllTimers()
+    await sagaPromise
+
+    jest.useRealTimers()
   })
 })

packages/core/src/redux/features/session/sessionSaga.ts

@@ -7,12 +7,13 @@ import type {
   VideoAPIEvent,
   SwEventParams,
   WebRTCMessageParams,
-  SwAuthorizationStateParams,
+  SwAuthorizationStateEvent,
 } from '../../../types'
 import type { SessionChannel, SwEventChannel } from '../../interfaces'
 import { createCatchableSaga } from '../../utils/sagaHelpers'
 import { socketMessageAction } from '../../actions'
 import { getLogger, isWebrtcEventType, toInternalAction } from '../../../utils'
+import { sessionActions } from './sessionSlice'
 
 type SessionSagaParams = {
   session: BaseSession
@@ -29,7 +30,7 @@ const isVideoEvent = (e: SwEventParams): e is VideoAPIEvent => {
 }
 const isSwAuthorizationState = (
   e: SwEventParams
-): e is SwAuthorizationStateParams => {
+): e is SwAuthorizationStateEvent => {
   return e?.event_type === 'signalwire.authorization.state'
 }
 
@@ -54,17 +55,24 @@ export function* sessionChannelWatcher({
     /**
      * After connecting to the SignalWire network, it sends the `authorization_state`
      * through the `signalwire.authorization.state` event. We store this value in
-     * the storage since it is required for reconnect.
+     * the browser storage for JWT and in Redux store for SAT since it is required for reconnect.
      */
     if (isSwAuthorizationState(broadcastParams)) {
       session.onSwAuthorizationState(broadcastParams.params.authorization_state)
+      yield put(
+        sessionActions.updateAuthorizationState(
+          broadcastParams.params.authorization_state
+        )
+      )
       return
     }
 
     /**
      * Put actions with `event_type` to trigger all the children sagas
      * This should replace all the isWebrtcEvent/isVideoEvent guards below
      * since we'll move that logic on a separate package.
+     *
+     * TODO: We no longer need this and it can be removed
      */
     yield put({ type: broadcastParams.event_type, payload: broadcastParams })
   }

packages/core/src/redux/features/session/sessionSelectors.ts

@@ -16,6 +16,14 @@ export const getAuthError = ({ session }: SDKState) => {
   return session.authError
 }
 
-export const getAuthState = ({ session }: SDKState) => {
-  return session.authState
+export const getAuthorization = ({ session }: SDKState) => {
+  return session.authorization
+}
+
+export const getAuthorizationState = ({ session }: SDKState) => {
+  return session.authorizationState
+}
+
+export const getProtocol = ({ session }: SDKState) => {
+  return session.protocol
 }

packages/core/src/redux/features/session/sessionSlice.test.ts

@@ -18,7 +18,7 @@ describe('SessionState Tests', () => {
       protocol: rpcConnectResultVRT.protocol,
       iceServers: rpcConnectResultVRT.ice_servers,
       authStatus: 'authorized',
-      authState: {
+      authorization: {
         media_allowed: 'all',
         audio_allowed: 'both',
         join_as: 'member',
@@ -40,6 +40,7 @@ describe('SessionState Tests', () => {
         video_allowed: 'both',
         meta: {},
       },
+      authorizationState: undefined,
       authError: undefined,
       authCount: 1,
     })
@@ -62,4 +63,13 @@ describe('SessionState Tests', () => {
     store.dispatch(reauthAction({ token: 'foo' }))
     expect(getAuthStatus(store.getState())).toEqual('authorizing')
   })
+
+  it('should set authorizationState on sessionActions.updateAuthorizationState', () => {
+    store.dispatch(sessionActions.updateAuthorizationState('foo'))
+
+    expect(store.getState().session).toStrictEqual({
+      ...initialSessionState,
+      authorizationState: 'foo',
+    })
+  })
 })

packages/core/src/redux/features/session/sessionSlice.ts

@@ -14,7 +14,8 @@ export const initialSessionState: DeepReadonly<SessionState> = {
   protocol: '',
   iceServers: [],
   authStatus: 'unknown',
-  authState: undefined,
+  authorization: undefined,
+  authorizationState: undefined,
   authError: undefined,
   authCount: 0,
 }
@@ -32,7 +33,7 @@ const sessionSlice = createDestroyableSlice({
       return {
         ...state,
         authStatus: 'authorized',
-        authState: payload?.authorization,
+        authorization: payload?.authorization,
         authCount: state.authCount + 1,
         protocol: payload?.protocol ?? '',
         iceServers: payload?.ice_servers ?? [],
@@ -44,10 +45,16 @@ const sessionSlice = createDestroyableSlice({
         authStatus: payload,
       }
     },
-    updateAuthState: (state, { payload }: PayloadAction<Authorization>) => {
+    updateAuthorization: (state, { payload }: PayloadAction<Authorization>) => {
       return {
         ...state,
-        authState: payload,
+        authorization: payload,
+      }
+    },
+    updateAuthorizationState: (state, { payload }: PayloadAction<string>) => {
+      return {
+        ...state,
+        authorizationState: payload,
       }
     },
   },