Loader Data Not Updating After Route Action with Redirect

[mayerstrk]

The Issue

I'm working on a Remix application where the loader data doesn't update after a user signs out and is redirected to the /home route. The UI still shows the user as signed in until I manually refresh the page.

Environment Details

Relevant packages from package.json:

{
  "dependencies": {
    "@remix-run/react": "^2.12.0",
    "@vercel/remix": "^2.11.2",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "remix": "^2.12.0"
  },
  "devDependencies": {
    "@remix-run/dev": "^2.12.0",
    "@types/react": "^18.3.6",
    "@types/react-dom": "^18.3.0",
    "typescript": "^5.6.2"
  }
}

The Setup

Sign-out Route (routes/sign-out.tsx)

import { ActionFunctionArgs, redirect } from '@vercel/remix';
import { destroySession, getSession } from '~/session.server';

export const loader = () => {
  return redirect('/home');
};

export const action = async ({ request }: ActionFunctionArgs) => {
  const session = await getSession(request.headers.get('Cookie'));

  return redirect('/home', {
    headers: {
      'Cache-Control': 'no-store',
      'Set-Cookie': await destroySession(session),
    },
  });
};

export type SignoutAction = typeof action;

Sign-out Confirmation Component

import { Form } from '@remix-run/react';

        <Form
          action='/sign-out'
          method='POST'
          className='flex flex-col items-center justify-center gap-4'
        >
          <h2 className='font-sspro text-lg font-medium'>Are you sure?</h2>
          <div className='flex gap-6'>
            <button
              type='button'
              onClick={toggle}
              className={clsx(
                'mb-[16px] h-10 w-32 rounded-xl font-bold text-blue-500 hover:bg-gray-200 hover:text-white focus:outline-none active:bg-gray-100 active:text-white md:text-[18px]',
              )}
            >
              No
            </button>
            <button
              type='submit'
              className={clsx(
                'mb-[16px] h-10 w-32 rounded-xl bg-blue-500 font-bold text-white hover:bg-[#347EFF] focus:outline-none active:bg-[#2A65CC] md:text-[18px]',
              )}
            >
              Yes
            </button>
          </div>
        </Form>

Home Route Loader (routes/home.tsx)

import { LoaderFunctionArgs, json, redirect, TypedResponse } from '@vercel/remix';
import { serverAuthPublicRoute, AuthState } from '~/auth.server';
import { destroySession } from '~/session.server';
import { useLoaderData } from '@remix-run/react';

type LoaderReturnType = Promise
  TypedResponse
    | {
        searchTerm: string;
        signedIn: true;
        username: string;
      }
    | {
        searchTerm: string;
        signedIn: false;
        username: null;
      }
  >
>;

export const loader = async ({
  request,
  params,
}: LoaderFunctionArgs): LoaderReturnType => {
  const { session, authState, response } = await serverAuthPublicRoute(request);

  if (authState === AuthState.notSignedIn) {
    return json(
      {
        searchTerm: params.searchTerm || '',
        signedIn: false,
        username: null,
      },
      { status: 200 },
    );
  }

  if (authState === AuthState.tokenValidationFailed) {
    return redirect('/', {
      headers: { 'Set-Cookie': await destroySession(session) },
    });
  }

  return json(
    {
      searchTerm: params.searchTerm || '',
      signedIn: true,
      username: response.data.name,
    },
    { status: 200 },
  );
};

export default function Home() {
  const { searchTerm, signedIn, username } = useLoaderData();

  // ...rest of the component
}

Auth Button in Home Component

              <button
                className={`classes`}
                onClick={handleAuthButtonClick}
                style={{ minWidth: '100px' }}
              >
                {signedIn ? username : 'Sign in'}
                {signedIn && (
                  <img
                    src='/images/logout-white.svg'
                    alt='Log out'
                    className='ml-2 h-6 w-6'
                  />
                )}
              </button>

The Problem

When I click the "Yes" button to sign out:

1. The session is destroyed.
2. The action redirects to /home.
3. The UI does not reflect the change in authentication state until manual page refresh.
4. The signedIn state remains true.
5. The username is still displayed.

What I've Tried

1. Using <Form> instead of <fetcher.Form>.
2. Inspecting network requests (session cookie is deleted, redirect occurs).

Questions

1. How can I ensure that the loader data for /home is refreshed after the sign-out action redirects there?
2. Is there something I'm missing in how Remix handles redirects and loader data?

Additional Information

• Using @vercel/remix for deployment.
• Session management via getSession and destroySession.
• serverAuthPublicRoute function checks authentication state.
• Sign-out works correctly if I manually refresh after redirect.
• Problem occurs with both <fetcher.Form> and <Form>.

Any insights or suggestions would be greatly appreciated!

[kiliman]

You're not showing the actual <Form>. How are you calling the signout route? Did you use <Form method="post">? The default is to use GET which would call your signout loader, not the action. The loader doesn't destroy the session.

Also, after Remix revalidates, it will call your home loader. How does serverAuthPublicRoute determine the authentication state?

[mayerstrk]

Thanks for the quick response! :)

I updated the post to include the actual JSX for the form.

I initially thought Remix would automatically run the loader to prevent stale data when navigating to a different route. In my case, serverAuthPublicRoute checks:

  const session = await getSession(request.headers.get('Cookie'))
    const token = session.get('token')
      // does some checks wit the token to return the data

It works correctly. But the signedIn data remains stale until I manually refresh the page.

Any ideas on how I can ensure the signedIn state updates immediately after the sign-out action without needing to refresh?

The default is to use GET which would call your signout loader, not the action. The loader doesn't destroy the session.

I know you couldn't see the form (oops) but I am using method="POST" since its a state-changing operation an it wouldn't be semantic to use GET

The action is running for sure and the session is being destroyed but the UI doesn't reflect the changes without a manual reload.

Again, thanks :)

[kiliman]

Ok, so from what I can tell

1. User signs-out POST /sign-out action
2. Action redirects to /home and destroys session cookie
3. Normally, Remix would revalidate after action, but since redirecting it runs the loader
4. Remix calls loader (without session cookie) ... you may want to add a console.log() here with contents of `request.headers.get('cookie') to ensure loader is called and cookie is gone.
5. Loader calls serverAuthPublicRoute() to get auth state.

Have you verified that serverAuthPublicRoute() returns the correct state?

[mayerstrk]

Remix calls loader (without session cookie) ... you may want to add a console.log() here with contents of `request.headers.get('cookie') to ensure loader is called and cookie is gone.

I added the logs both in the action and the loader

Have you verified that serverAuthPublicRoute() returns the correct state?

Yes, not only does it return the correct state but also the session cookie is destroyed immediately after the redirect. I'm sharing a picture showing the sign out button using the stale signedIn state and the session cookie destroyed.

Sign-out Action (routes/sign-out.tsx)

export const action = async ({ request }: ActionFunctionArgs) => {
  const session = await getSession(request.headers.get('Cookie'))
  console.log('/sign-out action ran')

  return redirect('/home', {
    headers: {
      'Cache-Control': 'no-store',
      'Set-Cookie': await destroySession(session),
    },
  })
}

Home Loader (routes/home.tsx)

export const loader = async ({
  request,
  params,
}: LoaderFunctionArgs): LoaderReturnType => {
  const { session, authState, response } = await serverAuthPublicRoute(request)
  console.log('loader running. authState', authState)
  
  // ... rest of the loader logic
}

Console Logs

// Initial load, `session` cookie exists
loader running. authState 1

// After clicking sign out
/sign-out action ran
// Expected loader log is missing here and `session` cookie is destroyed

// After manual reload or after killing the server and restarting
//  loader runs and UI is updated
loader running. authState 0

1. The sign-out action runs successfully. It redirects to /home and destroys the cookie.
2. The home loader doesn't seem to run after the redirect from the sign-out action.
3. With a manual refresh or by restarting the remix server - the home loader runs and updates the UI to reflect the signed-out state .

[kiliman]

Hmm.. not sure why it's not working for you. Here's a quick example showing how redirects work with session cookies.

⚡️ StackBlitz https://stackblitz.com/edit/remix-run-remix-qxgrdm?file=app%2Froutes%2F_index.tsx