Function Protected

Protected(props: ProtectedComponentProps): Element | null

A wrapper component that conditionally renders its children based on the user's authentication status and group membership.

Note⚠️: The component is hidden from view. The data is present in the browser. Use server side protectPage() for protecting components before that data is sent to the client.

Parameters

props: ProtectedComponentProps
Props for customizing the Protected component.

Returns Element | null

The children if authorized, the onAccessDenied content if unauthorized, or null while loading.

Example: App Router

"use client";

import { Protected } from "@monocloud/auth-nextjs/components/client";

export default function Home() {
  return (
    <Protected onAccessDenied={<>Sign in to view the message.</>}>
      <>You are breathtaking</>
    </Protected>
  );
}

Example: App Router with group options

See ProtectedComponentProps.

"use client";

import { Protected } from "@monocloud/auth-nextjs/components/client";

export default function Home() {
  return (
    <Protected
      onAccessDenied={<>Only admins are allowed.</>}
      groups={["admin"]}
    >
      <>Signed in as admin</>
    </Protected>
  );
}

Example: Pages Router

import { Protected } from "@monocloud/auth-nextjs/components/client";

export default function Home() {
  return (
    <Protected onAccessDenied={<>Sign in to view the message.</>}>
      <>You are breathtaking</>
    </Protected>
  );
}

Example: Pages Router with group options