Next.js login form
Answered
Alex posted this in #help-forum
AlexOP
I have the following problem:
currently the way my login form works is this: The form is validated on the client side and makes use of server actions to submit the form. The server action then again validates the data and performs the login. That way the user gets live validation, but it's also more secure because the validation isn't only performed on client side. I am making use of the useFormState hook, to retrieve possible errors from the server side validation and to display them to the user.
I want to have an api route to do the login process, because a mobile app needs to be able to send login requests. But I also do not want duplicate code, so when I create an api route, the web login form should also use it. This would not be a problem, I could just use the api route as value for the forms action attribute, but then how do I retrieve the errors from the server side validation?
Example situation: I have a signup form that works exactly the same. There, a user has to enter an email address. it might look like a valid email address to the client side validation, but possibly it's already used by an existing user. the client side validation can't know that, only the server side validation may provide this kind of error.
Thanks in advance for any help!
currently the way my login form works is this: The form is validated on the client side and makes use of server actions to submit the form. The server action then again validates the data and performs the login. That way the user gets live validation, but it's also more secure because the validation isn't only performed on client side. I am making use of the useFormState hook, to retrieve possible errors from the server side validation and to display them to the user.
I want to have an api route to do the login process, because a mobile app needs to be able to send login requests. But I also do not want duplicate code, so when I create an api route, the web login form should also use it. This would not be a problem, I could just use the api route as value for the forms action attribute, but then how do I retrieve the errors from the server side validation?
Example situation: I have a signup form that works exactly the same. There, a user has to enter an email address. it might look like a valid email address to the client side validation, but possibly it's already used by an existing user. the client side validation can't know that, only the server side validation may provide this kind of error.
Thanks in advance for any help!
Answered by Arinji
action wont work with an api route, what you can do is this... extract the core logic into its own function.. call it both as a server action and an api route, so you dont copy yourself and have 1 source of truth
8 Replies
Could you elaborate on the issue? Could you not just..throw the errors and catch them..or just return sucess: false?
@Alex
@Alex
AlexOP
Yes of course. The question really is, when I submit the form directly via the action attribute like this:
I don't know how to receive error messages. currently I am using the useFormState hook, which takes a server action to perform the submit and returns a state which contains my error message from the server validation. so two possible answers: how do I use the hook without a server action but with an api fetch? or: how do i get errors when using the api route as action?
<form action="/api/auth/login"> ...I don't know how to receive error messages. currently I am using the useFormState hook, which takes a server action to perform the submit and returns a state which contains my error message from the server validation. so two possible answers: how do I use the hook without a server action but with an api fetch? or: how do i get errors when using the api route as action?
action wont work with an api route, what you can do is this... extract the core logic into its own function.. call it both as a server action and an api route, so you dont copy yourself and have 1 source of truth
Answer
AlexOP
great, so like a login(user, password) funktion?
yup
then use the server action in the form action, and the api route for your mobile app :D
AlexOP
Thank you, appreciate it!
No worries ;D