Access auth outside middleware/loaders/actions/React

[jaskp]

Hi, this is a question about Data Mode. I'm happy to see a recommended way to handle authenticated routes in the docs.

export const authMiddleware = async ({
  request,
  context,
}) => {
  const session = await getSession(request);
  const userId = session.get("userId");

  if (!userId) throw redirect("/login");

  const user = await getUserById(userId);
  context.set(userContext, user);
};

However, what is the best way to do this if I need to access the userContext outside of React Router or React? I am wary of using Zustand for this because then in the react tree you would have to avoid the useStore api unless you want race conditions when navigating between authenticated and unauthenticated routes.

I wonder if one should use getContext?

const routerContextProvider = new RouterContextProvider();
const userContext = createContext();

export const getUser = () => routerContextProvider.get(userContext);

const router = createBrowserRouter(routes, {
  getContext() {
    return routerContextProvider;
  },
});

or forget context and just use a global variable?

let userContext = null;
export const getUser = () => userContext;
export const setUser = (user) => { userContext = user; }

export const authMiddleware = async ({
  request,
}) => {
  const session = await getSession(request);
  const userId = session.get("userId");

  if (!userId) throw redirect("/login");

  const user = await getUserById(userId);
  setUser(user)
};

Thanks!

[sergiodxa]

I would keep the auth state limited to middleware/loader/action functions, then return from a loader the current auth state and use the useRouteLoaderData hook to access it in React.

[jaskp]

Among many other places, auth state is being accessed in Sentry's beforeSend callback.

Also, what do you mean by AsyncLocalStorage, isn't that a Node-only API? I have stated that this is about Data Mode, which I believe implies this is a SPA running in the browser only.

[sergiodxa]

Right, I forgot you use Data Mode client-side only, btw you can use Data Mode server-side with a manual setup, that's what Framework Mode does internally.

If there's no way to pass the value from middleware/loader/action functions to where you need it, then you will have to use some separate store.

Doesn't have to be Zustand or another lib, it can be localStorage/sessionStorage if you limit it to non-sensitive data (maybe only the user id), or a singleton object in-memory.

I would limit the access of that separate store to middleware/loader/action functions and those functions like Sentry's beforeSend, for React components/hooks I would access it from useRouteLoaderData from some parent route that can return the user data from a loader.

This way your UI will always use the most up to date value from loaders, if it ever changes it will need to happen through an action which will revalidate the loaders returning the new value.

[jaskp]

Thanks, sounds good. But I just realized that I probably can't set global state from a middleware/loader (in place of context.set), because that might run when I prefetch using useFetcher().load('/some/route'), right?

[sergiodxa]

You should set in an action instead, then in the middleware/loader only read.

[jaskp]

When navigating to an authenticated route by entering a URL, you don't get to trigger an action 🤔 But I can work around that, I guess that is my burden to carry because of the global state 😄