I want to access routes manually by typing the URL address in the browser if the user is logged in. If the user is not logged in, I want to redirect the page to the login page. Additionally, I want the Log In and Sign Up pages to be accessible by typing their URL paths manually public in a browser. However, currently, I am redirected to the login page every time I try to access any of the private routes manually, whether I am logged in or not.

this is my Router:

const Main = () => {
  const router = createBrowserRouter(
    [
      {
        path: "/",
        element: <App />,
        children: [
         
          {
            path: "/",
            element: <GroupMenu />,
          },
          {
            path: "/group-content",
            element: <GroupContent />,
          },
          {
            path: "/dashboard",
            element: <Dashboard />,
          },

          {
            path: "/sign-in",
            element: <LogIn />,
          },
          {
            path: "/sign-up",
            element: <Register />,
          },
        ],
      },
    ],
    { basename: "/thatswhy_items_counter/" }
  );

  return (
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <RouterProvider router={router} />
      </ThemeProvider>
    </React.StrictMode>
  );
};

this is my App component(hier i displaying my all components from router component):

function App() {
  return (
    <ContextProvider>
      <h1>Hello World!</h1>
      <Button variant="contained">Something</Button>
      <PrivateRoute>
        <Outlet />
      </PrivateRoute>
    </ContextProvider>
  );
}

This is my PrivateRoute component, that should redirect users to log in page if they are not yet logged in:

  const currentUser = useContextSelector(ContextAPI, (v) => v?.currentUser);
  console.log(currentUser);
  return currentUser?.email ? children : <Navigate to="/sign-in" />;
}

and lastly i have a context provider, that shares states and function with other components:

export const ContextAPI = createContext<null | TContextAPI>(null);

const ContextProvider = ({ children }: { children: React.ReactNode }) => {
  const [currentUser, setCurrentUser] = useState<firebase.User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  const { signUpValues, SignUpInputConstructor, handleRegister, signUpError } = useAuth();
  const { logInValues, SignInInputConstructor, handleLogIn, logInError } = useLogIn();
  const { handleLogout, logOutError } = useLogOut();

  const vals: TContextAPI = {
    handleLogout,
    logOutError,
    setLoading,
    currentUser,
    signUpValues,
    SignUpInputConstructor,
    handleRegister,
    loading,
    signUpError,
    logInValues,
    SignInInputConstructor,
    handleLogIn,
    logInError,
  };

  useEffect(() => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      if (user) {
        setCurrentUser(user);
      } else {
        setCurrentUser(null);
      }
      setLoading(false);
    });
    console.log(currentUser);
    return unsubscribe;
  }, []);

  return <ContextAPI.Provider value={vals}> {!loading && children} </ContextAPI.Provider>;
};

I also have a github repo, if this information is not enought: project_repo

I’ve tried to change my router structure and create something like a lobby for users who are not logged in, but it didn’t solve my problem with manual access in a browser. I have also tried to put my PrivateRouter component as a parent for all private routes, but it gave me the same result..