frederik_diamond on Nostr: I moved on to working on getting login fully implemented. Displaying error messages ...
I moved on to working on getting login fully implemented.
Displaying error messages in the login form turned out to be a bit of an unexpected challenge. Not something I thought I’d be spending a few hours trying to get working.
I finally have something that sort of works.
For the signup form, displaying error messages was no problem, but for the login functionality, it’s more challenging because I’m using Remix Auth (and the docs weren't that helpful to me).
In my auth.server.ts file, I define my FormStrategy and do the validation, like check whether the email/username and password match any row in my ‘users’ table in the database. The passwords are of course hashed. I use Argon2 for that.
It’s also in the auth.server.ts file, where I define the error messages using AuthorizationError like “Incorrect password” or “User not found” and so on. Getting these messages to the frontend is what I’ve been having trouble with.
There aren’t many examples available on how to set this up, and the Remix documentation isn’t particularly helpful — at least, when it comes to Remix Auth. Seems like most people opt for Next Auth. Though, getting the credentials working for Remix Auth was way easier than when I used Next Auth for my social media project.
Next Auth really don't want devs to use email/password as credentials for their login forms (in fact I think they actively try to make it as hard as possible to do that), instead they encourage devs to opt for OAuth solutions which I hate...
This was a pretty helpful resource for me to get Remix Auth up and running: https://github.com/theianjones/remix-course/tree/master/remix-social
Displaying error messages in the login form turned out to be a bit of an unexpected challenge. Not something I thought I’d be spending a few hours trying to get working.
I finally have something that sort of works.
For the signup form, displaying error messages was no problem, but for the login functionality, it’s more challenging because I’m using Remix Auth (and the docs weren't that helpful to me).
In my auth.server.ts file, I define my FormStrategy and do the validation, like check whether the email/username and password match any row in my ‘users’ table in the database. The passwords are of course hashed. I use Argon2 for that.
It’s also in the auth.server.ts file, where I define the error messages using AuthorizationError like “Incorrect password” or “User not found” and so on. Getting these messages to the frontend is what I’ve been having trouble with.
There aren’t many examples available on how to set this up, and the Remix documentation isn’t particularly helpful — at least, when it comes to Remix Auth. Seems like most people opt for Next Auth. Though, getting the credentials working for Remix Auth was way easier than when I used Next Auth for my social media project.
Next Auth really don't want devs to use email/password as credentials for their login forms (in fact I think they actively try to make it as hard as possible to do that), instead they encourage devs to opt for OAuth solutions which I hate...
This was a pretty helpful resource for me to get Remix Auth up and running: https://github.com/theianjones/remix-course/tree/master/remix-social
quoting nevent1q…ygdsThe problem I experienced had nothing to do with the form validation I made. Instead, it turned out that I had imported 'json' and 'redirect' from the wrong package — I had used '@remix-run/node' instead of '@remix-run/react'...
The form validation is almost working perfectly now.
I need to implement a few more things:
- Make the 'Create Account' button disabled when there is an error in the form.
- Bring the error messages from the backend to the frontend. For instance, I've made functionality to check in the DB if the email or username is already taken and if so, then display an error message in the UI.
#WebDevelopment #RemixRunnote1dm8…4uue