@monocloud/auth-nextjs 0.1.1 → 0.1.2

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"}