Function: protectClientPage

protectClientPage<P>(Component: ComponentType<P & { user: MonoCloudUser; }>, options?: ProtectClientPageOptions): FC<P>

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

Type Parameter	Description
`P` extends `object`	Props of the protected component (excluding `user`).

Parameters

Parameter	Type	Description
`Component`	`ComponentType`<`P` & { `user`: `MonoCloudUser`; }>	The page component to protect
`options?`	`ProtectClientPageOptions`	Optional configuration

Returns

FC<P>

A protected React component.

Examples

"use client";

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

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

"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" },
  },
);

"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>,
  },
);

"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>,
  },
);