How do I redirect to the last URL before user signs in/up?
Answered
Order posted this in #help-forum
OrderOP
I'm making an authentication for my web app and when the user hits a protected path, I would like for them to get redirected back to that path after signin up or signing in. I'm using lucia auth, the app router and server actions for the sign up and sign in process. I just don't remember what was the trick with redirecting back to the previously visited url ( and I also don't know if I should do this using redirect() inside of the server action or if I need client side access and I should do it inside the onsubmit function of my form submit button)
13 Replies
OrderOP
It was with router.back(), figured it out
however if the user comes directly to the sign-in page from another website they'll then get redirected back to that other website?? I'm pretty sure there was another way.
@Order I'm making an authentication for my web app and when the user hits a protected path, I would like for them to get redirected back to that path after signin up or signing in. I'm using lucia auth, the app router and server actions for the sign up and sign in process. I just don't remember what was the trick with redirecting back to the previously visited url ( and I also don't know if I should do this using redirect() inside of the server action or if I need client side access and I should do it inside the onsubmit function of my form submit button)
A common approach for this would be redirecting to /auth/login for example with a query indicating where they come from. So for example, /auth/login?callbackUrl=/settings
If you see a callbackUrl, you log in and redirect them to that callbackUrl. If there is no callbackUrl, redirect them to a default page like /dashboard or /feed
If you see a callbackUrl, you log in and redirect them to that callbackUrl. If there is no callbackUrl, redirect them to a default page like /dashboard or /feed
router.back() is equivalent to the browser back button, it is not a good choice in this case
OrderOP
Yes that's exactly what I was thinking, I'm so bad with working with queries, definitely need to do a deepdive (especially considering the fact I'll have a search feature in my web app)
So when doing the session check in my protected page I should do something like
if (!session) redirect(/auth/login?callbackUrl${How do I get this I have no idea?} and then inside my login server action i use the redirect() and I get the query param callbackUrl and redirect to there@Order So when doing the session check in my protected page I should do something like `if (!session) redirect(/auth/login?callbackUrl${How do I get this I have no idea?}` and then inside my login server action i use the redirect() and I get the query param callbackUrl and redirect to there
It’s actually easier to do this in middleware, there you can simply
If you want to use redirect in components, then make a client component
This is just a general idea. If you want to keep the search params sent to the protected page as well, or if you need to escape the string, you need to add additional logic to the code above.
return NextResponse.redirect(`/login?callbackUrl=${request.nextUrl.pathname}`)If you want to use redirect in components, then make a client component
"use client"
function RedirectToLogin({ session }) {
const pathname = usePathname();
if (session) return null;
redirect(`/login?callbackUrl=${pathname}`);
}This is just a general idea. If you want to keep the search params sent to the protected page as well, or if you need to escape the string, you need to add additional logic to the code above.
OrderOP
I'm not using middleware with lucia unfortunately, can't I do something similar to what you did in middleware but inside a server component?
Server components in layouts do not get the pathname, this is a fundamental limitation of server components. If you absolutely want to use server components, you will need to copy the redirect() code to every single page.tsx files and hardcode the pathname in the redirect() call, which is very tedious
OrderOP
Answer
OrderOP
this is what I did and it seems to be working
I don't have that many pages so I'm ok with copy pasting this, as long as there are not any bugs/negative implications
OrderOP
It did indeed work but when using router.push() inside my onsubmit function to push to the url it only works half the time, the other half it just stays on the login page. I "fixed" it by adding router.refresh() after router.push(). No idea why it behaves that way, might be because of reacthookform or something else