fixed login loop

2026-01-10 19:23:47 +00:00
parent bef80c5bab
commit 6619269840
17 changed files with 5740 additions and 28 deletions
@@ -0,0 +1,142 @@
+/**
+ * OAuth Popup Login - Production Integration Example
+ * 
+ * Shows how to integrate the standalone OAuth popup module into the Job-Info app.
+ * This example uses actual project configuration values.
+ * 
+ * Setup:
+ *   1. Import OAuthPopupLogin from auth/oauth-popup-login.ts
+ *   2. Call from user gesture (click button, etc.)
+ *   3. Tokens automatically stored in localStorage
+ *   4. Use tokens for API calls to backend
+ */
+
+import OAuthPopupLogin from './oauth-popup-login';
+
+/**
+ * Example 1: Basic login flow
+ * Call this when user clicks "Login" button
+ */
+export async function initiateLogin(): Promise<void> {
+  try {
+    // Create popup with production defaults
+    // (http://localhost:8090, microsoft provider, job-info scopes)
+    const loginPopup = new OAuthPopupLogin();
+    
+    // Open popup (must be called from user gesture)
+    await loginPopup.open();
+    
+    // Tokens are now acquired and stored in localStorage:
+    // - localStorage.getItem('auth:pb-user')
+    // - localStorage.getItem('auth:pb-agent')
+    
+    const { pbUser, pbAgent } = loginPopup.getTokens();
+    
+    console.log('[Auth] Login successful');
+    console.log('[Auth] PB User token:', pbUser?.value.substring(0, 30) + '...');
+    console.log('[Auth] PB Agent token:', pbAgent?.value.substring(0, 30) + '...');
+    
+    // Redirect to app or refresh UI
+    window.location.href = '/app';
+  } catch (error) {
+    console.error('[Auth] Login failed:', error);
+  }
+}
+
+/**
+ * Example 2: Check if user is authenticated
+ * Call during app initialization
+ */
+export function isAuthenticated(): boolean {
+  const pbUserToken = localStorage.getItem('auth:pb-user');
+  const pbAgentToken = localStorage.getItem('auth:pb-agent');
+  
+  return !!(pbUserToken && pbAgentToken);
+}
+
+/**
+ * Example 3: Get current tokens for API calls
+ * Used by fetch/axios interceptors
+ */
+export function getAuthTokens(): {
+  pbUser: string | null;
+  pbAgent: string | null;
+} {
+  return {
+    pbUser: localStorage.getItem('auth:pb-user'),
+    pbAgent: localStorage.getItem('auth:pb-agent')
+  };
+}
+
+/**
+ * Example 4: Logout (clear all tokens)
+ * Call when user clicks "Sign Out"
+ */
+export function logout(): void {
+  localStorage.removeItem('auth:pb-user');
+  localStorage.removeItem('auth:pb-agent');
+  window.location.href = '/signin';
+}
+
+/**
+ * Example 5: API call with token (fetch interceptor)
+ * Use this wrapper for all API requests
+ */
+export async function fetchWithAuth(
+  url: string,
+  options: RequestInit = {}
+): Promise<Response> {
+  const { pbUser } = getAuthTokens();
+  
+  if (!pbUser) {
+    throw new Error('Not authenticated. Tokens missing.');
+  }
+  
+  const headers = {
+    ...options.headers,
+    'Authorization': `Bearer ${pbUser}`,
+    'Content-Type': 'application/json'
+  };
+  
+  const response = await fetch(url, {
+    ...options,
+    headers
+  });
+  
+  // If 401, tokens expired - trigger re-auth
+  if (response.status === 401) {
+    logout();
+  }
+  
+  return response;
+}
+
+/**
+ * Example 6: Frontend integration with HTML button
+ * 
+ * HTML:
+ *   <button id="loginBtn" class="btn-primary">Login with Microsoft</button>
+ * 
+ * JavaScript:
+ *   document.getElementById('loginBtn').addEventListener('click', initiateLogin);
+ */
+
+// Example HTML button setup (can be in your main app)
+if (typeof window !== 'undefined') {
+  // Check auth status on page load
+  if (!isAuthenticated()) {
+    console.log('[Auth] No tokens found. User needs to login.');
+    // Show login UI
+  } else {
+    console.log('[Auth] User already authenticated. Loading app...');
+    // Load app
+  }
+}
+
+export default {
+  initiateLogin,
+  isAuthenticated,
+  getAuthTokens,
+  logout,
+  fetchWithAuth
+};