Added React global state + role based security sample app

2 files changed, 82 insertions, 0 deletions

diff --git a/react/08-auth-with-context/src/components/Navbar.jsx b/react/08-auth-with-context/src/components/Navbar.jsx
new file mode 100644
index 0000000..9697c73
--- /dev/null
+++ b/react/08-auth-with-context/src/components/Navbar.jsx
@@ -0,0 +1,67 @@
+import { Link, NavLink } from "react-router";
+import { useAuth } from "../contexts/AuthContext"
+import RoleGuard from "./RoleGuard";
+
+const Navbar = () => {
+    const {user, login, logout, isLoggedIn} = useAuth();
+
+    return (
+        <nav className="navbar">
+            {/* Logo */}
+            <Link to="#" className="nav-link">BrandName</Link>
+
+            {/* Mobile Toggle (Checkbox Hack) */}
+            <input type="checkbox" id="nav-toggle" className="nav-toggle" />
+            <label htmlFor="nav-toggle" className="hamburger">
+                <span></span>
+                <span></span>
+                <span></span>
+            </label>
+
+            <ul className="nav-menu">
+                <li>
+                    <NavLink className="nav-link" to="/" end>
+                        Home
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink className="nav-link" to="/about" end>
+                        About
+                    </NavLink>
+                </li>
+                <li>
+                    <NavLink className="nav-link" to="/posts" end>
+                        Posts
+                    </NavLink>
+                </li>
+
+                <RoleGuard allowedRoles={['ADMIN']}>
+                    <li>
+                        <NavLink className="nav-link" to="/admin" end>
+                            Admin
+                        </NavLink>
+                    </li>
+                </RoleGuard>
+
+                {!isLoggedIn() && (
+                    <>
+                        <li>
+                            <Link to="#" className="nav-link" onClick={login}>Login</Link>
+                        </li>
+                        <li>
+                            <NavLink className="nav-link" to="/register">Register</NavLink>
+                        </li>
+                    </>
+                )}
+
+                {isLoggedIn() && (
+                    <li>
+                        <Link to="#" className="nav-link" onClick={logout}>Logout {user.name}</Link>
+                    </li>
+                )}
+            </ul>
+        </nav>
+    )
+}
+
+export default Navbar
\ No newline at end of file
diff --git a/react/08-auth-with-context/src/components/RoleGuard.jsx b/react/08-auth-with-context/src/components/RoleGuard.jsx
new file mode 100644
index 0000000..5585908
--- /dev/null
+++ b/react/08-auth-with-context/src/components/RoleGuard.jsx
@@ -0,0 +1,15 @@
+import { useAuth } from '../contexts/AuthContext';
+
+const RoleGuard = ({ allowedRoles, children }) => {
+  const { isInRoles } = useAuth();
+
+  // If at least one of the user's role is in the allowed list, show the content
+  if (isInRoles(allowedRoles)) {
+    return <>{children}</>;
+  }
+
+  // Otherwise, hide the content
+  return null;
+};
+
+export default RoleGuard;
\ No newline at end of file