#Why middleware not redirecting routes until hard refresh?

1 messages · Page 1 of 1 (latest)

cerulean pagoda
#

I have an authentication flow with Sign up, Login and Home page.

Sign up and Login pages should not be accessible after successful login. And after successful Login, the user redirects to Home page.

The problem is if I click back button in the browser, I'm going back to the Login page. But if I do a hard refresh there(in Login page) I get redirected to the Home page as expected and now even if I try to go back by clicking browser back button, it automatically redirects me to the Home page.

Why before hard reload I was able to go to Login page even though it is protected in middleware?


const isPublicRoute = publicRoutes.some((prefix) =>
    request.nextUrl.pathname.startsWith(prefix)
);

if (session && isPublicRoute) {
    const absoluteURL = new URL("/", request.nextUrl.origin);
    return NextResponse.redirect(absoluteURL);
}```

This is my middleware.

Any help would be much appreciated!
cinder compassBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

white mulch
#

I think the middleware runs only the first time you visit the page and then it gets cached in the router on the client side.

I am really not sure but what you can do is run router refresh after updating the session:

function loginUser(){
   // ...your login logic
   router.refresh()
}

I had similar problem with next auth previously and this solved it.

cerulean pagoda
#

Recently I tried a different thing:

          window.history.replaceState(null, "", (window.location.href = "/"));
}```

This works with expected result. That is like replacing previous `/login` route with `/` or Home in the history.

So, the issue with credentials auth is fixed.

But the Google auth page issue still persist. The actual problem or something I'm not understanding is that, I use same component `<GoogleAuth />` in Sign up page and Login page. As the Google auth work similarly for new users and existing users, it is supposed to work in a similar way in both from Sign up and Login page. But from Sign up page, it logs in the user and route to Home page and if I click back button, I will not go back to Sign up page. But the same component takes user back to Login page if `<GoogleAuth />` this component from Login page is used.
#

Same component behaves differently in different page. I'm not getting what is the actual issue causing this.

FYI: Google auth logics are in the <GoogleAuth /> component.

cerulean pagoda
cerulean pagoda
#

BUMP

bronze steeple
#

Seems like you’re being a victim of Next.js hard cache behaviors lol. When you navigate back and forth you’re basically re-using the page from the existing cache and since the page isn’t running again or being requested again the auth check is skipped, that’s why when you refresh it does work, because you’re running the check again.

#

Try marking the pages as dynamic to see if that prevents the cached page

export const dynamic = “force-dynamic”;

#

also what Next.js version you’re on? Next.js cache defaults and heuristic change between versions

cerulean pagoda
cerulean pagoda
cerulean pagoda
bronze steeple
#

If you’re using a Server Action to log users in then you could call revalidatePath(“/the-path-you-wanna-purge/“) to clear the cache for that specific path and force the client to request the page again with the latest data instead of reusing the old version

daring wolf
#

What's the most efficient way of guarding my endpoints in next.js app router

cerulean pagoda
cerulean pagoda
#

Cuz browser back button is creating the problem(allowing route to previous /login even if user already logged in) in my case.

trail lantern
#

middleware only runs on hard refresh

#

if you set cookies in server action, it'll run again for next req

bronze steeple
#

revalidatePath() /revalidateTag() is meant to use as a side-effect to an action and it’s meant to be used only on the Server Side, for example, after you did a mutation in a Server Action or route handler.

For client components you can use router.refresh() instead and this will also purge the cache

cerulean pagoda
bronze steeple
#

What’s the main issue you’re dealing with?

Next.js caching is kind of an extended topic and might bring lots of different issues

cerulean pagoda
#

My current situation feels so crazy.

Scenario 1:
Currently I'm in Login page(/login) and successfully logged in and routed to Home page(/). Now if I click browser back button I goes back to Login page. Now if I click forward button on browser, I can go forth and back until I hard reload in Login page(/login), now it works as expected and redirect to /(expected behavior).

Scenario 2:
Currently I'm in Home page(/) and then navigate to Login page(/login) and successfully logged in and routed to Home page(/). Now if I click browser back button I goes back to Login page. [Change happens from here:] Now if I click back button again, I go back to Home page(/) as I started from there. Now if I click forward button, which is to Login page(/login), and now I don't see the Login page but instead redirect to Home page. Now everything works as expected!

Analysing these 2 scenarios what I understand is that The issue is only happens when back button clicked, it works as expected when a forward button is clicked!

cerulean pagoda
bronze steeple
#

Would be a lot of work to replicate your issue in my end, with the same Next.js versions so I could try and see what works and what doesn’t.

I wanna believe you tried all the stuff I’ve suggested, and if you did that might be all I can do to help sadly 😦

dry surge
#

@cerulean pagoda I tried to replicate your issue but it is not working the way you pointed. On my side after successful login in if I go back to login page with back button, it still pushes me to the home page.

#

If it still does not work let me know.

cerulean pagoda
cerulean pagoda
cerulean pagoda
cerulean pagoda
#

Just to share a live test link.

bronze steeple
cerulean pagoda
dry surge
dry surge
cerulean pagoda
#

Thanks a lot @bronze steeple for your help and advice!😍

#

Thanks to you too @dry surge!