Function protectClientPage

protectClientPage(
Component: ComponentType,
options?: ProtectClientPageOptions,
): FC

protectClientPage() wraps a client-rendered page component and ensures that only authenticated users can access it.

If the user is authenticated, the wrapped component receives a user prop.

This function runs on the client and controls rendering only. To enforce access before rendering (server-side), use the server protectPage() method on MonoCloudNextClient.

Type Parameters

P extends object
Props of the protected component (excluding user).

Parameters

Component: ComponentType
The page component to protect
Optionaloptions: ProtectClientPageOptions
Optional configuration

Returns FC

A protected React component.

Example: Basic Usage

"use client";

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

export default protectClientPage(function Home({ user }) {
  return <>Signed in as {user.email}</>;
});

Example: With Options

"use client";

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

export default protectClientPage(
  function Home({ user }) {
    return <>Signed in as {user.email}</>;
  },
  {
    returnUrl: "/dashboard",
    authParams: { loginHint: "user@example.com" }
  }
);

Example: Custom access denied UI

"use client";

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

export default protectClientPage(
  function Home({ user }) {
    return <>Signed in as {user.email}</>;
  },
  {
   onAccessDenied: () => <div>Please sign in to continue</div>
  }
);

Example: Group protection

"use client";

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

export default protectClientPage(
  function Home({ user }) {
    return <>Welcome Admin {user.email}</>;
  },
  {
   groups: ["admin"],
   onGroupAccessDenied: (user) => <div>User {user.email} is not an admin</div>
  }
);