No protected route page after successful sign in

[aabbtree77]

First of all, thank you for this code and your amazing youtube tutorials. In the year 2024 the whole node.js ecosystem still does not have a standard RoR/Django type of server side authentication library, it is unbelievable how bad this is! So you are doing a great work in the right direction.

I noticed there is still a problem with the code. After signing in, the toast will always briefly show "Signed in successfully", but the page with the protected route may not be displayed. I need to hit Chrome's "Refresh" to get to that page at times. The browser's address still shows "http://localhost:3000/sign-in" instead of "http://localhost:3000/" despite the browser's console showing that router.push("/"); is executed inside components/singInForm.tsx.

Drizzle Studio shows the session is created, but I am still on the sign-in page when this happens. If I don't press "Refresh", but click again on sign-in or I enter a wrong username/password, all sorts of bugs will occur, multiple sessions, runtime errors...

Adding console.log(user) inside "export default async function Home() {" inside app/page.tsx shows that this function is not reached after "Signed in successfully" when the bug occurs.

This happens mostly when I do a quick sign in after a sign out, mostly.

[aabbtree77]

Notice that this problem totally disappears if I click "Refresh" in the browser when the protected page does not show up.

What I have tried so far (leading to nowhere):

1. Adding this into app/layout.tsx or app/page.tsx

export const fetchCache = "force-no-store";

2. Adding router.refresh() in components/SignInForm.tsx:

router.push("/");
 //Does not do anything:
router.refresh();

[aabbtree77]

In case someone out there experiences similar problems, what has worked for me is removing

router.push("/")

inside components/SignUpForm.tsx and components/SignInForm.tsx.

Oddly, this router.push("/") may prevent rerendering of the Home component in app/page.tsx as if it were cached, though disabling caching with "unstable_noStore" would not make this work anyway.

It turns out that router.push("/") is not needed, "onSubmit" inside signInForm.tsx executes signIn which sets all the Lucia v3 sessions, and afterwards the component Home() inside app/page.tsx is updated as Next.js rerenders that page after "onSubmit" is executed. During the update, validateRequest produces a nonempty user and that allows to bypass "Sign in" redirect and return the main element with the "Protected Route" paragraph and "Sign out" button.

Caching in Next.js remains unclear to me, i.e. why this push may prevent rerendering of app/page.tsx, it also does not add anything to the "history stack" as stated in the documentation (clicking on the "Back" button in Chrome would not work).