Context-based authentication
Good morning. I'm trying to authenticate with a context following the example from the docs (code below, but there isn't much to see).
I have verified in the context itself that the value
isLoggedIn is changing (with a useEffect much like the one in InnerApp below, but obviously in the context itself ). However, although InnerApp is subscribed to the auth context, it never picks up on the change.
It seems I can't use router.invalidate() inside of the context itself without running into errors about the Router context being undefined, but I am running it inside of the Login component when a user successfully logs in. In other words, the router context should be refreshed since it is invalidated on Login (or Logout).
In short, my question is - what can I do to make sure the router context picks up changes to the inner auth context since it does not currently?
const router = createRouter({
routeTree,
notFoundRoute,
// Initialize the auth context undefined - pass it in
context: { auth: undefined! },
});
// Register the router instance for type safety
declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
}
function InnerApp() {
const auth = useAuth()
console.log('auth from innerapp', auth.isLoggedIn, auth.isLoading)
useEffect( () => {
(this is where I expect the useEffect to run when the auth context changes, but it never does)
console.log('main: isLoggedIN', auth.isLoggedIn)
}, [auth, auth.isLoggedIn])
return <RouterProvider router={router} context={{auth: auth} } />
}
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
<React.StrictMode>
<AuthProvider>
<InnerApp />
</AuthProvider>
</React.StrictMode>
);4 Replies
xenial-black•12mo ago
can you please post a complete minimal example e.g. by forking one of the existing examples on stackblitz?
apparent-cyanOP•12mo ago
Good morning! Apologies - I was OOO for a few days. I came back this morning to troubleshoot some more, and it's pretty clear what's happening even without a code example. I am using another library for authentication, and so I need to send an API call when the user navigates to a restricted route to verify their credentials. However, whenever the user navigates to a route, the context is cleared (because of the page navigation), and the beforeLoad for redirect runs before the API call to the authentication library completes. After the context is updated, the redirect already happened! Reading about loading data in TanStack router, it seems like this is not a path that is supported with React context hooks, and maybe I need to add the external library calls directly to the router context itself. I plan to try that, but would appreciate any feedback on the matter.
xenial-black•12mo ago
it would help if you illustrate what you did / how the API looks like you use
apparent-cyanOP•12mo ago
Let me know if this link doesn't work: https://www.canva.com/design/DAGSmjitqFs/Tns_sXh7RG8ktWF0QL-Ymg/view?utm_content=DAGSmjitqFs&utm_campaign=designshare&utm_medium=link&utm_source=editor => it basically depicts the dependency on the login data and where that data comes from.
From a preliminary test, adding the session check to the router context directly works! I suppose, if anyone else stumbles across this, look closely at how the router-context is used before determining to use a separate react context. Most of my auth code can still live in a separate hook, so I'm happy with this solution. https://tanstack.com/router/latest/docs/framework/react/guide/router-context