Why does URL not update immediately after sign-out until page reload in Next.js?

[theishu4]

I'm building an authentication flow in a Next.js app, and I'm facing an issue with redirecting users to the sign-in page after they sign out. Here’s a summary of the problem:

1. Current Flow: When the user clicks the "Sign out" button on the /settings page which is protected, they are logged out, and the page shows the sign-in UI. However, the URL does not update to /auth/signin as expected. Instead, it still shows /settings.
2. Expected Behavior: After signing out, I want the user to be redirected to the /auth/signin page, and the URL should reflect this change immediately. It is redirecting find while doing signIn from /atuh/signin to /settings.
3. Issue: The sign-in page is displayed, but the URL only updates to /auth/signin after a manual page refresh. This is confusing because the user sees the sign-in content, but the URL is misleading.

Code Snippet

Here’s a simplified version of my sign-out handler:

import { auth, signOut } from "@/auth";
import { Button } from "@/components/ui/button";

export default async function SettingsPage() {
  const session = await auth();

  if (!session) return <div>Not authenticated</div>;
  return (
    <div>
      {JSON.stringify(session)}
      <form
        action={async () => {
          "use server";
          await signOut();
        }}
      >
        <Button type="submit">Sign out</Button>
      </form>
    </div>
  );
}

Screenshots

1. Before Sign-out: /settings page with user information.
   

2. After Clicking Sign-out: Sign-in page content is shown, but the URL is still /settings.
   

3. After Manual Reload: URL updates to /auth/signin as expected.
   

Questions

• Why does the URL not update immediately after signing out and redirecting?
• How can I force the URL to update to /auth/signin without requiring a page reload?

Any guidance would be much appreciated! Thank you.