cross origin refresh session

packages/client/src/fetch.ts

@@ -57,7 +57,7 @@ const refreshTokenStorage = {
 
 export async function refreshSession(apiOrigin: string) {
   const refreshToken = refreshTokenStorage.get();
-  if (!refreshToken) return false;
+  if (!refreshToken) return refreshSessionViaIframe();
   try {
     const response = await fetch(`${apiOrigin}/auth/refresh`, {
       method: 'POST',
@@ -77,6 +77,46 @@ export async function refreshSession(apiOrigin: string) {
   }
 }
 
+async function refreshSessionViaIframe() {
+  let iframe: HTMLIFrameElement | null = null;
+  try {
+    return await new Promise<void>((resolve, reject) => {
+      const iframeUrl = `${import.meta.env.VITE_HOME_ORIGIN}/refresh-session`;
+      // go ahead and subscribe to postMessage events
+      window.addEventListener('message', (event) => {
+        if (event.data.type === 'refresh-session') {
+          if (event.data.success) {
+            console.debug('refreshed session via iframe');
+            // store the new refresh token
+            refreshTokenStorage.set(event.data.success.refreshToken);
+            resolve();
+          }
+        }
+      });
+      iframe = document.createElement('iframe');
+      iframe.style.display = 'none';
+      iframe.src = iframeUrl;
+      iframe.addEventListener('load', () => {
+        console.debug('iframe loaded');
+      });
+      iframe.addEventListener('error', (ev) => {
+        console.error('iframe failed to load', ev.error);
+        reject(ev.error);
+      });
+      document.body.appendChild(iframe);
+
+      // failure case: if the iframe doesn't load, reject
+      setTimeout(() => {
+        reject(new Error('iframe-based session refresh timed out'));
+      }, 5000);
+    });
+  } finally {
+    if (iframe) {
+      document.body.removeChild(iframe);
+    }
+  }
+}
+
 async function peekAtResponseBody(response: Response): Promise<{
   body: any;
   clone: Response;

web/src/pages/RefreshSessionPage.tsx

@@ -0,0 +1,21 @@
+import { useMe } from '@biscuits/client';
+import { useEffect } from 'react';
+
+/**
+ * A stub page that just calls an API request. This will automatically trigger session
+ * refresh if the user is logged in. This page is rendered in an iframe by other apps
+ * on other origins to transparently keep the session alive without having to know
+ * the refresh token, which is stored in this app's origin localStorage.
+ */
+export function RefreshSessionPage() {
+  const [data] = useMe();
+  const success = data.data?.me;
+  useEffect(() => {
+    if (window.top) {
+      window.top.postMessage({ type: 'refresh-session', success }, '*');
+    }
+  }, [success]);
+  return null;
+}
+
+export default RefreshSessionPage;

web/src/pages/index.tsx

@@ -2,6 +2,7 @@ import { TopLoader } from '@/components/nav/TopLoader.jsx';
 import { Outlet, Router, makeRoutes } from '@verdant-web/react-router';
 import { Suspense, lazy } from 'react';
 import LoginPage from './LoginPage.jsx';
+import RefreshSessionPage from './RefreshSessionPage.jsx';
 const HomePage = lazy(() => import('./HomePage.js'));
 
 const routes = makeRoutes([
@@ -30,6 +31,10 @@ const routes = makeRoutes([
     path: '/invite/:code',
     component: lazy(() => import('./ClaimInvitePage.js')),
   },
+  {
+    path: '/refresh-session',
+    component: RefreshSessionPage,
+  },
 ]);
 
 export function Pages() {