Step 2 - Implement Comprehensive Authentication Hooks and Cognito Integration

- Refactor authentication flow to use AWS Cognito
- Add granular authentication hooks for various auth operations
- Implement user token and current user retrieval from Cognito
- Update AuthContext and AuthProvider to support new authentication methods
- Add support for email/password and social sign-in flows

Author: jkestering-modus

frontend/src/common/api/useGetCurrentUser.ts

@@ -1,33 +1,42 @@
 import { useQuery } from '@tanstack/react-query';
 
-import { User } from 'common/models/user';
-import { QueryKey, StorageKey } from 'common/utils/constants';
-import storage from 'common/utils/storage';
+import { CognitoUser } from 'common/models/user';
+import { QueryKey } from 'common/utils/constants';
+import CognitoAuthService from 'common/services/auth/cognito-auth-service';
+import { mapCognitoUserToAppUser } from 'common/utils/user-mapper';
 
 /**
- * An API hook which fetches the currently authenticated `User`.
- * @returns Returns a `UseQueryResult` with `User` data.
+ * An API hook which fetches the currently authenticated user from Cognito.
+ * @returns Returns a `UseQueryResult` with `CognitoUser` data.
  */
 export const useGetCurrentUser = () => {
   /**
-   * Fetch the details about the currently authenticated `User`.
-   * @returns A Promise which resolves to a `User`.
+   * Fetch the details about the currently authenticated user.
+   * @returns A Promise which resolves to a `CognitoUser`.
    */
-  const getCurentUser = (): Promise<User> => {
-    // TODO: This is contrived, example logic. Replace with an actual
-    //       integration with your Identity Provider, IdP.
-    return new Promise((resolve, reject) => {
-      try {
-        const storedUser = storage.getItem(StorageKey.User);
-        if (storedUser) {
-          const user = JSON.parse(storedUser) as unknown as User;
-          return resolve(user);
-        }
-        return reject(new Error('Not found.'));
-      } catch (err) {
-        return reject(err);
+  const getCurentUser = async (): Promise<CognitoUser> => {
+    try {
+      // Get current user from Cognito
+      const cognitoUser = await CognitoAuthService.getCurrentUser();
+      
+      if (!cognitoUser) {
+        throw new Error('User not found');
       }
-    });
+      
+      // Map Cognito user data to our application's user model
+      const userData = {
+        username: cognitoUser.username || '',
+        attributes: {
+          // Extract whatever attributes are available from the user object
+          email: cognitoUser.signInDetails?.loginId || '',
+        }
+      };
+      
+      return mapCognitoUserToAppUser(userData);
+    } catch (error) {
+      console.error('Error getting current user:', error);
+      throw error;
+    }
   };
 
   return useQuery({

frontend/src/common/api/useGetUserTokens.ts

@@ -1,44 +1,34 @@
 import { useQuery } from '@tanstack/react-query';
-import dayjs from 'dayjs';
 
 import { UserTokens } from 'common/models/auth';
-import { QueryKey, StorageKey } from 'common/utils/constants';
-import storage from 'common/utils/storage';
+import { QueryKey } from 'common/utils/constants';
+import CognitoAuthService from 'common/services/auth/cognito-auth-service';
 
 /**
- * An API hook which fetches tokens from the application Identity Provider, IdP.
- * This hook contains example logic which should be replaced with an actual
- * IdP integration.
+ * An API hook which fetches tokens from AWS Cognito.
  * @returns Returns a `UseQueryResult` with `UserTokens` data.
  */
 export const useGetUserTokens = () => {
   const getUserTokens = async (): Promise<UserTokens> => {
-    // TODO: replace with logic to fetch tokens from your IdP
-    return new Promise((resolve, reject) => {
-      const storedTokens = storage.getItem(StorageKey.UserTokens);
-
-      if (storedTokens) {
-        // tokens found
-        const tokens = JSON.parse(storedTokens) as unknown as UserTokens;
-        const now = dayjs();
-        if (now.isBefore(tokens.expires_at)) {
-          // tokens not expired
-          return resolve(tokens);
-        } else {
-          // tokens expired
-          return reject(new Error('Tokens expired.'));
-        }
+    try {
+      // Get tokens from Cognito
+      const tokens = await CognitoAuthService.getUserTokens();
+      
+      if (!tokens) {
+        throw new Error('Tokens not found.');
       }
-
-      // tokens not found
-      return reject(new Error('Tokens not found.'));
-    });
+      
+      return tokens;
+    } catch (error) {
+      console.error('Error getting user tokens:', error);
+      throw error;
+    }
   };
 
   return useQuery({
     queryKey: [QueryKey.UserTokens],
     queryFn: () => getUserTokens(),
     retry: 0,
-    refetchInterval: 60000,
+    refetchInterval: 60000, // Refresh tokens every minute
   });
 };

frontend/src/common/hooks/useAuth.ts

@@ -9,3 +9,75 @@ import { AuthContext, AuthContextValue } from 'common/providers/AuthContext';
 export const useAuth = (): AuthContextValue => {
   return useContext(AuthContext);
 };
+
+/**
+ * Check if a user is authenticated
+ * @returns {boolean} True if authenticated, false otherwise
+ */
+export const useIsAuthenticated = (): boolean => {
+  const { isAuthenticated } = useAuth();
+  return isAuthenticated;
+};
+
+/**
+ * Get the current user
+ * @returns The current user or undefined if not authenticated
+ */
+export const useCurrentUser = () => {
+  const { user } = useAuth();
+  return user;
+};
+
+/**
+ * Get authentication loading state
+ * @returns True if authentication is in progress, false otherwise
+ */
+export const useAuthLoading = (): boolean => {
+  const { isLoading } = useAuth();
+  return isLoading;
+};
+
+/**
+ * Get authentication error
+ * @returns The current authentication error or undefined
+ */
+export const useAuthError = () => {
+  const { error, clearError } = useAuth();
+  return { error, clearError };
+};
+
+/**
+ * Hook for using sign in functionality
+ * @returns The sign in function and loading state
+ */
+export const useSignIn = () => {
+  const { signIn, isLoading } = useAuth();
+  return { signIn, isLoading };
+};
+
+/**
+ * Hook for using sign up functionality
+ * @returns The sign up function and loading state
+ */
+export const useSignUp = () => {
+  const { signUp, isLoading } = useAuth();
+  return { signUp, isLoading };
+};
+
+/**
+ * Hook for using sign out functionality
+ * @returns The sign out function and loading state
+ */
+export const useSignOut = () => {
+  const { signOut, isLoading } = useAuth();
+  return { signOut, isLoading };
+};
+
+/**
+ * Hook for using social sign in functionality
+ * @returns Functions for Google and Apple sign in
+ */
+export const useSocialSignIn = () => {
+  const { signInWithGoogle, signInWithApple, isLoading } = useAuth();
+  return { signInWithGoogle, signInWithApple, isLoading };
+};

frontend/src/common/hooks/useAuthOperations.ts

@@ -0,0 +1,190 @@
+import { useState } from 'react';
+import { AuthError } from 'common/models/auth';
+import { CognitoUser } from 'common/models/user';
+import CognitoAuthService from 'common/services/auth/cognito-auth-service';
+import { formatAuthError } from 'common/utils/auth-errors';
+import { mapCognitoUserToAppUser } from 'common/utils/user-mapper';
+
+/**
+ * Hook for authentication operations
+ * @returns Authentication methods and state
+ */
+export const useAuthOperations = () => {
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<AuthError | undefined>(undefined);
+  const [user, setUser] = useState<CognitoUser | undefined>(undefined);
+
+  /**
+   * Clear any authentication errors
+   */
+  const clearError = () => setError(undefined);
+
+  /**
+   * Sign in with email and password
+   * @param email User's email
+   * @param password User's password
+   */
+  const signIn = async (email: string, password: string): Promise<void> => {
+    setIsLoading(true);
+    clearError();
+    
+    try {
+      await CognitoAuthService.signIn(email, password);
+      // Convert the result to the structure expected by mapCognitoUserToAppUser
+      const userData = {
+        username: email,
+        attributes: {
+          email,
+          // Other attributes would be filled from the session if needed
+        }
+      };
+      const cognitoUser = mapCognitoUserToAppUser(userData);
+      setUser(cognitoUser);
+    } catch (err) {
+      setError(formatAuthError(err));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Sign up a new user
+   * @param email User's email
+   * @param password User's password
+   * @param firstName User's first name
+   * @param lastName User's last name
+   */
+  const signUp = async (
+    email: string, 
+    password: string, 
+    firstName: string, 
+    lastName: string
+  ): Promise<void> => {
+    setIsLoading(true);
+    clearError();
+    
+    try {
+      await CognitoAuthService.signUp(email, password, { firstName, lastName });
+      // Don't set the user yet - confirmation is required first
+    } catch (err) {
+      setError(formatAuthError(err));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Confirm a user's sign up with verification code
+   * @param email User's email
+   * @param code Verification code
+   */
+  const confirmSignUp = async (email: string, code: string): Promise<void> => {
+    setIsLoading(true);
+    clearError();
+    
+    try {
+      await CognitoAuthService.confirmSignUp(email, code);
+      // User confirmed, but not yet signed in
+    } catch (err) {
+      setError(formatAuthError(err));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Resend confirmation code to user's email
+   * @param email User's email
+   */
+  const resendConfirmationCode = async (email: string): Promise<void> => {
+    setIsLoading(true);
+    clearError();
+    console.log('resendConfirmationCode', email);
+    
+    try {
+      // This would need to be implemented in the Cognito service
+      // For now, we'll throw an error
+      throw new Error('Not implemented');
+    } catch (err) {
+      setError(formatAuthError(err));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Sign out the current user
+   */
+  const signOut = async (): Promise<void> => {
+    setIsLoading(true);
+    clearError();
+    
+    try {
+      await CognitoAuthService.signOut();
+      setUser(undefined);
+    } catch (err) {
+      setError(formatAuthError(err));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Sign in with Google
+   */
+  const signInWithGoogle = async (): Promise<void> => {
+    setIsLoading(true);
+    clearError();
+    
+    try {
+      await CognitoAuthService.federatedSignIn('Google');
+      // Note: This doesn't complete the sign-in flow.
+      // The user will be redirected to Google and then back to your app
+      // Your app needs to handle the redirect URI
+    } catch (err) {
+      setError(formatAuthError(err));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  /**
+   * Sign in with Apple
+   */
+  const signInWithApple = async (): Promise<void> => {
+    setIsLoading(true);
+    clearError();
+    
+    try {
+      await CognitoAuthService.federatedSignIn('SignInWithApple');
+      // Note: This doesn't complete the sign-in flow.
+      // The user will be redirected to Apple and then back to your app
+      // Your app needs to handle the redirect URI
+    } catch (err) {
+      setError(formatAuthError(err));
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return {
+    isLoading,
+    error,
+    user,
+    clearError,
+    signIn,
+    signUp,
+    confirmSignUp,
+    resendConfirmationCode,
+    signOut,
+    signInWithGoogle,
+    signInWithApple,
+  };
+};