@monocloud/auth-nextjs 0.1.3 → 0.1.5

package/dist/client/index.cjs

@@ -1,4 +1,4 @@
-const require_client = require('../client-Be6A2vEn.cjs');
+const require_client = require('../client-xfBYYato.cjs');
 
 exports.protectPage = require_client.protectPage;
 exports.useAuth = require_client.useAuth;

package/dist/client/index.d.mts

@@ -1,4 +1,4 @@
-import { a as GroupOptions, i as ExtraAuthParams } from "../types-DOfZTKa6.mjs";
+import { a as GroupOptions, i as ExtraAuthParams } from "../types-CsBjAJce.mjs";
 import { MonoCloudUser } from "@monocloud/auth-node-core";
 import React, { ComponentType, JSX } from "react";
 
@@ -120,9 +120,13 @@ type ProtectPageOptions = {
    */
   returnUrl?: string;
   /**
-   * A custom react element to render when the user is not authenticated or is not a member of the specified groups.
+   * A custom react element to render when the user is not authenticated.
    */
-  onAccessDenied?: (user?: MonoCloudUser) => JSX.Element;
+  fallback?: (user?: MonoCloudUser) => JSX.Element;
+  /**
+   * A custom react element to render when the user is authenticated but does not belong to the required groups.
+   */
+  groupFallback?: (user: MonoCloudUser) => JSX.Element;
   /**
    * Authorization parameters to be used during authentication.
    */
@@ -175,8 +179,42 @@ type ProtectPageOptions = {
  *   { returnUrl: "/dashboard", authParams: { loginHint: "username" } }
  * );
  * ```
-
-* @example Pages Router
+ * @example Custom Fallback
+ *
+ * ```tsx
+ * "use client";
+ *
+ * import { protectPage } from "@monocloud/auth-nextjs/client";
+ *
+ * export default protectPage(
+ *   function Home() {
+ *     return <>You are signed in</>;
+ *   },
+ *   {
+ *    fallback: () => <div>Please sign in to continue</div>
+ *   }
+ * );
+ * ```
+ *
+ * @example Group Protection with Group Fallback
+ *
+ * ```tsx
+ * "use client";
+ *
+ * import { protectPage } from "@monocloud/auth-nextjs/client";
+ *
+ * export default protectPage(
+ *   function Home() {
+ *     return <>Welcome Admin</>;
+ *   },
+ *   {
+ *    groups: ["admin"],
+ *    groupFallback: (user) => <div>User {user.email} is not an admin</div>
+ *   }
+ * );
+ * ```
+ *
+ * @example Pages Router
  *
  * ```tsx
  * import { protectPage } from "@monocloud/auth-nextjs/client";

package/dist/client/index.mjs

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

package/dist/{client-CnvBgZM-.mjs → client-D-3RMRNY.mjs}

@@ -144,7 +144,7 @@ const handlePageError = (error, options) => {
 /**
 * 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.**
 *
 * @param Component - The component to protect.
@@ -165,7 +165,7 @@ const handlePageError = (error, options) => {
 * ```
 *
 * @example App Router with options
-* 
+*
 * See {@link ProtectPageOptions} for more options.
 *
 * ```tsx
@@ -180,7 +180,41 @@ const handlePageError = (error, options) => {
 *   { returnUrl: "/dashboard", authParams: { loginHint: "username" } }
 * );
 * ```
-
+* @example Custom Fallback
+*
+* ```tsx
+* "use client";
+*
+* import { protectPage } from "@monocloud/auth-nextjs/client";
+*
+* export default protectPage(
+*   function Home() {
+*     return <>You are signed in</>;
+*   },
+*   {
+*    fallback: () => <div>Please sign in to continue</div>
+*   }
+* );
+* ```
+*
+* @example Group Protection with Group Fallback
+*
+* ```tsx
+* "use client";
+*
+* import { protectPage } from "@monocloud/auth-nextjs/client";
+*
+* export default protectPage(
+*   function Home() {
+*     return <>Welcome Admin</>;
+*   },
+*   {
+*    groups: ["admin"],
+*    groupFallback: (user) => <div>User {user.email} is not an admin</div>
+*   }
+* );
+* ```
+*
 * @example Pages Router
 *
 * ```tsx
@@ -192,7 +226,7 @@ const handlePageError = (error, options) => {
 * ```
 *
 * @example Pages Router with options
-* 
+*
 * See {@link ProtectPageOptions} for more options.
 *
 * ```tsx
@@ -211,7 +245,7 @@ const protectPage = (Component, options) => {
 		const { user, error, isLoading } = useAuth();
 		useEffect(() => {
 			if (!user && !isLoading && !error) {
-				if (options === null || options === void 0 ? void 0 : options.onAccessDenied) return;
+				if (options === null || options === void 0 ? void 0 : options.fallback) return;
 				const authParams = (options === null || options === void 0 ? void 0 : options.authParams) ?? {};
 				redirectToSignIn({
 					returnUrl: options === null || options === void 0 ? void 0 : options.returnUrl,
@@ -224,11 +258,11 @@ const protectPage = (Component, options) => {
 			error
 		]);
 		if (error) return handlePageError(error, options);
-		if (!user && !isLoading && (options === null || options === void 0 ? void 0 : options.onAccessDenied)) return options.onAccessDenied();
+		if (!user && !isLoading && (options === null || options === void 0 ? void 0 : options.fallback)) return options.fallback();
 		if (user) {
 			if ((options === null || options === void 0 ? void 0 : options.groups) && !isUserInGroup(user, options.groups, options.groupsClaim ?? process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM, options.matchAll)) {
-				const { onAccessDenied = () => /* @__PURE__ */ React.createElement("div", null, "Access Denied") } = options;
-				return onAccessDenied(user);
+				const { groupFallback = () => /* @__PURE__ */ React.createElement("div", null, "Access Denied") } = options;
+				return groupFallback(user);
 			}
 			return /* @__PURE__ */ React.createElement(Component, {
 				user,
@@ -241,4 +275,4 @@ const protectPage = (Component, options) => {
 
 //#endregion
 export { redirectToSignIn as n, useAuth as r, protectPage as t };
-//# sourceMappingURL=client-CnvBgZM-.mjs.map
+//# sourceMappingURL=client-D-3RMRNY.mjs.map

package/dist/client-D-3RMRNY.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-D-3RMRNY.mjs","names":[],"sources":["../src/client/use-auth.tsx","../src/client/protect.tsx"],"sourcesContent":["'use client';\n\nimport type { MonoCloudUser } from '@monocloud/auth-node-core';\nimport useSWR from 'swr';\n\n/**\n * Authentication State returned by `useAuth` hook.\n */\nexport interface AuthState {\n  /**\n   * Flag indicating if the authentication state is still loading.\n   */\n  isLoading: boolean;\n  /**\n   * Flag indicating if the user is authenticated.\n   */\n  isAuthenticated: boolean;\n  /**\n   * Error encountered during authentication, if any.\n   */\n  error?: Error;\n  /**\n   *  The authenticated user's information, if available.\n   */\n  user?: MonoCloudUser;\n  /**\n   * Function to refetch the authentication state.\n   *\n   */\n  refetch: (refresh?: boolean) => void;\n}\n\nconst fetchUser = async (url: string): Promise<MonoCloudUser | undefined> => {\n  const res = await fetch(url, { credentials: 'include' });\n\n  if (res.status === 204) {\n    return undefined;\n  }\n\n  if (res.ok) {\n    return res.json();\n  }\n\n  throw new Error('Failed to fetch user');\n};\n\n/**\n *\n * Hook for getting the user's profile on client components\n *\n * @returns Authentication State\n *\n * @example App Router\n *\n * ```tsx\n * \"use client\";\n *\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n *\n * export default function Home() {\n *   const { user } = useAuth();\n *\n *   return <>User Id: {user?.sub}</>;\n * }\n * ```\n *\n * @example App Router - Refetch user from Userinfo endpoint\n *\n * Calling `refetch(true)` will force refresh the user's profile from the userinfo endpoint.\n * If you do not intent to refersh from your tenants userinfo endpoint, use just `refetch()`\n *\n * **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**\n *\n * ```tsx\n * \"use client\";\n *\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n *\n * export default function Home() {\n *   const { user, refetch } = useAuth();\n *\n *   return (\n *     <>\n *       <pre>{JSON.stringify(user)}</pre>\n *       <button onClick={() => refetch(true)}>Refresh</button>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Pages Router\n *\n * ```tsx\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n *\n * export default function Home() {\n *   const { user } = useAuth();\n *\n *   return <>User Id: {user?.sub}</>;\n * }\n * ```\n *\n * @example Pages Router - Refetch user from Userinfo endpoint\n *\n *  Calling `refetch(true)` will force refresh the user's profile from the userinfo endpoint.\n * If you do not intent to refersh from your tenants userinfo endpoint, use just `refetch()`\n *\n * **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**\n *\n * ```tsx\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n *\n * export default function Home() {\n *   const { user, refetch } = useAuth();\n *\n *   return (\n *     <>\n *       <pre>{JSON.stringify(user)}</pre>\n *       <button onClick={() => refetch(true)}>Refresh</button>\n *     </>\n *   );\n * }\n * ```\n *\n */\nexport const useAuth = (): AuthState => {\n  const key =\n    process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_USER_INFO_URL ??\n    // eslint-disable-next-line no-underscore-dangle\n    `${process.env.__NEXT_ROUTER_BASEPATH ?? ''}/api/auth/userinfo`;\n\n  const { data, error, isLoading, mutate } = useSWR<MonoCloudUser | undefined>(\n    key,\n    fetchUser\n  );\n\n  const refetch = (refresh?: boolean): void => {\n    const url = new URL(key, 'https://dummy');\n    if (refresh) {\n      url.searchParams.set('refresh', 'true');\n    }\n\n    void mutate(async () => await fetchUser(url.pathname + url.search), {\n      revalidate: false,\n    });\n  };\n\n  if (error) {\n    return {\n      user: undefined,\n      isLoading: false,\n      isAuthenticated: false,\n      error: error as Error,\n      refetch,\n    };\n  }\n\n  if (data) {\n    return {\n      user: data,\n      isLoading,\n      isAuthenticated: !!data && Object.keys(data).length > 0,\n      error: undefined,\n      refetch,\n    };\n  }\n\n  return {\n    user: undefined,\n    isLoading,\n    isAuthenticated: false,\n    error: undefined,\n    /* v8 ignore next -- @preserve */\n    refetch: (): void => {},\n  };\n};\n","/* eslint-disable react/display-name */\n'use client';\n\nimport React, { ComponentType, JSX, useEffect } from 'react';\nimport type { MonoCloudUser } from '@monocloud/auth-node-core';\nimport { isUserInGroup } from '@monocloud/auth-node-core/utils';\nimport { useAuth } from './use-auth';\nimport { ExtraAuthParams, GroupOptions } from '../types';\n\n/**\n * Options for configuring page protection.\n */\nexport type ProtectPageOptions = {\n  /**\n   *The url where the user will be redirected to after sign in\n   */\n  returnUrl?: string;\n\n  /**\n   * A custom react element to render when the user is not authenticated.\n   */\n  fallback?: (user?: MonoCloudUser) => JSX.Element;\n\n  /**\n   * A custom react element to render when the user is authenticated but does not belong to the required groups.\n   */\n  groupFallback?: (user: MonoCloudUser) => JSX.Element;\n\n  /**\n   * Authorization parameters to be used during authentication.\n   */\n  authParams?: ExtraAuthParams;\n\n  /**\n   * Callback function to handle errors.\n   * If not provided, errors will be thrown.\n   *\n   * @param error - The error object.\n   * @returns JSX element to handle the error.\n   */\n  onError?: (error: Error) => JSX.Element;\n} & GroupOptions;\n\nexport const redirectToSignIn = (\n  options: { returnUrl?: string } & ExtraAuthParams\n): void => {\n  const searchParams = new URLSearchParams(window.location.search);\n  searchParams.set(\n    'return_url',\n    options.returnUrl ?? window.location.toString()\n  );\n\n  if (options?.scopes) {\n    searchParams.set('scope', options.scopes);\n  }\n  if (options?.resource) {\n    searchParams.set('resource', options.resource);\n  }\n\n  if (options?.acrValues) {\n    searchParams.set('acr_values', options.acrValues.join(' '));\n  }\n\n  if (options?.display) {\n    searchParams.set('display', options.display);\n  }\n\n  if (options?.prompt) {\n    searchParams.set('prompt', options.prompt);\n  }\n\n  if (options?.authenticatorHint) {\n    searchParams.set('authenticator_hint', options.authenticatorHint);\n  }\n\n  if (options?.uiLocales) {\n    searchParams.set('ui_locales', options.uiLocales);\n  }\n\n  if (options?.maxAge) {\n    searchParams.set('max_age', options.maxAge.toString());\n  }\n\n  if (options?.loginHint) {\n    searchParams.set('login_hint', options.loginHint);\n  }\n\n  window.location.assign(\n    // eslint-disable-next-line no-underscore-dangle\n    `${process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_SIGNIN_URL ?? `${process.env.__NEXT_ROUTER_BASEPATH ?? ''}/api/auth/signin`}?${searchParams.toString()}`\n  );\n};\n\nconst handlePageError = (\n  error: Error,\n  options?: ProtectPageOptions\n): JSX.Element => {\n  /* v8 ignore else -- @preserve */\n  if (options?.onError) {\n    return options.onError(error);\n  }\n\n  /* v8 ignore next -- @preserve */\n  throw error;\n};\n\n/**\n * Function to protect a client rendered page component.\n * Ensures that only authenticated users can access the component.\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 Component - The component to protect.\n * @param options - The options.\n *\n * @returns Protected client rendered page component.\n *\n * @example App Router\n *\n * ```tsx\n * \"use client\";\n *\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(function Home() {\n *   return <>You are signed in</>;\n * });\n * ```\n *\n * @example App Router with options\n *\n * See {@link ProtectPageOptions} for more options.\n *\n * ```tsx\n * \"use client\";\n *\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(\n *   function Home() {\n *     return <>You are signed in</>;\n *   },\n *   { returnUrl: \"/dashboard\", authParams: { loginHint: \"username\" } }\n * );\n * ```\n * @example Custom Fallback\n *\n * ```tsx\n * \"use client\";\n *\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(\n *   function Home() {\n *     return <>You are signed in</>;\n *   },\n *   {\n *    fallback: () => <div>Please sign in to continue</div>\n *   }\n * );\n * ```\n *\n * @example Group Protection with Group Fallback\n *\n * ```tsx\n * \"use client\";\n *\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(\n *   function Home() {\n *     return <>Welcome Admin</>;\n *   },\n *   {\n *    groups: [\"admin\"],\n *    groupFallback: (user) => <div>User {user.email} is not an admin</div>\n *   }\n * );\n * ```\n *\n * @example Pages Router\n *\n * ```tsx\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(function Home() {\n *   return <>You are signed in</>;\n * });\n * ```\n *\n * @example Pages Router with options\n *\n * See {@link ProtectPageOptions} for more options.\n *\n * ```tsx\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(\n *   function Home() {\n *     return <>You are signed in</>;\n *   },\n *   { returnUrl: \"/dashboard\", authParams: { loginHint: \"username\" } }\n * );\n * ```\n */\nexport const protectPage = <P extends object>(\n  Component: ComponentType<P & { user: MonoCloudUser }>,\n  options?: ProtectPageOptions\n): React.FC<P> => {\n  return props => {\n    const { user, error, isLoading } = useAuth();\n\n    useEffect(() => {\n      if (!user && !isLoading && !error) {\n        if (options?.fallback) {\n          return;\n        }\n\n        const authParams = options?.authParams ?? {};\n        redirectToSignIn({\n          returnUrl: options?.returnUrl,\n          ...authParams,\n        });\n      }\n    }, [user, isLoading, error]);\n\n    if (error) {\n      return handlePageError(error, options);\n    }\n\n    if (!user && !isLoading && options?.fallback) {\n      return options.fallback();\n    }\n\n    if (user) {\n      if (\n        options?.groups &&\n        !isUserInGroup(\n          user,\n          options.groups,\n          options.groupsClaim ??\n            process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM,\n          options.matchAll\n        )\n      ) {\n        const { groupFallback = (): JSX.Element => <div>Access Denied</div> } =\n          options;\n        return groupFallback(user);\n      }\n\n      return <Component user={user} {...props} />;\n    }\n\n    return null;\n  };\n};\n"],"mappings":"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"}

package/dist/{client-Be6A2vEn.cjs → client-xfBYYato.cjs}

@@ -147,7 +147,7 @@ const handlePageError = (error, options) => {
 /**
 * 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.**
 *
 * @param Component - The component to protect.
@@ -168,7 +168,7 @@ const handlePageError = (error, options) => {
 * ```
 *
 * @example App Router with options
-* 
+*
 * See {@link ProtectPageOptions} for more options.
 *
 * ```tsx
@@ -183,7 +183,41 @@ const handlePageError = (error, options) => {
 *   { returnUrl: "/dashboard", authParams: { loginHint: "username" } }
 * );
 * ```
-
+* @example Custom Fallback
+*
+* ```tsx
+* "use client";
+*
+* import { protectPage } from "@monocloud/auth-nextjs/client";
+*
+* export default protectPage(
+*   function Home() {
+*     return <>You are signed in</>;
+*   },
+*   {
+*    fallback: () => <div>Please sign in to continue</div>
+*   }
+* );
+* ```
+*
+* @example Group Protection with Group Fallback
+*
+* ```tsx
+* "use client";
+*
+* import { protectPage } from "@monocloud/auth-nextjs/client";
+*
+* export default protectPage(
+*   function Home() {
+*     return <>Welcome Admin</>;
+*   },
+*   {
+*    groups: ["admin"],
+*    groupFallback: (user) => <div>User {user.email} is not an admin</div>
+*   }
+* );
+* ```
+*
 * @example Pages Router
 *
 * ```tsx
@@ -195,7 +229,7 @@ const handlePageError = (error, options) => {
 * ```
 *
 * @example Pages Router with options
-* 
+*
 * See {@link ProtectPageOptions} for more options.
 *
 * ```tsx
@@ -214,7 +248,7 @@ const protectPage = (Component, options) => {
 		const { user, error, isLoading } = useAuth();
 		(0, react.useEffect)(() => {
 			if (!user && !isLoading && !error) {
-				if (options === null || options === void 0 ? void 0 : options.onAccessDenied) return;
+				if (options === null || options === void 0 ? void 0 : options.fallback) return;
 				const authParams = (options === null || options === void 0 ? void 0 : options.authParams) ?? {};
 				redirectToSignIn({
 					returnUrl: options === null || options === void 0 ? void 0 : options.returnUrl,
@@ -227,11 +261,11 @@ const protectPage = (Component, options) => {
 			error
 		]);
 		if (error) return handlePageError(error, options);
-		if (!user && !isLoading && (options === null || options === void 0 ? void 0 : options.onAccessDenied)) return options.onAccessDenied();
+		if (!user && !isLoading && (options === null || options === void 0 ? void 0 : options.fallback)) return options.fallback();
 		if (user) {
 			if ((options === null || options === void 0 ? void 0 : options.groups) && !(0, _monocloud_auth_node_core_utils.isUserInGroup)(user, options.groups, options.groupsClaim ?? process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM, options.matchAll)) {
-				const { onAccessDenied = () => /* @__PURE__ */ react.default.createElement("div", null, "Access Denied") } = options;
-				return onAccessDenied(user);
+				const { groupFallback = () => /* @__PURE__ */ react.default.createElement("div", null, "Access Denied") } = options;
+				return groupFallback(user);
 			}
 			return /* @__PURE__ */ react.default.createElement(Component, {
 				user,
@@ -261,4 +295,4 @@ Object.defineProperty(exports, 'useAuth', {
     return useAuth;
   }
 });
-//# sourceMappingURL=client-Be6A2vEn.cjs.map
+//# sourceMappingURL=client-xfBYYato.cjs.map

package/dist/client-xfBYYato.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-xfBYYato.cjs","names":[],"sources":["../src/client/use-auth.tsx","../src/client/protect.tsx"],"sourcesContent":["'use client';\n\nimport type { MonoCloudUser } from '@monocloud/auth-node-core';\nimport useSWR from 'swr';\n\n/**\n * Authentication State returned by `useAuth` hook.\n */\nexport interface AuthState {\n  /**\n   * Flag indicating if the authentication state is still loading.\n   */\n  isLoading: boolean;\n  /**\n   * Flag indicating if the user is authenticated.\n   */\n  isAuthenticated: boolean;\n  /**\n   * Error encountered during authentication, if any.\n   */\n  error?: Error;\n  /**\n   *  The authenticated user's information, if available.\n   */\n  user?: MonoCloudUser;\n  /**\n   * Function to refetch the authentication state.\n   *\n   */\n  refetch: (refresh?: boolean) => void;\n}\n\nconst fetchUser = async (url: string): Promise<MonoCloudUser | undefined> => {\n  const res = await fetch(url, { credentials: 'include' });\n\n  if (res.status === 204) {\n    return undefined;\n  }\n\n  if (res.ok) {\n    return res.json();\n  }\n\n  throw new Error('Failed to fetch user');\n};\n\n/**\n *\n * Hook for getting the user's profile on client components\n *\n * @returns Authentication State\n *\n * @example App Router\n *\n * ```tsx\n * \"use client\";\n *\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n *\n * export default function Home() {\n *   const { user } = useAuth();\n *\n *   return <>User Id: {user?.sub}</>;\n * }\n * ```\n *\n * @example App Router - Refetch user from Userinfo endpoint\n *\n * Calling `refetch(true)` will force refresh the user's profile from the userinfo endpoint.\n * If you do not intent to refersh from your tenants userinfo endpoint, use just `refetch()`\n *\n * **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**\n *\n * ```tsx\n * \"use client\";\n *\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n *\n * export default function Home() {\n *   const { user, refetch } = useAuth();\n *\n *   return (\n *     <>\n *       <pre>{JSON.stringify(user)}</pre>\n *       <button onClick={() => refetch(true)}>Refresh</button>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Pages Router\n *\n * ```tsx\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n *\n * export default function Home() {\n *   const { user } = useAuth();\n *\n *   return <>User Id: {user?.sub}</>;\n * }\n * ```\n *\n * @example Pages Router - Refetch user from Userinfo endpoint\n *\n *  Calling `refetch(true)` will force refresh the user's profile from the userinfo endpoint.\n * If you do not intent to refersh from your tenants userinfo endpoint, use just `refetch()`\n *\n * **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**\n *\n * ```tsx\n * import { useAuth } from \"@monocloud/auth-nextjs/client\";\n *\n * export default function Home() {\n *   const { user, refetch } = useAuth();\n *\n *   return (\n *     <>\n *       <pre>{JSON.stringify(user)}</pre>\n *       <button onClick={() => refetch(true)}>Refresh</button>\n *     </>\n *   );\n * }\n * ```\n *\n */\nexport const useAuth = (): AuthState => {\n  const key =\n    process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_USER_INFO_URL ??\n    // eslint-disable-next-line no-underscore-dangle\n    `${process.env.__NEXT_ROUTER_BASEPATH ?? ''}/api/auth/userinfo`;\n\n  const { data, error, isLoading, mutate } = useSWR<MonoCloudUser | undefined>(\n    key,\n    fetchUser\n  );\n\n  const refetch = (refresh?: boolean): void => {\n    const url = new URL(key, 'https://dummy');\n    if (refresh) {\n      url.searchParams.set('refresh', 'true');\n    }\n\n    void mutate(async () => await fetchUser(url.pathname + url.search), {\n      revalidate: false,\n    });\n  };\n\n  if (error) {\n    return {\n      user: undefined,\n      isLoading: false,\n      isAuthenticated: false,\n      error: error as Error,\n      refetch,\n    };\n  }\n\n  if (data) {\n    return {\n      user: data,\n      isLoading,\n      isAuthenticated: !!data && Object.keys(data).length > 0,\n      error: undefined,\n      refetch,\n    };\n  }\n\n  return {\n    user: undefined,\n    isLoading,\n    isAuthenticated: false,\n    error: undefined,\n    /* v8 ignore next -- @preserve */\n    refetch: (): void => {},\n  };\n};\n","/* eslint-disable react/display-name */\n'use client';\n\nimport React, { ComponentType, JSX, useEffect } from 'react';\nimport type { MonoCloudUser } from '@monocloud/auth-node-core';\nimport { isUserInGroup } from '@monocloud/auth-node-core/utils';\nimport { useAuth } from './use-auth';\nimport { ExtraAuthParams, GroupOptions } from '../types';\n\n/**\n * Options for configuring page protection.\n */\nexport type ProtectPageOptions = {\n  /**\n   *The url where the user will be redirected to after sign in\n   */\n  returnUrl?: string;\n\n  /**\n   * A custom react element to render when the user is not authenticated.\n   */\n  fallback?: (user?: MonoCloudUser) => JSX.Element;\n\n  /**\n   * A custom react element to render when the user is authenticated but does not belong to the required groups.\n   */\n  groupFallback?: (user: MonoCloudUser) => JSX.Element;\n\n  /**\n   * Authorization parameters to be used during authentication.\n   */\n  authParams?: ExtraAuthParams;\n\n  /**\n   * Callback function to handle errors.\n   * If not provided, errors will be thrown.\n   *\n   * @param error - The error object.\n   * @returns JSX element to handle the error.\n   */\n  onError?: (error: Error) => JSX.Element;\n} & GroupOptions;\n\nexport const redirectToSignIn = (\n  options: { returnUrl?: string } & ExtraAuthParams\n): void => {\n  const searchParams = new URLSearchParams(window.location.search);\n  searchParams.set(\n    'return_url',\n    options.returnUrl ?? window.location.toString()\n  );\n\n  if (options?.scopes) {\n    searchParams.set('scope', options.scopes);\n  }\n  if (options?.resource) {\n    searchParams.set('resource', options.resource);\n  }\n\n  if (options?.acrValues) {\n    searchParams.set('acr_values', options.acrValues.join(' '));\n  }\n\n  if (options?.display) {\n    searchParams.set('display', options.display);\n  }\n\n  if (options?.prompt) {\n    searchParams.set('prompt', options.prompt);\n  }\n\n  if (options?.authenticatorHint) {\n    searchParams.set('authenticator_hint', options.authenticatorHint);\n  }\n\n  if (options?.uiLocales) {\n    searchParams.set('ui_locales', options.uiLocales);\n  }\n\n  if (options?.maxAge) {\n    searchParams.set('max_age', options.maxAge.toString());\n  }\n\n  if (options?.loginHint) {\n    searchParams.set('login_hint', options.loginHint);\n  }\n\n  window.location.assign(\n    // eslint-disable-next-line no-underscore-dangle\n    `${process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_SIGNIN_URL ?? `${process.env.__NEXT_ROUTER_BASEPATH ?? ''}/api/auth/signin`}?${searchParams.toString()}`\n  );\n};\n\nconst handlePageError = (\n  error: Error,\n  options?: ProtectPageOptions\n): JSX.Element => {\n  /* v8 ignore else -- @preserve */\n  if (options?.onError) {\n    return options.onError(error);\n  }\n\n  /* v8 ignore next -- @preserve */\n  throw error;\n};\n\n/**\n * Function to protect a client rendered page component.\n * Ensures that only authenticated users can access the component.\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 Component - The component to protect.\n * @param options - The options.\n *\n * @returns Protected client rendered page component.\n *\n * @example App Router\n *\n * ```tsx\n * \"use client\";\n *\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(function Home() {\n *   return <>You are signed in</>;\n * });\n * ```\n *\n * @example App Router with options\n *\n * See {@link ProtectPageOptions} for more options.\n *\n * ```tsx\n * \"use client\";\n *\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(\n *   function Home() {\n *     return <>You are signed in</>;\n *   },\n *   { returnUrl: \"/dashboard\", authParams: { loginHint: \"username\" } }\n * );\n * ```\n * @example Custom Fallback\n *\n * ```tsx\n * \"use client\";\n *\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(\n *   function Home() {\n *     return <>You are signed in</>;\n *   },\n *   {\n *    fallback: () => <div>Please sign in to continue</div>\n *   }\n * );\n * ```\n *\n * @example Group Protection with Group Fallback\n *\n * ```tsx\n * \"use client\";\n *\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(\n *   function Home() {\n *     return <>Welcome Admin</>;\n *   },\n *   {\n *    groups: [\"admin\"],\n *    groupFallback: (user) => <div>User {user.email} is not an admin</div>\n *   }\n * );\n * ```\n *\n * @example Pages Router\n *\n * ```tsx\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(function Home() {\n *   return <>You are signed in</>;\n * });\n * ```\n *\n * @example Pages Router with options\n *\n * See {@link ProtectPageOptions} for more options.\n *\n * ```tsx\n * import { protectPage } from \"@monocloud/auth-nextjs/client\";\n *\n * export default protectPage(\n *   function Home() {\n *     return <>You are signed in</>;\n *   },\n *   { returnUrl: \"/dashboard\", authParams: { loginHint: \"username\" } }\n * );\n * ```\n */\nexport const protectPage = <P extends object>(\n  Component: ComponentType<P & { user: MonoCloudUser }>,\n  options?: ProtectPageOptions\n): React.FC<P> => {\n  return props => {\n    const { user, error, isLoading } = useAuth();\n\n    useEffect(() => {\n      if (!user && !isLoading && !error) {\n        if (options?.fallback) {\n          return;\n        }\n\n        const authParams = options?.authParams ?? {};\n        redirectToSignIn({\n          returnUrl: options?.returnUrl,\n          ...authParams,\n        });\n      }\n    }, [user, isLoading, error]);\n\n    if (error) {\n      return handlePageError(error, options);\n    }\n\n    if (!user && !isLoading && options?.fallback) {\n      return options.fallback();\n    }\n\n    if (user) {\n      if (\n        options?.groups &&\n        !isUserInGroup(\n          user,\n          options.groups,\n          options.groupsClaim ??\n            process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM,\n          options.matchAll\n        )\n      ) {\n        const { groupFallback = (): JSX.Element => <div>Access Denied</div> } =\n          options;\n        return groupFallback(user);\n      }\n\n      return <Component user={user} {...props} />;\n    }\n\n    return null;\n  };\n};\n"],"mappings":";;;;;;;;AAgCA,MAAM,YAAY,OAAO,QAAoD;CAC3E,MAAM,MAAM,MAAM,MAAM,KAAK,EAAE,aAAa,WAAW,CAAC;AAExD,KAAI,IAAI,WAAW,IACjB;AAGF,KAAI,IAAI,GACN,QAAO,IAAI,MAAM;AAGnB,OAAM,IAAI,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkFzC,MAAa,gBAA2B;CACtC,MAAM,MACJ,QAAQ,IAAI,4CAEZ,GAAG,QAAQ,IAAI,0BAA0B,GAAG;CAE9C,MAAM,EAAE,MAAM,OAAO,WAAW,4BAC9B,KACA,UACD;CAED,MAAM,WAAW,YAA4B;EAC3C,MAAM,MAAM,IAAI,IAAI,KAAK,gBAAgB;AACzC,MAAI,QACF,KAAI,aAAa,IAAI,WAAW,OAAO;AAGzC,EAAK,OAAO,YAAY,MAAM,UAAU,IAAI,WAAW,IAAI,OAAO,EAAE,EAClE,YAAY,OACb,CAAC;;AAGJ,KAAI,MACF,QAAO;EACL,MAAM;EACN,WAAW;EACX,iBAAiB;EACV;EACP;EACD;AAGH,KAAI,KACF,QAAO;EACL,MAAM;EACN;EACA,iBAAiB,CAAC,CAAC,QAAQ,OAAO,KAAK,KAAK,CAAC,SAAS;EACtD,OAAO;EACP;EACD;AAGH,QAAO;EACL,MAAM;EACN;EACA,iBAAiB;EACjB,OAAO;EAEP,eAAqB;EACtB;;;;;ACnIH,MAAa,oBACX,YACS;CACT,MAAM,eAAe,IAAI,gBAAgB,OAAO,SAAS,OAAO;AAChE,cAAa,IACX,cACA,QAAQ,aAAa,OAAO,SAAS,UAAU,CAChD;AAED,uDAAI,QAAS,OACX,cAAa,IAAI,SAAS,QAAQ,OAAO;AAE3C,uDAAI,QAAS,SACX,cAAa,IAAI,YAAY,QAAQ,SAAS;AAGhD,uDAAI,QAAS,UACX,cAAa,IAAI,cAAc,QAAQ,UAAU,KAAK,IAAI,CAAC;AAG7D,uDAAI,QAAS,QACX,cAAa,IAAI,WAAW,QAAQ,QAAQ;AAG9C,uDAAI,QAAS,OACX,cAAa,IAAI,UAAU,QAAQ,OAAO;AAG5C,uDAAI,QAAS,kBACX,cAAa,IAAI,sBAAsB,QAAQ,kBAAkB;AAGnE,uDAAI,QAAS,UACX,cAAa,IAAI,cAAc,QAAQ,UAAU;AAGnD,uDAAI,QAAS,OACX,cAAa,IAAI,WAAW,QAAQ,OAAO,UAAU,CAAC;AAGxD,uDAAI,QAAS,UACX,cAAa,IAAI,cAAc,QAAQ,UAAU;AAGnD,QAAO,SAAS,OAEd,GAAG,QAAQ,IAAI,yCAAyC,GAAG,QAAQ,IAAI,0BAA0B,GAAG,kBAAkB,GAAG,aAAa,UAAU,GACjJ;;AAGH,MAAM,mBACJ,OACA,YACgB;;AAEhB,uDAAI,QAAS,QACX,QAAO,QAAQ,QAAQ,MAAM;;AAI/B,OAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGR,MAAa,eACX,WACA,YACgB;AAChB,SAAO,UAAS;EACd,MAAM,EAAE,MAAM,OAAO,cAAc,SAAS;AAE5C,6BAAgB;AACd,OAAI,CAAC,QAAQ,CAAC,aAAa,CAAC,OAAO;AACjC,0DAAI,QAAS,SACX;IAGF,MAAM,gEAAa,QAAS,eAAc,EAAE;AAC5C,qBAAiB;KACf,6DAAW,QAAS;KACpB,GAAG;KACJ,CAAC;;KAEH;GAAC;GAAM;GAAW;GAAM,CAAC;AAE5B,MAAI,MACF,QAAO,gBAAgB,OAAO,QAAQ;AAGxC,MAAI,CAAC,QAAQ,CAAC,gEAAa,QAAS,UAClC,QAAO,QAAQ,UAAU;AAG3B,MAAI,MAAM;AACR,0DACE,QAAS,WACT,oDACE,MACA,QAAQ,QACR,QAAQ,eACN,QAAQ,IAAI,yCACd,QAAQ,SACT,EACD;IACA,MAAM,EAAE,sBAAmC,4CAAC,aAAI,gBAAmB,KACjE;AACF,WAAO,cAAc,KAAK;;AAG5B,UAAO,4CAAC;IAAgB;IAAM,GAAI;KAAS;;AAG7C,SAAO"}

package/dist/components/client/index.cjs

@@ -1,5 +1,5 @@
 const require_chunk = require('../../chunk-CbDLau6x.cjs');
-const require_client = require('../../client-Be6A2vEn.cjs');
+const require_client = require('../../client-xfBYYato.cjs');
 let _monocloud_auth_node_core_utils = require("@monocloud/auth-node-core/utils");
 let react = require("react");
 react = require_chunk.__toESM(react);
@@ -110,7 +110,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 *
 * @param props - Props for customizing the Protected component.
 *
-* @returns The children if authorized, the `onAccessDenied` content if unauthorized,
+* @returns The children if authorized, the `fallback` or `groupFallback` content if unauthenticated or unauthorized,
 * or `null` while loading.
 *
 * @example App Router
@@ -122,7 +122,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 *
 * export default function Home() {
 *   return (
-*     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+*     <Protected fallback={<>Sign in to view the message.</>}>
 *       <>You are breathtaking</>
 *     </Protected>
 *   );
@@ -141,7 +141,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * export default function Home() {
 *   return (
 *     <Protected
-*       onAccessDenied={<>Only admins are allowed.</>}
+*       groupFallback={<>Only admins are allowed.</>}
 *       groups={["admin"]}
 *     >
 *       <>Signed in as admin</>
@@ -157,7 +157,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 *
 * export default function Home() {
 *   return (
-*     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+*     <Protected fallback={<>Sign in to view the message.</>}>
 *       <>You are breathtaking</>
 *     </Protected>
 *   );
@@ -174,7 +174,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * export default function Home() {
 *   return (
 *     <Protected
-*       onAccessDenied={<>Only admins are allowed.</>}
+*       groupFallback={<>Only admins are allowed.</>}
 *       groups={["admin"]}
 *     >
 *       <>Signed in as admin</>
@@ -184,14 +184,14 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * ```
 *
 */
-const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, onAccessDenied = null }) => {
+const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, fallback = null, groupFallback = null }) => {
 	const { isLoading, error, isAuthenticated, user } = require_client.useAuth();
 	if (isLoading) return null;
 	if (error || !isAuthenticated || !user) {
-		if (onAccessDenied) return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, onAccessDenied);
+		if (fallback) return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, 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 : onAccessDenied);
+	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);
 };
 
 //#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  onAccessDenied?: 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 `onAccessDenied` content if 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 onAccessDenied={<>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 *       onAccessDenied={<>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 onAccessDenied={<>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 *       onAccessDenied={<>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  onAccessDenied = 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 (onAccessDenied) {\n      return <>{onAccessDenied}</>;\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        : onAccessDenied}\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACKT,MAAa,aAAa,EACxB,UACA,QACA,aACA,iBAAiB,OACjB,iBAAiB,WACgC;CACjD,MAAM,EAAE,WAAW,OAAO,iBAAiB,SAASA,wBAAS;AAE7D,KAAI,UACF,QAAO;AAGT,KAAI,SAAS,CAAC,mBAAmB,CAAC,MAAM;AACtC,MAAI,eACF,QAAO,0EAAG,eAAkB;AAG9B,SAAO;;AAGT,QACE,0EACG,CAAC,6DAEA,MACA,QACA,eAAe,QAAQ,IAAI,yCAC3B,eACD,GACG,WACA,eACH"}
+{"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"}

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

@@ -1,4 +1,4 @@
-import { i as ExtraAuthParams } from "../../types-DOfZTKa6.mjs";
+import { i as ExtraAuthParams } from "../../types-CsBjAJce.mjs";
 import React, { JSX } from "react";
 
 //#region src/components/client/redirect-to-signin.d.ts
@@ -122,7 +122,11 @@ interface ProtectedComponentProps {
   /**
    * A fallback component that should render if the user is not authenticated.
    */
-  onAccessDenied?: React.ReactNode;
+  fallback?: React.ReactNode;
+  /**
+   * A fallback component that should render if the user is authenticated but does not belong to the required groups.
+   */
+  groupFallback?: React.ReactNode;
 }
 /**
  * A wrapper component that conditionally renders its children based on the user's authentication
@@ -132,7 +136,7 @@ interface ProtectedComponentProps {
  *
  * @param props - Props for customizing the Protected component.
  *
- * @returns The children if authorized, the `onAccessDenied` content if unauthorized,
+ * @returns The children if authorized, the `fallback` or `groupFallback` content if unauthenticated or unauthorized,
  * or `null` while loading.
  *
  * @example App Router
@@ -144,7 +148,7 @@ interface ProtectedComponentProps {
  *
  * export default function Home() {
  *   return (
- *     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+ *     <Protected fallback={<>Sign in to view the message.</>}>
  *       <>You are breathtaking</>
  *     </Protected>
  *   );
@@ -163,7 +167,7 @@ interface ProtectedComponentProps {
  * export default function Home() {
  *   return (
  *     <Protected
- *       onAccessDenied={<>Only admins are allowed.</>}
+ *       groupFallback={<>Only admins are allowed.</>}
  *       groups={["admin"]}
  *     >
  *       <>Signed in as admin</>
@@ -179,7 +183,7 @@ interface ProtectedComponentProps {
  *
  * export default function Home() {
  *   return (
- *     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+ *     <Protected fallback={<>Sign in to view the message.</>}>
  *       <>You are breathtaking</>
  *     </Protected>
  *   );
@@ -196,7 +200,7 @@ interface ProtectedComponentProps {
  * export default function Home() {
  *   return (
  *     <Protected
- *       onAccessDenied={<>Only admins are allowed.</>}
+ *       groupFallback={<>Only admins are allowed.</>}
  *       groups={["admin"]}
  *     >
  *       <>Signed in as admin</>
@@ -211,7 +215,8 @@ declare const Protected: ({
   groups,
   groupsClaim,
   matchAllGroups,
-  onAccessDenied
+  fallback,
+  groupFallback
 }: ProtectedComponentProps) => JSX.Element | null;
 //#endregion
 export { Protected, type ProtectedComponentProps, RedirectToSignIn, type RedirectToSignInProps };

package/dist/components/client/index.mjs

@@ -1,4 +1,4 @@
-import { n as redirectToSignIn, r as useAuth } from "../../client-CnvBgZM-.mjs";
+import { n as redirectToSignIn, r as useAuth } from "../../client-D-3RMRNY.mjs";
 import { isUserInGroup } from "@monocloud/auth-node-core/utils";
 import React, { useEffect } from "react";
 
@@ -108,7 +108,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 *
 * @param props - Props for customizing the Protected component.
 *
-* @returns The children if authorized, the `onAccessDenied` content if unauthorized,
+* @returns The children if authorized, the `fallback` or `groupFallback` content if unauthenticated or unauthorized,
 * or `null` while loading.
 *
 * @example App Router
@@ -120,7 +120,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 *
 * export default function Home() {
 *   return (
-*     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+*     <Protected fallback={<>Sign in to view the message.</>}>
 *       <>You are breathtaking</>
 *     </Protected>
 *   );
@@ -139,7 +139,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * export default function Home() {
 *   return (
 *     <Protected
-*       onAccessDenied={<>Only admins are allowed.</>}
+*       groupFallback={<>Only admins are allowed.</>}
 *       groups={["admin"]}
 *     >
 *       <>Signed in as admin</>
@@ -155,7 +155,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 *
 * export default function Home() {
 *   return (
-*     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+*     <Protected fallback={<>Sign in to view the message.</>}>
 *       <>You are breathtaking</>
 *     </Protected>
 *   );
@@ -172,7 +172,7 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * export default function Home() {
 *   return (
 *     <Protected
-*       onAccessDenied={<>Only admins are allowed.</>}
+*       groupFallback={<>Only admins are allowed.</>}
 *       groups={["admin"]}
 *     >
 *       <>Signed in as admin</>
@@ -182,14 +182,14 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * ```
 *
 */
-const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, onAccessDenied = null }) => {
+const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, fallback = null, groupFallback = null }) => {
 	const { isLoading, error, isAuthenticated, user } = useAuth();
 	if (isLoading) return null;
 	if (error || !isAuthenticated || !user) {
-		if (onAccessDenied) return /* @__PURE__ */ React.createElement(React.Fragment, null, onAccessDenied);
+		if (fallback) return /* @__PURE__ */ React.createElement(React.Fragment, null, 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 : onAccessDenied);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, !groups || isUserInGroup(user, groups, groupsClaim ?? process.env.NEXT_PUBLIC_MONOCLOUD_AUTH_GROUPS_CLAIM, matchAllGroups) ? children : groupFallback);
 };
 
 //#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  onAccessDenied?: 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 `onAccessDenied` content if 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 onAccessDenied={<>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 *       onAccessDenied={<>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 onAccessDenied={<>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 *       onAccessDenied={<>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  onAccessDenied = 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 (onAccessDenied) {\n      return <>{onAccessDenied}</>;\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        : onAccessDenied}\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;ACKT,MAAa,aAAa,EACxB,UACA,QACA,aACA,iBAAiB,OACjB,iBAAiB,WACgC;CACjD,MAAM,EAAE,WAAW,OAAO,iBAAiB,SAAS,SAAS;AAE7D,KAAI,UACF,QAAO;AAGT,KAAI,SAAS,CAAC,mBAAmB,CAAC,MAAM;AACtC,MAAI,eACF,QAAO,0DAAG,eAAkB;AAG9B,SAAO;;AAGT,QACE,0DACG,CAAC,UACF,cACE,MACA,QACA,eAAe,QAAQ,IAAI,yCAC3B,eACD,GACG,WACA,eACH"}
+{"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"}