Phase 5 - Implement OAuth Social Login with Cognito and Redirect Handling

- Add OAuth redirect handler for social login (Google, Apple)
- Create SocialLoginButtons component with styling
- Update Cognito configuration for OAuth flows
- Enhance authentication service to support federated sign-in
- Add OAuth-related translations and error handling
- Update AppRouter to include OAuth redirect route

Author: jkestering-modus

frontend/src/common/components/Router/AppRouter.tsx

@@ -8,6 +8,7 @@ import SignInPage from 'pages/Auth/SignIn/SignInPage';
 import SignUpPage from 'pages/Auth/SignUp/SignUpPage';
 import SignOutPage from 'pages/Auth/SignOut/SignOutPage';
 import VerificationPage from 'pages/Auth/Verify/VerificationPage';
+import OAuthRedirectHandler from 'pages/Auth/OAuth/OAuthRedirectHandler';
 
 /**
  * The application router.  This is the main router for the Ionic React
@@ -33,6 +34,7 @@ const AppRouter = (): JSX.Element => {
         <Route exact path="/auth/signin" render={() => <SignInPage />} />
         <Route exact path="/auth/signup" render={() => <SignUpPage />} />
         <Route exact path="/auth/verify" render={() => <VerificationPage />} />
+        <Route exact path="/auth/oauth" render={() => <OAuthRedirectHandler />} />
         <Route exact path="/auth/signout" render={() => <SignOutPage />} />
         <Route exact path="/">
           <Redirect to="/tabs" />

frontend/src/common/components/SocialLogin/SocialLoginButtons.scss

@@ -0,0 +1,15 @@
+.ls-social-login-buttons {
+  margin-top: 1rem;
+
+  &__google {
+    --background-hover: #f2f2f2;
+    --color-hover: #4285f4;
+    --border-color: #dddddd;
+  }
+
+  &__apple {
+    --background-hover: #000000;
+    --color-hover: #ffffff;
+    --border-color: #333333;
+  }
+} 

frontend/src/common/components/SocialLogin/SocialLoginButtons.tsx

@@ -0,0 +1,75 @@
+import { IonButton, IonRow, IonCol, IonText } from '@ionic/react';
+import { useTranslation } from 'react-i18next';
+import './SocialLoginButtons.scss';
+
+import { BaseComponentProps } from '../types';
+import Icon from '../Icon/Icon';
+import { useSocialSignIn } from 'common/hooks/useAuth';
+
+/**
+ * Properties for the `SocialLoginButtons` component.
+ */
+interface SocialLoginButtonsProps extends BaseComponentProps {
+  disabled?: boolean;
+}
+
+/**
+ * A component that renders social login buttons (Google, Apple)
+ * @param {SocialLoginButtonsProps} props - Component properties.
+ * @returns {JSX.Element} JSX
+ */
+const SocialLoginButtons = ({ 
+  className, 
+  disabled = false, 
+  testid = 'social-login-buttons' 
+}: SocialLoginButtonsProps): JSX.Element => {
+  const { t } = useTranslation();
+  const { signInWithGoogle, signInWithApple, isLoading } = useSocialSignIn();
+
+  const isButtonDisabled = disabled || isLoading;
+
+  return (
+    <div className={`ls-social-login-buttons ${className || ''}`} data-testid={testid}>
+      <IonRow className="ion-text-center ion-padding">
+        <IonCol>
+          <IonText color="medium">
+            {t('or-signin-with', { ns: 'auth' })}
+          </IonText>
+        </IonCol>
+      </IonRow>
+
+      <IonRow>
+        <IonCol>
+          <IonButton
+            expand="block"
+            fill="outline"
+            color="medium"
+            onClick={signInWithGoogle}
+            disabled={isButtonDisabled}
+            data-testid={`${testid}-button-google`}
+            className="ls-social-login-buttons__google"
+          >
+            <Icon icon="google" slot="start" />
+            Google
+          </IonButton>
+        </IonCol>
+        <IonCol>
+          <IonButton
+            expand="block"
+            fill="outline"
+            color="dark"
+            onClick={signInWithApple}
+            disabled={isButtonDisabled}
+            data-testid={`${testid}-button-apple`}
+            className="ls-social-login-buttons__apple"
+          >
+            <Icon icon="apple" slot="start" />
+            Apple
+          </IonButton>
+        </IonCol>
+      </IonRow>
+    </div>
+  );
+};
+
+export default SocialLoginButtons; 

frontend/src/common/config/aws-config.ts

@@ -8,21 +8,29 @@
 export const REGION = 'us-east-1'; // Replace with your AWS region
 
 /**
- * Cognito Configuration
+ * App configuration
+ */
+export const APP_CONFIG = {
+  // App URLs for OAuth redirects
+  localRedirectSignIn: import.meta.env.VITE_REDIRECT_SIGN_IN || 'http://localhost:3000/',
+  localRedirectSignOut: import.meta.env.VITE_REDIRECT_SIGN_OUT || 'http://localhost:3000/',
+  
+  // For deployed environments, these would be different URLs
+  hostedRedirectSignIn: import.meta.env.VITE_HOSTED_REDIRECT_SIGN_IN || 'https://yourapp.com/',
+  hostedRedirectSignOut: import.meta.env.VITE_HOSTED_REDIRECT_SIGN_OUT || 'https://yourapp.com/',
+};
+
+/**
+ * Auth/Cognito Configuration
  */
 export const COGNITO_CONFIG = {
   // User Pool
   USER_POOL_ID: import.meta.env.VITE_COGNITO_USER_POOL_ID || 'us-east-1_xxxxxxxx', // Replace with your User Pool ID
   USER_POOL_WEB_CLIENT_ID: import.meta.env.VITE_COGNITO_APP_CLIENT_ID || 'xxxxxxxxxxxxxxxxxxxxxxxxxx', // Replace with your App Client ID
 
   // OAuth Configuration (for Social Login)
-  OAUTH: {
-    domain: import.meta.env.VITE_COGNITO_DOMAIN || 'your-domain.auth.us-east-1.amazoncognito.com', // Replace with your Cognito domain
-    scope: ['email', 'profile', 'openid'],
-    redirectSignIn: import.meta.env.VITE_REDIRECT_SIGN_IN || 'http://localhost:3000/',
-    redirectSignOut: import.meta.env.VITE_REDIRECT_SIGN_OUT || 'http://localhost:3000/',
-    responseType: 'code' as const
-  },
+  OAUTH_DOMAIN: import.meta.env.VITE_COGNITO_DOMAIN || 'your-domain.auth.us-east-1.amazoncognito.com', // Replace with your Cognito domain
+  OAUTH_SCOPES: ['email', 'profile', 'openid'],
 
   // Auth mechanisms
   AUTH_MECHANISMS: ['EMAIL'],
@@ -31,6 +39,22 @@ export const COGNITO_CONFIG = {
   SOCIAL_PROVIDERS: ['Google', 'SignInWithApple'],
 };
 
+/**
+ * Get redirect URLs for OAuth based on the environment
+ * In development, we use localhost, in production we use the hosted URLs
+ */
+const redirectUrls = {
+  // For local development
+  signIn: [APP_CONFIG.localRedirectSignIn],
+  signOut: [APP_CONFIG.localRedirectSignOut],
+};
+
+// If we're in a production-like environment, add the hosted URLs
+if (import.meta.env.PROD) {
+  redirectUrls.signIn.push(APP_CONFIG.hostedRedirectSignIn);
+  redirectUrls.signOut.push(APP_CONFIG.hostedRedirectSignOut);
+}
+
 /**
  * Amplify Configuration object for initializing Amplify (V6 format)
  */
@@ -44,10 +68,10 @@ export const amplifyConfig = {
         phone: false,
         username: false,
         oauth: {
-          domain: COGNITO_CONFIG.OAUTH.domain,
-          scopes: COGNITO_CONFIG.OAUTH.scope,
-          redirectSignIn: [COGNITO_CONFIG.OAUTH.redirectSignIn],
-          redirectSignOut: [COGNITO_CONFIG.OAUTH.redirectSignOut],
+          domain: COGNITO_CONFIG.OAUTH_DOMAIN,
+          scopes: COGNITO_CONFIG.OAUTH_SCOPES,
+          redirectSignIn: redirectUrls.signIn,
+          redirectSignOut: redirectUrls.signOut,
           responseType: 'code' as const
         }
       }

frontend/src/common/services/auth/cognito-auth-service.ts

@@ -1,8 +1,16 @@
 import { signIn, signUp, confirmSignUp, signOut, 
-  fetchAuthSession, getCurrentUser, resendSignUpCode } from '@aws-amplify/auth';
+  fetchAuthSession, getCurrentUser, resendSignUpCode, signInWithRedirect,
+  type AuthUser } from '@aws-amplify/auth';
 import { Amplify } from 'aws-amplify';
 import { amplifyConfig } from '../../config/aws-config';
 import { UserTokens } from '../../models/auth';
+import { AuthProvider } from '@aws-amplify/auth/dist/esm/types/inputs';
+
+// Provider enum for OAuth
+enum OAuthProvider {
+  Google = 'Google',
+  Apple = 'Apple'
+}
 
 /**
  * Initialize AWS Amplify with the configuration
@@ -105,12 +113,12 @@ export class CognitoAuthService {
    * Get current authenticated user
    * @returns Promise resolving to the current authenticated user
    */
-  static async getCurrentUser() {
+  static async getCurrentUser(): Promise<AuthUser | null> {
     try {
       return await getCurrentUser();
-    } catch (_error) {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_) {
       // Not throwing here as this is often used to check if a user is signed in
-      console.error('Error getting current user:', _error);
       return null;
     }
   }
@@ -122,8 +130,8 @@ export class CognitoAuthService {
   static async getCurrentSession() {
     try {
       return await fetchAuthSession();
-    } catch (_error) {
-      console.error('Error getting current session:', _error);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_) {
       return null;
     }
   }
@@ -152,26 +160,36 @@ export class CognitoAuthService {
         expires_in: Math.floor((new Date(expirationTime * 1000).getTime() - Date.now()) / 1000),
         expires_at: new Date(expirationTime * 1000).toISOString(),
       };
-    } catch (_error) {
-      this.handleAuthError(_error);
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    } catch (_) {
       return null;
     }
   }
 
   /**
    * Initiate social sign in (Google or Apple)
    * @param provider 'Google' or 'SignInWithApple'
-   * @returns Promise
+   * @returns Promise resolving to void (redirects to the IdP)
    */
-  static async federatedSignIn(provider: 'Google' | 'SignInWithApple') {
+  static async federatedSignIn(provider: 'Google' | 'SignInWithApple'): Promise<void> {
     try {
-      // This needs OAuth configuration in the Amplify setup
-      // In AWS Amplify v6, we'd use a different approach for federated sign in
-      // Placeholder for now
-      console.warn('federatedSignIn is not implemented in this version', provider);
-      // In production, federated sign-in would be handled differently
-      // For example, using a hosted UI or custom implementation
-      return null;
+      // Map our provider names to Cognito's provider identifiers
+      const providerMap: Record<string, string> = {
+        'Google': OAuthProvider.Google,
+        'SignInWithApple': OAuthProvider.Apple
+      };
+      
+      // Get the OAuth provider
+      const oauthProvider = providerMap[provider];
+      if (!oauthProvider) {
+        throw new Error(`Unsupported provider: ${provider}`);
+      }
+      
+      // Initiate the OAuth redirect flow
+      await signInWithRedirect({ provider: oauthProvider as AuthProvider });
+      
+      // This function will redirect the browser and not return
+      // The user will be redirected back to the app after authentication
     } catch (error) {
       this.handleAuthError(error);
       throw error;

frontend/src/common/utils/i18n/resources/en/auth.json

@@ -1,7 +1,8 @@
 {
   "error": {
     "unable-to-verify": "We were unable to verify your credentials. Please try again.",
-    "no-email": "Email address is required for verification."
+    "no-email": "Email address is required for verification.",
+    "oauth-redirect": "There was an error processing your social login"
   },
   "info-username": {
     "part1": "This example application uses ",
@@ -39,6 +40,13 @@
     "success": "Email verified successfully!",
     "code-resent": "A new verification code has been sent to your email."
   },
+  "oauth": {
+    "processing": "Processing your login...",
+    "redirecting": "Redirecting...",
+    "success": "Successfully signed in!",
+    "google": "Continue with Google",
+    "apple": "Continue with Apple"
+  },
   "validation": {
     "numeric": "Must contain only numbers",
     "exact-length": "Must be exactly {{length}} characters",

frontend/src/pages/Auth/OAuth/OAuthRedirectHandler.scss

@@ -0,0 +1,15 @@
+.ls-oauth-handler {
+  .ls-oauth-handler__content {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 2rem;
+  }
+
+  .ls-oauth-handler__spinner {
+    margin-top: 2rem;
+  }
+}