improve: use react-query for caching

src/AuthProvider.js

@@ -1,8 +1,7 @@
-import React, {createContext, useEffect, useMemo, useState} from "react";
+import React, { createContext, useEffect, useMemo, useState } from "react";
 import { UserManager } from "oidc-client-ts";
 import config from "./config";
 
-
 export const AuthContext = createContext({
     user: null,
     login: () => {},
@@ -13,8 +12,7 @@ export const AuthContext = createContext({
 const AuthProvider = ({ children }) => {
     const [user, setUser] = useState(null);
     const [roles, setRoles] = useState([]);
-    const userManager =
-        useMemo(() => new UserManager(config.OIDC_CONFIG), []);
+    const userManager = useMemo(() => new UserManager(config.OIDC_CONFIG), []);
 
     useEffect(() => {
         userManager.getUser()
@@ -30,27 +28,54 @@ const AuthProvider = ({ children }) => {
                         .then((newUser) => {
                             setUser(newUser);
                             localStorage.setItem("accessToken", newUser.access_token);
-                            const clientRoles =
-                                newUser?.profile?.resource_access?.[config.KC_CLIENT_ID]?.roles || [];
+                            const clientRoles = newUser?.profile?.resource_access?.[config.KC_CLIENT_ID]?.roles || [];
                             setRoles(clientRoles);
                         })
                         .catch((err) => {
                             console.error(err);
-                        })
+                            logout();
+                        });
                 }
+            })
+            .catch((err) => {
+                console.error(err);
+                logout();
             });
-        }, [userManager]);
+
+        const onUserLoaded = (loadedUser) => {
+            setUser(loadedUser);
+            localStorage.setItem("accessToken", loadedUser.access_token);
+            const clientRoles = loadedUser?.profile?.resource_access?.[config.KC_CLIENT_ID]?.roles || [];
+            setRoles(clientRoles);
+        };
+
+        const onUserUnloaded = () => {
+            setUser(null);
+            setRoles([]);
+            localStorage.removeItem("accessToken");
+        };
+
+        userManager.events.addUserLoaded(onUserLoaded);
+        userManager.events.addUserUnloaded(onUserUnloaded);
+
+        return () => {
+            userManager.events.removeUserLoaded(onUserLoaded);
+            userManager.events.removeUserUnloaded(onUserUnloaded);
+        };
+    }, [userManager]);
 
     const login = () => {
         userManager
             .signinRedirect()
-            .catch(
-                (err) => {
-            console.log(config);
-            console.log(err);
-        });
-    }
-    const logout = () => userManager.signoutRedirect();
+            .catch((err) => {
+                console.log(config);
+                console.log(err);
+            });
+    };
+
+    const logout = () => {
+        userManager.signoutRedirect();
+    };
 
     return (
         <AuthContext.Provider value={{ user, roles, login, logout }}>