Need help with handling Convex Auth signIn errors in prod
I'm using Convex Auth and during dev I'm handling signin errors like this:
I noticed this doesn't work in production because the errors lose any kind of descriptions when they arrive to the client. Now, what's the correct way to handle auth errors (like user logins but it is not registered, the password is wrong, etc)? Thank you
const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
if (!validateForm()) return
setSubmitting(true)
try {
const formDataToSend = new FormData()
formDataToSend.append("email", formData.email)
formDataToSend.append("password", formData.password)
formDataToSend.append("flow", flow)
const { signingIn } = await signIn(provider ?? "password", formDataToSend)
if (!signingIn) {
handleSent?.(formData.email)
}
} catch (error: any) {
console.error({ error })
let title = "An error occurred"
let description = ""
if (error.message.includes('InvalidAccountId')) {
title = flow === "signIn" ? "Account not found" : "Email already registered"
description = flow === "signIn" ? "Maybe you meant to sign up?" : "Maybe you meant to log in?"
} else if (error.message.includes('InvalidSecret')) {
title = "Incorrect password"
description = "Check your password or reset it"
} else if (error.message.includes('TooManyFailedAttempts')) {
title = "Too many attempts"
description = "Try again later or reset your password"
} else if (error.message.includes(`Account ${formData.email} already exists`)) {
title = "Account already registered"
description = "Maybe you meant to log in?"
}
toast({ title, description, variant: "destructive" })
} finally {
setSubmitting(false)
}
}const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
if (!validateForm()) return
setSubmitting(true)
try {
const formDataToSend = new FormData()
formDataToSend.append("email", formData.email)
formDataToSend.append("password", formData.password)
formDataToSend.append("flow", flow)
const { signingIn } = await signIn(provider ?? "password", formDataToSend)
if (!signingIn) {
handleSent?.(formData.email)
}
} catch (error: any) {
console.error({ error })
let title = "An error occurred"
let description = ""
if (error.message.includes('InvalidAccountId')) {
title = flow === "signIn" ? "Account not found" : "Email already registered"
description = flow === "signIn" ? "Maybe you meant to sign up?" : "Maybe you meant to log in?"
} else if (error.message.includes('InvalidSecret')) {
title = "Incorrect password"
description = "Check your password or reset it"
} else if (error.message.includes('TooManyFailedAttempts')) {
title = "Too many attempts"
description = "Try again later or reset your password"
} else if (error.message.includes(`Account ${formData.email} already exists`)) {
title = "Account already registered"
description = "Maybe you meant to log in?"
}
toast({ title, description, variant: "destructive" })
} finally {
setSubmitting(false)
}
}I noticed this doesn't work in production because the errors lose any kind of descriptions when they arrive to the client. Now, what's the correct way to handle auth errors (like user logins but it is not registered, the password is wrong, etc)? Thank you
