feat: add signal control to authn flow (#265)

Author: Mmx233

src/pages/login/index.tsx

@@ -79,6 +79,7 @@ const Login = () => {
       session: string,
       credentials: AuthenticationPublicKeyCredential,
       username: string,
+      signal: AbortSignal | undefined,
     ): Promise<Resp<{ token: string }>> =>
       r.post(
         "/authn/webauthn_finish_login?username=" + username,
@@ -87,6 +88,7 @@ const Login = () => {
           headers: {
             session: session,
           },
+          signal,
         },
       ),
   )
@@ -95,8 +97,10 @@ const Login = () => {
     options: CredentialRequestOptionsJSON
   }
   const [, getauthntemp] = useFetch(
-    (username): PResp<Webauthntemp> =>
-      r.get("/authn/webauthn_begin_login?username=" + username),
+    (username, signal: AbortSignal | undefined): PResp<Webauthntemp> =>
+      r.get("/authn/webauthn_begin_login?username=" + username, {
+        signal,
+      }),
   )
   const { searchParams, to } = useRouter()
   const isAuthnConditionalAvailable = async (): Promise<boolean> => {
@@ -114,6 +118,7 @@ const Login = () => {
   const AuthnSwitch = async () => {
     setuseauthn(!useauthn())
   }
+  let AuthnSignal: AbortController | null = null
   const AuthnLogin = async (conditional?: boolean) => {
     if (!supported()) {
       if (!conditional) {
@@ -124,17 +129,21 @@ const Login = () => {
     if (conditional && !(await isAuthnConditionalAvailable())) {
       return
     }
+    AuthnSignal?.abort()
+    const controller = new AbortController()
+    AuthnSignal = controller
     changeToken()
     const username_login: string = conditional ? "" : username()
     if (!conditional && remember() === "true") {
       localStorage.setItem("username", username())
     } else {
       localStorage.removeItem("username")
     }
-    const resp = await getauthntemp(username_login)
+    const resp = await getauthntemp(username_login, controller.signal)
     handleResp(resp, async (data) => {
       try {
         const options = parseRequestOptionsFromJSON(data.options)
+        options.signal = controller.signal
         if (conditional) {
           // @ts-expect-error
           options.mediation = "conditional"
@@ -144,6 +153,7 @@ const Login = () => {
           data.session,
           credentials,
           username_login,
+          controller.signal,
         )
         handleRespWithoutNotify(resp, (data) => {
           notify.success(t("login.success"))
@@ -154,7 +164,8 @@ const Login = () => {
           )
         })
       } catch (error: unknown) {
-        if (error instanceof Error) notify.error(error.message)
+        if (error instanceof Error && error.name != "AbortError")
+          notify.error(error.message)
       }
     })
   }