Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Delayed async onSubmit form cancel doesn't reset #520

Open
1 task done
Pandoks opened this issue Dec 6, 2024 · 1 comment
Open
1 task done

Delayed async onSubmit form cancel doesn't reset #520

Pandoks opened this issue Dec 6, 2024 · 1 comment
Labels
documentation Improvements or additions to documentation

Comments

@Pandoks
Copy link

Pandoks commented Dec 6, 2024

  • Before posting an issue, read the FAQ and search the previous issues.

Description
A clear and concise description of what the bug is, and, unless obvious, what you expected instead.

    onSubmit: async (form) => {
      const { challengeId, credentialId, signature, authenticatorData, clientDataJSON } =
        await authenticatePasskey();

      if (!challengeId || !credentialId || !signature || !authenticatorData || !clientDataJSON) {
        form.cancel();
        return;
      }

      passkeyForm.form.set({
        usernameOrEmail: get(passkeyForm.form).usernameOrEmail,
        credentialId: credentialId || '',
        challengeId: challengeId || '',
        signature: signature || '',
        encodedAuthenticatorData: authenticatorData || '',
        clientDataJSON: clientDataJSON || ''
      });
    }
...
  const {
    form: passkeyFormData,
    enhance: passkeyEnhance,
    delayed: passkeyDelayedForm
  } = passkeyForm;

$passkeyDelayedForm doesn't reset when you cancel inside the async onSubmit function.

await authenticatePasskey() pops up a prompt for the user and waits for their input. When the user inputs their information quickly, $delayed will get reset. If the user takes too long though and the form is canceled, the $delayed won't reset giving me an infinite loading state.

I verified that with every interaction that it is making it into the if block:

if (!challengeId || !credentialId || !signature || !authenticatorData || !clientDataJSON) {
        form.cancel();
        return;
      }

When I print the output of $passkeyDelayedForm after the form.cancel() however, it says that it's true when there is a long enough delay. It will print false if it's done quickly.

@Pandoks Pandoks added the bug Something isn't working label Dec 6, 2024
@ciscoheat
Copy link
Owner

onSubmit is not asynchronous, you need to have a separate variable and use form.cancel in onSubmit if the variable is empty, then call your auth function which submits the form again when it has the credentials.

@ciscoheat ciscoheat added documentation Improvements or additions to documentation and removed bug Something isn't working labels Dec 8, 2024
@ciscoheat ciscoheat reopened this Dec 8, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
documentation Improvements or additions to documentation
Projects
None yet
Development

No branches or pull requests

2 participants