@phygitallabs/tapquest-core 2.7.0 → 2.9.0

package/src/modules/auth/hooks/useGoogleLogin.ts

@@ -0,0 +1,169 @@
+import { useRef, useCallback, useEffect } from "react";
+import { useAuth } from "../store/authStore";
+import { tokenStorage } from "@phygitallabs/authentication";
+import { ALLOWED_ORIGINS } from "../constants";
+
+export interface UseGoogleLoginOptions {
+  onSuccess?: () => void;
+  onError?: (error: string) => void;
+  onPopupBlocked?: () => void;
+  onPopupClosed?: () => void;
+}
+
+export interface UseGoogleLoginReturn {
+  signIn: () => Promise<void>;
+  isLoading: boolean;
+  error: string | null;
+}
+
+export function useGoogleLogin(options: UseGoogleLoginOptions = {}): UseGoogleLoginReturn {
+  const { onSuccess, onError, onPopupBlocked, onPopupClosed } = options;
+  const { signInWithGoogle, refreshToken, setIsSignedIn, setIsLoading, isLoading } = useAuth();
+
+  const popupRef = useRef<Window | null>(null);
+  const gotDataRef = useRef(false);
+  const timerRef = useRef<NodeJS.Timeout | null>(null);
+  const errorRef = useRef<string | null>(null);
+
+  const handleTokenRefresh = useCallback(
+    async (refresh: string) => {
+      if (refresh) {
+        try {
+          const newToken = await refreshToken(refresh);
+          if (newToken.data?.idToken && newToken.data?.refreshToken) {
+            tokenStorage.setTokens({
+              idToken: newToken.data.idToken,
+              refreshToken: newToken.data.refreshToken,
+            });
+
+            setIsSignedIn(true);
+            setIsLoading(false);
+            onSuccess?.();
+          }
+        } catch (error) {
+          const errorMessage = error instanceof Error ? error.message : "Token refresh failed";
+          errorRef.current = errorMessage;
+          onError?.(errorMessage);
+          setIsLoading(false);
+        }
+      }
+    },
+    [refreshToken, setIsSignedIn, setIsLoading, onSuccess, onError]
+  );
+
+  const cleanup = useCallback(() => {
+    if (timerRef.current) {
+      clearInterval(timerRef.current);
+      timerRef.current = null;
+    }
+    gotDataRef.current = false;
+  }, []);
+
+  const handleMessage = useCallback(
+    (event: MessageEvent) => {
+      // Allow specific origins for OAuth (adjust these based on your OAuth provider)
+      const allowedOrigins = ALLOWED_ORIGINS.concat(window?.location?.origin);
+
+      // Allow wildcard origin from callback.html (but validate message structure)
+      if (event.origin !== "*" && !allowedOrigins.includes(event.origin as string)) {
+        console.warn("Rejected message from untrusted origin:", event.origin);
+        return;
+      }
+
+      // Additional validation for message structure
+      if (!event.data || typeof event.data !== "object") {
+        console.warn("Invalid message data received");
+        return;
+      }
+
+      if (event.data.type === "LOGIN_SUCCESS") {
+        const { refreshToken: refresh } = event.data;
+
+        // Support both token formats from callback
+        if (refresh) {
+          handleTokenRefresh(refresh);
+        }
+        gotDataRef.current = true;
+        cleanup();
+      } else if (event.data.type === "LOGIN_ERROR") {
+        const errorMessage = event.data.error || "Login failed";
+        errorRef.current = errorMessage;
+        onError?.(errorMessage);
+        setIsLoading(false);
+        gotDataRef.current = true;
+        cleanup();
+      }
+    },
+    [handleTokenRefresh, setIsLoading, cleanup, onError]
+  );
+
+  const signIn = useCallback(async (): Promise<void> => {
+    const width = 500;
+    const height = 600;
+    const left = window.screenX + (window.outerWidth - width) / 2;
+    const top = window.screenY + (window.outerHeight - height) / 2;
+
+    try {
+      errorRef.current = null;
+      setIsLoading(true);
+      const response = await signInWithGoogle();
+
+      popupRef.current = window.open(
+        `${response.statusMessage}`,
+        "oauthPopup",
+        `width=${width},height=${height},left=${left},top=${top},resizable,scrollbars`
+      );
+
+      // Ensure popup opened successfully
+      if (!popupRef.current) {
+        setIsLoading(false);
+        const error = "Popup blocked. Please allow popups for this site.";
+        errorRef.current = error;
+        onPopupBlocked?.();
+        onError?.(error);
+        return;
+      }
+
+      timerRef.current = setInterval(() => {
+        if (popupRef.current && popupRef.current.closed) {
+          if (timerRef.current) {
+            clearInterval(timerRef.current);
+            timerRef.current = null;
+          }
+          if (!gotDataRef.current) {
+            const error = "Authentication popup was closed";
+            errorRef.current = error;
+            onPopupClosed?.();
+            onError?.(error);
+            setIsLoading(false);
+          }
+        }
+      }, 500);
+    } catch (error: any) {
+      const errorMessage = error instanceof Error ? error.message : "Google sign in failed";
+      errorRef.current = errorMessage;
+      onError?.(errorMessage);
+      setIsLoading(false);
+    }
+  }, [signInWithGoogle, setIsLoading, handleMessage, onError, onPopupBlocked, onPopupClosed]);
+
+  useEffect(() => {
+    window.addEventListener("message", handleMessage);
+    return () => {
+      window.removeEventListener("message", handleMessage);
+    };
+  }, [handleMessage]);
+
+  // Cleanup on unmount
+  useEffect(() => {
+    return () => {
+      cleanup();
+    };
+  }, [cleanup, handleMessage]);
+
+  return {
+    signIn,
+    isLoading,
+    error: errorRef.current,
+  };
+}

package/src/modules/auth/hooks/useTokenRefresher.ts

@@ -0,0 +1,39 @@
+import { useQuery } from "@tanstack/react-query";
+import { useAuth } from "../store/authStore";
+import { tokenStorage } from "@phygitallabs/authentication";
+
+export function useTokenRefresher() {
+  const { refreshToken, signOut } = useAuth();
+
+  const handleRefreshToken = async () => {
+    try {
+      const isTokenExpired = tokenStorage.isTokenExpired();
+      if (!isTokenExpired) {
+        return;
+      }
+      const newToken = await refreshToken();
+
+      if(newToken.data?.idToken && newToken.data?.refreshToken){
+        tokenStorage.setTokens({
+            idToken: newToken.data?.idToken,
+            refreshToken: newToken.data?.refreshToken,
+          });
+      }
+
+    } catch (error) {
+      console.error("Failed to refresh token:", error);
+      signOut();
+    }
+  };
+
+  // React Query handles refetching on interval + focus
+  useQuery({
+    queryKey: ["refresh-token"],
+    queryFn: () => handleRefreshToken(),
+    refetchInterval: 30 * 60 * 1000, // every 30 minutes
+    refetchIntervalInBackground: false, // even when tab is hidden
+    refetchOnWindowFocus: true, // also refresh when user returns to tab
+    retry: false, // don't retry repeatedly if refresh fails
+    enabled: !!tokenStorage.getAuthToken(), // only run if logged in
+  });
+}

package/src/modules/auth/index.ts

@@ -12,8 +12,14 @@ export type {
 } from './types';
 
 // Export hooks and providers
-// export { useAuth } from './hooks';
-export { useAuth, AuthProvider } from './providers';
+export { AuthProvider } from './providers';
+
+// Export auth hooks from store
+export { useAuth } from './store/authStore';
+
+// Export auth hooks
+export { useGoogleLogin } from './hooks';
+export type { UseGoogleLoginOptions, UseGoogleLoginReturn } from './hooks';
 
 // Export constants and helpers
 export * from './constants';

package/src/modules/auth/providers/AuthProvider.tsx

@@ -1,207 +1,235 @@
-import { createContext, useEffect, ReactNode, useContext } from 'react';
-import { AuthService, AuthCallbacks } from '../types';
-
-import { useAppSelector, useAppDispatch } from '../../../store/hooks';
 import {
-  selectUser,
-  selectIsSignedIn,
-  selectIsLoading,
-  signIn as signInAction,
-  signOut as signOutAction,
-  updateScanStatus as updateScanStatusAction,
-  refreshUser as refreshUserAction,
-  setPending,
-  initializeFromStorage,
-} from '../store/authSlice';
-
-import { AuthResponse, UserData } from '../types';
-
-export interface AuthContextType {
-  authService: AuthService;
-  authCallbacks?: AuthCallbacks;
-  // User state
-  user: UserData;
-  isSignedIn: boolean;
-  isLoading: boolean;
-
-  // Auth actions
-  signInWithCredential: (email: string, password: string) => Promise<AuthResponse>;
-  signInWithGoogle: () => Promise<AuthResponse | null>;
-  signUp: (email: string, password: string) => Promise<AuthResponse>;
-  signOut: () => Promise<void>;
-
-  // Password actions
-  forgotPassword: (email: string) => Promise<void>;
-  sendEmailVerification: () => Promise<void>;
-  changePassword: (newPassword: string) => Promise<void>;
-
-  // User management
-  updateScanStatus: (status: boolean) => void;
-  refreshUser: (userData: UserData) => void;
-
+  AuthenticationProvider,
+  useAuthenticationHeaders,
+  tokenStorage,
+} from "@phygitallabs/authentication";
+import { useEffect } from "react";
+import { useAuthStore } from "../store/authStore";
+import { transformProtoUserData } from "../utils/user";
+import { userService } from "@phygitallabs/api-core";
+import { QueryClient } from "@tanstack/react-query";
+
+import { usePGLCoreService } from "@phygitallabs/api-core";
+import { useAchievementService } from "@phygitallabs/achievement";
+import { useRewardService } from "@phygitallabs/reward";
+import { useGenerateCertificateService } from "@phygitallabs/generate-certificate";
+import { useTokenRefresher } from "../hooks/useTokenRefresher";
+
+interface AuthProviderProps {
+  children: React.ReactNode;
+  baseURL: string;
+  queryClient: QueryClient;
 }
 
-export const AuthContext = createContext<AuthContextType | null>(null);
-
-export interface AuthProviderProps {
-  children: ReactNode;
-  authService: AuthService;
-  authCallbacks?: AuthCallbacks;
-}
+// Inner component that has access to the authentication context
+const AuthStateManager = () => {
+  const { updateHeaders } = useAuthenticationHeaders();
 
-export function AuthProvider({ children, authService, authCallbacks }: AuthProviderProps) {
-  const dispatch = useAppDispatch();
+  const { updateHeaders: updateHeadersPGL, coreApi } = usePGLCoreService();
+  const { updateHeaders: updateHeadersAchievement } = useAchievementService();
+  const { updateHeaders: updateHeadersReward } = useRewardService();
+  const { updateHeaders: updateHeadersGenerateCertificate } =
+    useGenerateCertificateService();
 
   useEffect(() => {
-    // Initialize auth state from localStorage
-    dispatch(initializeFromStorage());
-
-    // Set up auth state listener
-    const unsubscribe = authService.onAuthStateChanged((user) => {
-      if (user) {
-        dispatch(signInAction(user));
-
-        // Use auth callback for user identification
-        if (authCallbacks?.onUserIdentify && user.email) {
-          authCallbacks.onUserIdentify({
-            email: user.email,
-            name: user.displayName,
-            avatar: user.avatar,
-            uid: user.uid,
-          });
+    // Initialize the auth store to set isSignedIn based on persisted token
+    useAuthStore.getState().actions.initialize();
+    // Initial setup - set headers if token exists
+    const token = tokenStorage.getAuthToken();
+    if (token) {
+      updateHeaders({
+        Authorization: `Bearer ${token}`,
+      });
+
+      updateHeadersPGL({
+        Authorization: `Bearer ${token}`,
+      });
+
+      updateHeadersAchievement({
+        Authorization: `Bearer ${token}`,
+      });
+
+      updateHeadersReward({
+        Authorization: `Bearer ${token}`,
+      });
+
+      updateHeadersGenerateCertificate({
+        Authorization: `Bearer ${token}`,
+      });
+
+      // Sync user.accessToken with actual token from localStorage
+      const { user } = useAuthStore.getState();
+      if (user && user.accessToken !== token) {
+        useAuthStore.getState().actions.setUser({
+          ...user,
+          accessToken: token,
+        });
+      }
+    }
+
+    let previousIsSignedIn = useAuthStore.getState().isSignedIn;
+
+    const unsub = useAuthStore.subscribe(
+      (state: any) => [state.isSignedIn, state.user],
+      async ([isSignedIn]: [any]) => {
+        // Only run when isSignedIn actually changes
+        if (isSignedIn === previousIsSignedIn) {
+          return;
         }
 
-        // Notify about successful sign in
-        if (authCallbacks?.onSignInSuccess) {
-          authCallbacks.onSignInSuccess(user);
+        previousIsSignedIn = isSignedIn as boolean;
+
+        if (isSignedIn) {
+          const token = tokenStorage.getAuthToken();
+
+          if (token) {
+            // Update API headers with the new token
+            updateHeaders({
+              Authorization: `Bearer ${token}`,
+            });
+            updateHeadersPGL({
+              Authorization: `Bearer ${token}`,
+            });
+
+            updateHeadersAchievement({
+              Authorization: `Bearer ${token}`,
+            });
+
+            updateHeadersReward({
+              Authorization: `Bearer ${token}`,
+            });
+
+            updateHeadersGenerateCertificate({
+              Authorization: `Bearer ${token}`,
+            });
+
+            try {
+              // Fetch user profile when signed in
+              const userApi = userService(coreApi);
+              const userProfile = await userApi.getMyProfile();
+              const transformedUserData = transformProtoUserData(
+                userProfile,
+                token
+              );
+
+              useAuthStore.getState().actions.setUser(transformedUserData);
+            } catch (error) {
+              useAuthStore.getState().actions.signOut();
+            }
+          }
+
+          // Trigger auth state change event
+          const { eventCallbacks, user } = useAuthStore.getState();
+          eventCallbacks?.onAuthStateChange?.(user, true);
+        } else {
+          // Clear headers when logged out
+          updateHeaders({});
+          updateHeadersPGL({});
+          updateHeadersAchievement({
+            Authorization: ``,
+          });
+          updateHeadersReward({
+            Authorization: ``,
+          });
+          updateHeadersGenerateCertificate({
+            Authorization: ``,
+          });
+
+          // Trigger auth state change event
+          const { eventCallbacks } = useAuthStore.getState();
+          eventCallbacks?.onAuthStateChange?.(null, false);
         }
-      } else {
-        dispatch(signOutAction());
+      }
+    );
+
+    // Listen for token changes (for refresh scenarios)
+    const unsubTokenChange = tokenStorage.addTokenChangeListener(async () => {
+      const { isSignedIn, user } = useAuthStore.getState();
+      if (isSignedIn) {
+        const token = tokenStorage.getAuthToken();
+        if (token) {
+          updateHeaders({
+            Authorization: `Bearer ${token}`,
+          });
+          updateHeadersPGL({
+            Authorization: `Bearer ${token}`,
+          });
+          updateHeadersAchievement({
+            Authorization: `Bearer ${token}`,
+          });
+          updateHeadersReward({
+            Authorization: `Bearer ${token}`,
+          });
+          updateHeadersGenerateCertificate({
+            Authorization: `Bearer ${token}`,
+          });
 
-        // Use auth callback for reset
-        if (authCallbacks?.onTrackingReset) {
-          authCallbacks.onTrackingReset();
+          // Sync user.accessToken with actual token from localStorage
+          if (user && user.accessToken !== token) {
+            useAuthStore.getState().actions.setUser({
+              ...user,
+              accessToken: token,
+            });
+          }
+        } else {
+          // Token was cleared, sign out
+          useAuthStore.getState().actions.signOut();
+          updateHeaders({});
+          updateHeadersPGL({});
+          updateHeadersAchievement({
+            Authorization: ``,
+          });
+          updateHeadersReward({
+            Authorization: ``,
+          });
+          updateHeadersGenerateCertificate({
+            Authorization: ``,
+          });
         }
       }
-      dispatch(setPending(false));
     });
 
     return () => {
-      unsubscribe();
+      unsub();
+      unsubTokenChange();
     };
-  }, [authService, dispatch, authCallbacks]);
-
-  // Redux selectors
-  const user = useAppSelector(selectUser);
-  const isSignedIn = useAppSelector(selectIsSignedIn);
-  const isLoading = useAppSelector(selectIsLoading);
-
-  // Auth actions with auth callbacks
-  const signInWithCredential = async (email: string, password: string): Promise<AuthResponse> => {
-    const result = await authService.signInWithEmailAndPassword(email, password);
-
-    if (result.data && authCallbacks?.onSignInSuccess) {
-      authCallbacks.onSignInSuccess(result.data);
-    } else if (result.errorCode && authCallbacks?.onSignInError) {
-      authCallbacks.onSignInError(result.errorCode);
-    }
-
-    return result;
-  };
-
-  const signInWithGoogle = async (): Promise<AuthResponse | null> => {
-    const result = await authService.signInWithGoogle();
-
-    if (result.data && authCallbacks?.onSignInSuccess) {
-      authCallbacks.onSignInSuccess(result.data);
-      return result;
-
-    } else if (result.errorCode && authCallbacks?.onSignInError) {
-      authCallbacks.onSignInError(result.errorCode);
-    }
-
-    return null;
-  };
-
-  const signUp = async (email: string, password: string): Promise<AuthResponse> => {
-    const result = await authService.signUp(email, password);
-
-    if (result.data && authCallbacks?.onSignUpSuccess) {
-      authCallbacks.onSignUpSuccess(result.data);
-    } else if (result.errorCode && authCallbacks?.onSignUpError) {
-      authCallbacks.onSignUpError(result.errorCode);
-    }
-
-    return result;
-  };
-
-  const signOut = async (): Promise<void> => {
-    await authService.signOut();
-    dispatch(signOutAction());
-
-    if (authCallbacks?.onSignOutSuccess) {
-      authCallbacks.onSignOutSuccess();
-    }
-  };
-
-  // Password actions
-  const forgotPassword = async (email: string): Promise<void> => {
-    return await authService.sendPasswordResetEmail(email);
-  };
-
-  const sendEmailVerification = async (): Promise<void> => {
-    return await authService.sendEmailVerification();
-  };
-
-  const changePassword = async (newPassword: string): Promise<void> => {
-    return await authService.changePassword(newPassword);
-  };
-
-  // User management
-  const updateScanStatus = (status: boolean): void => {
-    dispatch(updateScanStatusAction(status));
-  };
-
-  const refreshUser = (userData: UserData): void => {
-    dispatch(refreshUserAction(userData));
-  };
-
-  const contextValue: AuthContextType = {
-    authService,
-    authCallbacks,
-    // User state
-    user,
-    isSignedIn,
-    isLoading,
-
-    // Auth actions
-    signInWithCredential,
-    signInWithGoogle,
-    signUp,
-    signOut,
-
-    // Password actions
-    forgotPassword,
-    sendEmailVerification,
-    changePassword,
-
-    // User management
-    updateScanStatus,
-    refreshUser,
+  }, [
+    updateHeaders,
+    updateHeadersPGL,
+    updateHeadersAchievement,
+    updateHeadersReward,
+    updateHeadersGenerateCertificate,
+    coreApi,
+  ]);
+
+  return null;
+};
+
+const TokenRefresher = () => {
+  useTokenRefresher();
+  return null;
+};
+
+export const AuthProvider = ({
+  children,
+  baseURL,
+  queryClient,
+}: AuthProviderProps) => {
+  const axiosConfig = {
+    headers: {
+      "Content-Type": "application/json",
+    },
   };
 
   return (
-    <AuthContext.Provider value={contextValue}>
+    <AuthenticationProvider
+      axiosConfig={axiosConfig}
+      baseURL={baseURL}
+      queryClient={queryClient}
+    >
+      <AuthStateManager />
+      <TokenRefresher />
       {children}
-    </AuthContext.Provider>
+    </AuthenticationProvider>
   );
-}
-
-export const useAuth = () => {
-  const authContext = useContext(AuthContext);
-  if (!authContext) {
-    throw new Error('useAuth must be used within an AuthProvider');
-  }
-
-  return authContext;
-};
+};