fix(auth): keep passkey login loading active

- Await the complete explicit passkey login ceremony.\n- Reuse the shared pending-action guard for registration and login.\n- Cover pending and duplicate-submission behavior with a focused test.\n\nCo-authored-by: Codex <[email protected]>

Author: alexj11324

src/pages/login/index.tsx

@@ -25,6 +25,7 @@ import {
   getPasskey,
   isWebAuthnSupported,
   passkeyToJSON,
+  runPasskeyAction,
   webAuthnErrorMessage,
 } from "~/utils"
 import { PasskeyChallenge, PResp, Resp } from "~/types"
@@ -69,7 +70,7 @@ const Login = () => {
       }
     },
   )
-  const [finishPasskeyLoading, postauthnlogin] = useFetch(
+  const [, postauthnlogin] = useFetch(
     (
       session: string,
       credentials: PublicKeyCredential,
@@ -87,7 +88,7 @@ const Login = () => {
         },
       ),
   )
-  const [beginPasskeyLoading, getauthntemp] = useFetch(
+  const [, getauthntemp] = useFetch(
     (
       username: string,
       signal: AbortSignal | undefined,
@@ -108,6 +109,7 @@ const Login = () => {
     }
   }
   const AuthnSignEnabled = getSettingBool("webauthn_login_enabled")
+  const [passkeyLoginLoading, setPasskeyLoginLoading] = createSignal(false)
   const AuthnSwitch = () => {
     setuseauthn(!useauthn())
   }
@@ -132,48 +134,51 @@ const Login = () => {
       localStorage.removeItem("username")
     }
     const resp = await getauthntemp(username_login, controller.signal)
-    handleResp(resp, async (data) => {
-      try {
-        const credentials = await getPasskey(
-          data.options.publicKey,
-          controller.signal,
-          conditional,
+    if (resp.code !== 200) {
+      handleResp(resp)
+      return
+    }
+    try {
+      const data = resp.data
+      const credentials = await getPasskey(
+        data.options.publicKey,
+        controller.signal,
+        conditional,
+      )
+      if (!credentials) {
+        throw new DOMException(
+          "No passkey credential was returned.",
+          "NotAllowedError",
         )
-        if (!credentials) {
-          throw new DOMException(
-            "No passkey credential was returned.",
-            "NotAllowedError",
+      }
+      const finishResp = await postauthnlogin(
+        data.session,
+        credentials,
+        username_login,
+        controller.signal,
+      )
+      handleRespWithoutAuthAndNotify(
+        finishResp,
+        (data) => {
+          notify.success(t("login.success"))
+          changeToken(data.token)
+          to(
+            decodeURIComponent(searchParams.redirect || base_path || "/"),
+            true,
           )
-        }
-        const resp = await postauthnlogin(
-          data.session,
-          credentials,
-          username_login,
-          controller.signal,
-        )
-        handleRespWithoutAuthAndNotify(
-          resp,
-          (data) => {
-            notify.success(t("login.success"))
-            changeToken(data.token)
-            to(
-              decodeURIComponent(searchParams.redirect || base_path || "/"),
-              true,
-            )
-          },
-          (msg) => {
-            notify.error(msg)
-          },
-        )
-      } catch (error: unknown) {
-        if (
-          !conditional &&
-          (!(error instanceof Error) || error.name !== "AbortError")
-        ) {
-          notify.error(webAuthnErrorMessage(error))
-        }
+        },
+        (msg) => {
+          notify.error(msg)
+        },
+      )
+    } catch (error: unknown) {
+      if (
+        !conditional &&
+        (!(error instanceof Error) || error.name !== "AbortError")
+      ) {
+        notify.error(webAuthnErrorMessage(error))
       }
-    })
+    }
   }
   const AuthnCleanUpHandler = () => AuthnSignal?.abort()
   onMount(() => {
@@ -216,7 +221,9 @@ const Login = () => {
         },
       )
     } else {
-      await AuthnLogin()
+      await runPasskeyAction(passkeyLoginLoading, setPasskeyLoginLoading, () =>
+        AuthnLogin(),
+      )
     }
   }
   const [needOpt, setNeedOpt] = createSignal(false)
@@ -322,11 +329,7 @@ const Login = () => {
           <Button
             w="$full"
             leftIcon={useauthn() ? <PasskeyIcon onButton /> : undefined}
-            loading={
-              useauthn()
-                ? beginPasskeyLoading() || finishPasskeyLoading()
-                : loading()
-            }
+            loading={useauthn() ? passkeyLoginLoading() : loading()}
             onClick={Login}
           >
             {useauthn() ? t("login.passkey_login") : t("login.login")}

src/pages/manage/users/Profile.tsx

@@ -47,7 +47,7 @@ import {
   notify,
   passkeyToJSON,
   r,
-  runPasskeyRegistrationAction,
+  runPasskeyAction,
   webAuthnErrorMessage,
 } from "~/utils"
 import { WebauthnItem } from "./Webauthnitems"
@@ -149,7 +149,7 @@ const Profile = () => {
       notify.error(t("users.webauthn_not_supported"))
       return
     }
-    await runPasskeyRegistrationAction(
+    await runPasskeyAction(
       registrationLoading,
       setRegistrationLoading,
       async () => {

src/utils/webauthn.test.ts

@@ -1,17 +1,17 @@
 import assert from "node:assert/strict"
 import test from "node:test"
-import { runPasskeyRegistrationAction } from "./webauthn.ts"
+import { runPasskeyAction } from "./webauthn.ts"
 
-test("keeps registration loading until the credential promise settles", async () => {
+test("keeps passkey actions loading until the credential promise settles", async () => {
   let loading = false
   let actionCalls = 0
   let resolveCredential: () => void
   const credential = new Promise<void>((resolve) => {
     resolveCredential = resolve
   })
 
-  const register = () =>
-    runPasskeyRegistrationAction(
+  const run = () =>
+    runPasskeyAction(
       () => loading,
       (value) => {
         loading = value
@@ -22,19 +22,19 @@ test("keeps registration loading until the credential promise settles", async ()
       },
     )
 
-  const pending = register()
+  const pending = run()
   await Promise.resolve()
 
   assert.equal(loading, true)
-  assert.equal(await register(), false)
+  assert.equal(await run(), false)
   assert.equal(actionCalls, 1)
 
   resolveCredential!()
   assert.equal(await pending, true)
   assert.equal(loading, false)
 
   await assert.rejects(
-    runPasskeyRegistrationAction(
+    runPasskeyAction(
       () => loading,
       (value) => {
         loading = value

src/utils/webauthn.ts

@@ -27,7 +27,7 @@ export const webAuthnErrorMessage = (error: unknown) => {
 export const passkeyToJSON = (credential: PublicKeyCredential) =>
   credential.toJSON()
 
-export const runPasskeyRegistrationAction = async (
+export const runPasskeyAction = async (
   isLoading: () => boolean,
   setLoading: (loading: boolean) => void,
   action: () => Promise<void>,