aewing/Job-Info
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement robust TokenManager for field app resilience

Browse Source 
PRODUCTION CRITICAL: Enhanced token lifecycle management

Features:
- 3-tier storage (PB authStore → IndexedDB → localStorage)
- Continuous background token refresh (every 20 min)
- Exponential backoff retry queue for network failures
- Stale token fallback for offline operation
- Cross-tab sync via IndexedDB
- Never forces logout on token expiry
- Network recovery detection and auto-refresh

Changes:
- Created token-manager.js with TokenManager class
- Updated signin.html to initialize TokenManager on login
- Updated index.html to use TokenManager for all API calls
- Simplified token extraction logic (centralized in TokenManager)
- Removed manual localStorage token management
- Added proper cleanup on signout

Benefits:
- Users stay authenticated during network interruptions
- Tokens always warm (proactive refresh)
- Field app resilient to poor connectivity
- No unnecessary re-authentication prompts
- Works offline with cached tokens
This commit is contained in:
aewing
2026-01-08 17:33:07 +00:00
parent e7baa94322
commit bef80c5bab
3 changed files with 389 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/signin.html
+35 -21
View File
@@ -7,6 +7,7 @@
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/pocketbase@0.26.5/dist/pocketbase.umd.js"></script>
<script src="auth.js"></script>
<script src="token-manager.js"></script>
</head>
<body class="font-sans bg-gradient-to-br from-indigo-500 to-purple-600 min-h-screen flex items-center justify-center">
<div class="bg-white p-12 rounded-2xl shadow-2xl text-center max-w-md w-[90%]">
@@ -29,21 +30,7 @@
<script>
const { pb, getDisplayName } = window.Auth;
const GRAPH_TOKEN_KEY = 'graphAccessToken';
const extractGraphToken = (authData) => {
return (
authData?.meta?.graphAccessToken ||
authData?.meta?.graph_token ||
authData?.meta?.graphToken ||
authData?.meta?.accessToken ||
authData?.meta?.access_token ||
authData?.meta?.token ||
authData?.meta?.rawToken ||
authData?.meta?.authData?.access_token ||
''
);
};
let tokenManager;
const loginBtn = document.getElementById('loginBtn');
const errorEl = document.getElementById('error');
@@ -85,8 +72,10 @@
}
function logout() {
if (tokenManager) tokenManager.stopRefreshCycle();
pb.authStore.clear();
localStorage.removeItem(GRAPH_TOKEN_KEY);
localStorage.removeItem('graphAccessToken');
localStorage.removeItem('graphTokenExpiresAt');
loginBtn.classList.remove('hidden');
userInfo.classList.add('hidden');
continueBtn.classList.add('hidden');
@@ -99,16 +88,41 @@
console.log('Auth meta:', authData?.meta);
const displayName = getDisplayName();
const email = authData?.meta?.rawUser?.email || authData?.record?.email || pb.authStore.model?.email || 'Not available';
const graphToken = extractGraphToken(authData);
// Extract token from metadata with fallback checks
const graphToken = (
authData?.meta?.graphAccessToken ||
authData?.meta?.graph_token ||
authData?.meta?.graphToken ||
authData?.meta?.accessToken ||
authData?.meta?.access_token ||
authData?.meta?.token ||
authData?.meta?.rawToken ||
authData?.meta?.authData?.access_token ||
''
);
const expiresAt = authData?.meta?.graphTokenExpiresAt || new Date(Date.now() + 3600000).toISOString();
console.log('Extracted Graph token:', graphToken ? graphToken.substring(0, 30) + '...' : 'NOT FOUND');
if (graphToken) {
localStorage.setItem(GRAPH_TOKEN_KEY, graphToken);
localStorage.removeItem(GRAPH_REAUTH_FLAG);
// Store via TokenManager (syncs to all tiers)
tokenManager.setToken(graphToken, expiresAt).then(() => {
localStorage.removeItem(GRAPH_REAUTH_FLAG);
showAuthedUI(displayName, email);
});
} else {
console.warn('No graph token in auth response');
showAuthedUI(displayName, email);
}
showAuthedUI(displayName, email);
}
(async () => {
// Initialize TokenManager
tokenManager = new TokenManager(pb);
await tokenManager.init();
const params = new URLSearchParams(window.location.search);
const reauth = params.get('reauth') === '1';
if (pb.authStore.isValid) {
@@ -116,7 +130,7 @@
const authData = await pb.collection('users').authRefresh();
displayUserInfo(authData);
// If we came from a reauth flow and now have a token, go back automatically
const hasToken = localStorage.getItem(GRAPH_TOKEN_KEY);
const hasToken = await tokenManager.getToken();
if (reauth && hasToken) {
window.location.href = 'index.html';
}