auto submit passkey request

apps/login/app/(login)/passkey/login/page.tsx

@@ -47,7 +47,6 @@ export default async function Page({
 
       {loginName && (
         <LoginPasskey
-          challenge={{} as any}
           loginName={loginName}
           altPassword={altPassword === "true"}
         />

apps/login/ui/LoginPasskey.tsx

@@ -10,17 +10,11 @@ import { Spinner } from "./Spinner";
 
 type Props = {
   loginName: string;
-  challenge: Challenges_Passkey;
   altPassword: boolean;
 };
 
-export default function LoginPasskey({
-  loginName,
-  challenge,
-  altPassword,
-}: Props) {
+export default function LoginPasskey({ loginName, altPassword }: Props) {
   const [error, setError] = useState<string>("");
-  const [publicKey, setPublicKey] = useState();
   const [loading, setLoading] = useState<boolean>(false);
 
   const router = useRouter();
@@ -30,19 +24,29 @@ export default function LoginPasskey({
   useEffect(() => {
     if (!initialized.current) {
       initialized.current = true;
+      setLoading(true);
       updateSessionForChallenge()
         .then((response) => {
           const pK =
             response.challenges.passkey.publicKeyCredentialRequestOptions
               .publicKey;
           if (pK) {
-            setPublicKey(pK);
+            submitLoginAndContinue(pK)
+              .then(() => {
+                setLoading(false);
+              })
+              .catch((error) => {
+                setError(error);
+                setLoading(false);
+              });
           } else {
             setError("Could not request passkey challenge");
+            setLoading(false);
           }
         })
         .catch((error) => {
           setError(error);
+          setLoading(false);
         });
     }
   }, []);
@@ -91,18 +95,20 @@ export default function LoginPasskey({
     return response;
   }
 
-  async function submitLoginAndContinue(): Promise<boolean | void> {
-    if (publicKey) {
-      (publicKey as any).challenge = coerceToArrayBuffer(
-        (publicKey as any).challenge,
+  async function submitLoginAndContinue(
+    publicKey: any
+  ): Promise<boolean | void> {
+    publicKey.challenge = coerceToArrayBuffer(
+      publicKey.challenge,
       "publicKey.challenge"
     );
-      (publicKey as any).allowCredentials.map((listItem: any) => {
+    publicKey.allowCredentials.map((listItem: any) => {
       listItem.id = coerceToArrayBuffer(
         listItem.id,
         "publicKey.allowCredentials.id"
       );
     });
+
     navigator.credentials
       .get({
         publicKey,
@@ -150,7 +156,6 @@ export default function LoginPasskey({
         return null;
       });
   }
-  }
 
   return (
     <div className="w-full">
@@ -187,8 +192,8 @@ export default function LoginPasskey({
           type="submit"
           className="self-end"
           variant={ButtonVariants.Primary}
-          disabled={loading || !publicKey}
-          onClick={() => submitLoginAndContinue()}
+          disabled={loading}
+          onClick={() => updateSessionForChallenge()}
         >
           {loading && <Spinner className="h-5 w-5 mr-2" />}
           continue