How can I get the value of 6 pin OTP sent to email from supabase?

Question

I'm trying to verify the user email first before signing up by sending the user a 6pin code through email. I used {{.token}} in email template of supabase to generate the 6 pin sent to the user. Now I wonder how can I grab this {{.token}} to check if it matched the token that was sent from email? After confirming if the code is matched, he can proceed to submitting and sign the user up to create an account.

I have tried using the verifyOTP method from supabase docs and I expect it to get the 6 pin code that was sent to email. At this moment i'm just trying to console the data if I can get the value of this token.

I tried looking into these docs but I don't understand how will it work or is it even possible?

Email template from supabase

Method Used

 //*Verify Email from 6 digit code
  const email = formData.email
  const handleVerify = async () => {
    const { session, error } = await supabase.auth.verifyOtp({email, type: "email"});
    if (error) {
      setErr(error);
      console.log(error);
    } else {
      //setOTP(session.provider_token);
      console.log(session.provider_token);
    }
  };

//*Onsubmit
  const handleSubmit = async (e) => {
    e.preventDefault();

    const { error } = await supabase.auth.signUp({
      email: formData.email,
      password: formData.password,
      sendEmailVerification: true,
      options: {
        data: {
          username: formData.username,
          first_name: formData.Fname,
          last_name: formData.Lname,
          middle_name: formData.Mname,
          phone: formData.Phone,
          birth_date: date,
        },
      },
    });

    if (error) {
      setErr(error);
    } else {
      toast.info("veirification sent in your email.");
    }
  };