SPRINT 4 ‐ EMAIL OTP VERFICATION (SignUp Page) - BlueJayBird11/UniJet GitHub Wiki

About

While signing up for the website, you are required to verify your email that you signup with. Users are not able to proceed unless they verify their email address.

Usage

After you fill out all the forms while signing up and then press sign up, you will get a pop up modal saying to verify your email.

image

You will also get One Time Passcode in your email address you used to signup.

image

After being successfully Verified, you will get alert saying you are verified, and then you can proceed with rest of the signing up.

image

Workings

The codes associated with generating and sending OTP on backend side are shared with OTP verification used for resetting the password. The changes in front end are located in The file associated with resetting password is located in Unijet/frontend/src/scenes/loginAndSignup/SignUpPage.tsx.

The following is the snippet of code for calling api to send otp:

const handleSignup = async (e: FormEvent) => {
    try {
      await axios.post('http://localhost:8000/api/send-otp', { email });
      setShowOtpModal(true);
    } catch (error) {
      console.error("Error sending OTP:", error);
      setOtpError('Failed to send OTP. Please try again.');
    }   

The following is the snippet of code to verify the OTP:

const verifyOtp = async () => {
    try {
      const response = await axios.post('http://localhost:8000/api/verify-otp', { email, otp });
      alert("OTP verified successfully.");
      setShowOtpModal(false);
      setShowModal(true);
    } catch (error) {
      console.error("Error verifying OTP:", error);
      setOtpError('Failed to verify OTP. Please try again.');
    }
  };