Make sure logging in's side-effects are reflected across multiple tabs

Author: azimux

templates/Foobara/Auth/LoginCommand.ts.erb

@@ -7,7 +7,7 @@ export default class LoginCommand<Inputs, Result, Error extends FoobaraError<any
   extends RemoteCommand<Inputs, Result, Error> {
   async _handleResponse (response: Response): Promise<Outcome<Result, Error>> {
     if (response.ok) {
-      const accessToken: string | null = response.headers.get('X-Access-Token')
+      const accessToken: string | null = response.headers.get('x-access-token')
 
       if (accessToken != null) {
         handleLogin(this.urlBase, accessToken)

templates/Foobara/Auth/utils/accessTokens.ts.erb

@@ -2,6 +2,7 @@ import type Query from '../../../base/Query'
 import type RemoteCommand from '../../../base/RemoteCommand'
 import { forEachQuery } from '../../../base/QueryCache'
 
+// TODO: Why is this in here? It seems general-purpose not auth-specific
 function dirtyAllQueries () {
   forEachQuery((query: Query<RemoteCommand<any, any, any>>) => {
     query.setDirty()
@@ -10,29 +11,53 @@ function dirtyAllQueries () {
 
 const accessTokens = new Map<string, string>()
 
+interface AuthMessage {
+  type: 'login' | 'logout'
+  baseUrl: string
+  accessToken?: string
+}
+
+const login = (baseUrl: string, accessToken: string): void => {
+  accessTokens.set(baseUrl, accessToken)
+  dirtyAllQueries()
+}
+
 const logout = (urlBase: string): void => {
   accessTokens.delete(urlBase)
   dirtyAllQueries()
 }
+
+// These functions gets overridden with a form that broadcasts the event if BroadcastChannel is available
+let handleLogin: (baseUrl: string, accessToken: string) => void = login
 let handleLogout: (baseUrl: string) => void = logout
 
 const tokenForUrl = (baseUrl: string): string | undefined => accessTokens.get(baseUrl)
-const handleLogin: (baseUrl: string, accessToken: string) => void = (baseUrl, accessToken) => {
-  accessTokens.set(baseUrl, accessToken)
-  dirtyAllQueries()
-}
 
 if (typeof BroadcastChannel !== 'undefined') {
   const logoutChannel = new BroadcastChannel('foobara-auth-events')
 
-  logoutChannel.addEventListener('message', (event: MessageEvent<string>) => {
-    accessTokens.delete(event.data)
-    deleteAllQueries()
+  logoutChannel.addEventListener('message', (event: MessageEvent<AuthMessage>) => {
+    const { type, baseUrl, accessToken } = event.data
+
+    if (type === 'login') {
+      if (accessToken != null) {
+        login(baseUrl, accessToken)
+      }
+    } else if (type === 'logout') {
+      logout(baseUrl)
+    } else {
+      throw new Error(`Unknown auth message type: ${JSON.stringify(type)}`)
+    }
   })
 
   handleLogout = (baseUrl: string) => {
     logout(baseUrl)
-    logoutChannel.postMessage(baseUrl)
+    logoutChannel.postMessage({ baseUrl, type: 'logout' })
+  }
+  handleLogin = (baseUrl: string, accessToken: string) => {
+    login(baseUrl, accessToken)
+    // TODO: is it safe to send an accessToken over BroadcastChannel?
+    logoutChannel.postMessage({ baseUrl, type: 'login', accessToken })
   }
 }