fix(experience): fix silent error bug (#5031)

gix silent error bug

packages/experience/src/App.tsx

@@ -115,7 +115,7 @@ const App = () => {
 
                     {/* Single sign on */}
                     {isDevelopmentFeaturesEnabled && (
-                      <Route path={singleSignOnPath}>
+                      <Route path={singleSignOnPath} element={<LoadingLayerProvider />}>
                         <Route path="email" element={<SingleSignOnEmail />} />
                         <Route path="connectors" element={<SingleSignOnConnectors />} />
                       </Route>

packages/experience/src/hooks/use-check-single-sign-on.ts

@@ -36,10 +36,11 @@ const useCheckSingleSignOn = () => {
   /**
    * Check if the email is registered with any SSO connectors
    * @param {string} email
+   * @param {boolean} continueSignIn - whether to continue the single sign-on flow if the email is registered with any SSO connectors
    * @returns {Promise<boolean>} - true if the email is registered with any SSO connectors
    */
   const onSubmit = useCallback(
-    async (email: string) => {
+    async (email: string, continueSignIn = false) => {
       clearContext();
 
       const [error, result] = await request(email);
@@ -62,6 +63,10 @@ const useCheckSingleSignOn = () => {
       setSsoConnectors(connectors);
       setEmail(email);
 
+      if (!continueSignIn) {
+        return true;
+      }
+
       // If there is only one connector, we can directly invoke the SSO flow
       if (connectors.length === 1 && connectors[0]?.id) {
         await singleSignOn(connectors[0].id);

packages/experience/src/hooks/use-password-sign-in.ts

@@ -3,6 +3,7 @@ import { useState, useMemo, useCallback } from 'react';
 import type { PasswordSignInPayload } from '@/apis/interaction';
 import { signInWithPasswordIdentifier } from '@/apis/interaction';
 import useApi from '@/hooks/use-api';
+import useCheckSingleSignOn from '@/hooks/use-check-single-sign-on';
 import type { ErrorHandlers } from '@/hooks/use-error-handler';
 import useErrorHandler from '@/hooks/use-error-handler';
 
@@ -10,6 +11,7 @@ import usePreSignInErrorHandler from './use-pre-sign-in-error-handler';
 
 const usePasswordSignIn = () => {
   const [errorMessage, setErrorMessage] = useState<string>();
+  const { onSubmit: checkSingleSignOn } = useCheckSingleSignOn();
 
   const clearErrorMessage = useCallback(() => {
     setErrorMessage('');
@@ -24,9 +26,6 @@ const usePasswordSignIn = () => {
       'session.invalid_credentials': (error) => {
         setErrorMessage(error.message);
       },
-      'session.sso_enabled': (_error) => {
-        // Hide the toast and do nothing
-      },
       ...preSignInErrorHandler,
     }),
     [preSignInErrorHandler]
@@ -34,6 +33,15 @@ const usePasswordSignIn = () => {
 
   const onSubmit = useCallback(
     async (payload: PasswordSignInPayload) => {
+      // Check if the email is registered with any SSO connectors. If the email is registered with any SSO connectors, we should not proceed to the next step
+      if (payload.email) {
+        const result = await checkSingleSignOn(payload.email);
+
+        if (result) {
+          return;
+        }
+      }
+
       const [error, result] = await asyncSignIn(payload);
 
       if (error) {
@@ -46,7 +54,7 @@ const usePasswordSignIn = () => {
         window.location.replace(result.redirectTo);
       }
     },
-    [asyncSignIn, errorHandlers, handleError]
+    [asyncSignIn, checkSingleSignOn, errorHandlers, handleError]
   );
 
   return {

packages/experience/src/pages/SingleSignOnEmail/index.tsx

@@ -40,7 +40,7 @@ const SingleSignOnEmail = () => {
   const onSubmitHandler = useCallback(
     async (event?: React.FormEvent<HTMLFormElement>) => {
       clearErrorMessage();
-      await handleSubmit(async ({ identifier: { value } }) => onSubmit(value))(event);
+      await handleSubmit(async ({ identifier: { value } }) => onSubmit(value, true))(event);
     },
     [clearErrorMessage, handleSubmit, onSubmit]
   );