@monocloud/auth-nextjs 0.1.5 → 0.1.7

package/dist/components/client/index.d.mts

@@ -1,28 +1,29 @@
-import { i as ExtraAuthParams } from "../../types-CsBjAJce.mjs";
-import React, { JSX } from "react";
+import { c as ExtraAuthParams } from "../../types-xS_Me3Qg.mjs";
+import { MonoCloudUser } from "@monocloud/auth-node-core";
+import React from "react";
 
 //#region src/components/client/redirect-to-signin.d.ts
 /**
  * Props for the `<RedirectToSignIn />` Component
+ *
+ * @category Types
  */
 interface RedirectToSignInProps extends ExtraAuthParams {
   /**
-   * The url where the user will be redirected to after sign in.
+   * URL to redirect the user to after sign-in.
    */
   returnUrl?: string;
 }
 /**
- * A client side component that will redirect users to the sign in page.
- *
- * **Note⚠️: Since `window.location` is set as `returnUrl` query param by default, you need to set the env `MONOCLOUD_AUTH_ALLOW_QUERY_PARAM_OVERRIDES=true` or `allowQueryParamOverrides` should be `true` in the client initialization for returning to the same page.**
+ * `<RedirectToSignIn>` is a **client-side component** that immediately redirects the user to the MonoCloud sign-in page when it is rendered.
  *
- * @param props - The props for customizing RedirectToSignIn
+ * It does not render any UI.
  *
- * @returns
+ * > This component must be used inside a Client Component (`"use client"`).
  *
- * @example App Router
+ * @example Basic Usage
  *
- * ```tsx
+ * ```tsx title="Basic Usage"
  * "use client";
  *
  * import { useAuth } from "@monocloud/auth-nextjs/client";
@@ -39,11 +40,11 @@ interface RedirectToSignInProps extends ExtraAuthParams {
  * }
  * ```
  *
- * @example App Router with options
+ * @example With Options
  *
- * You can customize the authorization request by passing in props. See {@link RedirectToSignInProps}.
+ * You can customize the authorization request by passing in props.
  *
- * ```tsx
+ * ```tsx title="With options"
  * "use client";
  *
  * import { useAuth } from "@monocloud/auth-nextjs/client";
@@ -53,48 +54,22 @@ interface RedirectToSignInProps extends ExtraAuthParams {
  *   const { isLoading, isAuthenticated } = useAuth();
  *
  *   if (!isLoading && !isAuthenticated) {
- *     return <RedirectToSignIn returnUrl="/dashboard" loginHint="username" />;
- *   }
- *
- *   return <>You are signed in</>;
- * }
- * ```
- *
- * @example Pages Router
- *
- * ```tsx
- * import { useAuth } from "@monocloud/auth-nextjs/client";
- * import { RedirectToSignIn } from "@monocloud/auth-nextjs/components/client";
- *
- * export default function Home() {
- *   const { isLoading, isAuthenticated } = useAuth();
- *
- *   if (!isLoading && !isAuthenticated) {
- *     return <RedirectToSignIn />;
+ *     return (
+ *       <RedirectToSignIn
+ *         returnUrl="/dashboard"
+ *         loginHint="user@example.com"
+ *       />
+ *     );
  *   }
  *
  *   return <>You are signed in</>;
  * }
  * ```
  *
- * @example Pages Router with options
- *
- * You can customize the authorization request by passing in props. See {@link RedirectToSignInProps}.
- *
- * ```tsx
- * import { useAuth } from "@monocloud/auth-nextjs/client";
- * import { RedirectToSignIn } from "@monocloud/auth-nextjs/components/client";
- *
- * export default function Home() {
- *   const { isLoading, isAuthenticated } = useAuth();
- *
- *   if (!isLoading && !isAuthenticated) {
- *     return <RedirectToSignIn returnUrl="/dashboard" loginHint="username" />;
- *   }
+ * @param props - The props for customizing RedirectToSignIn.
+ * @returns
  *
- *   return <>You are signed in</>;
- * }
- * ```
+ * @category Components
  */
 declare const RedirectToSignIn: ({
   returnUrl,
@@ -102,46 +77,48 @@ declare const RedirectToSignIn: ({
 }: RedirectToSignInProps) => null;
 //#endregion
 //#region src/components/client/protected.d.ts
+/**
+ * Props for the `<Protected />` component.
+ *
+ * @category Types
+ */
 interface ProtectedComponentProps {
   /**
-   * Components that should be rendered if the user is authenticated.
+   * Content to render when access is allowed.
    */
   children: React.ReactNode;
   /**
-   * A list of group names or IDs to which the user must belong to. The user should belong to atleast one of the specified groups.
+   * Groups required to view the protected content. By default, the user must belong to **any** of the specified groups.
    */
   groups?: string[];
   /**
-   * Name of the claim of user's groups. default: `groups`.
+   * Name of the claim that contains groups in the user profile.
+   * @defaultValue 'groups'
    */
   groupsClaim?: string;
   /**
-   * Flag indicating if all groups specified should be present in the users profile. default: false.
+   * If `true`, the user must belong to **all** specified `groups` (instead of any).
+   * @defaultValue false
    */
   matchAllGroups?: boolean;
   /**
-   * A fallback component that should render if the user is not authenticated.
+   * Content to render when the user is not authenticated.
    */
   fallback?: React.ReactNode;
   /**
-   * A fallback component that should render if the user is authenticated but does not belong to the required groups.
+   * Rendered when the user is authenticated but does not meet the `groups` requirement. If omitted, nothing is rendered (or `fallback` is used only for unauthenticated users).
    */
-  groupFallback?: React.ReactNode;
+  onGroupAccessDenied?: (user: MonoCloudUser) => React.ReactNode;
 }
 /**
- * A wrapper component that conditionally renders its children based on the user's authentication
- * status and group membership.
+ * `<Protected>` conditionally renders its children based on the user’s authentication state and (optionally) 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.**
+ * > `<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 {@link MonoCloudNextClient.protectPage | protectPage()}, or {@link MonoCloudNextClient.protect | protect()}.
  *
- * @param props - Props for customizing the Protected component.
- *
- * @returns The children if authorized, the `fallback` or `groupFallback` content if unauthenticated or unauthorized,
- * or `null` while loading.
+ * @example Basic Usage
  *
- * @example App Router
- *
- * ```tsx
+ * ```tsx title="Basic Usage"
  * "use client";
  *
  * import { Protected } from "@monocloud/auth-nextjs/components/client";
@@ -149,17 +126,15 @@ interface ProtectedComponentProps {
  * export default function Home() {
  *   return (
  *     <Protected fallback={<>Sign in to view the message.</>}>
- *       <>You are breathtaking</>
+ *       <>This is the protected content.</>
  *     </Protected>
  *   );
  * }
  * ```
  *
- * @example App Router with group options
- *
- * See {@link ProtectedComponentProps}.
+ * @example With Groups
  *
- * ```tsx
+ * ```tsx title="With Groups"
  * "use client";
  *
  * import { Protected } from "@monocloud/auth-nextjs/components/client";
@@ -167,8 +142,8 @@ interface ProtectedComponentProps {
  * export default function Home() {
  *   return (
  *     <Protected
- *       groupFallback={<>Only admins are allowed.</>}
  *       groups={["admin"]}
+ *       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access admin content.</>}
  *     >
  *       <>Signed in as admin</>
  *     </Protected>
@@ -176,39 +151,30 @@ interface ProtectedComponentProps {
  * }
  * ```
  *
- * @example Pages Router
+ * @example Requiring all groups
  *
- * ```tsx
- * import { Protected } from "@monocloud/auth-nextjs/components/client";
- *
- * export default function Home() {
- *   return (
- *     <Protected fallback={<>Sign in to view the message.</>}>
- *       <>You are breathtaking</>
- *     </Protected>
- *   );
- * }
- * ```
- *
- * @example Pages Router with group options
- *
- * See {@link ProtectedComponentProps}.
+ * ```tsx title="Requiring all groups"
+ * "use client";
  *
- * ```tsx
  * import { Protected } from "@monocloud/auth-nextjs/components/client";
  *
  * export default function Home() {
  *   return (
  *     <Protected
- *       groupFallback={<>Only admins are allowed.</>}
- *       groups={["admin"]}
+ *       groups={["admin", "billing"]}
+ *       matchAllGroups
+ *       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access billing content.</>}
  *     >
- *       <>Signed in as admin</>
+ *       <>Sensitive settings</>
  *     </Protected>
  *   );
  * }
  * ```
  *
+ * @param props - Props for customizing the Protected component.
+ * @returns The children if authorized, the `fallback` or `onGroupAccessDenied` content if unauthenticated or unauthorized, or `null` while loading.
+ *
+ * @category Components
  */
 declare const Protected: ({
   children,
@@ -216,8 +182,8 @@ declare const Protected: ({
   groupsClaim,
   matchAllGroups,
   fallback,
-  groupFallback
-}: ProtectedComponentProps) => JSX.Element | null;
+  onGroupAccessDenied
+}: ProtectedComponentProps) => React.ReactNode | null;
 //#endregion
 export { Protected, type ProtectedComponentProps, RedirectToSignIn, type RedirectToSignInProps };
 //# sourceMappingURL=index.d.mts.map

package/dist/components/client/index.mjs

@@ -1,20 +1,19 @@
-import { n as redirectToSignIn, r as useAuth } from "../../client-D-3RMRNY.mjs";
+import { n as redirectToSignIn, r as useAuth } from "../../protect-client-page-BFlGkK8F.mjs";
+import "../../client/index.mjs";
 import { isUserInGroup } from "@monocloud/auth-node-core/utils";
 import React, { useEffect } from "react";
 
 //#region src/components/client/redirect-to-signin.tsx
 /**
-* A client side component that will redirect users to the sign in page.
+* `<RedirectToSignIn>` is a **client-side component** that immediately redirects the user to the MonoCloud sign-in page when it is rendered.
 *
-* **Note⚠️: Since `window.location` is set as `returnUrl` query param by default, you need to set the env `MONOCLOUD_AUTH_ALLOW_QUERY_PARAM_OVERRIDES=true` or `allowQueryParamOverrides` should be `true` in the client initialization for returning to the same page.**
+* It does not render any UI.
 *
-* @param props - The props for customizing RedirectToSignIn
+* > This component must be used inside a Client Component (`"use client"`).
 *
-* @returns
-*
-* @example App Router
+* @example Basic Usage
 *
-* ```tsx
+* ```tsx title="Basic Usage"
 * "use client";
 *
 * import { useAuth } from "@monocloud/auth-nextjs/client";
@@ -31,11 +30,11 @@ import React, { useEffect } from "react";
 * }
 * ```
 *
-* @example App Router with options
+* @example With Options
 *
-* You can customize the authorization request by passing in props. See {@link RedirectToSignInProps}.
+* You can customize the authorization request by passing in props.
 *
-* ```tsx
+* ```tsx title="With options"
 * "use client";
 *
 * import { useAuth } from "@monocloud/auth-nextjs/client";
@@ -45,48 +44,22 @@ import React, { useEffect } from "react";
 *   const { isLoading, isAuthenticated } = useAuth();
 *
 *   if (!isLoading && !isAuthenticated) {
-*     return <RedirectToSignIn returnUrl="/dashboard" loginHint="username" />;
-*   }
-*
-*   return <>You are signed in</>;
-* }
-* ```
-*
-* @example Pages Router
-*
-* ```tsx
-* import { useAuth } from "@monocloud/auth-nextjs/client";
-* import { RedirectToSignIn } from "@monocloud/auth-nextjs/components/client";
-*
-* export default function Home() {
-*   const { isLoading, isAuthenticated } = useAuth();
-*
-*   if (!isLoading && !isAuthenticated) {
-*     return <RedirectToSignIn />;
+*     return (
+*       <RedirectToSignIn
+*         returnUrl="/dashboard"
+*         loginHint="user@example.com"
+*       />
+*     );
 *   }
 *
 *   return <>You are signed in</>;
 * }
 * ```
 *
-* @example Pages Router with options
-*
-* You can customize the authorization request by passing in props. See {@link RedirectToSignInProps}.
-*
-* ```tsx
-* import { useAuth } from "@monocloud/auth-nextjs/client";
-* import { RedirectToSignIn } from "@monocloud/auth-nextjs/components/client";
-*
-* export default function Home() {
-*   const { isLoading, isAuthenticated } = useAuth();
-*
-*   if (!isLoading && !isAuthenticated) {
-*     return <RedirectToSignIn returnUrl="/dashboard" loginHint="username" />;
-*   }
+* @param props - The props for customizing RedirectToSignIn.
+* @returns
 *
-*   return <>You are signed in</>;
-* }
-* ```
+* @category Components
 */
 const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 	useEffect(() => {
@@ -101,19 +74,14 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 //#endregion
 //#region src/components/client/protected.tsx
 /**
-* 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.**
+* `<Protected>` conditionally renders its children based on the user’s authentication state and (optionally) group membership.
 *
-* @param props - Props for customizing the Protected component.
+* > `<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 {@link MonoCloudNextClient.protectPage | protectPage()}, or {@link MonoCloudNextClient.protect | protect()}.
 *
-* @returns The children if authorized, the `fallback` or `groupFallback` content if unauthenticated or unauthorized,
-* or `null` while loading.
+* @example Basic Usage
 *
-* @example App Router
-*
-* ```tsx
+* ```tsx title="Basic Usage"
 * "use client";
 *
 * import { Protected } from "@monocloud/auth-nextjs/components/client";
@@ -121,17 +89,15 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * export default function Home() {
 *   return (
 *     <Protected fallback={<>Sign in to view the message.</>}>
-*       <>You are breathtaking</>
+*       <>This is the protected content.</>
 *     </Protected>
 *   );
 * }
 * ```
 *
-* @example App Router with group options
-*
-* See {@link ProtectedComponentProps}.
+* @example With Groups
 *
-* ```tsx
+* ```tsx title="With Groups"
 * "use client";
 *
 * import { Protected } from "@monocloud/auth-nextjs/components/client";
@@ -139,8 +105,8 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * export default function Home() {
 *   return (
 *     <Protected
-*       groupFallback={<>Only admins are allowed.</>}
 *       groups={["admin"]}
+*       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access admin content.</>}
 *     >
 *       <>Signed in as admin</>
 *     </Protected>
@@ -148,48 +114,39 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * }
 * ```
 *
-* @example Pages Router
-*
-* ```tsx
-* import { Protected } from "@monocloud/auth-nextjs/components/client";
+* @example Requiring all groups
 *
-* export default function Home() {
-*   return (
-*     <Protected fallback={<>Sign in to view the message.</>}>
-*       <>You are breathtaking</>
-*     </Protected>
-*   );
-* }
-* ```
-*
-* @example Pages Router with group options
-*
-* See {@link ProtectedComponentProps}.
+* ```tsx title="Requiring all groups"
+* "use client";
 *
-* ```tsx
 * import { Protected } from "@monocloud/auth-nextjs/components/client";
 *
 * export default function Home() {
 *   return (
 *     <Protected
-*       groupFallback={<>Only admins are allowed.</>}
-*       groups={["admin"]}
+*       groups={["admin", "billing"]}
+*       matchAllGroups
+*       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access billing content.</>}
 *     >
-*       <>Signed in as admin</>
+*       <>Sensitive settings</>
 *     </Protected>
 *   );
 * }
 * ```
 *
+* @param props - Props for customizing the Protected component.
+* @returns The children if authorized, the `fallback` or `onGroupAccessDenied` content if unauthenticated or unauthorized, or `null` while loading.
+*
+* @category Components
 */
-const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, fallback = null, groupFallback = null }) => {
+const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, fallback = null, onGroupAccessDenied = () => /* @__PURE__ */ React.createElement(React.Fragment, null) }) => {
 	const { isLoading, error, isAuthenticated, user } = useAuth();
 	if (isLoading) return null;
 	if (error || !isAuthenticated || !user) {
-		if (fallback) return /* @__PURE__ */ React.createElement(React.Fragment, null, fallback);
+		if (fallback) return fallback;
 		return null;
 	}
-	return /* @__PURE__ */ React.createElement(React.Fragment, null, !groups || isUserInGroup(user, groups, groupsClaim ?? process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM, matchAllGroups) ? children : groupFallback);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, !groups || isUserInGroup(user, groups, groupsClaim ?? process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM, matchAllGroups) ? children : onGroupAccessDenied(user));
 };
 
 //#endregion

package/dist/components/client/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/client/redirect-to-signin.tsx","../../../src/components/client/protected.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { redirectToSignIn } from '../../client/protect';\nimport { ExtraAuthParams } from '../../types';\n\n/**\n * Props for the `<RedirectToSignIn />` Component\n */\nexport interface RedirectToSignInProps extends ExtraAuthParams {\n  /**\n   * The url where the user will be redirected to after sign in.\n   */\n  returnUrl?: string;\n}\n\n/**\n * A client side component that will redirect users to the sign in page.\n *\n * **Note⚠️: Since `window.location` is set as `returnUrl` query param by default, you need to set the env `MONOCLOUD_AUTH_ALLOW_QUERY_PARAM_OVERRIDES=true` or `allowQueryParamOverrides` should be `true` in the client initialization for returning to the same page.**\n *\n * @param props - The props for customizing RedirectToSignIn\n *\n * @returns\n *\n * @example App Router\n *\n * ```tsx\n * \"use client\";\n *\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n * import { RedirectToSignIn } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   const { isLoading, isAuthenticated } = useAuth();\n *\n *   if (!isLoading && !isAuthenticated) {\n *     return <RedirectToSignIn />;\n *   }\n *\n *   return <>You are signed in</>;\n * }\n * ```\n *\n * @example App Router with options\n *\n * You can customize the authorization request by passing in props. See {@link RedirectToSignInProps}.\n *\n * ```tsx\n * \"use client\";\n *\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n * import { RedirectToSignIn } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   const { isLoading, isAuthenticated } = useAuth();\n *\n *   if (!isLoading && !isAuthenticated) {\n *     return <RedirectToSignIn returnUrl=\"/dashboard\" loginHint=\"username\" />;\n *   }\n *\n *   return <>You are signed in</>;\n * }\n * ```\n *\n * @example Pages Router\n *\n * ```tsx\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n * import { RedirectToSignIn } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   const { isLoading, isAuthenticated } = useAuth();\n *\n *   if (!isLoading && !isAuthenticated) {\n *     return <RedirectToSignIn />;\n *   }\n *\n *   return <>You are signed in</>;\n * }\n * ```\n *\n * @example Pages Router with options\n *\n * You can customize the authorization request by passing in props. See {@link RedirectToSignInProps}.\n *\n * ```tsx\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n * import { RedirectToSignIn } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   const { isLoading, isAuthenticated } = useAuth();\n *\n *   if (!isLoading && !isAuthenticated) {\n *     return <RedirectToSignIn returnUrl=\"/dashboard\" loginHint=\"username\" />;\n *   }\n *\n *   return <>You are signed in</>;\n * }\n * ```\n */\nexport const RedirectToSignIn = ({\n  returnUrl,\n  ...authParams\n}: RedirectToSignInProps): null => {\n  useEffect(() => {\n    redirectToSignIn({ returnUrl, ...authParams });\n  }, [authParams, returnUrl]);\n  return null;\n};\n","import { isUserInGroup } from '@monocloud/auth-node-core/utils';\nimport React, { JSX } from 'react';\nimport { useAuth } from '../../client';\n\nexport interface ProtectedComponentProps {\n  /**\n   * Components that should be rendered if the user is authenticated.\n   */\n  children: React.ReactNode;\n\n  /**\n   * A list of group names or IDs to which the user must belong to. The user should belong to atleast one of the specified groups.\n   */\n  groups?: string[];\n\n  /**\n   * Name of the claim of user's groups. default: `groups`.\n   */\n  groupsClaim?: string;\n\n  /**\n   * Flag indicating if all groups specified should be present in the users profile. default: false.\n   */\n  matchAllGroups?: boolean;\n\n  /**\n   * A fallback component that should render if the user is not authenticated.\n   */\n  fallback?: React.ReactNode;\n\n  /**\n   * A fallback component that should render if the user is authenticated but does not belong to the required groups.\n   */\n  groupFallback?: React.ReactNode;\n}\n\n/**\n * A wrapper component that conditionally renders its children based on the user's authentication\n * status and group membership.\n *\n * **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.**\n *\n * @param props - Props for customizing the Protected component.\n *\n * @returns The children if authorized, the `fallback` or `groupFallback` content if unauthenticated or unauthorized,\n * or `null` while loading.\n *\n * @example App Router\n *\n * ```tsx\n * \"use client\";\n *\n * import { Protected } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   return (\n *     <Protected fallback={<>Sign in to view the message.</>}>\n *       <>You are breathtaking</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n * @example App Router with group options\n *\n * See {@link ProtectedComponentProps}.\n *\n * ```tsx\n * \"use client\";\n *\n * import { Protected } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   return (\n *     <Protected\n *       groupFallback={<>Only admins are allowed.</>}\n *       groups={[\"admin\"]}\n *     >\n *       <>Signed in as admin</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n * @example Pages Router\n *\n * ```tsx\n * import { Protected } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   return (\n *     <Protected fallback={<>Sign in to view the message.</>}>\n *       <>You are breathtaking</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n * @example Pages Router with group options\n *\n * See {@link ProtectedComponentProps}.\n *\n * ```tsx\n * import { Protected } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   return (\n *     <Protected\n *       groupFallback={<>Only admins are allowed.</>}\n *       groups={[\"admin\"]}\n *     >\n *       <>Signed in as admin</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n */\nexport const Protected = ({\n  children,\n  groups,\n  groupsClaim,\n  matchAllGroups = false,\n  fallback = null,\n  groupFallback = null,\n}: ProtectedComponentProps): JSX.Element | null => {\n  const { isLoading, error, isAuthenticated, user } = useAuth();\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (error || !isAuthenticated || !user) {\n    if (fallback) {\n      return <>{fallback}</>;\n    }\n\n    return null;\n  }\n\n  return (\n    <>\n      {!groups ||\n      isUserInGroup(\n        user,\n        groups,\n        groupsClaim ?? process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM,\n        matchAllGroups\n      )\n        ? children\n        : groupFallback}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAqGA,MAAa,oBAAoB,EAC/B,WACA,GAAG,iBAC8B;AACjC,iBAAgB;AACd,mBAAiB;GAAE;GAAW,GAAG;GAAY,CAAC;IAC7C,CAAC,YAAY,UAAU,CAAC;AAC3B,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACUT,MAAa,aAAa,EACxB,UACA,QACA,aACA,iBAAiB,OACjB,WAAW,MACX,gBAAgB,WACiC;CACjD,MAAM,EAAE,WAAW,OAAO,iBAAiB,SAAS,SAAS;AAE7D,KAAI,UACF,QAAO;AAGT,KAAI,SAAS,CAAC,mBAAmB,CAAC,MAAM;AACtC,MAAI,SACF,QAAO,0DAAG,SAAY;AAGxB,SAAO;;AAGT,QACE,0DACG,CAAC,UACF,cACE,MACA,QACA,eAAe,QAAQ,IAAI,yCAC3B,eACD,GACG,WACA,cACH"}
+{"version":3,"file":"index.mjs","names":[],"sources":["../../../src/components/client/redirect-to-signin.tsx","../../../src/components/client/protected.tsx"],"sourcesContent":["'use client';\n\nimport { useEffect } from 'react';\nimport { redirectToSignIn } from '../../client/protect-client-page';\nimport { ExtraAuthParams } from '../../types';\n\n/**\n * Props for the `<RedirectToSignIn />` Component\n *\n * @category Types\n */\nexport interface RedirectToSignInProps extends ExtraAuthParams {\n  /**\n   * URL to redirect the user to after sign-in.\n   */\n  returnUrl?: string;\n}\n\n/**\n * `<RedirectToSignIn>` is a **client-side component** that immediately redirects the user to the MonoCloud sign-in page when it is rendered.\n *\n * It does not render any UI.\n *\n * > This component must be used inside a Client Component (`\"use client\"`).\n *\n * @example Basic Usage\n *\n * ```tsx title=\"Basic Usage\"\n * \"use client\";\n *\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n * import { RedirectToSignIn } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   const { isLoading, isAuthenticated } = useAuth();\n *\n *   if (!isLoading && !isAuthenticated) {\n *     return <RedirectToSignIn />;\n *   }\n *\n *   return <>You are signed in</>;\n * }\n * ```\n *\n * @example With Options\n *\n * You can customize the authorization request by passing in props.\n *\n * ```tsx title=\"With options\"\n * \"use client\";\n *\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n * import { RedirectToSignIn } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   const { isLoading, isAuthenticated } = useAuth();\n *\n *   if (!isLoading && !isAuthenticated) {\n *     return (\n *       <RedirectToSignIn\n *         returnUrl=\"/dashboard\"\n *         loginHint=\"user@example.com\"\n *       />\n *     );\n *   }\n *\n *   return <>You are signed in</>;\n * }\n * ```\n *\n * @param props - The props for customizing RedirectToSignIn.\n * @returns\n *\n * @category Components\n */\nexport const RedirectToSignIn = ({\n  returnUrl,\n  ...authParams\n}: RedirectToSignInProps): null => {\n  useEffect(() => {\n    redirectToSignIn({ returnUrl, ...authParams });\n  }, [authParams, returnUrl]);\n  return null;\n};\n","import { isUserInGroup } from '@monocloud/auth-node-core/utils';\nimport React from 'react';\nimport { useAuth } from '../../client';\nimport type { MonoCloudUser } from '@monocloud/auth-node-core';\nimport type { MonoCloudNextClient } from '../../monocloud-next-client';\n\n/**\n * Props for the `<Protected />` component.\n *\n * @category Types\n */\nexport interface ProtectedComponentProps {\n  /**\n   * Content to render when access is allowed.\n   */\n  children: React.ReactNode;\n\n  /**\n   * Groups required to view the protected content. By default, the user must belong to **any** of the specified groups.\n   */\n  groups?: string[];\n\n  /**\n   * Name of the claim that contains groups in the user profile.\n   * @defaultValue 'groups'\n   */\n  groupsClaim?: string;\n\n  /**\n   * If `true`, the user must belong to **all** specified `groups` (instead of any).\n   * @defaultValue false\n   */\n  matchAllGroups?: boolean;\n\n  /**\n   * Content to render when the user is not authenticated.\n   */\n  fallback?: React.ReactNode;\n\n  /**\n   * Rendered when the user is authenticated but does not meet the `groups` requirement. If omitted, nothing is rendered (or `fallback` is used only for unauthenticated users).\n   */\n  onGroupAccessDenied?: (user: MonoCloudUser) => React.ReactNode;\n}\n\n/**\n * `<Protected>` conditionally renders its children based on the user’s authentication state and (optionally) group membership.\n *\n * > `<Protected>` runs on the client and only affects what is rendered. It does **not** prevent data from being sent to the browser.\n * > To enforce access before content is rendered or sent to the client, use server-side protection such as {@link MonoCloudNextClient.protectPage | protectPage()}, or {@link MonoCloudNextClient.protect | protect()}.\n *\n * @example Basic Usage\n *\n * ```tsx title=\"Basic Usage\"\n * \"use client\";\n *\n * import { Protected } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   return (\n *     <Protected fallback={<>Sign in to view the message.</>}>\n *       <>This is the protected content.</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n * @example With Groups\n *\n * ```tsx title=\"With Groups\"\n * \"use client\";\n *\n * import { Protected } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   return (\n *     <Protected\n *       groups={[\"admin\"]}\n *       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access admin content.</>}\n *     >\n *       <>Signed in as admin</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n * @example Requiring all groups\n *\n * ```tsx title=\"Requiring all groups\"\n * \"use client\";\n *\n * import { Protected } from \"@monocloud/auth-nextjs/components/client\";\n *\n * export default function Home() {\n *   return (\n *     <Protected\n *       groups={[\"admin\", \"billing\"]}\n *       matchAllGroups\n *       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access billing content.</>}\n *     >\n *       <>Sensitive settings</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n * @param props - Props for customizing the Protected component.\n * @returns The children if authorized, the `fallback` or `onGroupAccessDenied` content if unauthenticated or unauthorized, or `null` while loading.\n *\n * @category Components\n */\nexport const Protected = ({\n  children,\n  groups,\n  groupsClaim,\n  matchAllGroups = false,\n  fallback = null,\n  onGroupAccessDenied = (): React.ReactNode => <></>,\n}: ProtectedComponentProps): React.ReactNode | null => {\n  const { isLoading, error, isAuthenticated, user } = useAuth();\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (error || !isAuthenticated || !user) {\n    if (fallback) {\n      return fallback;\n    }\n\n    return null;\n  }\n\n  return (\n    <>\n      {!groups ||\n      isUserInGroup(\n        user,\n        groups,\n        groupsClaim ?? process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM,\n        matchAllGroups\n      )\n        ? children\n        : onGroupAccessDenied(user)}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,MAAa,oBAAoB,EAC/B,WACA,GAAG,iBAC8B;AACjC,iBAAgB;AACd,mBAAiB;GAAE;GAAW,GAAG;GAAY,CAAC;IAC7C,CAAC,YAAY,UAAU,CAAC;AAC3B,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC6BT,MAAa,aAAa,EACxB,UACA,QACA,aACA,iBAAiB,OACjB,WAAW,MACX,4BAA6C,yDAAK,OACG;CACrD,MAAM,EAAE,WAAW,OAAO,iBAAiB,SAAS,SAAS;AAE7D,KAAI,UACF,QAAO;AAGT,KAAI,SAAS,CAAC,mBAAmB,CAAC,MAAM;AACtC,MAAI,SACF,QAAO;AAGT,SAAO;;AAGT,QACE,0DACG,CAAC,UACF,cACE,MACA,QACA,eAAe,QAAQ,IAAI,yCAC3B,eACD,GACG,WACA,oBAAoB,KAAK,CAC5B"}