VerifyOtp() 401 error but verified user being created in Supabase without verification

I'm noticing weird behaviour with my app with regards to the verifyOtp() function.

STACK:
Next.js
React Hook Form (for accepting user input)

USE CASE:
I'm creating a sign-up wizard, where the user is prompted for their email, which then gets sent a verification code. I then take the user to a page where they enter the OTP received. Upon successfully verifiying their email with OTP, they should be directed to a "Complete Your Profile" page

The code for this function is here:

   const sendVerificationCode = async (data) => {
        setLoading(true)
        setEmail(data.email)
        const { error } = await supabase.auth.signInWithOtp({
            email,
            shouldCreateUser: false
        })
        if (!error) {
            setLoading(false)
            router.push('/sign-up/with-email/verify-email')
        } else {
            setLoading(false)
            console.log(error)
        }
        
    }

   const sendVerificationCode = async (data) => {
        setLoading(true)
        setEmail(data.email)
        const { error } = await supabase.auth.signInWithOtp({
            email,
            shouldCreateUser: false
        })
        if (!error) {
            setLoading(false)
            router.push('/sign-up/with-email/verify-email')
        } else {
            setLoading(false)
            console.log(error)
        }
        
    }

The email with the verification code gets sent successfully, but I notice that a verified user is created in supabase, before verifying the OTP. This is problem 1 and I am not sure what's going wrong.

The second problem is a 401 error is returned when calling the verifyOtp function on the subsequent page.

The code for this function is here:

const [email] = useEmailSignUpStore((state) => [state.email], shallow);

    const verifyCode = async (formData) => {
        setErrorMSG(null)
        setLoading(true)
        const token = formData.otpInput
        const { error } = await supabase.auth.verifyOtp({ email, token, type: 'signup' }) 
        if (!error) {
            setLoading(false)
            router.push('/sign-up/with-email/complete-profile')
        } else {
            setLoading(false)
            console.log(error)
            setErrorMSG('Invalid Verification Code')
        }

    }

const [email] = useEmailSignUpStore((state) => [state.email], shallow);

    const verifyCode = async (formData) => {
        setErrorMSG(null)
        setLoading(true)
        const token = formData.otpInput
        const { error } = await supabase.auth.verifyOtp({ email, token, type: 'signup' }) 
        if (!error) {
            setLoading(false)
            router.push('/sign-up/with-email/complete-profile')
        } else {
            setLoading(false)
            console.log(error)
            setErrorMSG('Invalid Verification Code')
        }

    }

VerifyOtp() 401 error but verified user being created in Supabase without verification

   const sendVerificationCode = async (data) => {
        setLoading(true)
        setEmail(data.email)
        const { error } = await supabase.auth.signInWithOtp({
            email,
            shouldCreateUser: false
        })
        if (!error) {
            setLoading(false)
            router.push('/sign-up/with-email/verify-email')
        } else {
            setLoading(false)
            console.log(error)
        }
        
    }

   const sendVerificationCode = async (data) => {
        setLoading(true)
        setEmail(data.email)
        const { error } = await supabase.auth.signInWithOtp({
            email,
            shouldCreateUser: false
        })
        if (!error) {
            setLoading(false)
            router.push('/sign-up/with-email/verify-email')
        } else {
            setLoading(false)
            console.log(error)
        }
        
    }

const [email] = useEmailSignUpStore((state) => [state.email], shallow);

    const verifyCode = async (formData) => {
        setErrorMSG(null)
        setLoading(true)
        const token = formData.otpInput
        const { error } = await supabase.auth.verifyOtp({ email, token, type: 'signup' }) 
        if (!error) {
            setLoading(false)
            router.push('/sign-up/with-email/complete-profile')
        } else {
            setLoading(false)
            console.log(error)
            setErrorMSG('Invalid Verification Code')
        }

    }

const [email] = useEmailSignUpStore((state) => [state.email], shallow);

    const verifyCode = async (formData) => {
        setErrorMSG(null)
        setLoading(true)
        const token = formData.otpInput
        const { error } = await supabase.auth.verifyOtp({ email, token, type: 'signup' }) 
        if (!error) {
            setLoading(false)
            router.push('/sign-up/with-email/complete-profile')
        } else {
            setLoading(false)
            console.log(error)
            setErrorMSG('Invalid Verification Code')
        }

    }

VerifyOtp() 401 error but verified user being created in Supabase without verification

VerifyOtp() 401 error but verified user being created in Supabase without verification

Similar Threads

Similar Threads

Similar Threads