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
It seems I can't use
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>
);
I have verified in the context itself that the value
isLoggedInuseEffectInnerAppInnerAppIt seems I can't use
router.invalidate()LoginIn 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>
);
