How to check asynchronously user status in beforeLoad?

[pooryamoh]

Hi,

I have tried to follow the example of a protected route with modification for checking the user status from the server asynchronously, but I wasn't successful because beforeLoad will return before the context state changes. How can I fix this problem?

auth.tsx:

import axios from "axios";
import {
  createContext,
  ReactNode,
  useState,
  useCallback,
  useEffect,
} from "react";

export interface IAuthContext {
  isAuthenticated: boolean;
  login: (username: string, password: string) => void;
  logout: () => void;
  user: IUser | null;
}
export interface IUser {
  id: string;
  firstName: string;
  lastName: string;
  username: string;
  jwtToken: string;
}

export const AuthContext = createContext<IAuthContext>({} as IAuthContext);

export function AuthProvider({ children }: { children: ReactNode }) {
  const [user, setUser] = useState<IUser | null>(null);
  const [isAuthenticated, setIsAuthenticated] = useState<boolean>(false);

  useEffect(() => {
    const isLogedIn = async () => {
      try {
        const response = await axios.post<IUser>(
          "https://localhost:7271/users/refresh-token",
          {},
          {
            withCredentials: true,
          }
        );
        if (response.status === 200) {
          setUser(() => response.data);
          setIsAuthenticated(() => true);
        }
      } catch (error) {
        console.error(error)
      }
    };
    isLogedIn();
  }, []);

  const logout = useCallback(() => {}, []);

  const login = useCallback(async (username: string, password: string) => {
    try {
      const response = await axios.post<IUser>(
        "https://localhost:7271/users/authenticate",
        {
          username: username,
          password: password,
        },
        {
          withCredentials: true,
        }
      );
      if (response.status === 200) {
        setUser(() => response.data);
        setIsAuthenticated(() => true);
      }
    } catch (error) {
      console.error(error);
    }
  }, []);

  return (
    <AuthContext.Provider value={{ isAuthenticated, user, login, logout }}>
      {children}
    </AuthContext.Provider>
  );
}

index.tsx:

import { createFileRoute, redirect } from "@tanstack/react-router";

export const Route = createFileRoute("/")({
  beforeLoad: ({ context, location }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href,
        },
      });
    } else {
      throw redirect({
        to: "/dashboard/",
      });
    }
  },
});

[SzelamC]

Facing the same issue, i also see the authenticated route example provided in documentation ,

login.tsx

import * as React from 'react'
import {
  createFileRoute,
  redirect,
  useRouter,
  useRouterState,
} from '@tanstack/react-router'
import { z } from 'zod'

import { useAuth } from '../auth'
import { sleep } from '../utils'

const fallback = '/dashboard' as const

export const Route = createFileRoute('/login')({
  validateSearch: z.object({
    redirect: z.string().optional().catch(''),
  }),
  beforeLoad: ({ context, search }) => {
    if (context.auth.isAuthenticated) {
      throw redirect({ to: search.redirect || fallback })
    }
  },
  component: LoginComponent,
})

function LoginComponent() {
  const auth = useAuth()
  const router = useRouter()
  const isLoading = useRouterState({ select: (s) => s.isLoading })
  const navigate = Route.useNavigate()
  const [isSubmitting, setIsSubmitting] = React.useState(false)

  const search = Route.useSearch()

  const onFormSubmit = async (evt: React.FormEvent<HTMLFormElement>) => {
    setIsSubmitting(true)
    try {
      evt.preventDefault()
      const data = new FormData(evt.currentTarget)
      const fieldValue = data.get('username')

      if (!fieldValue) return
      const username = fieldValue.toString()
      await auth.login(username)

      await router.invalidate()

      // This is just a hack being used to wait for the auth state to update
      // in a real app, you'd want to use a more robust solution
      await sleep(1)

      await navigate({ to: search.redirect || fallback })
    } catch (error) {
      console.error('Error logging in: ', error)
    } finally {
      setIsSubmitting(false)
    }
  }

  const isLoggingIn = isLoading || isSubmitting

  return (
    <div className="p-2 grid gap-2 place-items-center">
      <h3 className="text-xl">Login page</h3>
      {search.redirect ? (
        <p className="text-red-500">You need to login to access this page.</p>
      ) : (
        <p>Login to see all the cool content in here.</p>
      )}
      <form className="mt-4 max-w-lg" onSubmit={onFormSubmit}>
        <fieldset disabled={isLoggingIn} className="w-full grid gap-2">
          <div className="grid gap-2 items-center min-w-[300px]">
            <label htmlFor="username-input" className="text-sm font-medium">
              Username
            </label>
            <input
              id="username-input"
              name="username"
              placeholder="Enter your name"
              type="text"
              className="border border-gray-300 rounded-md p-2 w-full"
              required
            />
          </div>
          <button
            type="submit"
            className="bg-blue-500 text-white py-2 px-4 rounded-md w-full disabled:bg-gray-300 disabled:text-gray-500"
          >
            {isLoggingIn ? 'Loading...' : 'Login'}
          </button>
        </fieldset>
      </form>
    </div>
  )
}

There is a comment mention that need to implement a robust way for waiting the state update, but i am not sure how to do that and how it consider a robust way.

I try below and not work

  useEffect(() => {
    if (isAuthenticated) {
      navigate({ to: "/somepath" });
    }
  }, [isAuthenticated]);

[KevinGuedes]

I try flushSync and also solved the issue, but i am not sure isn't flushSync a 'robust' way to deal with this problem. Since it is frustrated that zustand is a must dependency to solve this issue.

Could you share your solution with flushSync please?

[SzelamC]

This is a simple solution which you may want to change the logic.
Basically, this happen because on _auth.tsx beforeLoad context value isn't update when user login and setUser(user) not execute synchronously causing beforeLoad context value is stale.
flushSync forcing react to update the state synchronously.

_auth.tsx

export const Route = createFileRoute("/_auth")({
  beforeLoad: ({ context }) => {
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: "/login",
      });
    }
  },
  component: AuthLayout,
});

login.tsx

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = useState<User | null>(getUserFromLocalStorage());
  const isAuthenticated = !!user;

  useEffect(() => {
    const user = getUserFromLocalStorage();
    if (user) {
      setUser(user);
    }
  }, []);

  const login = useCallback(async (data: LoginSchema) => {
    const user = await fakeApi.login(data);
    if (user) {
      localStorage.setItem(key, JSON.stringify(user));
      flushSync(() => {
        setUser(user);
      });
    }
  }, []);

  return (
    <AuthContext.Provider value={{ isAuthenticated, user, login }}>
      {children}
    </AuthContext.Provider>
  );
}

[KevinGuedes]

@SzelamC Thank you!

[GreyRuler]

@SzelamC You're my hero, all the best!

[ParasSolanki]

If you don't want to include other dependencies like Zustand because you can access store data outside of react (Love Zustand btw). So, you can use useSyncExternalStore hook which will lets you create a external store and subscribe to its changes.

For the authenticated state you can create a external store authState like this which will have following properties:

1. isAuthenticated indicate whether user is authenticated or not.
2. isInitialLoading defaults to true and whenever the first fetch for a auth query.
3. user authenticated user.

// src/hooks/use-auth.ts

import { useQuery } from "@tanstack/react-query";
import { meQuries } from "~/common/keys/me";
import type { AuthMe } from "~/common/keys/me";
import { HTTPError } from "ky";
import { useSyncExternalStore } from "react";

type SubscribeListener = () => void;

let listeners = [] as Array<SubscribeListener>;
export type AuthState = {
  isAuthenticated: boolean;
  isInitialLoading: boolean;
  user: AuthMe | undefined;
};

export const authState = {
  isAuthenticated: false,
  isInitialLoading: true,
  user: undefined,
} as AuthState;

export const authStore = {
  setIsInitialLoading(isInitialLoading: AuthState["isInitialLoading"]) {
    authState.isInitialLoading = isInitialLoading;
    emitChange();
  },
  setIsAuthenticated(isAuthenticated: AuthState["isAuthenticated"]) {
    authState.isAuthenticated = isAuthenticated;
    emitChange();
  },
  setUser(user: AuthState["user"]) {
    authState.user = user;
    emitChange();
  },
  subscribe(listener: SubscribeListener) {
    listeners = [...listeners, listener];
    return () => {
      listeners = listeners.filter((l) => l !== listener);
    };
  },
  getSnapshot() {
    return authState;
  },
};

function emitChange() {
  for (const listener of listeners) {
    listener();
  }
}

export function useAuthState() {
  return useSyncExternalStore(authStore.subscribe, authStore.getSnapshot);
}

export function useSession() {
  const authState = useAuthState();
  const session = useQuery(meQuries.session());

  if (session.data) {
    authStore.setIsAuthenticated(true);
    authStore.setUser(session.data.data.user);
  }

  // unauthorized
  if (
    session.error &&
    authState.isAuthenticated &&
    session.error instanceof HTTPError
  ) {
    authStore.setIsAuthenticated(false);
    authStore.setUser(undefined);
    window.location.href = "/signin";
  }

  if (authState.isInitialLoading) {
    authStore.setIsInitialLoading(session.isLoading);
  }

  if (session.isError) {
    authStore.setIsInitialLoading(false);
  }

  return session;
}

Add the authstate store in router context. You can also use TanstackQuery which is awesome for managing async state. Add the queryClient to router context as well.

// src/routes/__root.tsx

import { QueryClient } from "@tanstack/react-query";
import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";
import { env } from "~/env";
import { AuthState } from "~/hooks/use-auth";
import * as React from "react";

const TanStackRouterDevtools = env.PROD
  ? () => null // Render nothing in production
  : React.lazy(() =>
      import("@tanstack/router-devtools").then((res) => ({
        default: res.TanStackRouterDevtools,
      })),
    );

type RouterContext = {
  queryClient: QueryClient;
  authState: AuthState;
};

export const Route = createRootRouteWithContext<RouterContext>()({
  component: Root,
});

function Root() {
  return (
    <>
      <Outlet />
      <React.Suspense>
        <TanStackRouterDevtools position="bottom-left" />
      </React.Suspense>
    </>
  );
}

In the App.tsx before initializing the router we will check for the authenticated flag and if query is loading show loading spinner.

// src/App.tsx

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { createRouter, RouterProvider } from "@tanstack/react-router";
import { Toaster } from "~/components/ui/sonner";
import { Loader2Icon } from "lucide-react";
import { authState, useAuthState, useSession } from "./hooks/use-auth";
// Import the generated route tree
import { routeTree } from "./routeTree.gen";

const queryClient = new QueryClient();

// Create a new router instance
const router = createRouter({
  routeTree,
  context: {
    queryClient,
    authState,
  },
  defaultPreload: "intent",
});


// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

export function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AppRoutes />
      <ReactQueryDevtools position="right" />
      <Toaster richColors className="font-sans" position="bottom-right" />
    </QueryClientProvider>
  );
}

function AppRoutes() {
  useSession();
  const authState = useAuthState();

  if (authState.isInitialLoading) {
    return (
      <div className="flex h-screen w-full items-center justify-center p-4">
        <Loader2Icon className="size-10 animate-spin text-foreground" />
      </div>
    );
  }

  return (
    <RouterProvider router={router} context={{ queryClient, authState }} />
  );
}

When you signed in the user update the authstate store values as well. So, that after signin you can redirect to authenticated routes.

// src/routes/signin/route.lazy.tsx

function SignInForm() {
  const navigate = useNavigate();
  const queryClient = useQueryClient();
  const form = useForm({
    defaultValues: {
      email: "",
      password: "",
    },
  });

  const { isPending, mutate } = useMutation({
    mutationKey: ["signin"],
    mutationFn: async (values: AuthValues) => {
      // handle user signin api
    },
    onSuccess: () => {
      // on success
    },
    onError: async (error) => {
      // on error
    },
  });

  function onSubmit(values: AuthValues) {
    mutate(values, {
      onSuccess: () => {
        authStore.setIsAuthenticated(true);
        queryClient.invalidateQueries({ queryKey: meKeys.all });
        navigate({
          to: "/",
        });
      },
    });
  }

  return (
    <Form {...form}>
      <form className="mt-6" onSubmit={form.handleSubmit(onSubmit)}>
        ...
      </form>
    </Form>
  );
}

For the authenticated routes create a pathless layout route in routes routes/_auth/route.tsx which will check for authenticated flag and if user is not authenticated it will redirect them to signin page.
Also since useSession() is called in App.tsx and we are using tanstack query it will do window focus background fetches for session query which we use to reload the route if user session expires it will redirect it to signin page. For that router provide shouldReload() method.

import { createFileRoute, redirect } from "@tanstack/react-router";

export const Route = createFileRoute("/_auth")({
  beforeLoad: ({ context }) => {
    if (!context.authState.isAuthenticated) {
      throw redirect({
        to: "/signin",
        search: {
          redirectUrl: location.href,
        },
      });
    }
  },
  shouldReload({ context }) {
    return !context.authState.isAuthenticated; 
  },
});

If you want the full code you can checkout this repo: https://github.com/ParasSolanki/roles-permissions

[VladKopylov]

There was also a problem with async user status checking. If possible, please give more examples on how to deal with such cases

[KevinGuedes]

I would love to see this 'more robust' solution without having to add any other dependencies haha, facing the same problem here

[maxwell-oroark]

I'm facing the same issue as well. Even when a firebase user is logged in it's momentarily async to load the user into state and by then the before load has already fired and redirected user to /login page

[maxwell-oroark]

Yeah so you're suggesting basically wrap the onAuthChanged in a query hook of some sort that has a notion of fetched and loading states, then manage the loading, resolved, error states outside of tanstack router with some top level JSX conditionals before rendering the router?

[tigawanna]

firebase has a get current user method it's more deterministic

[maxwell-oroark]

Yeah, I guess I got excited about tanstack's promise of being able to declare all your data dependencies up front and then get loading, error states out of the box. A little disappointed that the first data dependency I have to implement ( active user ) I have to re-invent the wheel a bit with conditional logic outside of the router.

[maxwell-oroark]

On second thought... I could just wrap the observable in a promise and await in beforeLoad...

  beforeLoad: async () => {
    const user = await getCurrentUserAsync();
    if (!user) {
      throw redirect({
        to: "/login",
        search: {
          redirect: location.href,
        },
      });
    }
  },

[tigawanna]

there's an explanation somewhere in the discord to that behavior but it's the most ergonomic route guard implementation I've used

[FredricW]

I chose to wrap my Auth instance in a promise that resolves when it is done loading:

interface RouterContext {
  auth: Promise<AuthInterface>,
  ...
}

// main.tsx

...

let resolveAuthClient: (client: AuthInterface) => void;
export const authClient: Promise<AuthInterface> = new Promise(
  (resolve) => { resolveAuthClient = resolve }
);

function InnerApp() {
  const auth = useAuth();

  useEffect(() => {
    if (auth.isLoading) return;

    resolveAuthClient(auth);
  }, [auth, auth.isLoading]);

  return <RouterProvider router={router} context={{ auth: authClient }} />;
}

// _auth.tsx
export const Route = createFileRoute('/_auth')({
  pendingComponent: Spinner,
  async beforeLoad({ context }) {
    const auth = await context.auth; // Wait for auth to be done loading
    // Do your stuff here
  },
  component: () => <Outlet />,
});

Then any route under the folder src/routes/_auth/ will trigger auth.

EDIT: Cutting edge ES2024 edition:

const authClient = new Promise.withResolvers<AuthInterface>()
function InnerApp() {
  const auth = useAuth();

  useEffect(() => {
    if (auth.isLoading) return;

    authClient.resolve(auth);
  }, [auth, auth.isLoading]);

  return <RouterProvider router={router} context={{ auth: authClient }} />;
}

[dnlsandiego]

Great tip on the Promise.withResolvers use. But what's the reason for defining authClient at the module level/scope instead of inside InnerApp as state or stored in a ref?