How do you interop with react context?

[GabenGar]

I tend to have constructs like this in react codebases:

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

interface IAuthContext {
  isRegistered: boolean;
  register: () => Promise<void>;
  login: () => Promise<void>;
  logout: () => Promise<void>;
}

const defaultContext: IAuthContext = {
  isRegistered: false,
  register: async () => undefined,
  login: async () => undefined,
  logout: async () => undefined,
};
const AuthContext = createContext<IAuthContext>(defaultContext);

interface IProps {
  children?: ReactNode;
}

export function AuthProvider({ children }: IProps) {
  const [isRegistered, setIsRegistered] = useState(false);

  async function register() {}
  async function login() {}
  async function logout() {}

  useEffect(() => {}, []);

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

export function useAuth(): IAuthContext {
  const context = useContext(AuthContext);

  return context;
}

Auth is a great example for this because its state cannot be derived from URL alone and better be initiated client-side because it is decided reactively against server responses. But any client-dependent logic which pertains to the state of the client (i.e. localStorage, IndexedDB, anything worker-related, anything formatting) will be written the same. It kinda works well because the default way of handling forms in react is imperative (therefore strictly client-side) and thus can be handled by calling functions from context.
But the with loaders/actions this falls apart, since they don't have access to client context. Even basic things like an api call requiring auth returning 401, which most likely means loss of credentials mid-request, becomes pretty hard to handle reactively when it happens in loader/action.
I've looked up useOutletContext as something related, but it doesn't look like it helps with client state changing in the middle of a loader/action and merely solves the problem of routes depending on context data.

[sergiodxa]

Instead of using React context, read the auth data in the loaders, create a helper like authenticate() that returns the user data from wherever is stored (localStorage, IDB, in-memory, etc.)

Then if while using the auth data you receive a 401, handle that by throwing a redirect, any thrown response will be followed by RR so in that case you can redirect the user to your login, or if you have a refresh token you can refresh the access token and retry.

Then if you need the same data in your UI you can return it from a route loader.

[GabenGar]

I don't want to do a redirect, just show a message that the page is accessible only when authenticated instead of the page contents, but also not having to write auth checking logic on every page which uses it. Does it mean I'll have to write a pair of a route component and a loader factory functions to implement that?

[sergiodxa]

I don't want to do a redirect, just show a message that the page is accessible only when authenticated instead of the page contents

You can throw an error instead of a redirect, then you can use the route ErrorBoundary component to show the message you want.

but also not having to write auth checking logic on every page which uses it

Until RR has middlewares you will need to check on every loader as they run in parallel, you can't let one loader protect the rest, also the logic can be as simple as call a function and get the auth data back, then wrap the fetch calls in a function to handle the 401.

[GabenGar]

How do you change the auth state of a parent "route" if the child caused the change? I.e. after the user registers/logs in change related values in the layout component (which is basically the parent route of all routes) or after logging out.