adserver-dashboard 1.0.0

package/client/src/lib/oauth-service.ts

@@ -0,0 +1,678 @@
+/**
+ * OAuth Service with PKCE
+ * Handles OAuth 2.0 authorization code flow with PKCE using secure cookies
+ */
+
+import { setItem, getItem, removeItem, clearAll } from "./storage-utils";
+
+// OAuth Configuration
+// Determine redirect URI dynamically based on current domain
+function getRedirectUri(): string {
+  const origin = window.location.origin;
+
+  // If running on Replit domains (.replit.dev for dev, .replit.app for production), use the current origin
+  if (origin.includes(".replit.dev") || origin.includes(".replit.app")) {
+    console.log("[OAuth] Using dynamic redirect URI for Replit domain");
+    return `${origin}/auth/callback`;
+  }
+
+  // For local development or other domains, use environment variable or fallback to current origin
+  return import.meta.env.VITE_OAUTH_REDIRECT_URI || `${origin}/auth/callback`;
+}
+
+const OAUTH_CONFIG = {
+  clientId: import.meta.env.VITE_OAUTH_CLIENT_ID || "",
+  get redirectUri() {
+    return getRedirectUri();
+  },
+  apiBaseUrl: import.meta.env.VITE_OAUTH_API_URL,
+  scope: "profile email",
+};
+
+// Storage keys
+const STORAGE_KEYS = {
+  ACCESS_TOKEN: "access_token",
+  REFRESH_TOKEN: "refresh_token",
+  USER: "user",
+  TOKEN_EXPIRY: "token_expiry",
+  CODE_VERIFIER: "code_verifier",
+  STATE: "state",
+};
+
+export interface OAuthTokens {
+  access_token: string;
+  refresh_token: string;
+  expires_in?: number;
+  token_type?: string;
+}
+
+export interface UserProfile {
+  id: string;
+  email: string;
+  name?: string;
+  avatar_url?: string;
+  company_id?: string;
+  company_name?: string;
+  role_name?: string;
+  company_country?: string;
+}
+
+export interface CompanyAddress {
+  id: string;
+  company_id: string;
+  address_type: string;
+  is_primary: boolean;
+  label?: string;
+  street1?: string;
+  street2?: string;
+  city?: string;
+  state?: string;
+  postal_code?: string;
+  country?: string;
+}
+
+export interface CompanyBrand {
+  id: string;
+  name: string;
+  code: string;
+  description?: string;
+  logo_url?: string;
+  is_active: boolean;
+}
+
+export interface CompanyBrandsResponse {
+  brands: CompanyBrand[];
+  total: number;
+  page: number;
+  limit: number;
+}
+
+/**
+ * Generate a random string for PKCE code verifier or state
+ */
+function generateRandomString(length: number = 128): string {
+  const array = new Uint8Array(length);
+  crypto.getRandomValues(array);
+  let result = "";
+  for (let i = 0; i < array.length; i++) {
+    result += array[i].toString(16).padStart(2, "0");
+  }
+  return result.substring(0, length);
+}
+
+/**
+ * Generate PKCE code challenge from verifier
+ * Uses SHA-256 hash and base64url encoding
+ */
+async function generateCodeChallenge(verifier: string): Promise<string> {
+  const encoder = new TextEncoder();
+  const data = encoder.encode(verifier);
+  const hash = await crypto.subtle.digest("SHA-256", data);
+
+  // Convert to base64url
+  const hashArray = Array.from(new Uint8Array(hash));
+  return btoa(String.fromCharCode(...hashArray))
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=/g, "");
+}
+
+/**
+ * Initiate OAuth authorization flow
+ * Redirects user to Direct Campaigns authorization page
+ */
+export async function authorize(): Promise<void> {
+  // Generate random state for CSRF protection
+  const state = generateRandomString(32);
+
+  // Store state for later verification (optional - API may handle this)
+  setItem(STORAGE_KEYS.STATE, state);
+
+  const params = new URLSearchParams({
+    client_id: OAUTH_CONFIG.clientId,
+    redirect_uri: OAUTH_CONFIG.redirectUri,
+    response_type: "code",
+    scope: OAUTH_CONFIG.scope,
+    state,
+  });
+
+  const authUrl = `${OAUTH_CONFIG.apiBaseUrl}/api/v1/auth/authorize?${params.toString()}`;
+  console.log("[OAuth] Redirecting to:", authUrl);
+  window.location.href = authUrl;
+}
+
+/**
+ * Handle OAuth callback and exchange code for tokens
+ */
+export async function handleCallback(
+  code: string,
+  state: string,
+): Promise<UserProfile> {
+  // Log callback received
+  console.log("[OAuth] Callback received with code and state");
+
+  // Clear state from storage (don't fail if mismatch - API may handle state differently)
+  const savedState = getItem(STORAGE_KEYS.STATE);
+  if (state && savedState && state !== savedState) {
+    console.warn(
+      "[OAuth] State mismatch but continuing (API may handle state internally)",
+    );
+  }
+  removeItem(STORAGE_KEYS.STATE);
+
+  // Exchange authorization code for tokens via GET request
+  // API requires both code and state parameters
+  const params = new URLSearchParams({
+    code,
+    state,
+    redirect_uri: OAUTH_CONFIG.redirectUri,
+  });
+
+  const callbackUrl = `${OAUTH_CONFIG.apiBaseUrl}/api/v1/auth/callback?${params.toString()}`;
+  console.log("[OAuth] Exchanging code at:", callbackUrl);
+
+  const response = await fetch(callbackUrl, {
+    method: "GET",
+    headers: {
+      accept: "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    const error = await response
+      .json()
+      .catch(() => ({ message: `HTTP ${response.status}` }));
+    console.error("[OAuth] Token exchange failed:", error);
+    throw new Error(
+      error.message || error.error_description || "OAuth callback failed",
+    );
+  }
+
+  const data = await response.json();
+  console.log("[OAuth] Token response received");
+
+  // Extract tokens from result object (handle both nested and flat responses)
+  const tokens = data.result || data;
+
+  if (!tokens.access_token) {
+    console.error("[OAuth] No access token in response:", tokens);
+    throw new Error("No access token in response");
+  }
+
+  // Store tokens in cookies
+  storeTokens(tokens.access_token, tokens.refresh_token, tokens.expires_in);
+  console.log("[OAuth] Tokens stored in cookies successfully");
+
+  // Try to fetch user profile
+  let user: UserProfile;
+  try {
+    user = await fetchUserProfile(tokens.access_token);
+    storeUser(user);
+  } catch (error) {
+    console.warn("[OAuth] Could not fetch user profile:", error);
+    // If profile fetch fails, try to extract user info from response
+    if (tokens.user) {
+      user = tokens.user;
+    } else {
+      // Fallback: create minimal user object if profile endpoint doesn't exist
+      console.warn("[OAuth] Using fallback minimal user object");
+      user = {
+        id: "user",
+        email: "user@example.com",
+        name: "User",
+      };
+    }
+    storeUser(user);
+  }
+
+  return user;
+}
+
+/**
+ * Store tokens in cookies
+ */
+export function storeTokens(
+  accessToken: string,
+  refreshToken: string,
+  expiresIn?: number,
+): void {
+  const accessExpiry = expiresIn || 3600; // Default 1 hour
+
+  setItem(STORAGE_KEYS.ACCESS_TOKEN, accessToken);
+  setItem(STORAGE_KEYS.REFRESH_TOKEN, refreshToken);
+
+  // Store token expiry time (in milliseconds)
+  const expiryTime = Date.now() + accessExpiry * 1000;
+  setItem(STORAGE_KEYS.TOKEN_EXPIRY, expiryTime.toString());
+}
+
+/**
+ * Store user profile in cookies
+ */
+export function storeUser(user: UserProfile): void {
+  setItem(STORAGE_KEYS.USER, JSON.stringify(user));
+}
+
+/**
+ * Get access token from cookies
+ */
+export function getAccessToken(): string | null {
+  return getItem(STORAGE_KEYS.ACCESS_TOKEN);
+}
+
+/**
+ * Get refresh token from cookies
+ */
+export function getRefreshToken(): string | null {
+  return getItem(STORAGE_KEYS.REFRESH_TOKEN);
+}
+
+/**
+ * Get user profile from cookies
+ */
+export function getUser(): UserProfile | null {
+  const userJson = getItem(STORAGE_KEYS.USER);
+  if (!userJson) return null;
+
+  try {
+    return JSON.parse(userJson);
+  } catch (error) {
+    console.error("Failed to parse user data from cookies:", error);
+    return null;
+  }
+}
+
+/**
+ * Check if user is authenticated (has valid tokens)
+ */
+export function isAuthenticated(): boolean {
+  const accessToken = getAccessToken();
+  const refreshToken = getRefreshToken();
+  return !!(accessToken || refreshToken);
+}
+
+/**
+ * Check if access token is expired
+ */
+export function isTokenExpired(): boolean {
+  const expiryStr = getItem(STORAGE_KEYS.TOKEN_EXPIRY);
+  if (!expiryStr) return true;
+
+  const expiry = parseInt(expiryStr, 10);
+  // Add 5 minute buffer before actual expiry
+  return Date.now() >= expiry - 300000;
+}
+
+/**
+ * Refresh access token using refresh token
+ * Uses POST /api/v1/auth/refresh endpoint
+ */
+export async function refreshAccessToken(): Promise<void> {
+  const refreshToken = getRefreshToken();
+  if (!refreshToken) {
+    throw new Error("No refresh token available");
+  }
+
+  console.log("[OAuth] Refreshing access token");
+
+  const response = await fetch(
+    `${OAUTH_CONFIG.apiBaseUrl}/api/v1/auth/refresh`,
+    {
+      method: "POST",
+      headers: {
+        accept: "application/json",
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        refresh_token: refreshToken,
+      }),
+    },
+  );
+
+  if (!response.ok) {
+    const errorData = await response
+      .json()
+      .catch(() => ({ message: `HTTP ${response.status}` }));
+    console.error("[OAuth] Token refresh failed:", errorData);
+    throw new Error(errorData.message || "Failed to refresh access token");
+  }
+
+  const data = await response.json();
+  console.log("[OAuth] Token refresh successful");
+
+  // Extract tokens from result object (handle both nested and flat responses)
+  const tokens = data.result || data;
+
+  if (!tokens.access_token) {
+    console.error("[OAuth] No access token in refresh response:", tokens);
+    throw new Error("No access token in refresh response");
+  }
+
+  // Update tokens in cookies
+  storeTokens(tokens.access_token, tokens.refresh_token, tokens.expires_in);
+}
+
+/**
+ * Fetch user profile from API
+ */
+export async function fetchUserProfile(
+  accessToken?: string,
+): Promise<UserProfile> {
+  const token = accessToken || getAccessToken();
+  if (!token) {
+    throw new Error("No access token available");
+  }
+
+  console.log(
+    "[OAuth] Fetching user profile from:",
+    `${OAUTH_CONFIG.apiBaseUrl}/api/v1/auth/userInfo`,
+  );
+
+  let response: Response;
+  try {
+    response = await fetch(`${OAUTH_CONFIG.apiBaseUrl}/api/v1/auth/userInfo`, {
+      method: "GET",
+      mode: "cors",
+      credentials: "omit",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: "application/json",
+      },
+    });
+  } catch (networkError) {
+    console.error("[OAuth] Network error fetching user profile:", networkError);
+    throw new Error(
+      `Network error: ${networkError instanceof Error ? networkError.message : "Unknown error"}`,
+    );
+  }
+
+  if (!response.ok) {
+    const errorText = await response.text().catch(() => "");
+    console.error(
+      "[OAuth] User profile fetch failed:",
+      response.status,
+      errorText,
+    );
+    throw new Error(`Failed to fetch user profile: ${response.status}`);
+  }
+
+  const data = await response.json();
+
+  // Extract user profile from result object
+  const profileData = data.result || data;
+
+  // Map API response to UserProfile interface
+  // Construct full name from first_name and last_name if available
+  let fullName = profileData.username || "User";
+  if (profileData.first_name || profileData.last_name) {
+    fullName =
+      `${profileData.first_name || ""} ${profileData.last_name || ""}`.trim();
+  }
+
+  // Extract company and role from memberships
+  let companyId = "";
+  let companyName = "";
+  let roleName = "";
+  if (profileData.memberships && profileData.memberships.length > 0) {
+    const activeMembership =
+      profileData.memberships.find((m: any) => m.is_active) ||
+      profileData.memberships[0];
+    companyId = activeMembership.company_id || activeMembership.id || "";
+    companyName = activeMembership.company_name || "";
+    roleName = activeMembership.role_name || "";
+  }
+
+  const userProfile: UserProfile = {
+    id: profileData.user_id || profileData.id || "user",
+    email: profileData.email || "",
+    name: fullName,
+    avatar_url: profileData.avatar_url,
+    company_id: companyId,
+    company_name: companyName,
+    role_name: roleName,
+  };
+
+  console.log("[OAuth] User profile mapped:", userProfile);
+  return userProfile;
+}
+
+/**
+ * Logout and clear all auth data
+ */
+export async function logout(): Promise<void> {
+  const refreshToken = getRefreshToken();
+
+  // Call logout endpoint with refresh token
+  if (refreshToken) {
+    try {
+      await fetch(`${OAUTH_CONFIG.apiBaseUrl}/api/v1/auth/logout`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          refresh_token: refreshToken,
+        }),
+      });
+    } catch (error) {
+      console.error("Logout API call failed:", error);
+    }
+  }
+
+  // Clear all OAuth data from localStorage
+  clearAuthStorage();
+}
+
+/**
+ * Clear all OAuth data from cookies
+ */
+export function clearAuthStorage(): void {
+  clearAll();
+}
+
+/**
+ * Fetch company addresses from IAM API
+ */
+export async function fetchCompanyAddresses(
+  companyId: string,
+  accessToken?: string,
+): Promise<CompanyAddress[]> {
+  const token = accessToken || getAccessToken();
+  if (!token) {
+    throw new Error("No access token available");
+  }
+
+  if (!companyId) {
+    console.warn("[OAuth] No company ID provided for fetching addresses");
+    return [];
+  }
+
+  const iamBaseUrl = import.meta.env.VITE_IAM_API_URL;
+
+  try {
+    const response = await fetch(
+      `${iamBaseUrl}/api/v1/companies/${companyId}/addresses`,
+      {
+        method: "GET",
+        mode: "cors",
+        credentials: "omit",
+        headers: {
+          Authorization: `Bearer ${token}`,
+          Accept: "application/json",
+        },
+      },
+    );
+
+    if (!response.ok) {
+      console.warn(
+        "[OAuth] Failed to fetch company addresses:",
+        response.status,
+      );
+      return [];
+    }
+
+    const data = await response.json();
+    console.log("[OAuth] Company addresses fetched:", data);
+
+    return Array.isArray(data) ? data : data.result || data.addresses || [];
+  } catch (error) {
+    console.error("[OAuth] Error fetching company addresses:", error);
+    return [];
+  }
+}
+
+/**
+ * Get primary address country from company addresses
+ */
+export function getPrimaryAddressCountry(
+  addresses: CompanyAddress[],
+): string | undefined {
+  if (!addresses || addresses.length === 0) {
+    return undefined;
+  }
+
+  const primaryAddress = addresses.find((addr) => addr.is_primary === true);
+  if (primaryAddress && primaryAddress.country) {
+    return primaryAddress.country;
+  }
+
+  // Fallback to first address if no primary found
+  const firstAddress = addresses[0];
+  return firstAddress?.country;
+}
+
+/**
+ * Fetch company brands from IAM API with pagination
+ */
+export async function fetchCompanyBrands(
+  companyId: string,
+  options: { page?: number; limit?: number; search?: string } = {},
+  accessToken?: string,
+): Promise<CompanyBrandsResponse> {
+  const token = accessToken || getAccessToken();
+  if (!token) {
+    throw new Error("No access token available");
+  }
+
+  if (!companyId) {
+    console.warn("[OAuth] No company ID provided for fetching brands");
+    return { brands: [], total: 0, page: 1, limit: 20 };
+  }
+
+  const iamBaseUrl = import.meta.env.VITE_IAM_API_URL;
+  
+  if (!iamBaseUrl) {
+    console.error("[OAuth] VITE_IAM_API_URL is not configured - cannot fetch brands");
+    return { brands: [], total: 0, page: 1, limit: 20 };
+  }
+
+  const params = new URLSearchParams();
+  if (options.page) params.append("page", options.page.toString());
+  if (options.limit) params.append("limit", options.limit.toString());
+  if (options.search) params.append("search", options.search);
+
+  const queryString = params.toString();
+  const url = `${iamBaseUrl}/api/v1/companies/${companyId}/brands${queryString ? `?${queryString}` : ""}`;
+
+  try {
+    const response = await fetch(url, {
+      method: "GET",
+      mode: "cors",
+      credentials: "omit",
+      headers: {
+        Authorization: `Bearer ${token}`,
+        Accept: "application/json",
+      },
+    });
+
+    if (!response.ok) {
+      console.warn("[OAuth] Failed to fetch company brands:", response.status);
+      return { brands: [], total: 0, page: 1, limit: 20 };
+    }
+
+    const data = await response.json();
+    console.log("[OAuth] Company brands raw response:", JSON.stringify(data));
+    console.log("[OAuth] Response type:", typeof data, "| Keys:", Object.keys(data || {}));
+
+    // Handle multiple API response structures with detailed logging
+    const extractBrandsData = (): { brands: CompanyBrand[]; total: number; page: number; limit: number } | null => {
+      // Case 1: { success: true, data: { brands: [...] } }
+      if (data?.success === true && data?.data?.brands) {
+        console.log("[OAuth] Matched structure: success + data.brands");
+        return data.data;
+      }
+      // Case 2: { success: true, result: { brands: [...] } }
+      if (data?.success === true && data?.result?.brands) {
+        console.log("[OAuth] Matched structure: success + result.brands");
+        return data.result;
+      }
+      // Case 3: { data: { brands: [...] } } (without success flag)
+      if (data?.data?.brands) {
+        console.log("[OAuth] Matched structure: data.brands (no success)");
+        return data.data;
+      }
+      // Case 4: { result: { brands: [...] } } (without success flag)
+      if (data?.result?.brands) {
+        console.log("[OAuth] Matched structure: result.brands (no success)");
+        return data.result;
+      }
+      // Case 5: { brands: [...], total, page, limit } (flat response)
+      if (data?.brands && (Array.isArray(data.brands) || typeof data.brands === 'object')) {
+        console.log("[OAuth] Matched structure: flat brands array");
+        const brands = Array.isArray(data.brands) ? data.brands : [];
+        return { 
+          brands, 
+          total: data.total ?? brands.length, 
+          page: data.page ?? 1, 
+          limit: data.limit ?? 20 
+        };
+      }
+      // Case 6: Direct array response [...]
+      if (Array.isArray(data)) {
+        console.log("[OAuth] Matched structure: direct array");
+        return { brands: data, total: data.length, page: 1, limit: 20 };
+      }
+      // Case 7: { items: [...] } pattern
+      if (data?.items && Array.isArray(data.items)) {
+        console.log("[OAuth] Matched structure: items array");
+        return { 
+          brands: data.items, 
+          total: data.total ?? data.items.length, 
+          page: data.page ?? 1, 
+          limit: data.limit ?? 20 
+        };
+      }
+      // Case 8: { rows: [...] } pattern
+      if (data?.rows && Array.isArray(data.rows)) {
+        console.log("[OAuth] Matched structure: rows array");
+        return { 
+          brands: data.rows, 
+          total: data.total ?? data.count ?? data.rows.length, 
+          page: data.page ?? 1, 
+          limit: data.limit ?? 20 
+        };
+      }
+      return null;
+    };
+    
+    const brandsData = extractBrandsData();
+    if (brandsData && brandsData.brands.length >= 0) {
+      console.log("[OAuth] Extracted brands count:", brandsData.brands.length);
+      return {
+        brands: brandsData.brands,
+        total: brandsData.total,
+        page: brandsData.page,
+        limit: brandsData.limit,
+      };
+    }
+
+    console.warn("[OAuth] No matching brands structure. Raw data:", JSON.stringify(data));
+    return { brands: [], total: 0, page: 1, limit: 20 };
+  } catch (error) {
+    console.warn(
+      "[OAuth] Error fetching company brands (likely CORS restriction):",
+      error,
+    );
+    return { brands: [], total: 0, page: 1, limit: 20 };
+  }
+}