@basictech/react 0.8.0-beta.2 → 0.8.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@basictech/react",
-  "version": "0.8.0-beta.2",
+  "version": "0.8.0-beta.3",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

package/src/AuthContext.tsx

@@ -268,6 +268,10 @@ export function BasicProvider({
                     debug: debug,
                     onAuthError: (error) => {
                         log('RemoteDB auth error:', error)
+                        if (error.errorType === 'forbidden') {
+                            log('403 Forbidden - user lacks required scope, not signing out')
+                            return
+                        }
                         handleSignOut()
                     },
                 })

package/src/core/auth/AuthManager.ts

@@ -223,8 +223,11 @@ export class AuthManager {
                 const refreshToken = await this.storage.get(STORAGE_KEYS.REFRESH_TOKEN)
                 if (refreshToken) {
                     log('Found refresh token in storage, attempting to refresh access token')
-                    this.exchangeToken(refreshToken, true).catch((error) => {
+                    this.exchangeToken(refreshToken, true).catch(async (error) => {
                         log('Error fetching refresh token:', error)
+                        if (this.isNetworkError(error)) {
+                            await this.restoreCachedUser()
+                        }
                     })
                 } else {
                     const cachedUserInfo = await this.storage.get(STORAGE_KEYS.USER_INFO)
@@ -300,7 +303,8 @@ export class AuthManager {
                 log('Token refresh already in progress, waiting...')
                 try {
                     const newToken = await this.refreshPromise
-                    return newToken?.access_token || ''
+                    if (!newToken?.access_token) throw new Error('Token refresh returned empty access token')
+                    return newToken.access_token
                 } catch (error) {
                     log('In-flight refresh failed:', error)
                     if (this.isNetworkError(error)) {
@@ -315,7 +319,8 @@ export class AuthManager {
             if (refreshToken) {
                 try {
                     const newToken = await this.exchangeToken(refreshToken, true)
-                    return newToken?.access_token || ''
+                    if (!newToken?.access_token) throw new Error('Token refresh returned empty access token')
+                    return newToken.access_token
                 } catch (error) {
                     log('Failed to refresh expired token:', error)
                     if (this.isNetworkError(error)) {
@@ -329,7 +334,8 @@ export class AuthManager {
             }
         }
 
-        return this.token.access_token || ''
+        if (!this.token.access_token) throw new Error('Token exists but access_token is empty')
+        return this.token.access_token
     }
 
     async getSignInUrl(redirectUri?: string, endpoints?: PdsEndpoints): Promise<string> {
@@ -342,7 +348,7 @@ export class AuthManager {
         const pdsEndpoints = endpoints || this.defaultPdsEndpoints()
         await this.storage.set(STORAGE_KEYS.PDS_ENDPOINTS, JSON.stringify(pdsEndpoints))
 
-        const randomState = Math.random().toString(36).substring(6)
+        const randomState = base64UrlEncode(crypto.getRandomValues(new Uint8Array(16)))
         await this.storage.set(STORAGE_KEYS.AUTH_STATE, randomState)
 
         const redirectUrl = redirectUri || window.location.href
@@ -486,7 +492,10 @@ export class AuthManager {
     }
 
     /**
-     * Register online/offline handlers that retry pending refreshes.
+     * Register online/offline and visibility handlers that retry pending
+     * refreshes and proactively refresh tokens when the app resumes from
+     * background (critical for PWAs and mobile browsers where timers are
+     * frozen while backgrounded).
      * Returns a cleanup function for useEffect teardown.
      */
     setupNetworkListeners(): () => void {
@@ -510,12 +519,28 @@ export class AuthManager {
             this.isOnline = false
         }
 
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === 'visible' && this.isSignedIn) {
+                log('App became visible - checking token freshness')
+                this.getToken().catch(err => {
+                    log('Token refresh on visibility resume failed:', err)
+                })
+            }
+        }
+
         window.addEventListener('online', handleOnline)
         window.addEventListener('offline', handleOffline)
 
+        if (typeof document !== 'undefined') {
+            document.addEventListener('visibilitychange', handleVisibilityChange)
+        }
+
         return () => {
             window.removeEventListener('online', handleOnline)
             window.removeEventListener('offline', handleOffline)
+            if (typeof document !== 'undefined') {
+                document.removeEventListener('visibilitychange', handleVisibilityChange)
+            }
         }
     }
 
@@ -581,34 +606,7 @@ export class AuthManager {
             if (decoded.sub) this.did = decoded.sub
             if (decoded.scope) this.tokenScope = decoded.scope
 
-            const expirationBuffer = 5
-            const isExpired = decoded.exp && decoded.exp < (Date.now() / 1000) + expirationBuffer
-
-            if (isExpired) {
-                log('token is expired - refreshing ...')
-                const refreshToken = this.token.refresh_token
-                if (!refreshToken) {
-                    log('Error: No refresh token available for expired token')
-                    this.isAuthReady = true
-                    this.notify()
-                    return
-                }
-                try {
-                    const newToken = await this.exchangeToken(refreshToken, true)
-                    await this.fetchUser(newToken?.access_token || '')
-                } catch (error) {
-                    log('Failed to refresh token in processNewToken:', error)
-                    if (this.isNetworkError(error)) {
-                        log('Network issue - continuing with expired token until online')
-                        await this.fetchUser(this.token.access_token)
-                    } else {
-                        this.isAuthReady = true
-                        this.notify()
-                    }
-                }
-            } else {
-                await this.fetchUser(this.token.access_token)
-            }
+            await this.fetchUser(this.token.access_token)
         } catch (error) {
             log('Error processing token:', error)
             this.isAuthReady = true
@@ -616,6 +614,19 @@ export class AuthManager {
         }
     }
 
+    private async restoreCachedUser(): Promise<void> {
+        const cached = await this.storage.get(STORAGE_KEYS.USER_INFO)
+        if (cached) {
+            try {
+                this.user = JSON.parse(cached)
+                this.isSignedIn = true
+                log('Restored cached user info for offline mode')
+            } catch { /* corrupted cache, ignore */ }
+        }
+        this.isAuthReady = true
+        this.notify()
+    }
+
     private async fetchUser(accessToken: string): Promise<void> {
         log('fetching user')
         try {
@@ -657,8 +668,12 @@ export class AuthManager {
             this.notify()
         } catch (error) {
             log('Failed to fetch user info:', error)
-            this.isAuthReady = true
-            this.notify()
+            if (this.isNetworkError(error)) {
+                await this.restoreCachedUser()
+            } else {
+                this.isAuthReady = true
+                this.notify()
+            }
         }
     }
 
@@ -772,9 +787,15 @@ export class AuthManager {
                         throw new Error('Network issue - refresh will be retried when online')
                     }
 
-                    await this.clearStoredAuth()
-                    this.resetAuthState()
-                    this.notify()
+                    // Only clear stored auth on definitive OAuth rejection.
+                    // Transient server errors (500, 503, etc.) should NOT wipe
+                    // the refresh token — the user can retry later.
+                    const definitiveErrors = ['invalid_grant', 'invalid_client', 'unauthorized_client']
+                    if (typeof token.error === 'string' && definitiveErrors.includes(token.error)) {
+                        await this.clearStoredAuth()
+                        this.resetAuthState()
+                        this.notify()
+                    }
                     throw new Error(`Token refresh failed: ${token.error}`)
                 } else {
                     this.token = token
@@ -800,7 +821,9 @@ export class AuthManager {
             } catch (error) {
                 log('Token refresh error:', error)
 
-                if (!this.isNetworkError(error)) {
+                const msg = error instanceof Error ? error.message : ''
+                const alreadyHandled = msg.startsWith('Token refresh failed:')
+                if (!alreadyHandled && !this.isNetworkError(error)) {
                     await this.clearStoredAuth()
                     this.resetAuthState()
                     this.notify()
@@ -850,6 +873,7 @@ export class AuthManager {
     }
 
     private isNetworkError(error: unknown): boolean {
+        if (error instanceof TypeError) return true
         if (error instanceof Error) {
             return error.message.includes('offline') || error.message.includes('Network')
         }

package/src/sync/syncProtocol.js

@@ -137,9 +137,37 @@ export const syncProtocol = function () {
         }
       };
 
+      // When the page becomes visible again (e.g. PWA/mobile browser resuming
+      // from background), the scheduled setTimeout for token refresh may have
+      // been frozen by the browser. Force-refresh the token and re-send it to
+      // the server so the WebSocket connection stays authenticated.
+      function handleVisibilityResume() {
+        if (document.visibilityState === 'visible' && ws.readyState === WebSocket.OPEN) {
+          log("Page became visible - refreshing token for WebSocket");
+          resolveGetToken()({ forceRefresh: true }).then(function(newToken) {
+            if (ws.readyState === WebSocket.OPEN) {
+              ws.send(JSON.stringify({ type: "tokenUpdate", authToken: newToken }));
+              scheduleTokenRefresh(newToken);
+            }
+          }).catch(function(err) {
+            log("Token refresh on visibility resume failed:", err);
+          });
+        }
+      }
+      if (typeof document !== 'undefined') {
+        document.addEventListener('visibilitychange', handleVisibilityResume);
+      }
+
+      function cleanupVisibilityListener() {
+        if (typeof document !== 'undefined') {
+          document.removeEventListener('visibilitychange', handleVisibilityResume);
+        }
+      }
+
       // If network down or other error, tell the framework to reconnect again in some time:
       ws.onerror = function (event) {
         clearRefreshTimer();
+        cleanupVisibilityListener();
         ws.close();
         log("ws.onerror", event);
         onError(event?.message, RECONNECT_DELAY);
@@ -148,6 +176,7 @@ export const syncProtocol = function () {
       // If socket is closed (network disconnected), inform framework and make it reconnect
       ws.onclose = function (event) {
         clearRefreshTimer();
+        cleanupVisibilityListener();
         onError("Socket closed: " + event.reason, RECONNECT_DELAY);
       };
 
@@ -211,6 +240,7 @@ export const syncProtocol = function () {
                 },
                 disconnect: function () {
                   clearRefreshTimer();
+                  cleanupVisibilityListener();
                   ws.close();
                 },
               });

package/src/utils/network.ts

@@ -110,7 +110,7 @@ export function cleanOAuthParamsFromUrl(): void {
         const url = new URL(window.location.href)
         url.searchParams.delete('code')
         url.searchParams.delete('state')
-        window.history.pushState({}, document.title, url.pathname + url.search)
+        window.history.replaceState({}, document.title, url.pathname + url.search)
         log('Cleaned OAuth parameters from URL')
     }
 }