Why beforeLoad is not getting the updated context value?

[imSamiul]

I have a file structure like this:

.
📂 routes/
├── 📂 _authenticated/
│   ├── 📂 projectManager/
│   │   ├── addClient.tsx
│   │   └── addProject.tsx
│   └── _projectManager.tsx
├── 📂 _authentication/
│   ├── login.tsx
│   └── signUp.tsx
├── _root.tsx
├── _authenticated.tsx
├── _authentication.tsx
└── index.tsx

now first my app will be authenticated by login. in login i will get the user details and set the user in authContext. then when i will go to /addClient or /addProject i need the user details again because of I need to know the user type. So in autheticated.tsx i have a beforeload function which set user by fetching it. so the updated user is added in context. then when I go to the /addClient or /addProject I check the user type in beforeLoad function which is inside _projectManager.tsx. but here inside the context of beforeLoad it says undefined for the value of user. why? how to solve this?
Code:

// AuthContext.tsx
import * as React from "react";
import Cookies from "js-cookie";
import { UserType } from "../types/userType";

export type AuthContext = {
  login: (token: string, user: UserType) => void;
  isLogged: () => boolean;
  getAuthToken: () => string | null;
  user: UserType | null;
  setUserDetails: (user: UserType) => void;
  isProjectManager: () => boolean;
};

export const AuthContext = React.createContext<AuthContext | null>(null);

export function AuthProvider({ children }: { children: React.ReactNode }) {
  const [user, setUser] = React.useState<UserType>({} as UserType);

  function login(token: string, user: UserType) {
    Cookies.set("token", token, { expires: 7 });

    setUser(user);
  }
  function getAuthToken() {
    const token = Cookies.get("token");
    if (!token) {
      console.log("No token found");
      return null;
    }
    return token;
  }
  function isLogged() {
    const token = getAuthToken();
    if (token) {
      return true;
    }
    return false;
  }
  function setUserDetails(user: UserType) {
    setUser(user);
  }

  function isProjectManager() {
    console.log(user?.userType);  // shows undefined. dont get the updated value of user.

    if (user?.userType === "project-manager") {
      return true;
    }
    return false;
  }

  return (
    <AuthContext.Provider
      value={{
        user,
        setUserDetails,
        login,
        isLogged,
        getAuthToken,
        isProjectManager,
      }}
    >
      {children}
    </AuthContext.Provider>
  );
}

// _authenticated.tsx
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";

import Navbar from "../components/ui/Navbar";
import { fetchUserDetails } from "../services/apis";
import { useAuth } from "../hooks/useAuth";

export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context }) => {
    if (!context.auth.isLogged()) {
      throw redirect({
        to: "/login",
      });
    }
    const data = await fetchUserDetails();
    return (context.auth.user = data.user); // update the user value which I get from backend database by fetching it and adding it to 
                                                                 //context
  },

  component: AuthenticatedLayout,
});
function AuthenticatedLayout() {
  const auth = useAuth();

  console.log(auth);

  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

// _projectManager.tsx
import { createFileRoute, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/_authenticated/_projectManager")({
  beforeLoad: ({ context }) => {  // here context.auth is null. why?
    if (!context.auth.isProjectManager()) {
      console.log(context.auth.isProjectManager());
      throw new Error("You are not authorized to access this page");
    }
  },
  loader: ({ context }) => {
    console.log(context.auth.user);
    return context.auth.user;
  },
  component: ProjectManagerLayout,
  errorComponent: () => <div>Unauthorized</div>,
  onError: (error) => {
    console.error(error);
  },
});

function ProjectManagerLayout() {
  return (
    <div>
      <div>Hello /_authenticated/_projectManager!</div>,
      <Outlet />
    </div>
  );
}

So my question is why context.auth is null in _projectManager.tsx ? I just update the context value. but I don't get the updated value. It shows null. How to solve this?
And one more error is showing. Because of context.auth is null so

  if (!context.auth.isProjectManager()) {
      console.log(context.auth.isProjectManager());
      throw new Error("You are not authorized to access this page");
    }

is throwing error though user type is project manager.

And last thing is in the _authenticated.tsx console.log(auth) is showing the updated user value that I fetch from server. but not in the context.

function AuthenticatedLayout() {
  const auth = useAuth();

  console.log(auth); // it is showing the updated user data

  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

[schiller-manuel]

please provide a minimal complete example by forking one of the existing examples on stackblitz

[imSamiul]

Can it be helpful?
https://stackblitz.com/~/github.com/imSamiul/ProjectPay-Client

[schiller-manuel]

you cannot update the context by writing to it in beforeLoad. context should be updated by returning values from beforeLoad

[imSamiul]

thats what I did in here by returning it.:

// _authenticated.tsx
import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";

import Navbar from "../components/ui/Navbar";
import { fetchUserDetails } from "../services/apis";
import { useAuth } from "../hooks/useAuth";

export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context }) => {
    if (!context.auth.isLogged()) {
      throw redirect({
        to: "/login",
      });
    }
    const data = await fetchUserDetails();
    return (context.auth.user = data.user); // update the user value which I get from backend database by fetching it and adding it to 
                                                                 //context
  },

  component: AuthenticatedLayout,
});
function AuthenticatedLayout() {
  const auth = useAuth(); // Here we get the updated value of context.

  console.log(auth);

  return (
    <div>
      <Navbar />
      <Outlet />
    </div>
  );
}

but in another component _projectManager.tsx I don't get the updated value of context. It shows null for auth.

// _projectManager.tsx
import { createFileRoute, Outlet } from "@tanstack/react-router";

export const Route = createFileRoute("/_authenticated/_projectManager")({
  beforeLoad: ({ context }) => {  // here context.auth is null. why?
    if (!context.auth.isProjectManager()) {
      console.log(context.auth.isProjectManager());
      throw new Error("You are not authorized to access this page");
    }
  },
  loader: ({ context }) => {
    console.log(context.auth.user);
    return context.auth.user;
  },
  component: ProjectManagerLayout,
  errorComponent: () => <div>Unauthorized</div>,
  onError: (error) => {
    console.error(error);
  },
});

function ProjectManagerLayout() {
  return (
    <div>
      <div>Hello /_authenticated/_projectManager!</div>,
      <Outlet />
    </div>
  );
}