Function Protected

Protected(props: ProtectedComponentProps): ReactNode

<Protected> conditionally renders its children based on the user’s authentication state and (optionally) group membership.

<Protected> runs on the client and only affects what is rendered. It does not prevent data from being sent to the browser. To enforce access before content is rendered or sent to the client, use server-side protection such as protectPage(), or protect().

Parameters

props: ProtectedComponentProps
Props for customizing the Protected component.

Returns ReactNode

The children if authorized, the fallback or onGroupAccessDenied content if unauthenticated or unauthorized, or null while loading.

Example: Basic Usage

"use client";

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

export default function Home() {
  return (
    <Protected fallback={<>Sign in to view the message.</>}>
      <>This is the protected content.</>
    </Protected>
  );
}

Example: With Groups

"use client";

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

export default function Home() {
  return (
    <Protected
      groups={["admin"]}
      onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access admin content.</>}
    >
      <>Signed in as admin</>
    </Protected>
  );
}

Example: Requiring all groups

"use client";

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

export default function Home() {
  return (
    <Protected
      groups={["admin", "billing"]}
      matchAllGroups
      onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access billing content.</>}
    >
      <>Sensitive settings</>
    </Protected>
  );
}