Logic to check login status to render component in Route (react-router-dom) not working properly

I'm starting to learn react and I have a problem related to checking user's login status. I check the user's login status by getting the user info from localStorage. If the user is logged in, I will redirect the user back to the home page. Everything works great but in case the user closes the tab and comes back, if the user was previously logged in and then logged out, when clicking the button to go to the auth page, even though the url is set to "/auth", it seems that the value of loginUser in this case is wrong and the Route render the <Home /> instead of <Auth />. I don't understand why it happens in case the user closes the tab and comes back.

Here is my App.js code.

const App = () => {
  const loginUser = JSON.parse(localStorage.getItem("profile"));
  const dispatch = useDispatch();

  // I use redux's global state to store user info and render components corresponding to that state. 
  // So when starting the app check the local storage and sync it with the redux state
  useEffect(() => {
    if (loginUser) {
      dispatch({ type: AUTH, payload: loginUser });
    }
  }, []);

  return (
    <>
      <Helmet>
        <meta
          http-equiv="Cross-Origin-Opener-Policy"
          content="same-origin-allow-popups"
        />
      </Helmet>
      <Router>
        <Container style={{ marginBottom: "150px" }} maxWidth="xl">
          <NavBar />
          <Routes>
            <Route path="/" exact element={<Navigate to={"/posts"} />} />
            <Route path="/posts" exact element={<Home />} />
            <Route path="/posts/search" exact element={<Home />} />
            <Route path="/posts/:id" exact element={<PostDetails />} />
            <Route path="/auth" element={!loginUser ? <Auth /> : <Home />} />
          </Routes>
        </Container>
      </Router>
    </>
  );
};

Here is my Navbar that renders a Login and Logout button according to the state "profile" that I use to store login user info.

export default function NavBar() {
  const classes = useStyle();
  const navigate = useNavigate();
  const dispatch = useDispatch();
  const [messageApi, contextHolder] = message.useMessage();
  const user = useSelector((state) => state.profile);

  const logout = (e) => {
    e.preventDefault();
    dispatch({ type: LOGOUT });
    messageApi.success("Logged out.");
  };

  return (
    <>
      {contextHolder}
      <AppBar className={classes.appBar} position="static" color="inherit">
        <div className={classes.brandContainer}>
          <Typography
            to="/"
            component={Link}
            className={classes.heading}
            variant="h2"
            align="center"
          >
            My app
          </Typography>
          <img
            className={classes.image}
            src={memoriesImg}
            alt="memories"
            height="60"
          />
        </div>
        <Toolbar>
          {Object.keys(user).length !== 0 ? (
            <div className={classes.profile}>
              <Avatar
                className={classes.purple}
                alt={user?.name}
                src={user?.picture}
              >
                {user?.name?.charAt(0)}
              </Avatar>
              <Typography className={classes.userName} variant="h6">
                {user?.name}
              </Typography>
              <Button
                onClick={(e) => logout(e)}
                variant="contained"
                className={classes.logout}
                color="secondary"
              >
                Logout
              </Button>
            </div>
          ) : (
            <Button
              component={Link}
              to="/auth"
              variant="contained"
              color="primary"
            >
              Login
            </Button>
          )}
        </Toolbar>
      </AppBar>
    </>
  );
}

Here is what happens inside reducers when user login and logout

export default (profile = {}, action) => {
  switch (action.type) {
    case AUTH:
      localStorage.setItem("profile", JSON.stringify({ ...action.payload }));
      return { ...profile, ...action.payload.profile };
    case LOGOUT:
      localStorage.removeItem("profile");
      return {};
    case "TEST":
      console.log("dispatch success TEST from axios");
      return profile;
    default:
      return profile;
  }
};

I also recorded a short video where the first part shows when I log in, log out, and go to the auth page normally. However when I close the tab and open a new tab, then after log out I can't go to the auth page anymore.

https://somup.com/c0iIQRzu64

I want someone to check if it's reasonable for me to store user information and handle it like that. And if there is something wrong somewhere.

Issue

Basically the issue is that the redux state isn't coupled well to the localStorage. The App component doesn't rerender when the auth status changes.

Here's the timeline of events as I far as I can tell from the video:

1. App mounts and loginUser is read from localStorage. Since loginUser is falsey, no action is dispatched to the store and the user is unauthenticated.
2. User clicks "Log In" in NavBar and the app navigates to "/auth" and since loginUser is falsey, the Auth component is rendered.
3. User authenticates successfully and the app navigates to "/posts".
4. User clicks "Log Out" in NavBar and is successfully logged out. The redux state it updated and the localStorage is cleared out. The NavBar rerenders and displays "Log In" button again.
5. User clicks "Log In" in NavBar and the app navigates to "/auth" and since loginUser (the local copy) is still falsey, the Auth component is rendered.
6. User authenticates successfully and the app navigates to "/posts".
7. The active tab is closed and a new tab opened and App is mounted and loginUser is read from localStorage, and since the user is authenticated, loginUser is truthy and the redux store is updated. NavBar is rerendered and a "Log Out" button is rendered.
8. User clicks "Log Out" in NavBar and is successfully logged out. The redux state it updated and the localStorage is cleared out. The NavBar rerenders and displays "Log In" button again.
9. User clicks "Log In" in NavBar and the app navigates to "/auth", and since loginUser (the local copy) is still truthy, the Home component is rendered. The app is "stuck" in an "authenticated" state.

To resolve this the Redux state should be initialized from localStorage and loginUser in App should be selected state from the store like it is in the NavBar component. This way when the auth state in the Redux store updates, App will be rerendered with the current selected redux state value.

Example:

const initialState = JSON.parse(localStorage.getItem("profile")) || {};

export default (state = initialState, action) => {
  switch (action.type) {
    case AUTH:
      localStorage.setItem("profile", JSON.stringify({ ...action.payload }));
      return {
        ...state,
        ...action.payload
      };

    case LOGOUT:
      localStorage.removeItem("profile");
      return {};

    case "TEST":
      console.log("dispatch success TEST from axios");
      return state;

    default:
      return state;
  }
};

const App = () => {
  const user = useSelector((state) => state.profile);
  
  return (
    <>
      <Helmet>
        <meta
          http-equiv="Cross-Origin-Opener-Policy"
          content="same-origin-allow-popups"
        />
      </Helmet>
      <Router>
        <Container style={{ marginBottom: "150px" }} maxWidth="xl">
          <NavBar />
          <Routes>
            <Route path="/" element={<Navigate to="/posts" replace />} />
            <Route path="/posts" element={<Home />} />
            <Route path="/posts/search" element={<Home />} />
            <Route path="/posts/:id" element={<PostDetails />} />
            <Route
              path="/auth"
              element={user
                ? <Navigate to="/posts" replace />
                : <Auth />
              }
            />
          </Routes>
        </Container>
      </Router>
    </>
  );
};