App
Admin Layout
Compose protected admin screens with AuthGuard, AuthProvider, AdminLayout, sidebar, and AdminContent.
The admin layout is the shared shell for authenticated business screens.
It usually combines auth protection, auth client context, sidebar navigation, and the admin content region.
Example
import { AdminContent } from "@tulip-systems/app/components/client";
import { AdminLayout } from "@tulip-systems/app/components/server";
import { AuthProvider } from "@tulip-systems/auth/client";
import { AuthGuard } from "@tulip-systems/auth/next/guards";
import type { PropsWithChildren } from "react";
import { AdminSidebar } from "@/lib/config/paths";
import { authClient } from "@/server/auth/client";
import { auth } from "@/server/auth/init";
export default async function Layout(props: PropsWithChildren) {
return (
<AuthGuard auth={auth}>
<AuthProvider authClient={authClient}>
<AdminLayout>
<AdminSidebar />
<AdminContent>{props.children}</AdminContent>
</AdminLayout>
</AuthProvider>
</AuthGuard>
);
}Rules of thumb
- Keep auth protection at the admin layout boundary.
- Keep sidebar composition in app config.
- Put page content inside
AdminContent. - Use nested layouts for feature-specific shells.