My NextJS application sometimes behaves unexpectedly.
Whenever I have a slow connection and the initial load time of the site is longer than usual, after trying to log in to the application, the credentials I entered are displayed in the URL. This happens even though I have included event.preventDefault() in the submit function and I am not using GET method.
I attempted to enhance the app's performance and reduce the loading time of the pages initially, but if a user intentionally slows down the loading time, it can become exploitable.
All I want is to prevent the credentials from being exposed in the URL. It could potentially be replaced with any other type of error.
Below is the code snippet:
async function handleLogin(event: FormEvent<HTMLFormElement>) {
event.preventDefault();
setIsLoadingLogin(true);
setError('');
const captchaValue = await captchaRef.current?.executeAsync();
if (!captchaValue) {
setError('Captcha Error. Please try again later.');
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('Server Error.');
if (error.response.data.detail) return setError(error.response.data.detail);
} finally {
setIsLoadingLogin(false);
setPassword('');
captchaRef.current?.reset();
}
}
<form onSubmit={handleLogin}>
...
</form>