"use client";
import { useState, useCallback } from "react";
import { useNavigationGuard } from "@lazarv/react-server/navigation";
import { AuthProvider } from "./auth-context.jsx";
/**
* Example: navigation guard that protects routes behind authentication.
* Wrap your app (or a subtree) with this component.
*/
export default function AuthGuard({ children }) {
const [isAuthenticated, setIsAuthenticated] = useState(false);
const guard = useCallback(
(from, to) => {
if (!isAuthenticated && to.startsWith("/dashboard")) {
// Redirect unauthenticated users to home
return "/";
}
},
[isAuthenticated]
);
useNavigationGuard(guard);
return (
<AuthProvider value={isAuthenticated}>
<div>
<div
style={{
padding: "0.5rem 1rem",
marginBottom: "1rem",
background: isAuthenticated ? "#d4edda" : "#f8d7da",
borderRadius: 4,
display: "flex",
alignItems: "center",
gap: "1rem",
}}
>
<span>{isAuthenticated ? "🔓 Logged in" : "🔒 Not logged in"}</span>
<button onClick={() => setIsAuthenticated(!isAuthenticated)}>
{isAuthenticated ? "Log out" : "Log in"}
</button>
<span style={{ fontSize: 12, color: "#666" }}>
(Dashboard & Protected are guarded — try navigating while logged
out)
</span>
</div>
{children}
</div>
</AuthProvider>
);
}