@monocloud/auth-nextjs 0.1.1 → 0.1.3

package/dist/client-CnvBgZM-.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"client-CnvBgZM-.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 or is not a member of the specified groups.\n   */\n  onAccessDenied?: (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\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?.onAccessDenied) {\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?.onAccessDenied) {\n      return options.onAccessDenied();\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 { onAccessDenied = (): JSX.Element => <div>Access Denied</div> } =\n          options;\n        return onAccessDenied(user);\n      }\n\n      return <Component user={user} {...props} />;\n    }\n\n    return null;\n  };\n};\n"],"mappings":"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"}

package/dist/components/client/index.cjs

@@ -1,5 +1,5 @@
 const require_chunk = require('../../chunk-CbDLau6x.cjs');
-const require_client = require('../../client-BjnSJS59.cjs');
+const require_client = require('../../client-Be6A2vEn.cjs');
 let _monocloud_auth_node_core_utils = require("@monocloud/auth-node-core/utils");
 let react = require("react");
 react = require_chunk.__toESM(react);
@@ -8,7 +8,87 @@ react = require_chunk.__toESM(react);
 /**
 * A client side component that will redirect users to the sign in page.
 *
-* @type RedirectToSignInProps
+* **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 props - The props for customizing RedirectToSignIn
+*
+* @returns
+*
+* @example App Router
+*
+* ```tsx
+* "use client";
+*
+* 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 <>You are signed in</>;
+* }
+* ```
+*
+* @example App Router with options
+*
+* You can customize the authorization request by passing in props. See {@link RedirectToSignInProps}.
+*
+* ```tsx
+* "use client";
+*
+* 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" />;
+*   }
+*
+*   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 <>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" />;
+*   }
+*
+*   return <>You are signed in</>;
+* }
+* ```
 */
 const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 	(0, react.useEffect)(() => {
@@ -26,10 +106,83 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * A wrapper component that conditionally renders its children based on the user's authentication
 * status and group membership.
 *
-* @param props - The properties for the Protected component.
+* **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.**
+*
+* @param props - Props for customizing the Protected component.
 *
 * @returns The children if authorized, the `onAccessDenied` content if unauthorized,
 * or `null` while loading.
+*
+* @example App Router
+*
+* ```tsx
+* "use client";
+*
+* import { Protected } from "@monocloud/auth-nextjs/components/client";
+*
+* export default function Home() {
+*   return (
+*     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+*       <>You are breathtaking</>
+*     </Protected>
+*   );
+* }
+* ```
+*
+* @example App Router with group options
+*
+* See {@link ProtectedComponentProps}.
+*
+* ```tsx
+* "use client";
+*
+* import { Protected } from "@monocloud/auth-nextjs/components/client";
+*
+* export default function Home() {
+*   return (
+*     <Protected
+*       onAccessDenied={<>Only admins are allowed.</>}
+*       groups={["admin"]}
+*     >
+*       <>Signed in as admin</>
+*     </Protected>
+*   );
+* }
+* ```
+*
+* @example Pages Router
+*
+* ```tsx
+* import { Protected } from "@monocloud/auth-nextjs/components/client";
+*
+* export default function Home() {
+*   return (
+*     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+*       <>You are breathtaking</>
+*     </Protected>
+*   );
+* }
+* ```
+*
+* @example Pages Router with group options
+*
+* See {@link ProtectedComponentProps}.
+*
+* ```tsx
+* import { Protected } from "@monocloud/auth-nextjs/components/client";
+*
+* export default function Home() {
+*   return (
+*     <Protected
+*       onAccessDenied={<>Only admins are allowed.</>}
+*       groups={["admin"]}
+*     >
+*       <>Signed in as admin</>
+*     </Protected>
+*   );
+* }
+* ```
+*
 */
 const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, onAccessDenied = null }) => {
 	const { isLoading, error, isAuthenticated, user } = require_client.useAuth();

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 * @type RedirectToSignInProps\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 * @param props - The properties for the Protected component.\n *\n * @returns The children if authorized, the `onAccessDenied` content if unauthorized,\n * or `null` while loading.\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":";;;;;;;;;;;;AAqBA,MAAa,oBAAoB,EAC/B,WACA,GAAG,iBAC8B;AACjC,4BAAgB;AACd,kCAAiB;GAAE;GAAW,GAAG;GAAY,CAAC;IAC7C,CAAC,YAAY,UAAU,CAAC;AAC3B,QAAO;;;;;;;;;;;;;;ACYT,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  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"}

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

@@ -1,4 +1,4 @@
-import { i as ExtraAuthParams } from "../../types-BleaXQUP.mjs";
+import { i as ExtraAuthParams } from "../../types-DOfZTKa6.mjs";
 import React, { JSX } from "react";
 
 //#region src/components/client/redirect-to-signin.d.ts
@@ -14,7 +14,87 @@ interface RedirectToSignInProps extends ExtraAuthParams {
 /**
  * A client side component that will redirect users to the sign in page.
  *
- * @type RedirectToSignInProps
+ * **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 props - The props for customizing RedirectToSignIn
+ *
+ * @returns
+ *
+ * @example App Router
+ *
+ * ```tsx
+ * "use client";
+ *
+ * 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 <>You are signed in</>;
+ * }
+ * ```
+ *
+ * @example App Router with options
+ *
+ * You can customize the authorization request by passing in props. See {@link RedirectToSignInProps}.
+ *
+ * ```tsx
+ * "use client";
+ *
+ * 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" />;
+ *   }
+ *
+ *   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 <>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" />;
+ *   }
+ *
+ *   return <>You are signed in</>;
+ * }
+ * ```
  */
 declare const RedirectToSignIn: ({
   returnUrl,
@@ -48,10 +128,83 @@ interface ProtectedComponentProps {
  * A wrapper component that conditionally renders its children based on the user's authentication
  * status and group membership.
  *
- * @param props - The properties for the Protected component.
+ * **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.**
+ *
+ * @param props - Props for customizing the Protected component.
  *
  * @returns The children if authorized, the `onAccessDenied` content if unauthorized,
  * or `null` while loading.
+ *
+ * @example App Router
+ *
+ * ```tsx
+ * "use client";
+ *
+ * import { Protected } from "@monocloud/auth-nextjs/components/client";
+ *
+ * export default function Home() {
+ *   return (
+ *     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+ *       <>You are breathtaking</>
+ *     </Protected>
+ *   );
+ * }
+ * ```
+ *
+ * @example App Router with group options
+ *
+ * See {@link ProtectedComponentProps}.
+ *
+ * ```tsx
+ * "use client";
+ *
+ * import { Protected } from "@monocloud/auth-nextjs/components/client";
+ *
+ * export default function Home() {
+ *   return (
+ *     <Protected
+ *       onAccessDenied={<>Only admins are allowed.</>}
+ *       groups={["admin"]}
+ *     >
+ *       <>Signed in as admin</>
+ *     </Protected>
+ *   );
+ * }
+ * ```
+ *
+ * @example Pages Router
+ *
+ * ```tsx
+ * import { Protected } from "@monocloud/auth-nextjs/components/client";
+ *
+ * export default function Home() {
+ *   return (
+ *     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+ *       <>You are breathtaking</>
+ *     </Protected>
+ *   );
+ * }
+ * ```
+ *
+ * @example Pages Router with group options
+ *
+ * See {@link ProtectedComponentProps}.
+ *
+ * ```tsx
+ * import { Protected } from "@monocloud/auth-nextjs/components/client";
+ *
+ * export default function Home() {
+ *   return (
+ *     <Protected
+ *       onAccessDenied={<>Only admins are allowed.</>}
+ *       groups={["admin"]}
+ *     >
+ *       <>Signed in as admin</>
+ *     </Protected>
+ *   );
+ * }
+ * ```
+ *
  */
 declare const Protected: ({
   children,

package/dist/components/client/index.mjs

@@ -1,4 +1,4 @@
-import { n as redirectToSignIn, r as useAuth } from "../../client-0gaUvMR7.mjs";
+import { n as redirectToSignIn, r as useAuth } from "../../client-CnvBgZM-.mjs";
 import { isUserInGroup } from "@monocloud/auth-node-core/utils";
 import React, { useEffect } from "react";
 
@@ -6,7 +6,87 @@ import React, { useEffect } from "react";
 /**
 * A client side component that will redirect users to the sign in page.
 *
-* @type RedirectToSignInProps
+* **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 props - The props for customizing RedirectToSignIn
+*
+* @returns
+*
+* @example App Router
+*
+* ```tsx
+* "use client";
+*
+* 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 <>You are signed in</>;
+* }
+* ```
+*
+* @example App Router with options
+*
+* You can customize the authorization request by passing in props. See {@link RedirectToSignInProps}.
+*
+* ```tsx
+* "use client";
+*
+* 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" />;
+*   }
+*
+*   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 <>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" />;
+*   }
+*
+*   return <>You are signed in</>;
+* }
+* ```
 */
 const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 	useEffect(() => {
@@ -24,10 +104,83 @@ const RedirectToSignIn = ({ returnUrl, ...authParams }) => {
 * A wrapper component that conditionally renders its children based on the user's authentication
 * status and group membership.
 *
-* @param props - The properties for the Protected component.
+* **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.**
+*
+* @param props - Props for customizing the Protected component.
 *
 * @returns The children if authorized, the `onAccessDenied` content if unauthorized,
 * or `null` while loading.
+*
+* @example App Router
+*
+* ```tsx
+* "use client";
+*
+* import { Protected } from "@monocloud/auth-nextjs/components/client";
+*
+* export default function Home() {
+*   return (
+*     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+*       <>You are breathtaking</>
+*     </Protected>
+*   );
+* }
+* ```
+*
+* @example App Router with group options
+*
+* See {@link ProtectedComponentProps}.
+*
+* ```tsx
+* "use client";
+*
+* import { Protected } from "@monocloud/auth-nextjs/components/client";
+*
+* export default function Home() {
+*   return (
+*     <Protected
+*       onAccessDenied={<>Only admins are allowed.</>}
+*       groups={["admin"]}
+*     >
+*       <>Signed in as admin</>
+*     </Protected>
+*   );
+* }
+* ```
+*
+* @example Pages Router
+*
+* ```tsx
+* import { Protected } from "@monocloud/auth-nextjs/components/client";
+*
+* export default function Home() {
+*   return (
+*     <Protected onAccessDenied={<>Sign in to view the message.</>}>
+*       <>You are breathtaking</>
+*     </Protected>
+*   );
+* }
+* ```
+*
+* @example Pages Router with group options
+*
+* See {@link ProtectedComponentProps}.
+*
+* ```tsx
+* import { Protected } from "@monocloud/auth-nextjs/components/client";
+*
+* export default function Home() {
+*   return (
+*     <Protected
+*       onAccessDenied={<>Only admins are allowed.</>}
+*       groups={["admin"]}
+*     >
+*       <>Signed in as admin</>
+*     </Protected>
+*   );
+* }
+* ```
+*
 */
 const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, onAccessDenied = null }) => {
 	const { isLoading, error, isAuthenticated, user } = useAuth();

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 * @type RedirectToSignInProps\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 * @param props - The properties for the Protected component.\n *\n * @returns The children if authorized, the `onAccessDenied` content if unauthorized,\n * or `null` while loading.\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":";;;;;;;;;;AAqBA,MAAa,oBAAoB,EAC/B,WACA,GAAG,iBAC8B;AACjC,iBAAgB;AACd,mBAAiB;GAAE;GAAW,GAAG;GAAY,CAAC;IAC7C,CAAC,YAAY,UAAU,CAAC;AAC3B,QAAO;;;;;;;;;;;;;;ACYT,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  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"}