User Story: As a developer, I only want verified emails and phone numbers to be able to signup on our website.

About

Verification is a top priority in our software, it helps us to avoid scam account and improve the safety of using our website. As we had mentioned in previous sprints, only latech emails can signup using our website. We have taken this one step further and made it such that the emails have to be verified in order to access our website. We are using google's firebase API to handle verification.

Usage.

After you have signed up using your email, it will then show you that the verification email has been sent.

and when you check the email which you used to sign up, you get email like this:

Once you clicked the link to verify your email, it will look like this:

After that you can login into the website using your credentials while signing up.

Unverified emails

If you have signed up but haven't verified the email address, you are not able to login into the website.

If the said email is already used on our system, it will show error in signup process and lets the user know that the email is already verified.

Workings

Main file for firebase API are located in Firebase_stuff inside loginAndSignup folder. Currently, the API is called in SignupPage.tsx and LoginPage.tsx. firebase also handles password reset functionality.

Use in Login Page

In login page, firebase is currently used to authenticate whether the said email is is authentic or not, it can detect if the email is in database, or if it is an invalid credentials, or if the user account associated with the email is suspended by devs team.

The following is the snippet of code that handles firebase in login page:

  const handleLogin = async (e: FormEvent) => {
    e.preventDefault();
    setLoginError('');
    setEmailVerificationWarning('');
  
    try {
      const userCredential = await signInWithEmailAndPassword(auth, email, password);
      const user = userCredential.user;
  
      if (!user.emailVerified) {
        setEmailVerificationWarning('Please verify your email before logging in.');
        return;
      } else{
        onLogin();
        navigate('/dashboard');
      }
  
    } catch (error: any) {
      console.log(error.code);
      switch (error.code) {
        case 'auth/user-not-found':
          setLoginError('No account found with this email address.');
          break;
        case 'auth/invalid-credential':
          setLoginError('Provided credentials are invalid. Please try again.');
          break;
        case 'auth/user-disabled':
          setLoginError('Your account has been banned');
          break;
        default:
          setLoginError('Login failed. Please try again.');
          break;
      }
    }

Use in SignUp Page

In SignUp page, firebase is used to send verification link to the the user's email. It is also used to check if the provided email address is already in use. The following is snippet of code that handles firebase in SignUp page:

    try {
      const userCredential = await createUserWithEmailAndPassword(auth, email, password);
      sendEmailVerification(userCredential.user)
        .then(() => {
          setFeedbackMessage('Verification email sent. Please check your inbox.');
          setShowModal(true); // Proceed to role selection only if verification email sent successfully
        })
        .catch((verificationError) => {
          setError('Failed to send verification email. Please try again.');
          console.error(verificationError);
        });
    } catch (signupError: any) {
      if (signupError.code === 'auth/email-already-in-use') {
        setError('This email is already registered.');
      } else {
        setError('Failed to create account. Please try again.');
      }
      console.error(signupError);
    }
  }

Firebase dashboard

Firebase provides devs team a dashboard from where they can control the user accounts without risking their confidential information such as their password. Devs team can manually send reset password link to the users, disable their accounts, or delete their account, but they are not able to view passwords and other sensitive details abouts the users. These account details are hashed by firebase's software and are stored securely.