auth-js
auth-js copied to clipboard
No way to display cusom error messages
Bug report
- [x] I confirm this is a bug with Supabase, not with my own application. Yes because previously I did smth like this and it worked
if ((error as { code?: string })?.code === "23505") {
displayResponseMessage(<p className="text-danger">This user already exists</p>)
}
- [x] I confirm I have searched the Docs, GitHub Discussions, and Discord.
Describe the bug
No way to handle login/register errors with I use Next 13.5 + TypeScript
} catch (error: unknown) {
if (error instanceof AuthError) {
if (error.message.includes("duplicate key value violates unique constraint")) {
displayResponseMessage(<p className="text-danger">User with this username/email already exists.</p>)
} else {
displayResponseMessage(<p className="text-danger">{error.message}</p>)
}
console.error("Login with email - ", error)
} else {
displayResponseMessage(
<p className="text-danger">
An unknown error occurred - contact admin
<Button href="https://t.me/nicitaacom" variant="link">
here
</Button>
</p>,
)
console.error("Unknown error - ", error)
}
}
To Reproduce
Its not minimal example becasue codesadbox doesn't work in vs code and I have error making codesandbox as public (support ignores me) - to do something with issue just create supabase example how to display custom error messages when login (you can make sure that its doesn't work if you make git cline
and pnpm dev
- then try to signUp with [email protected] email (this email already exist and it thow no relevat/customizable error message)
https://github.com/nicitaacom/23_store/blob/development/app/components/ui/Modals/AuthModal/AuthModal.tsx
173 line
- Go to github repository
- Scroll down to 173 line
- How display custom error from supabase here?
Expected behavior
When I write code above - nothing happening but in dev tools console I got the error
System information
- Version of supabase-js:
"next": "13.5.3",
"@supabase/auth-helpers-nextjs": "^0.8.1",
"@supabase/supabase-js": "^2.36.0",
- Version of Node.js: 18.13.0
Hi @nicitaacom, it appears that the link to your github repo is broken, can you please paste the correct link to the code snippet so that we can investigate further?
can you please paste the correct link to the code snippet
I corrected it - thank you for your interest in this issue
@nicitaacom thanks for updating the link! what is the value of error as { code?: string })?.code
when you do:
if ((error as { code?: string })?.code === "23505") {
displayResponseMessage(<p className="text-danger">This user already exists</p>)
}
what is the value of...
its value for error code
Please avoid using instanceof
for checking errors. Use isAuthError
and other helper functions in such cases.
Please avoid using
instanceof
for checking errors. UseisAuthError
and other helper functions in such cases.
Provide code please
Do you mean instead
if (error instanceof AuthError) {
use
if (error instanceof isAuthError) {
@nicitaacom he meant use this instead.
if (isAuthError(error)) {
...
}
As for customising error messages for Auth, I don't think it's possible as of now. The closest thing I could find was Auth Hooks, but I don't think this does what you'd want, plus it doesn't come free.
@kangmingtay this would be a nice feature though (not sure if it's already open somewhere).
Currently for Supabase API calls, you can throw exceptions using trigger functions to add validations (Ex: If a user tries to add an invalid record, you can create a trigger to check the record and raise an exception). ~ More info
I tested this by inserting data into a public table, and I got a proper error message and status code (the same as the one's I set). However, this doesn't work for auth requests (Ex: supabaseClient.auth.signUp()
). I tried creating a trigger that raises an exception on auth.users
insert, however it gives back a generic error message "Database error saving new user". This was probably done for security reasons, but it would be nice to somehow add custom error messages.
I'm currently planning to write a Deno wrapper function around the signUpWithPassword()
function to handle validations.