Fix error handling

Author: thiva-k

packages/react/src/components/presentation/SignIn/component-driven/SignIn.tsx

@@ -198,13 +198,15 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
     setFlowId(null);
     setIsFlowInitialized(false);
     sessionStorage.removeItem('asgardeo_session_data_key');
+    // Reset refs to allow new flows to start properly
+    oauthCodeProcessedRef.current = false;
   };
 
   /**
    * Parse URL parameters used in flows.
    */
   const getUrlParams = () => {
-    const urlParams = new URL(window.location.href).searchParams;
+    const urlParams = new URL(window?.location?.href ?? '').searchParams;
     return {
       code: urlParams.get('code'),
       error: urlParams.get('error'),
@@ -242,6 +244,7 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
    * Clean up OAuth-related URL parameters from the browser URL.
    */
   const cleanupOAuthUrlParams = (includeNonce = false): void => {
+    if (!window?.location?.href) return;
     const url = new URL(window.location.href);
     url.searchParams.delete('error');
     url.searchParams.delete('error_description');
@@ -250,7 +253,19 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
     if (includeNonce) {
       url.searchParams.delete('nonce');
     }
-    window.history.replaceState({}, '', url.toString());
+    window?.history?.replaceState({}, '', url.toString());
+  };
+
+  /**
+   * Clean up flow-related URL parameters (flowId, sessionDataKey) from the browser URL.
+   * Used after flowId is set in state to prevent using invalidated flowId from URL.
+   */
+  const cleanupFlowUrlParams = (): void => {
+    if (!window?.location?.href) return;
+    const url = new URL(window.location.href);
+    url.searchParams.delete('flowId');
+    url.searchParams.delete('sessionDataKey');
+    window?.history?.replaceState({}, '', url.toString());
   };
 
   /**
@@ -266,16 +281,17 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
       'SIGN_IN_ERROR',
       'react',
     );
-    setFlowError(err);
-    onError?.(err);
+    setError(err);
     cleanupOAuthUrlParams(true);
   };
 
   /**
    * Set error state and call onError callback.
+   * Ensures isFlowInitialized is true so errors can be displayed in the UI.
    */
   const setError = (error: Error): void => {
     setFlowError(error);
+    setIsFlowInitialized(true);
     onError?.(error);
   };
 
@@ -286,7 +302,7 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
     if (response.type === EmbeddedSignInFlowTypeV2.Redirection) {
       const redirectURL = (response.data as any)?.redirectURL || (response as any)?.redirectURL;
 
-      if (redirectURL) {
+      if (redirectURL && window?.location) {
         if (response.flowId) {
           setFlowId(response.flowId);
         }
@@ -321,21 +337,44 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
         storedFlowId,
       );
 
+      // Only process code if we have a valid flowId to use
       if (flowIdFromState) {
         setFlowId(flowIdFromState);
         setIsFlowInitialized(true);
         initializationAttemptedRef.current = true;
+        // Clean up flowId from URL after setting it in state
+        cleanupFlowUrlParams();
+      } else {
+        console.warn('[SignIn] OAuth code in URL but no valid flowId found. Cleaning up stale OAuth parameters.');
+        cleanupOAuthUrlParams(true);
       }
       return;
     }
 
+    // If flowId is in URL or sessionStorage but no code and no active flow state
+    if ((urlParams.flowId || storedFlowId) && !urlParams.code && !currentFlowId) {
+      console.warn(
+        '[SignIn] FlowId in URL/sessionStorage but no active flow state detected. '
+      );
+      setFlowId(null);
+      sessionStorage.removeItem('asgardeo_flow_id');
+      cleanupFlowUrlParams();
+      // Continue to initialize with applicationId instead
+    }
+
     if (
       isInitialized &&
       !isLoading &&
       !isFlowInitialized &&
       !initializationAttemptedRef.current &&
       !currentFlowId
     ) {
+      // Clean up any stale OAuth parameters before starting a new flow
+      const urlParams = getUrlParams();
+      if (urlParams.code || urlParams.state) {
+        console.debug('[SignIn] Cleaning up stale OAuth parameters before starting new flow');
+        cleanupOAuthUrlParams(true);
+      }
       initializationAttemptedRef.current = true;
       initializeFlow();
     }
@@ -348,6 +387,9 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
   const initializeFlow = async (): Promise<void> => {
     const urlParams = getUrlParams();
 
+    // Reset OAuth code processed ref when starting a new flow
+    oauthCodeProcessedRef.current = false;
+
     handleSessionDataKey(urlParams.sessionDataKey);
 
     const effectiveApplicationId = applicationId || urlParams.applicationId;
@@ -388,18 +430,25 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
         setFlowId(flowId);
         setComponents(components);
         setIsFlowInitialized(true);
+        // Clean up flowId from URL after setting it in state
+        cleanupFlowUrlParams();
       }
     } catch (error) {
       const err = error as Error;
-      setError(err);
       clearFlowState();
-      initializationAttemptedRef.current = false;
 
-      throw new AsgardeoRuntimeError(
-        `Failed to initialize authentication flow: ${error instanceof Error ? error.message : String(error)}`,
+      // Extract error message
+      const errorMessage = err instanceof Error ? err.message : String(err);
+
+      // Create error with backend message
+      const displayError = new AsgardeoRuntimeError(
+        errorMessage,
         'SIGN_IN_ERROR',
         'react',
       );
+      setError(displayError);
+      initializationAttemptedRef.current = false;
+      return;
     }
   };
 
@@ -422,7 +471,6 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
       setIsSubmitting(true);
       setFlowError(null);
 
-      // Use effectiveFlowId - either from payload or currentFlowId
       const response: EmbeddedSignInFlowResponseV2 = await signIn({
         flowId: effectiveFlowId,
         ...payload,
@@ -438,38 +486,46 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
       if (response.flowStatus === EmbeddedSignInFlowStatusV2.Error) {
         console.error('[SignIn] Flow returned Error status, clearing flow state');
         clearFlowState();
+        // Extract failureReason from response if available
+        const failureReason = (response as any)?.failureReason;
+        const errorMessage = failureReason || 'Authentication flow failed. Please try again.';
         const err = new AsgardeoRuntimeError(
-          'Authentication flow failed. Please try again.',
+          errorMessage,
           'SIGN_IN_ERROR',
           'react',
         );
         setError(err);
+        cleanupFlowUrlParams();
         return;
       }
 
       if (response.flowStatus === EmbeddedSignInFlowStatusV2.Complete) {
         // Get redirectUrl from response (from /oauth2/authorize) or fall back to afterSignInUrl
-        const redirectUrl = (response as any).redirectUrl || (response as any).redirect_uri;
+        const redirectUrl = (response as any)?.redirectUrl || (response as any)?.redirect_uri;
+        const finalRedirectUrl = redirectUrl || afterSignInUrl;
+
+        // Clear submitting state before redirect
+        setIsSubmitting(false);
 
         // Clear all OAuth-related storage on successful completion
         setFlowId(null);
         setIsFlowInitialized(false);
-        if (redirectUrl) {
-          sessionStorage.removeItem('asgardeo_session_data_key');
-        }
+        sessionStorage.removeItem('asgardeo_flow_id');
+        sessionStorage.removeItem('asgardeo_session_data_key');
 
+        // Clean up OAuth URL params before redirect
         cleanupOAuthUrlParams(true);
 
-        const finalRedirectUrl = redirectUrl || afterSignInUrl;
-
         onSuccess &&
           onSuccess({
             redirectUrl: finalRedirectUrl,
-            ...response.data,
+            ...(response.data || {}),
           });
 
-        if (finalRedirectUrl) {
+        if (finalRedirectUrl && window?.location) {
           window.location.href = finalRedirectUrl;
+        } else {
+          console.warn('[SignIn] Flow completed but no redirect URL available');
         }
 
         return;
@@ -479,16 +535,23 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
       if (flowId && components) {
         setFlowId(flowId);
         setComponents(components);
+        // Clean up flowId from URL after setting it in state
+        cleanupFlowUrlParams();
       }
     } catch (error) {
       const err = error as Error;
-      setError(err);
       clearFlowState();
-      throw new AsgardeoRuntimeError(
-        `Failed to submit authentication flow: ${error instanceof Error ? error.message : String(error)}`,
+
+      // Extract error message
+      const errorMessage = err instanceof Error ? err.message : String(err);
+
+      const displayError = new AsgardeoRuntimeError(
+        errorMessage,
         'SIGN_IN_ERROR',
         'react',
       );
+      setError(displayError);
+      return;
     } finally {
       setIsSubmitting(false);
     }
@@ -502,6 +565,9 @@ const SignIn: FC<SignInProps> = ({className, size = 'medium', onSuccess, onError
     setError(error);
   };
 
+  /**
+   * Handle OAuth code processing from external OAuth providers.
+   */
   useEffect(() => {
     const urlParams = getUrlParams();
     const storedFlowId = sessionStorage.getItem('asgardeo_flow_id');