auth & cache

src/AuthProvider.js

@@ -0,0 +1,30 @@
+import React, { createContext, useEffect, useState } from "react";
+import { UserManager } from "oidc-client-ts";
+import {oidcConfig} from "./oicdConfig";
+
+
+export const AuthContext = createContext();
+
+const AuthProvider = ({ children }) => {
+    const [user, setUser] = useState(null);
+    const userManager = new UserManager(oidcConfig);
+
+    useEffect(() => {
+        userManager.getUser().then((user) => {
+            if (user && !user.expired) {
+                setUser(user);
+            }
+        });
+    }, [userManager]);
+
+    const login = () => userManager.signinRedirect();
+    const logout = () => userManager.signoutRedirect();
+
+    return (
+        <AuthContext.Provider value={{ user, login, logout }}>
+            {children}
+        </AuthContext.Provider>
+    );
+};
+
+export default AuthProvider;

src/Callback.js

@@ -0,0 +1,17 @@
+import React, { useEffect } from "react";
+import { UserManager } from "oidc-client-ts";
+import {oidcConfig} from "./oicdConfig";
+
+
+const Callback = () => {
+    useEffect(() => {
+        const userManager = new UserManager(oidcConfig);
+        userManager.signinRedirectCallback().then(() => {
+            window.location.href = "/";
+        });
+    }, []);
+
+    return <div>Logging in...</div>;
+};
+
+export default Callback;

src/components/MainNavigation.js

@@ -1,16 +1,28 @@
 //src/components/MainNavigation.js
 
-import React from "react";
+import React, {useContext} from "react";
 import { Link } from "react-router-dom";
 import "./MainNavigation.css";
+import {AuthContext} from "../AuthProvider";
 
 const MainNavigation = () => {
+    const { user, login, logout } = useContext(AuthContext);
     return (
         <nav className="main-navigation">
             <ul>
                 <li>
                     <Link to="/">Home</Link>
                 </li>
+                {user ? (
+                    <div>
+                        <h1>{user.profile.name}</h1>
+                        <button onClick={logout}>Logout</button>
+                    </div>
+                ) : (
+                    <button onClick={login}>Login</button>
+                )
+
+                }
                 <li>
                     <Link to="/login">Login</Link>
                 </li>

src/oicdConfig.js

@@ -0,0 +1,8 @@
+export const oidcConfig = {
+    authority: "https://login.hangman-lab.top/auth/realms/myrealm",
+    client_id: "your-client-id",
+    redirect_uri: "http://localhost:3000/callback",
+    post_logout_redirect_uri: "http://localhost:3000",
+    response_type: "code",
+    scope: "openid profile email",
+};

src/utils/fetchWIthCache.js

@@ -1,4 +1,10 @@
+const ongoingRequests = new Map();
+
 export async function fetchWithCache(url, cacheKey = url, cacheExpiry = 60) {
+    if (ongoingRequests.has(url)) {
+        return ongoingRequests.get(url);
+    }
+
     const cachedData = localStorage.getItem(cacheKey);
     const now = Date.now();
 
@@ -12,13 +18,23 @@ export async function fetchWithCache(url, cacheKey = url, cacheExpiry = 60) {
         }
     }
 
-    const response = await fetch(url);
-    if (!response.ok) {
-        throw new Error(`HTTP error! Status: ${response.status}`);
+    try {
+        const fetchPromise = fetch(url)
+            .then((response) => {
+                if (!response.ok) {
+                    throw new Error(`HTTP error! Status: ${response.status}`);
+                }
+                return response.json();
+            })
+            .then((data) => {
+                localStorage.setItem(cacheKey, JSON.stringify({ data, timestamp: now }));
+                ongoingRequests.delete(url);
+                return data;
+            });
+        ongoingRequests.set(url, fetchPromise);
+        return await fetchPromise;
+    } catch (error) {
+        ongoingRequests.delete(url);
+        throw error;
     }
-    const data = await response.json();
-
-    localStorage.setItem(cacheKey, JSON.stringify({ data, timestamp: now }));
-
-    return data;
 }