issue with Reloading an authenticated route with authentication check on beforeLoad

reacttypescript

reloading my page on an authed route redirects me to /login, if I use the react context and inject it innto the router
HOWEVER
if i use a layout component instead of beforeLoad and subscribe to the usecontext hook inside of that layout and check if im authenticated, reloading the authenticated route(dashboard) keeps me on the same page and it works as it should..

Why is it that if I use the routers context to access the auth context, on page reload it doesnt work?

const pathlessAuthenticatedLayoutRoute = createRoute({
  getParentRoute: () => rootRoute,
  id: "pathlessAuthenticatedLayout",
  beforeLoad: ({ context }) => {
    console.log(context);
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: "/login",
      });
    }
  },
});

const pathlessAuthenticatedLayoutRoute = createRoute({
  getParentRoute: () => rootRoute,
  id: "pathlessAuthenticatedLayout",
  beforeLoad: ({ context }) => {
    console.log(context);
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: "/login",
      });
    }
  },
});

const pathlessAuthenticatedLayoutRoute = createRoute({
  getParentRoute: () => rootRoute,
  id: "pathlessAuthenticatedLayout",
  beforeLoad: ({ context }) => {
    console.log(context);
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: "/login",
      });
    }
  },
});

const pathlessAuthenticatedLayoutRoute = createRoute({
  getParentRoute: () => rootRoute,
  id: "pathlessAuthenticatedLayout",
  beforeLoad: ({ context }) => {
    console.log(context);
    if (!context.auth.isAuthenticated) {
      throw redirect({
        to: "/login",
      });
    }
  },
});

issue with Reloading an authenticated route with authentication check on beforeLoad

Similar Threads

Similar Threads

Similar Threads