forbidden() not working as expected
Answered
Salliii posted this in #help-forum
SalliiiOP
In the onSubmit method of my login form, I fetch my login API route, where I attempt to call forbidden(). I expected this to trigger a redirect to forbidden.tsx, but that’s not happening. Instead, I just get a 403 response with no errors or further indications.
According to the documentation, forbidden() should work in Route Handlers, but it doesn't seem to have the expected effect. Since forbidden() can't be executed on the client side, I can't simply trigger it when receiving a 403 response.
I also tested forbidden() inside a Server Component, and there it worked as expected, triggering a redirect. But in the API route, it just returns a 403 response without any redirection.
This is my first time working with forbidden(), so I’m not sure if I’m missing something. Does anyone know if this is expected behavior?
According to the documentation, forbidden() should work in Route Handlers, but it doesn't seem to have the expected effect. Since forbidden() can't be executed on the client side, I can't simply trigger it when receiving a 403 response.
I also tested forbidden() inside a Server Component, and there it worked as expected, triggering a redirect. But in the API route, it just returns a 403 response without any redirection.
This is my first time working with forbidden(), so I’m not sure if I’m missing something. Does anyone know if this is expected behavior?
Answered by joulev
are you sure you want to go to a 403 page when submitting the form? that would be poor UX. something like a toast saying "forbidden" or an error message on the form is much better design.
but if you want to render the 403 page no matter what (which would also prevent your users from resubmitting the form unless they go back to the form page), you can do
but if you want to render the 403 page no matter what (which would also prevent your users from resubmitting the form unless they go back to the form page), you can do
const [isForbidden, setIsForbidden] = useState(false):
if (isForbidden) forbidden();
const onSubmit = async () => {
const res = await fetch():
if (res.status === 403) {
setIsForbidden(true);
return;
}
}4 Replies
@Salliii In the onSubmit method of my login form, I fetch my login API route, where I attempt to call forbidden(). I expected this to trigger a redirect to forbidden.tsx, but that’s not happening. Instead, I just get a 403 response with no errors or further indications.
According to the documentation, forbidden() should work in Route Handlers, but it doesn't seem to have the expected effect. Since forbidden() can't be executed on the client side, I can't simply trigger it when receiving a 403 response.
I also tested forbidden() inside a Server Component, and there it worked as expected, triggering a redirect. But in the API route, it just returns a 403 response without any redirection.
This is my first time working with forbidden(), so I’m not sure if I’m missing something. Does anyone know if this is expected behavior?
that's the normal, expected behaviour. notFound(), forbidden() and such will trigger the tsx files in components (not necessarily server components), but will return a response with an appropriate status code in route handlers.
in components you would want to serve a user-friendly screen to tell users what is wrong. so the tsx file is served. you don't need to serve the tsx file for route handlers because users don't use them directly, bots do – and status codes are more helpful to bots than a html response.
in components you would want to serve a user-friendly screen to tell users what is wrong. so the tsx file is served. you don't need to serve the tsx file for route handlers because users don't use them directly, bots do – and status codes are more helpful to bots than a html response.
SalliiiOP
Yeah that makes sense, but what's the best way to handle this? How can I redirect to the forbidden page when my login page receives a 403 response?
The entire login form has to be a client component, meaning I can't call forbidden() directly. So what would be the best approach to achieve this?
The entire login form has to be a client component, meaning I can't call forbidden() directly. So what would be the best approach to achieve this?
@Salliii Yeah that makes sense, but what's the best way to handle this? How can I redirect to the forbidden page when my login page receives a 403 response?
The entire login form has to be a client component, meaning I can't call forbidden() directly. So what would be the best approach to achieve this?
are you sure you want to go to a 403 page when submitting the form? that would be poor UX. something like a toast saying "forbidden" or an error message on the form is much better design.
but if you want to render the 403 page no matter what (which would also prevent your users from resubmitting the form unless they go back to the form page), you can do
but if you want to render the 403 page no matter what (which would also prevent your users from resubmitting the form unless they go back to the form page), you can do
const [isForbidden, setIsForbidden] = useState(false):
if (isForbidden) forbidden();
const onSubmit = async () => {
const res = await fetch():
if (res.status === 403) {
setIsForbidden(true);
return;
}
}Answer
SalliiiOP
Yeah, I know it's not the cleanest solution xD but in this case that's exactly what I intended. The forbidden message is meant to be shown when a user tries to log in from a device that has been explicitly blacklisted by the account owner. Of course, incorrect credentials wouldn’t trigger a forbidden response.
Using a toast was my initial thought as well, and now I’m reconsidering whether a toast notification might actually be the better approach after all. Thanks for the input.
Ups, I really should have figured that out myself 🙈 I was overthinking and making things way more complicated than they needed to be. Appreciate the help!
Using a toast was my initial thought as well, and now I’m reconsidering whether a toast notification might actually be the better approach after all. Thanks for the input.
Ups, I really should have figured that out myself 🙈 I was overthinking and making things way more complicated than they needed to be. Appreciate the help!