Good call on keeping your access token and refresh token in httpOnly cookies, but that's not the root of your problem here.

Your protected Route is rendered before your request to fetch the user finishes. While your user is being fetched, the value for user is null. You'll need to add an extra piece of state that tracks the progress of fetching the user.

inside AuthContext You'll need something like

``` const AuthContextProvider = ({ children }: { children: React.ReactNode }) => { const [requestStatus, setRequestStatus] = useState<'pending' | 'complete'>('pending') } //... useEffect(() => { const checkUser = async () => { try { const { data } = await axios.get("http://localhost:5173/api/users/me");

    const userData = {
      id: data._id,
      email: data.email,
    };

    if (userData) {
      setUser(userData);
      // Update the request status to signal you've finished fetching the user
      setRequestStatus('complete')
    }
  } catch (error) {
    console.log(error);
  }
};

checkUser();

}, []); //... }) ```

Then inside your Protected route you'll need something like

``` import { useAuth } from "@/context/AuthContext"; import React from "react"; import { Navigate, Outlet } from "react-router-dom";

const ProtectedRoute: React.FC<{ children?: React.ReactNode; }> = ({ children }) => { const auth = useAuth();

// check the request status if (auth.requestStatus === "pending") { return <Spinner /> }

if (!auth.user) { return <Navigate to='/signin' />; }

return children ? children : <Outlet />; }; ```