I have a NextJS application that sometimes isn't working as expected.

When I'm with a slow connection and the first load time of the site is bigger than normal, when I try to login into application, the default behavior of HTML form is executed and the credentials that I inserted are shown on the URL, even though I've a event.preventDefault() in the submit function and I'm not using GET.

I've tried to improve the performance of the app and reduce the first time load of the pages, but, if the user can make the loading time slow, it can be exploitable.

I just want to prevent that the credentials be shown on URL. It can be replaced with any type of another error.

Here is my code:

  async function handleLogin(event: FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setIsLoadingLogin(true);
    setError('');
    const captchaValue = await captchaRef.current?.executeAsync();
    if (!captchaValue) {
      setError('Erro de captcha. Tente novamente mais tarde.');
      return setIsLoadingLogin(false);
    }
    try {
      const { access, refresh } = await loginService({
        email,
        password,
        captcha_value: captchaValue,
      });
      setCookie(undefined, cookieNames.userAccessToken, access);
      setCookie(undefined, cookieNames.userRefreshToken, refresh);
      await router.push('/home');
    } catch (error: any) {
      if (error.response.status === 500) return setError('Erro no servidor.');
      if (error.response.data.detail) return setError(error.response.data.detail);
    } finally {
      setIsLoadingLogin(false);
      setPassword('');
      captchaRef.current?.reset();
    }
  }


<form onSubmit={handleLogin}>
...
</form>

CodePudding user response：

Since you say that it's cause of slow connection - means JS is not yet downloaded while you submit your form.

I see few solutions:

1. Add method="POST" to your form - still submit is executed not via JS, but via HTML form
2. Initially hide your form or make submit button disabled. Then when JS is loaded enable form

CodePudding user response：

use btoa() and atob() js functions to encrypt and decrypt