143 lines
3.6 KiB
TypeScript
143 lines
3.6 KiB
TypeScript
/**
|
|
* 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
|
|
};
|