Curious about a security issue - NextJs course 2

Next.js
1

Hi! In the second course of nextjs we built the new issue form page.

In order to prevent the user from submitting multiple times the same issue we use the disabled={isSubmitting} on the Button component. However I have noticed that if I spam click on the button I can submit form 1 up to 3 times the same issue before I am redirected to the next page.

Do you know how I can prevent this security issue?
(Which I understand in this application it doesn’t matter however I am still curious about it :wink: )

Here is the code:

...
type IssueForm = z.infer<typeof issueSchema>;

const NewIssue = () => {
  const {
    ...
  } = useForm<IssueForm>({
    ...
  });
  ...
  const [isSubmitting, setIsSubmitting] = useState(false);
  ...

  const createNewIssue = async (data: IssueForm) => {

    setIsSubmitting(true);

    try {

      await axios.post('/api/issue', data);
      router.push('/issues');
      //removed the setIsSubmitting to false
    } catch (error) {

      setError('An error has happened!');
      setIsSubmitting(false);

    }
  };

  return (
    <form
      className='max-w-lg ml-8 space-y-4'
      onSubmit={handleSubmit((data: IssueForm) => createNewIssue(data))}
    >
      ...
      {/* text field component */}
      <TextField.Root>
        <TextField.Input placeholder='Issue title' {...register('title')} />
      </TextField.Root>
      ...
      {/* description field component */}
      <Controller
        name='description'
        control={control}
        render={({ field }) => (
          <SimpleMDE placeholder='Issue description' {...field} />
        )}
      />
      
      <Button disabled={isSubmitting}>

        Create issue {isSubmitting && <Loading />}

      </Button>
    </form>
  );
};

export default NewIssue;
2

Your onClick function can set/check a state variable with the current datetime. Then refuse to submit if new request within past time limit. This would allow you to configure the cooldown time.