@oxyhq/services 5.20.2 → 5.21.0

package/src/core/mixins/OxyServices.fedcm.ts

@@ -46,7 +46,8 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
       super(...(args as [any]));
     }
   public static readonly DEFAULT_CONFIG_URL = 'https://auth.oxy.so/fedcm.json';
-  public static readonly FEDCM_TIMEOUT = 60000; // 1 minute
+  public static readonly FEDCM_TIMEOUT = 60000; // 1 minute for interactive
+  public static readonly FEDCM_SILENT_TIMEOUT = 10000; // 10 seconds for silent mediation
 
   /**
    * Check if FedCM is supported in the current browser
@@ -98,6 +99,10 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
       const nonce = options.nonce || this.generateNonce();
       const clientId = this.getClientId();
 
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[FedCM] Interactive sign-in: Requesting credential for', clientId);
+      }
+
       // Request credential from browser's native identity flow
       const credential = await this.requestIdentityCredential({
         configURL: (this.constructor as any).DEFAULT_CONFIG_URL,
@@ -110,6 +115,10 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
         throw new OxyAuthenticationError('No credential received from browser');
       }
 
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[FedCM] Interactive sign-in: Got credential, exchanging for session');
+      }
+
       // Exchange FedCM ID token for Oxy session
       const session = await this.exchangeIdTokenForSession(credential.token);
 
@@ -118,8 +127,15 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
         this.httpService.setTokens((session as any).accessToken);
       }
 
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[FedCM] Interactive sign-in: Success!', { userId: (session as any)?.user?.id });
+      }
+
       return session;
     } catch (error) {
+      if (typeof __DEV__ !== 'undefined' && __DEV__) {
+        console.log('[FedCM] Interactive sign-in failed:', error);
+      }
       if ((error as any).name === 'AbortError') {
         throw new OxyAuthenticationError('Sign-in was cancelled by user');
       }
@@ -162,35 +178,102 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
    */
   async silentSignInWithFedCM(): Promise<SessionLoginResponse | null> {
     if (!this.isFedCMSupported()) {
+      console.log('[FedCM] Silent SSO: FedCM not supported in this browser');
       return null;
     }
 
+    const clientId = this.getClientId();
+    console.log('[FedCM] Silent SSO: Starting for', clientId);
+
+    // First try silent mediation (no UI) - works if user previously consented
+    let credential: { token: string } | null = null;
+
     try {
       const nonce = this.generateNonce();
-      const clientId = this.getClientId();
+      console.log('[FedCM] Silent SSO: Attempting silent mediation...');
 
-      // Request credential with silent mediation (no UI)
-      const credential = await this.requestIdentityCredential({
+      credential = await this.requestIdentityCredential({
         configURL: (this.constructor as any).DEFAULT_CONFIG_URL,
         clientId,
         nonce,
         mediation: 'silent',
       });
 
-      if (!credential || !credential.token) {
+      console.log('[FedCM] Silent SSO: Silent mediation result:', { hasCredential: !!credential, hasToken: !!credential?.token });
+    } catch (silentError) {
+      // Silent mediation failed - this is expected if user hasn't consented before or is in quiet period
+      const errorName = silentError instanceof Error ? silentError.name : 'Unknown';
+      const errorMessage = silentError instanceof Error ? silentError.message : String(silentError);
+      console.log('[FedCM] Silent SSO: Silent mediation error (will try optional):', { name: errorName, message: errorMessage });
+    }
+
+    // If silent failed, try optional mediation which shows browser UI if needed
+    if (!credential || !credential.token) {
+      try {
+        const nonce = this.generateNonce();
+        console.log('[FedCM] Silent SSO: Trying optional mediation (may show browser UI)...');
+
+        credential = await this.requestIdentityCredential({
+          configURL: (this.constructor as any).DEFAULT_CONFIG_URL,
+          clientId,
+          nonce,
+          mediation: 'optional',
+        });
+
+        console.log('[FedCM] Silent SSO: Optional mediation result:', { hasCredential: !!credential, hasToken: !!credential?.token });
+      } catch (optionalError) {
+        const errorName = optionalError instanceof Error ? optionalError.name : 'Unknown';
+        const errorMessage = optionalError instanceof Error ? optionalError.message : String(optionalError);
+        console.log('[FedCM] Silent SSO: Optional mediation also failed:', { name: errorName, message: errorMessage });
         return null;
       }
+    }
 
-      const session = await this.exchangeIdTokenForSession(credential.token);
-      if (session && (session as any).accessToken) {
-        this.httpService.setTokens((session as any).accessToken);
-      }
+    if (!credential || !credential.token) {
+      console.log('[FedCM] Silent SSO: No credential returned (user may have dismissed prompt or is not logged in at IdP)');
+      return null;
+    }
 
-      return session;
-    } catch (error) {
-      // Silent failures are expected and should not throw
+    console.log('[FedCM] Silent SSO: Got credential, exchanging for session...');
+
+    let session: SessionLoginResponse;
+    try {
+      session = await this.exchangeIdTokenForSession(credential.token);
+    } catch (exchangeError) {
+      console.error('[FedCM] Silent SSO: Token exchange failed:', exchangeError);
+      return null;
+    }
+
+    // Validate session response has required fields
+    if (!session) {
+      console.error('[FedCM] Silent SSO: Exchange returned null session');
+      return null;
+    }
+
+    if (!session.sessionId) {
+      console.error('[FedCM] Silent SSO: Exchange returned session without sessionId:', session);
+      return null;
+    }
+
+    if (!session.user) {
+      console.error('[FedCM] Silent SSO: Exchange returned session without user:', session);
       return null;
     }
+
+    // Set the access token
+    if ((session as any).accessToken) {
+      this.httpService.setTokens((session as any).accessToken);
+      console.log('[FedCM] Silent SSO: Access token set');
+    } else {
+      console.warn('[FedCM] Silent SSO: No accessToken in session response');
+    }
+
+    console.log('[FedCM] Silent SSO: Success!', {
+      sessionId: session.sessionId?.substring(0, 8) + '...',
+      userId: session.user?.id
+    });
+
+    return session;
   }
 
   /**
@@ -213,8 +296,15 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
     const requestedMediation = options.mediation || 'optional';
     const isInteractive = requestedMediation !== 'silent';
 
+    console.log('[FedCM] requestIdentityCredential called:', {
+      mediation: requestedMediation,
+      clientId: options.clientId,
+      inProgress: fedCMRequestInProgress,
+    });
+
     // If a request is already in progress...
     if (fedCMRequestInProgress && fedCMRequestPromise) {
+      console.log('[FedCM] Request already in progress, waiting...');
       // If current request is silent and new request is interactive,
       // wait for silent to finish, then make the interactive request
       if (currentMediationMode === 'silent' && isInteractive) {
@@ -237,10 +327,18 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
     fedCMRequestInProgress = true;
     currentMediationMode = requestedMediation;
     const controller = new AbortController();
-    const timeout = setTimeout(() => controller.abort(), (this.constructor as any).FEDCM_TIMEOUT);
+    // Use shorter timeout for silent mediation since it should be quick
+    const timeoutMs = requestedMediation === 'silent'
+      ? (this.constructor as any).FEDCM_SILENT_TIMEOUT
+      : (this.constructor as any).FEDCM_TIMEOUT;
+    const timeout = setTimeout(() => {
+      console.log('[FedCM] Request timed out after', timeoutMs, 'ms (mediation:', requestedMediation + ')');
+      controller.abort();
+    }, timeoutMs);
 
     fedCMRequestPromise = (async () => {
       try {
+        console.log('[FedCM] Calling navigator.credentials.get with mediation:', requestedMediation);
         // Type assertion needed as FedCM types may not be in all TypeScript versions
         const credential = (await (navigator.credentials as any).get({
           identity: {
@@ -248,7 +346,11 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
               {
                 configURL: options.configURL,
                 clientId: options.clientId,
-                nonce: options.nonce,
+                // Send nonce at both levels for backward compatibility
+                nonce: options.nonce, // For older browsers
+                params: {
+                  nonce: options.nonce, // For Chrome 145+
+                },
                 ...(options.context && { loginHint: options.context }),
               },
             ],
@@ -257,11 +359,24 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
           signal: controller.signal,
         })) as any;
 
+        console.log('[FedCM] navigator.credentials.get returned:', {
+          hasCredential: !!credential,
+          type: credential?.type,
+          hasToken: !!credential?.token,
+        });
+
         if (!credential || credential.type !== 'identity') {
+          console.log('[FedCM] No valid identity credential returned');
           return null;
         }
 
+        console.log('[FedCM] Got valid identity credential with token');
         return { token: credential.token };
+      } catch (error) {
+        const errorName = error instanceof Error ? error.name : 'Unknown';
+        const errorMessage = error instanceof Error ? error.message : String(error);
+        console.log('[FedCM] navigator.credentials.get error:', { name: errorName, message: errorMessage });
+        throw error;
       } finally {
         clearTimeout(timeout);
         fedCMRequestInProgress = false;
@@ -282,12 +397,37 @@ export function OxyServicesFedCMMixin<T extends typeof OxyServicesBase>(Base: T)
    * @private
    */
   public async exchangeIdTokenForSession(idToken: string): Promise<SessionLoginResponse> {
-    return this.makeRequest<SessionLoginResponse>(
-      'POST',
-      '/api/fedcm/exchange',
-      { id_token: idToken },
-      { cache: false }
-    );
+    console.log('[FedCM] exchangeIdTokenForSession: Starting exchange...');
+    console.log('[FedCM] exchangeIdTokenForSession: Token length:', idToken?.length);
+    console.log('[FedCM] exchangeIdTokenForSession: Token preview:', idToken?.substring(0, 50) + '...');
+
+    try {
+      const response = await this.makeRequest<SessionLoginResponse>(
+        'POST',
+        '/api/fedcm/exchange',
+        { id_token: idToken },
+        { cache: false }
+      );
+
+      console.log('[FedCM] exchangeIdTokenForSession: Response received:', {
+        hasResponse: !!response,
+        hasSessionId: !!(response as any)?.sessionId,
+        hasUser: !!(response as any)?.user,
+        hasAccessToken: !!(response as any)?.accessToken,
+        userId: (response as any)?.user?.id,
+        username: (response as any)?.user?.username,
+        responseKeys: response ? Object.keys(response) : [],
+      });
+
+      return response;
+    } catch (error) {
+      console.error('[FedCM] exchangeIdTokenForSession: Error:', {
+        name: error instanceof Error ? error.name : 'Unknown',
+        message: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+      throw error;
+    }
   }
 
   /**

package/src/core/mixins/OxyServices.popup.ts

@@ -111,6 +111,25 @@ export function OxyServicesPopupAuthMixin<T extends typeof OxyServicesBase>(Base
         this.httpService.setTokens((session as any).accessToken);
       }
 
+      // Fetch user data using the session ID
+      // The callback page only sends sessionId/accessToken, not user data
+      if (session && session.sessionId && !session.user) {
+        try {
+          const userData = await this.makeRequest<any>(
+            'GET',
+            `/api/session/user/${session.sessionId}`,
+            undefined,
+            { cache: false }
+          );
+          if (userData) {
+            (session as any).user = userData;
+          }
+        } catch (userError) {
+          console.warn('[PopupAuth] Failed to fetch user data:', userError);
+          // Continue without user data - caller can fetch separately
+        }
+      }
+
       return session;
     } catch (error) {
       throw error;
@@ -238,8 +257,21 @@ export function OxyServicesPopupAuthMixin<T extends typeof OxyServicesBase>(Base
       }, timeout);
 
       const messageHandler = (event: MessageEvent) => {
+        const authUrl = (this.constructor as any).AUTH_URL;
+
+        // Log all messages for debugging
+        if (event.data && typeof event.data === 'object' && event.data.type) {
+          console.log('[PopupAuth] Message received:', {
+            origin: event.origin,
+            expectedOrigin: authUrl,
+            type: event.data.type,
+            hasSession: !!event.data.session,
+            hasError: !!event.data.error,
+          });
+        }
+
         // CRITICAL: Verify origin to prevent XSS attacks
-        if (event.origin !== (this.constructor as any).AUTH_URL) {
+        if (event.origin !== authUrl) {
           return;
         }
 
@@ -249,9 +281,12 @@ export function OxyServicesPopupAuthMixin<T extends typeof OxyServicesBase>(Base
           return;
         }
 
+        console.log('[PopupAuth] Valid auth response:', { state, expectedState, hasSession: !!session, error });
+
         // Verify state parameter to prevent CSRF attacks
         if (state !== expectedState) {
           cleanup();
+          console.error('[PopupAuth] State mismatch');
           reject(new OxyAuthenticationError('Invalid state parameter. Possible CSRF attack.'));
           return;
         }
@@ -259,10 +294,13 @@ export function OxyServicesPopupAuthMixin<T extends typeof OxyServicesBase>(Base
         cleanup();
 
         if (error) {
+          console.error('[PopupAuth] Auth error:', error);
           reject(new OxyAuthenticationError(error));
         } else if (session) {
+          console.log('[PopupAuth] Session received successfully');
           resolve(session);
         } else {
+          console.error('[PopupAuth] No session in response');
           reject(new OxyAuthenticationError('No session received from authentication server'));
         }
       };

package/src/ui/context/OxyContext.tsx

@@ -55,6 +55,18 @@ export interface OxyContextState {
   // Authentication
   signIn: (publicKey: string, deviceName?: string) => Promise<User>;
 
+  /**
+   * Handle session from popup authentication
+   * Updates auth state, persists session to storage
+   */
+  handlePopupSession: (session: {
+    sessionId: string;
+    accessToken?: string;
+    expiresAt?: string;
+    user: User;
+    deviceId?: string;
+  }) => Promise<void>;
+
   // Session management
   logout: (targetSessionId?: string) => Promise<void>;
   logoutAll: () => Promise<void>;
@@ -414,11 +426,23 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   }, [restoreSessionsFromStorage, storage]);
 
   // Web SSO: Automatically check for cross-domain session on web platforms
+  // Also used for popup auth - updates all state and persists session
   const handleWebSSOSession = useCallback(async (session: any) => {
+    console.log('[OxyContext] handleWebSSOSession called:', {
+      hasSession: !!session,
+      hasUser: !!session?.user,
+      hasSessionId: !!session?.sessionId,
+      sessionIdPrefix: session?.sessionId?.substring(0, 8),
+      userId: session?.user?.id,
+    });
+
     if (!session?.user || !session?.sessionId) {
+      console.warn('[OxyContext] handleWebSSOSession: Invalid session - missing user or sessionId');
       return;
     }
 
+    console.log('[OxyContext] handleWebSSOSession: Processing valid session...');
+
     // Update sessions state
     const clientSession = {
       sessionId: session.sessionId,
@@ -443,7 +467,15 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
         sessionIds.push(session.sessionId);
         await storage.setItem(storageKeys.sessionIds, JSON.stringify(sessionIds));
       }
+      console.log('[OxyContext] handleWebSSOSession: Session persisted to storage', {
+        sessionId: session.sessionId?.substring(0, 8),
+        totalSessions: sessionIds.length,
+      });
+    } else {
+      console.warn('[OxyContext] handleWebSSOSession: No storage available, session not persisted!');
     }
+
+    console.log('[OxyContext] handleWebSSOSession: Complete! User should now be authenticated.');
   }, [updateSessions, setActiveSessionId, loginSuccess, onAuthStateChange, storage, storageKeys]);
 
   // Enable web SSO only after local storage check completes and no user found
@@ -571,6 +603,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
     hasIdentity,
     getPublicKey,
     signIn,
+    handlePopupSession: handleWebSSOSession,
     logout,
     logoutAll,
     switchSession: switchSessionForContext,
@@ -589,6 +622,7 @@ export const OxyProvider: React.FC<OxyContextProviderProps> = ({
   }), [
     activeSessionId,
     signIn,
+    handleWebSSOSession,
     currentLanguage,
     currentLanguageMetadata,
     currentLanguageName,

package/src/ui/hooks/useAuth.ts

@@ -91,6 +91,7 @@ export function useAuth(): UseAuthReturn {
     isTokenReady,
     error,
     signIn: oxySignIn,
+    handlePopupSession,
     logout,
     logoutAll,
     refreshSessions,
@@ -106,37 +107,25 @@ export function useAuth(): UseAuthReturn {
     const isIdentityProvider = isWebBrowser() &&
       window.location.hostname === 'auth.oxy.so';
 
-    // Web (not on IdP): Use FedCM or popup-based authentication
+    // Web (not on IdP): Use popup-based authentication
+    // We go straight to popup to preserve the "user gesture" (click event)
+    // FedCM silent SSO already runs on page load via useWebSSO
+    // If user is clicking "Sign In", they need interactive auth NOW
     if (isWebBrowser() && !publicKey && !isIdentityProvider) {
-      // Try FedCM first (instant if user already signed in at IdP)
-      if ((oxyServices as any).isFedCMSupported?.()) {
-        try {
-          const fedcmSession = await (oxyServices as any).signInWithFedCM?.();
-          if (fedcmSession?.user) {
-            return fedcmSession.user;
-          }
-        } catch (fedcmError) {
-          // FedCM failed (user not signed in at IdP, cancelled, etc.)
-          // Fall through to popup
-          console.debug('FedCM failed, falling back to popup:', fedcmError);
-        }
-      }
-
-      // Fallback to popup (opens auth.oxy.so in popup window)
       try {
         const popupSession = await (oxyServices as any).signInWithPopup?.();
         if (popupSession?.user) {
+          // Update context state with the session (this updates user, sessions, storage)
+          await handlePopupSession(popupSession);
           return popupSession.user;
         }
+        throw new Error('Sign-in failed. Please try again.');
       } catch (popupError) {
-        // If popup blocked, suggest enabling popups
         if (popupError instanceof Error && popupError.message.includes('blocked')) {
           throw new Error('Popup blocked. Please allow popups for this site.');
         }
         throw popupError;
       }
-
-      throw new Error('Sign-in failed. Please try again.');
     }
 
     // Native: Use cryptographic identity
@@ -174,7 +163,7 @@ export function useAuth(): UseAuthReturn {
     }
 
     throw new Error('No authentication method available');
-  }, [oxySignIn, hasIdentity, getPublicKey, showBottomSheet, oxyServices]);
+  }, [oxySignIn, hasIdentity, getPublicKey, showBottomSheet, oxyServices, handlePopupSession]);
 
   const signOut = useCallback(async (): Promise<void> => {
     await logout();

package/src/ui/hooks/useWebSSO.ts

@@ -30,6 +30,8 @@ interface UseWebSSOOptions {
 interface UseWebSSOResult {
   /** Manually trigger SSO check */
   checkSSO: () => Promise<SessionLoginResponse | null>;
+  /** Trigger interactive FedCM sign-in (shows browser UI) */
+  signInWithFedCM: () => Promise<SessionLoginResponse | null>;
   /** Whether SSO check is in progress */
   isChecking: boolean;
   /** Whether FedCM is supported in this browser */
@@ -85,12 +87,20 @@ export function useWebSSO({
   const fedCMSupported = isWebBrowser() && (oxyServices as any).isFedCMSupported?.();
 
   const checkSSO = useCallback(async (): Promise<SessionLoginResponse | null> => {
+    console.log('[useWebSSO] checkSSO called', {
+      isWebBrowser: isWebBrowser(),
+      isChecking: isCheckingRef.current,
+      isIdP: isIdentityProvider(),
+      fedCMSupported,
+    });
+
     if (!isWebBrowser() || isCheckingRef.current) {
       return null;
     }
 
     // Don't use FedCM on the auth domain itself - it would authenticate against itself
     if (isIdentityProvider()) {
+      console.log('[useWebSSO] Skipping - on identity provider domain');
       onSSOUnavailable?.();
       return null;
     }
@@ -98,27 +108,39 @@ export function useWebSSO({
     // FedCM is the only reliable cross-domain SSO mechanism
     // Third-party cookies are deprecated and unreliable
     if (!fedCMSupported) {
+      console.log('[useWebSSO] Skipping - FedCM not supported');
       onSSOUnavailable?.();
       return null;
     }
 
     isCheckingRef.current = true;
+    console.log('[useWebSSO] Starting FedCM silent sign-in...');
 
     try {
       // Use FedCM for cross-domain SSO
       // This works because browser treats IdP requests as first-party
       const session = await (oxyServices as any).silentSignInWithFedCM?.();
 
+      console.log('[useWebSSO] FedCM result:', {
+        hasSession: !!session,
+        hasUser: !!session?.user,
+        hasSessionId: !!session?.sessionId,
+      });
+
       if (session) {
+        console.log('[useWebSSO] Session found, calling onSessionFound...');
         await onSessionFound(session);
+        console.log('[useWebSSO] onSessionFound completed');
         return session;
       }
 
       // No session found - user needs to sign in
+      console.log('[useWebSSO] No session returned from FedCM');
       onSSOUnavailable?.();
       return null;
     } catch (error) {
       // FedCM failed - could be network error, user not signed in, etc.
+      console.error('[useWebSSO] FedCM error:', error);
       onSSOUnavailable?.();
       onError?.(error instanceof Error ? error : new Error(String(error)));
       return null;
@@ -127,6 +149,54 @@ export function useWebSSO({
     }
   }, [oxyServices, onSessionFound, onSSOUnavailable, onError, fedCMSupported]);
 
+  /**
+   * Trigger interactive FedCM sign-in
+   * This shows the browser's native "Sign in with Oxy" prompt.
+   * Use this when silent mediation fails (user hasn't previously consented).
+   */
+  const signInWithFedCM = useCallback(async (): Promise<SessionLoginResponse | null> => {
+    console.log('[useWebSSO] signInWithFedCM called');
+
+    if (!isWebBrowser() || isCheckingRef.current) {
+      return null;
+    }
+
+    if (!fedCMSupported) {
+      console.log('[useWebSSO] FedCM not supported for interactive sign-in');
+      onError?.(new Error('FedCM is not supported in this browser'));
+      return null;
+    }
+
+    isCheckingRef.current = true;
+    console.log('[useWebSSO] Starting interactive FedCM sign-in...');
+
+    try {
+      // Use interactive sign-in (shows browser UI)
+      const session = await (oxyServices as any).signInWithFedCM?.();
+
+      console.log('[useWebSSO] Interactive FedCM result:', {
+        hasSession: !!session,
+        hasUser: !!session?.user,
+        hasSessionId: !!session?.sessionId,
+      });
+
+      if (session) {
+        console.log('[useWebSSO] Interactive session found, calling onSessionFound...');
+        await onSessionFound(session);
+        console.log('[useWebSSO] onSessionFound completed');
+        return session;
+      }
+
+      return null;
+    } catch (error) {
+      console.error('[useWebSSO] Interactive FedCM error:', error);
+      onError?.(error instanceof Error ? error : new Error(String(error)));
+      return null;
+    } finally {
+      isCheckingRef.current = false;
+    }
+  }, [oxyServices, onSessionFound, onError, fedCMSupported]);
+
   // Auto-check SSO on mount (web only, FedCM only, not on auth domain)
   useEffect(() => {
     if (!enabled || !isWebBrowser() || hasCheckedRef.current || isIdentityProvider()) {
@@ -148,6 +218,7 @@ export function useWebSSO({
 
   return {
     checkSSO,
+    signInWithFedCM,
     isChecking: isCheckingRef.current,
     isFedCMSupported: fedCMSupported,
   };