Add submission key to frontend to prevent duplicate signups

src/models/Signup.ts

@@ -1,7 +1,8 @@
 import { OptionTypes } from "@components/Widgets/SignupQuestionsWidget/common";
 
 export interface Signup {
-  id?: number;
+  id?: number; // Database id for completed signup
+  submitKey?: string; // Signup request idempotency key
   signupForm_id: number;
   answer: string;
 }

src/pages/signup/[id].tsx

@@ -13,6 +13,7 @@ import PageWrapper from "@views/common/PageWrapper";
 import LoadingView from "@views/common/LoadingView";
 import noop from "@utils/noop";
 import NotFoundPage from "@pages/404";
+import { v4 as uuid } from "uuid";
 
 type InitialProps = {
   initialForm: SignupForm;
@@ -23,6 +24,7 @@ const FORM_URL = `${process.env.NEXT_PUBLIC_API_URL}/signupForm/`;
 const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
   const router = useRouter();
   const id = String(initialForm?.id ?? "");
+  const submitKey = uuid(); // Submission key, generated on page refresh
   const URL = `${FORM_URL}${id}/`;
   const { data: signupForm, error } = useSWR<SignupForm>(URL, (url) => axios.get(url).then((res) => res.data), { fallbackData: initialForm });
 
@@ -43,6 +45,7 @@ const SignUpPage: NextPage<InitialProps> = ({ initialForm }) => {
 
   const onSubmit = async ({ formData }: ISubmitEvent<string>) => {
     const payload: Signup = {
+      submitKey, // This is for preventing duplicate requests; NOT RELATED TO THE SIGNUP ID IN DATABASE
       signupForm_id: signupForm.id,
       answer: formData,
     };