cleanup loading states

apps/login/src/components/change-password-form.tsx

@@ -61,11 +61,13 @@ export function ChangePasswordForm({
     const changeResponse = await setMyPassword({
       sessionId: sessionId,
       password: values.password,
-    }).catch(() => {
+    })
-      setError("Could not change password");
+      .catch(() => {
-    });
+        setError("Could not change password");
-
+      })
-    setLoading(false);
+      .finally(() => {
+        setLoading(false);
+      });
 
     if (changeResponse && "error" in changeResponse) {
       setError(changeResponse.error);
@@ -86,13 +88,14 @@ export function ChangePasswordForm({
         password: { password: values.password },
       }),
       authRequestId,
-    }).catch(() => {
+    })
-      setLoading(false);
+      .catch(() => {
-      setError("Could not verify password");
+        setError("Could not verify password");
-      return;
+        return;
-    });
+      })
-
+      .finally(() => {
-    setLoading(false);
+        setLoading(false);
+      });
 
     if (
       passwordResponse &&

apps/login/src/components/idp-signin.tsx

@@ -60,9 +60,10 @@ export function IdpSignin({
       .catch((error) => {
         setError(error.message);
         return;
+      })
+      .finally(() => {
+        setLoading(false);
       });
-
-    setLoading(false);
   }, []);
 
   return (

apps/login/src/components/invite-form.tsx

@@ -55,13 +55,14 @@ export function InviteForm({
       firstName: values.firstname,
       lastName: values.lastname,
       organization: organization,
-    }).catch(() => {
+    })
-      setError("Could not create invitation Code");
+      .catch(() => {
-      setLoading(false);
+        setError("Could not create invitation Code");
-      return;
+        return;
-    });
+      })
-
+      .finally(() => {
-    setLoading(false);
+        setLoading(false);
+      });
 
     if (response && typeof response === "object" && "error" in response) {
       setError(response.error);

apps/login/src/components/login-otp.tsx

@@ -57,11 +57,10 @@ export function LoginOTP({
       initialized.current = true;
       setLoading(true);
       updateSessionForOTPChallenge()
-        .then((response) => {
-          setLoading(false);
-        })
         .catch((error) => {
           setError(error);
+        })
+        .finally(() => {
           setLoading(false);
         });
     }
@@ -89,12 +88,13 @@ export function LoginOTP({
       organization,
       challenges,
       authRequestId,
-    }).catch((error) => {
+    })
-      setError(error.message ?? "Could not request OTP challenge");
+      .catch((error) => {
-      setLoading(false);
+        setError(error.message ?? "Could not request OTP challenge");
-    });
+      })
-
+      .finally(() => {
-    setLoading(false);
+        setLoading(false);
+      });
 
     return response;
   }
@@ -139,13 +139,14 @@ export function LoginOTP({
       organization,
       checks,
       authRequestId,
-    }).catch(() => {
+    })
-      setError("Could not verify OTP code");
+      .catch(() => {
-      setLoading(false);
+        setError("Could not verify OTP code");
-      return;
+        return;
-    });
+      })
-
+      .finally(() => {
-    setLoading(false);
+        setLoading(false);
+      });
 
     return response;
   }
@@ -206,11 +207,10 @@ export function LoginOTP({
               onClick={() => {
                 setLoading(true);
                 updateSessionForOTPChallenge()
-                  .then((response) => {
-                    setLoading(false);
-                  })
                   .catch((error) => {
                     setError(error);
+                  })
+                  .finally(() => {
                     setLoading(false);
                   });
               }}

apps/login/src/components/login-passkey.tsx

@@ -61,16 +61,17 @@ export function LoginPasskey({
           }
 
           return submitLoginAndContinue(pK)
-            .then(() => {
-              setLoading(false);
-            })
             .catch((error) => {
               setError(error);
+            })
+            .finally(() => {
               setLoading(false);
             });
         })
         .catch((error) => {
           setError(error);
+        })
+        .finally(() => {
           setLoading(false);
         });
     }
@@ -94,10 +95,13 @@ export function LoginPasskey({
         },
       }),
       authRequestId,
-    }).catch(() => {
+    })
-      setError("Could not request passkey challenge");
+      .catch(() => {
-    });
+        setError("Could not request passkey challenge");
-    setLoading(false);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
 
     return session;
   }
@@ -112,11 +116,13 @@ export function LoginPasskey({
         webAuthN: { credentialAssertionData: data },
       } as Checks,
       authRequestId,
-    }).catch(() => {
+    })
-      setError("Could not verify passkey");
+      .catch(() => {
-    });
+        setError("Could not verify passkey");
-
+      })
-    setLoading(false);
+      .finally(() => {
+        setLoading(false);
+      });
 
     return response;
   }
@@ -243,7 +249,9 @@ export function LoginPasskey({
           variant={ButtonVariants.Primary}
           disabled={loading}
           onClick={async () => {
-            const response = await updateSessionForChallenge();
+            const response = await updateSessionForChallenge().finally(() => {
+              setLoading(false);
+            });
 
             const pK =
               response?.challenges?.webAuthN?.publicKeyCredentialRequestOptions
@@ -251,15 +259,16 @@ export function LoginPasskey({
 
             if (!pK) {
               setError("Could not request passkey challenge");
-              setLoading(false);
+              return;
             }
 
+            setLoading(true);
+
             return submitLoginAndContinue(pK)
-              .then(() => {
-                setLoading(false);
-              })
               .catch((error) => {
                 setError(error);
+              })
+              .finally(() => {
                 setLoading(false);
               });
           }}

apps/login/src/components/password-form.tsx

@@ -60,13 +60,14 @@ export function PasswordForm({
       }),
       authRequestId,
       forceMfa: loginSettings?.forceMfa,
-    }).catch(() => {
+    })
-      setLoading(false);
+      .catch(() => {
-      setError("Could not verify password");
+        setError("Could not verify password");
-      return;
+        return;
-    });
+      })
-
+      .finally(() => {
-    setLoading(false);
+        setLoading(false);
+      });
 
     if (response && "error" in response && response.error) {
       setError(response.error);
@@ -83,12 +84,14 @@ export function PasswordForm({
     const response = await resetPassword({
       loginName,
       organization,
-    }).catch(() => {
+    })
-      setError("Could not reset password");
+      .catch(() => {
-      return;
+        setError("Could not reset password");
-    });
+        return;
-
+      })
-    setLoading(false);
+      .finally(() => {
+        setLoading(false);
+      });
 
     if (response && "error" in response) {
       setError(response.error);

apps/login/src/components/register-passkey.tsx

@@ -50,11 +50,14 @@ export function RegisterPasskey({
       passkeyName,
       publicKeyCredential,
       sessionId,
-    }).catch(() => {
+    })
-      setError("Could not verify Passkey");
+      .catch(() => {
-    });
+        setError("Could not verify Passkey");
+      })
+      .finally(() => {
+        setLoading(false);
+      });
 
-    setLoading(false);
     return response;
   }
 
@@ -62,10 +65,13 @@ export function RegisterPasskey({
     setLoading(true);
     const resp = await registerPasskeyLink({
       sessionId,
-    }).catch(() => {
+    })
-      setError("Could not register passkey");
+      .catch(() => {
-    });
+        setError("Could not register passkey");
-    setLoading(false);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
 
     if (!resp) {
       setError("An error on registering passkey");

apps/login/src/components/register-u2f.tsx

@@ -47,16 +47,18 @@ export function RegisterU2f({
       passkeyName,
       publicKeyCredential,
       sessionId,
-    }).catch(() => {
+    })
-      setError("An error on verifying passkey occurred");
+      .catch(() => {
-    });
+        setError("An error on verifying passkey occurred");
+      })
+      .finally(() => {
+        setLoading(false);
+      });
 
     if (response && "error" in response && response?.error) {
       setError(response?.error);
     }
 
-    setLoading(false);
-
     return response;
   }
 
@@ -65,11 +67,13 @@ export function RegisterU2f({
     setLoading(true);
     const response = await addU2F({
       sessionId,
-    }).catch(() => {
+    })
-      setError("An error on registering passkey");
+      .catch(() => {
-    });
+        setError("An error on registering passkey");
-
+      })
-    setLoading(false);
+      .finally(() => {
+        setLoading(false);
+      });
 
     if (response && "error" in response && response?.error) {
       setError(response?.error);
@@ -115,7 +119,6 @@ export function RegisterU2f({
         !(resp as any).rawId
       ) {
         setError("An error on registering passkey");
-        setLoading(false);
         return;
       }
 
@@ -139,7 +142,6 @@ export function RegisterU2f({
       const submitResponse = await submitVerify(u2fId, "", data, sessionId);
 
       if (!submitResponse) {
-        setLoading(false);
         setError("An error on verifying passkey");
         return;
       }
@@ -177,8 +179,6 @@ export function RegisterU2f({
 
       router.push(urlToContinue);
     }
-
-    setLoading(false);
   }
 
   return (

apps/login/src/components/session-item.tsx

@@ -40,11 +40,14 @@ export function SessionItem({
     setLoading(true);
     const response = await cleanupSession({
       sessionId: id,
-    }).catch((error) => {
+    })
-      setError(error.message);
+      .catch((error) => {
-    });
+        setError(error.message);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
 
-    setLoading(false);
     return response;
   }
 

apps/login/src/components/set-password-form.tsx

@@ -71,13 +71,14 @@ export function SetPasswordForm({
       payload = { ...payload, code: values.code };
     }
 
-    const changeResponse = await changePassword(payload).catch(() => {
+    const changeResponse = await changePassword(payload)
-      setError("Could not set password");
+      .catch(() => {
-      setLoading(false);
+        setError("Could not set password");
-      return;
+        return;
-    });
+      })
-
+      .finally(() => {
-    setLoading(false);
+        setLoading(false);
+      });
 
     if (changeResponse && "error" in changeResponse) {
       setError(changeResponse.error);
@@ -107,13 +108,14 @@ export function SetPasswordForm({
         password: { password: values.password },
       }),
       authRequestId,
-    }).catch((error) => {
+    })
-      setLoading(false);
+      .catch(() => {
-      setError("Could not verify password");
+        setError("Could not verify password");
-      return;
+        return;
-    });
+      })
-
+      .finally(() => {
-    setLoading(false);
+        setLoading(false);
+      });
 
     if (
       passwordResponse &&

apps/login/src/components/set-register-password-form.tsx

@@ -65,11 +65,13 @@ export function SetRegisterPasswordForm({
       organization: organization,
       authRequestId: authRequestId,
       password: values.password,
-    }).catch(() => {
+    })
-      setError("Could not register user");
+      .catch(() => {
-    });
+        setError("Could not register user");
-
+      })
-    setLoading(false);
+      .finally(() => {
+        setLoading(false);
+      });
 
     if (response && "error" in response) {
       setError(response.error);

apps/login/src/components/sign-in-with-idp.tsx

@@ -53,11 +53,13 @@ export function SignInWithIdp({
         `${host}/idp/${provider}/success?` + new URLSearchParams(params),
       failureUrl:
         `${host}/idp/${provider}/failure?` + new URLSearchParams(params),
-    }).catch(() => {
+    })
-      setError("Could not start IDP flow");
+      .catch(() => {
-    });
+        setError("Could not start IDP flow");
-
+      })
-    setLoading(false);
+      .finally(() => {
+        setLoading(false);
+      });
 
     return response;
   }

apps/login/src/components/totp-register.tsx

@@ -51,7 +51,6 @@ export function TotpRegister({
     setLoading(true);
     return verifyTOTP(values.code, loginName, organization)
       .then((response) => {
-        setLoading(false);
         // if attribute is set, validate MFA after it is setup, otherwise proceed as usual (when mfa is enforced to login)
         if (checkAfter) {
           const params = new URLSearchParams({});
@@ -96,8 +95,10 @@ export function TotpRegister({
         }
       })
       .catch((e) => {
-        setLoading(false);
         setError(e.message);
+      })
+      .finally(() => {
+        setLoading(false);
       });
   }
 

apps/login/src/components/username-form.tsx

@@ -52,11 +52,13 @@ export function UsernameForm({
       loginName: values.loginName,
       organization,
       authRequestId,
-    }).catch(() => {
+    })
-      setError("An internal error occurred");
+      .catch(() => {
-    });
+        setError("An internal error occurred");
-
+      })
-    setLoading(false);
+      .finally(() => {
+        setLoading(false);
+      });
 
     if (res?.error) {
       setError(res.error);

apps/login/src/components/verify-form.tsx

@@ -41,13 +41,15 @@ export function VerifyForm({ userId, code, isInvite, params }: Props) {
     const response = await resendVerification({
       userId,
       isInvite: isInvite,
-    }).catch(() => {
+    })
-      setError("Could not resend email");
+      .catch(() => {
-      setLoading(false);
+        setError("Could not resend email");
-      return;
+        return;
-    });
+      })
+      .finally(() => {
+        setLoading(false);
+      });
 
-    setLoading(false);
     return response;
   }
 
@@ -61,13 +63,14 @@ export function VerifyForm({ userId, code, isInvite, params }: Props) {
         code: value.code,
         userId,
         isInvite: isInvite,
-      }).catch((error) => {
+      })
-        setError("Could not verify user");
+        .catch(() => {
-        setLoading(false);
+          setError("Could not verify user");
-        return;
+          return;
-      });
+        })
-
+        .finally(() => {
-      setLoading(false);
+          setLoading(false);
+        });
     },
     [isInvite, userId],
   );

apps/login/src/components/verify-redirect-button.tsx

@@ -29,13 +29,14 @@ export function VerifyRedirectButton({
     await sendVerificationRedirectWithoutCheck({
       userId,
       authRequestId,
-    }).catch((error) => {
+    })
-      setError("Could not verify user");
+      .catch((error) => {
-      setLoading(false);
+        setError("Could not verify user");
-      return;
+        return;
-    });
+      })
-
+      .finally(() => {
-    setLoading(false);
+        setLoading(false);
+      });
   }
 
   return (