Replace redirects in RequireAccess with inline Access Denied UI (no forced logout or redirects)

cgen-5cf9c182b9fd4e899e3ec9c43fdd9e54
This commit is contained in:
Builder.io 2025-10-19 05:09:08 +00:00
parent 8b372451ce
commit e4da7c8f65

View file

@ -1,5 +1,8 @@
import { Navigate, useLocation } from "react-router-dom"; import { Navigate, useLocation } from "react-router-dom";
import { useAuth } from "@/contexts/AuthContext"; import { useAuth } from "@/contexts/AuthContext";
import Layout from "@/components/Layout";
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
import { Badge } from "@/components/ui/badge";
interface RequireAccessProps { interface RequireAccessProps {
allowedRealms?: Array< allowedRealms?: Array<
@ -15,7 +18,6 @@ export default function RequireAccess({
children, children,
}: RequireAccessProps) { }: RequireAccessProps) {
const { user, profile, roles } = useAuth(); const { user, profile, roles } = useAuth();
const location = useLocation();
const realmOk = const realmOk =
!allowedRealms || allowedRealms.includes((profile as any)?.user_type); !allowedRealms || allowedRealms.includes((profile as any)?.user_type);
@ -24,14 +26,41 @@ export default function RequireAccess({
(Array.isArray(roles) && (Array.isArray(roles) &&
roles.some((r) => allowedRoles.includes(r.toLowerCase()))); roles.some((r) => allowedRoles.includes(r.toLowerCase())));
if (!user) if (!user) {
return ( return (
<Navigate <Layout>
to={`/onboarding?next=${encodeURIComponent(location.pathname + location.search)}`} <div className="min-h-screen bg-aethex-gradient py-12">
replace <section className="container mx-auto max-w-3xl px-4">
/> <Card className="bg-card/60 border-border/40 backdrop-blur">
<CardHeader>
<Badge variant="outline" className="mb-2 border-aethex-400/50 text-aethex-300">Access</Badge>
<CardTitle>Access denied</CardTitle>
<CardDescription>Sign in required to view this page.</CardDescription>
</CardHeader>
</Card>
</section>
</div>
</Layout>
); );
if (!realmOk || !rolesOk) return <Navigate to="/realms" replace />; }
if (!realmOk || !rolesOk) {
return (
<Layout>
<div className="min-h-screen bg-aethex-gradient py-12">
<section className="container mx-auto max-w-3xl px-4">
<Card className="bg-card/60 border-border/40 backdrop-blur">
<CardHeader>
<Badge variant="outline" className="mb-2 border-aethex-400/50 text-aethex-300">Access</Badge>
<CardTitle>Access denied</CardTitle>
<CardDescription>You dont have the required realm or role for this area.</CardDescription>
</CardHeader>
</Card>
</section>
</div>
</Layout>
);
}
return children; return children;
} }