Redirect on token expiry

web/app/routes/logbook.me/route.tsx

@@ -1,12 +1,33 @@
+import { client } from "@/util/api";
 import { useAuth } from "@/util/auth";
-import { Container, Title } from "@mantine/core";
+import { Container, Text, Title } from "@mantine/core";
+import { useNavigate } from "@remix-run/react";
+import { useQuery } from "@tanstack/react-query";
+import { useEffect } from "react";
 
 export default function Me() {
-  const { user } = useAuth();
+  const user = useQuery({
+    queryKey: ["user"],
+    queryFn: async () => await client.get(`users/me`).then((res) => res.data),
+    retry: (failureCount, error) => {
+      return !error || error.response?.status !== 401;
+    },
+  });
+
+  const { clearUser } = useAuth();
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    if (user.isError && user.error.response?.status === 401) {
+      clearUser();
+      navigate("/login");
+    }
+  }, [user]);
 
   return (
     <Container>
-      <Title order={2}>{user}</Title>
+      <Title order={2}>{user.data.username}</Title>
+      <Text>Level {user.data.level}</Text>
     </Container>
   );
 }