@monocloud/auth-nextjs 0.1.5 → 0.1.7

package/README.md

@@ -1,4 +1,21 @@
-![MonoCloud Logo](https://raw.githubusercontent.com/monocloud/auth-js/refs/heads/main/MonoCloud.png)
+<div align="center">
+  <a href="https://www.monocloud.com?utm_source=github&utm_medium=auth_js" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <img src="https://raw.githubusercontent.com/monocloud/auth-js/refs/heads/main/packages/nextjs/banner.svg" alt="MonoCloud Banner">
+    </picture>
+  </a>
+  <div align="right">
+    <a href="https://www.npmjs.com/package/@monocloud/auth-nextjs" target="_blank">
+      <img src="https://img.shields.io/npm/v/@monocloud/auth-nextjs" alt="NPM" />
+    </a>
+    <a href="https://opensource.org/licenses/MIT">
+      <img src="https://img.shields.io/:license-MIT-blue.svg?style=flat" alt="License: MIT" />
+    </a>
+    <a href="https://github.com/monocloud/auth-js/actions/workflows/build.yml">
+      <img src="https://github.com/monocloud/auth-js/actions/workflows/build.yml/badge.svg" alt="Build Status" />
+    </a>
+  </div>
+</div>
 
 ## Introduction
 
@@ -11,8 +28,8 @@ This SDK is designed specifically for **Next.js**, providing first-class integra
 ## 📘 Documentation
 
 - **Documentation:** [https://www.monocloud.com/docs](https://www.monocloud.com/docs?utm_source=github&utm_medium=auth_js)
-- **Quickstart:**  [https://www.monocloud.com/docs/quickstarts/nextjs-app-router](https://www.monocloud.com/docs/quickstarts/nextjs-app-router?utm_source=github&utm_medium=auth_js)
-- **SDK Reference:**  [https://www.monocloud.com/docs/sdk-reference/nextjs](https://www.monocloud.com/docs/sdk-reference/nextjs/index?utm_source=github&utm_medium=auth_js)
+- **Quickstart:** [https://www.monocloud.com/docs/quickstarts/nextjs-app-router](https://www.monocloud.com/docs/quickstarts/nextjs-app-router?utm_source=github&utm_medium=auth_js)
+- **SDK Reference:** [https://www.monocloud.com/docs/sdk-reference/nextjs](https://www.monocloud.com/docs/sdk-reference/nextjs/index?utm_source=github&utm_medium=auth_js)
 - **API Reference:** [https://monocloud.github.io/auth-js](https://monocloud.github.io/auth-js?utm_source=github&utm_medium=auth_js)
 
 ## Supported Platforms
@@ -41,7 +58,7 @@ npm install @monocloud/auth-nextjs
 
 Create a `.env.local` file in your project root. The SDK automatically reads variables prefixed with `MONOCLOUD_AUTH__`.
 
-```env
+```bash
 MONOCLOUD_AUTH_TENANT_DOMAIN=https://<your-tenant-domain>
 MONOCLOUD_AUTH_CLIENT_ID=<your-client-id>
 MONOCLOUD_AUTH_CLIENT_SECRET=<your-client-secret>

package/dist/{chunk-CbDLau6x.cjs → chunk-C0xms8kb.cjs}

@@ -1,4 +1,4 @@
-//#region rolldown:runtime
+//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/dist/client/index.cjs

@@ -1,4 +1,5 @@
-const require_client = require('../client-xfBYYato.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_protect_client_page = require('../protect-client-page-B1fOU4Zl.cjs');
 
-exports.protectPage = require_client.protectPage;
-exports.useAuth = require_client.useAuth;
+exports.protectClientPage = require_protect_client_page.protectClientPage;
+exports.useAuth = require_protect_client_page.useAuth;

package/dist/client/index.d.mts

@@ -1,12 +1,14 @@
-import { a as GroupOptions, i as ExtraAuthParams } from "../types-CsBjAJce.mjs";
+import { c as ExtraAuthParams, l as GroupOptions } from "../types-xS_Me3Qg.mjs";
 import { MonoCloudUser } from "@monocloud/auth-node-core";
-import React, { ComponentType, JSX } from "react";
+import React, { ComponentType } from "react";
 
 //#region src/client/use-auth.d.ts
 /**
  * Authentication State returned by `useAuth` hook.
+ *
+ * @category Types
  */
-interface AuthState {
+interface AuthenticationState {
   /**
    * Flag indicating if the authentication state is still loading.
    */
@@ -31,32 +33,33 @@ interface AuthState {
 }
 /**
  *
- * Hook for getting the user's profile on client components
- *
- * @returns Authentication State
+ * `useAuth()` is a client-side hook that provides access to the current authentication state.
  *
- * @example App Router
+ * It can only be used inside **Client Components**.
  *
- * ```tsx
+ * @example Basic Usage
+ * ```tsx title="Basic Usage"
  * "use client";
  *
  * import { useAuth } from "@monocloud/auth-nextjs/client";
  *
  * export default function Home() {
- *   const { user } = useAuth();
+ *   const { user, isAuthenticated } = useAuth();
+ *
+ *   if (!isAuthenticated) {
+ *     return <>Not signed in</>;
+ *   }
  *
  *   return <>User Id: {user?.sub}</>;
  * }
  * ```
  *
- * @example App Router - Refetch user from Userinfo endpoint
- *
- * Calling `refetch(true)` will force refresh the user's profile from the userinfo endpoint.
- * If you do not intent to refersh from your tenants userinfo endpoint, use just `refetch()`
+ * @example Refetch user
  *
- * **Note⚠️: You need to set the env `MONOCLOUD_AUTH_ALLOW_QUERY_PARAM_OVERRIDES=true` or `allowQueryParamOverrides` should be `true` in the client initialization for force refresh to work**
+ * Calling `refetch(true)` forces a refresh of the user profile from the UserInfo endpoint.
+ * Calling `refetch()` refreshes authentication state without forcing a UserInfo request.
  *
- * ```tsx
+ * ```tsx title="Refetch User"
  * "use client";
  *
  * import { useAuth } from "@monocloud/auth-nextjs/client";
@@ -66,67 +69,38 @@ interface AuthState {
  *
  *   return (
  *     <>
- *       <pre>{JSON.stringify(user)}</pre>
- *       <button onClick={() => refetch(true)}>Refresh</button>
+ *       <pre>{JSON.stringify(user, null, 2)}</pre>
+ *       <button onClick={() => refetch(true)}>Refresh Profile</button>
  *     </>
  *   );
  * }
  * ```
  *
- * @example Pages Router
- *
- * ```tsx
- * import { useAuth } from "@monocloud/auth-nextjs/client";
- *
- * export default function Home() {
- *   const { user } = useAuth();
- *
- *   return <>User Id: {user?.sub}</>;
- * }
- * ```
- *
- * @example Pages Router - Refetch user from Userinfo endpoint
- *
- *  Calling `refetch(true)` will force refresh the user's profile from the userinfo endpoint.
- * If you do not intent to refersh from your tenants userinfo endpoint, use just `refetch()`
- *
- * **Note⚠️: You need to set the env `MONOCLOUD_AUTH_ALLOW_QUERY_PARAM_OVERRIDES=true` or `allowQueryParamOverrides` should be `true` in the client initialization for force refresh to work**
- *
- * ```tsx
- * import { useAuth } from "@monocloud/auth-nextjs/client";
- *
- * export default function Home() {
- *   const { user, refetch } = useAuth();
- *
- *   return (
- *     <>
- *       <pre>{JSON.stringify(user)}</pre>
- *       <button onClick={() => refetch(true)}>Refresh</button>
- *     </>
- *   );
- * }
- * ```
+ * @returns
  *
+ * @category Hooks
  */
-declare const useAuth: () => AuthState;
+declare const useAuth: () => AuthenticationState;
 //#endregion
-//#region src/client/protect.d.ts
+//#region src/client/protect-client-page.d.ts
 /**
  * Options for configuring page protection.
+ *
+ * @category Types
  */
-type ProtectPageOptions = {
+interface ProtectClientPageOptions extends GroupOptions {
   /**
-   *The url where the user will be redirected to after sign in
+   * The URL where the user will be redirected to after sign in.
    */
   returnUrl?: string;
   /**
    * A custom react element to render when the user is not authenticated.
    */
-  fallback?: (user?: MonoCloudUser) => JSX.Element;
+  onAccessDenied?: () => React.ReactNode;
   /**
    * A custom react element to render when the user is authenticated but does not belong to the required groups.
    */
-  groupFallback?: (user: MonoCloudUser) => JSX.Element;
+  onGroupAccessDenied?: (user: MonoCloudUser) => React.ReactNode;
   /**
    * Authorization parameters to be used during authentication.
    */
@@ -138,110 +112,91 @@ type ProtectPageOptions = {
    * @param error - The error object.
    * @returns JSX element to handle the error.
    */
-  onError?: (error: Error) => JSX.Element;
-} & GroupOptions;
+  onError?: (error: Error) => React.ReactNode;
+}
 /**
- * Function to protect a client rendered page component.
- * Ensures that only authenticated users can access the component.
- *
- * **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.**
+ * `protectClientPage()` wraps a **client-rendered page component** and ensures that only authenticated users can access it.
  *
- * @param Component - The component to protect.
- * @param options - The options.
+ * If the user is authenticated, the wrapped component receives a `user` prop.
  *
- * @returns Protected client rendered page component.
+ * > This function runs on the client and controls rendering only.
+ * > To enforce access before rendering (server-side), use the server {@link MonoCloudNextClient.protectPage | protectPage()} method on {@link MonoCloudNextClient}.
  *
- * @example App Router
+ * @example Basic Usage
  *
- * ```tsx
+ * ```tsx title="Basic Usage"
  * "use client";
  *
- * import { protectPage } from "@monocloud/auth-nextjs/client";
+ * import { protectClientPage } from "@monocloud/auth-nextjs/client";
  *
- * export default protectPage(function Home() {
- *   return <>You are signed in</>;
+ * export default protectClientPage(function Home({ user }) {
+ *   return <>Signed in as {user.email}</>;
  * });
  * ```
  *
- * @example App Router with options
+ * @example With Options
  *
- * See {@link ProtectPageOptions} for more options.
- *
- * ```tsx
+ * ```tsx title="With Options"
  * "use client";
  *
- * import { protectPage } from "@monocloud/auth-nextjs/client";
+ * import { protectClientPage } from "@monocloud/auth-nextjs/client";
  *
- * export default protectPage(
- *   function Home() {
- *     return <>You are signed in</>;
+ * export default protectClientPage(
+ *   function Home({ user }) {
+ *     return <>Signed in as {user.email}</>;
  *   },
- *   { returnUrl: "/dashboard", authParams: { loginHint: "username" } }
+ *   {
+ *     returnUrl: "/dashboard",
+ *     authParams: { loginHint: "user@example.com" }
+ *   }
  * );
  * ```
- * @example Custom Fallback
  *
- * ```tsx
+ * @example Custom access denied UI
+ *
+ * ```tsx title="Custom access denied UI"
  * "use client";
  *
- * import { protectPage } from "@monocloud/auth-nextjs/client";
+ * import { protectClientPage } from "@monocloud/auth-nextjs/client";
  *
- * export default protectPage(
- *   function Home() {
- *     return <>You are signed in</>;
+ * export default protectClientPage(
+ *   function Home({ user }) {
+ *     return <>Signed in as {user.email}</>;
  *   },
  *   {
- *    fallback: () => <div>Please sign in to continue</div>
+ *    onAccessDenied: () => <div>Please sign in to continue</div>
  *   }
  * );
  * ```
  *
- * @example Group Protection with Group Fallback
+ * @example Group protection
  *
- * ```tsx
+ * ```tsx title="Group protection"
  * "use client";
  *
- * import { protectPage } from "@monocloud/auth-nextjs/client";
+ * import { protectClientPage } from "@monocloud/auth-nextjs/client";
  *
- * export default protectPage(
- *   function Home() {
- *     return <>Welcome Admin</>;
+ * export default protectClientPage(
+ *   function Home({ user }) {
+ *     return <>Welcome Admin {user.email}</>;
  *   },
  *   {
  *    groups: ["admin"],
- *    groupFallback: (user) => <div>User {user.email} is not an admin</div>
+ *    onGroupAccessDenied: (user) => <div>User {user.email} is not an admin</div>
  *   }
  * );
  * ```
  *
- * @example Pages Router
- *
- * ```tsx
- * import { protectPage } from "@monocloud/auth-nextjs/client";
- *
- * export default protectPage(function Home() {
- *   return <>You are signed in</>;
- * });
- * ```
+ * @param Component - The page component to protect
+ * @param options - Optional configuration
+ * @returns A protected React component.
  *
- * @example Pages Router with options
+ * @category Functions
  *
- * See {@link ProtectPageOptions} for more options.
- *
- * ```tsx
- * import { protectPage } from "@monocloud/auth-nextjs/client";
- *
- * export default protectPage(
- *   function Home() {
- *     return <>You are signed in</>;
- *   },
- *   { returnUrl: "/dashboard", authParams: { loginHint: "username" } }
- * );
- * ```
  */
-declare const protectPage: <P extends object>(Component: ComponentType<P & {
+declare const protectClientPage: <P extends object>(Component: ComponentType<P & {
   user: MonoCloudUser;
-}>, options?: ProtectPageOptions) => React.FC<P>;
+}>, options?: ProtectClientPageOptions) => React.FC<P>;
 //#endregion
-export { type AuthState, type ProtectPageOptions, protectPage, useAuth };
+export { type AuthenticationState, type ProtectClientPageOptions, protectClientPage, useAuth };
 //# sourceMappingURL=index.d.mts.map

package/dist/client/index.mjs

@@ -1,3 +1,3 @@
-import { r as useAuth, t as protectPage } from "../client-D-3RMRNY.mjs";
+import { r as useAuth, t as protectClientPage } from "../protect-client-page-BFlGkK8F.mjs";
 
-export { protectPage, useAuth };
+export { protectClientPage, useAuth };

package/dist/components/client/index.cjs

@@ -1,22 +1,22 @@
-const require_chunk = require('../../chunk-CbDLau6x.cjs');
-const require_client = require('../../client-xfBYYato.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+const require_chunk = require('../../chunk-C0xms8kb.cjs');
+const require_protect_client_page = require('../../protect-client-page-B1fOU4Zl.cjs');
+require('../../client/index.cjs');
 let _monocloud_auth_node_core_utils = require("@monocloud/auth-node-core/utils");
 let react = require("react");
 react = require_chunk.__toESM(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";
@@ -33,11 +33,11 @@ react = require_chunk.__toESM(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";
@@ -47,52 +47,26 @@ react = require_chunk.__toESM(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 }) => {
 	(0, react.useEffect)(() => {
-		require_client.redirectToSignIn({
+		require_protect_client_page.redirectToSignIn({
 			returnUrl,
 			...authParams
 		});
@@ -103,19 +77,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";
@@ -123,17 +92,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";
@@ -141,8 +108,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>
@@ -150,48 +117,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 { isLoading, error, isAuthenticated, user } = require_client.useAuth();
+const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, fallback = null, onGroupAccessDenied = () => /* @__PURE__ */ react.default.createElement(react.default.Fragment, null) }) => {
+	const { isLoading, error, isAuthenticated, user } = require_protect_client_page.useAuth();
 	if (isLoading) return null;
 	if (error || !isAuthenticated || !user) {
-		if (fallback) return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, fallback);
+		if (fallback) return fallback;
 		return null;
 	}
-	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, !groups || (0, _monocloud_auth_node_core_utils.isUserInGroup)(user, groups, groupsClaim ?? process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM, matchAllGroups) ? children : groupFallback);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, !groups || (0, _monocloud_auth_node_core_utils.isUserInGroup)(user, groups, groupsClaim ?? process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM, matchAllGroups) ? children : onGroupAccessDenied(user));
 };
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":["useAuth"],"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,4BAAgB;AACd,kCAAiB;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,SAASA,wBAAS;AAE7D,KAAI,UACF,QAAO;AAGT,KAAI,SAAS,CAAC,mBAAmB,CAAC,MAAM;AACtC,MAAI,SACF,QAAO,0EAAG,SAAY;AAGxB,SAAO;;AAGT,QACE,0EACG,CAAC,6DAEA,MACA,QACA,eAAe,QAAQ,IAAI,yCAC3B,eACD,GACG,WACA,cACH"}
+{"version":3,"file":"index.cjs","names":["useAuth"],"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,4BAAgB;AACd,+CAAiB;GAAE;GAAW,GAAG;GAAY,CAAC;IAC7C,CAAC,YAAY,UAAU,CAAC;AAC3B,QAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AC6BT,MAAa,aAAa,EACxB,UACA,QACA,aACA,iBAAiB,OACjB,WAAW,MACX,4BAA6C,yEAAK,OACG;CACrD,MAAM,EAAE,WAAW,OAAO,iBAAiB,SAASA,qCAAS;AAE7D,KAAI,UACF,QAAO;AAGT,KAAI,SAAS,CAAC,mBAAmB,CAAC,MAAM;AACtC,MAAI,SACF,QAAO;AAGT,SAAO;;AAGT,QACE,0EACG,CAAC,6DAEA,MACA,QACA,eAAe,QAAQ,IAAI,yCAC3B,eACD,GACG,WACA,oBAAoB,KAAK,CAC5B"}