fix: #400 logout because token expired or corrupted

Author: storenth

frontend/src/hooks/useAuth.ts

@@ -18,11 +18,11 @@ const isLoggedIn = () => {
 }
 
 const useAuth = () => {
-  const [error, setError] = useState<string | null>(null)
+  const [errorSetter, setError] = useState<string | null>(null)
   const navigate = useNavigate()
   const showToast = useCustomToast()
   const queryClient = useQueryClient()
-  const { data: user, isLoading } = useQuery<UserPublic | null, Error>({
+  const { data: user, isLoading, error, errorUpdateCount } = useQuery<UserPublic | null, Error>({
     queryKey: ["currentUser"],
     queryFn: UsersService.readUserMe,
     enabled: isLoggedIn(),
@@ -92,7 +92,9 @@ const useAuth = () => {
     logout,
     user,
     isLoading,
+    errorSetter,
     error,
+    errorUpdateCount,
     resetError: () => setError(null),
   }
 }

frontend/src/routes/_layout.tsx

@@ -1,3 +1,5 @@
+import { useEffect } from 'react'
+
 import { Flex, Spinner } from "@chakra-ui/react"
 import { Outlet, createFileRoute, redirect } from "@tanstack/react-router"
 
@@ -17,7 +19,13 @@ export const Route = createFileRoute("/_layout")({
 })
 
 function Layout() {
-  const { isLoading } = useAuth()
+  const { isLoading, error, errorUpdateCount, logout } = useAuth()
+  useEffect(() => {
+    if (errorUpdateCount && error?.message === "Forbidden") {
+      console.log("____Unauth____logout");
+      logout();
+    }
+  }, [errorUpdateCount, error, logout]);
 
   return (
     <Flex maxW="large" h="auto" position="relative">

frontend/src/routes/login.tsx

@@ -38,7 +38,7 @@ export const Route = createFileRoute("/login")({
 
 function Login() {
   const [show, setShow] = useBoolean()
-  const { loginMutation, error, resetError } = useAuth()
+  const { loginMutation, errorSetter, resetError } = useAuth()
   const {
     register,
     handleSubmit,
@@ -84,7 +84,7 @@ function Login() {
           alignSelf="center"
           mb={4}
         />
-        <FormControl id="username" isInvalid={!!errors.username || !!error}>
+        <FormControl id="username" isInvalid={!!errors.username || !!errorSetter}>
           <Input
             id="username"
             {...register("username", {
@@ -99,7 +99,7 @@ function Login() {
             <FormErrorMessage>{errors.username.message}</FormErrorMessage>
           )}
         </FormControl>
-        <FormControl id="password" isInvalid={!!error}>
+        <FormControl id="password" isInvalid={!!errorSetter}>
           <InputGroup>
             <Input
               {...register("password", {
@@ -124,7 +124,7 @@ function Login() {
               </Icon>
             </InputRightElement>
           </InputGroup>
-          {error && <FormErrorMessage>{error}</FormErrorMessage>}
+          {errorSetter && <FormErrorMessage>{errorSetter}</FormErrorMessage>}
         </FormControl>
         <Link as={RouterLink} to="/recover-password" color="blue.500">
           Forgot password?