@monocloud/auth-react 0.1.1-canary-20260605042109

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 MonoCloud
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,189 @@
+<div align="center">
+  <a href="https://www.monocloud.com?utm_source=github&utm_medium=auth_js" target="_blank" rel="noopener noreferrer">
+    <picture>
+      <img src="https://raw.githubusercontent.com/monocloud/auth-js/refs/heads/main/packages/react/banner.svg" alt="MonoCloud Banner">
+    </picture>
+  </a>
+  <div align="right">
+    <a href="https://www.npmjs.com/package/@monocloud/auth-react" target="_blank">
+      <img src="https://img.shields.io/npm/v/@monocloud/auth-react" alt="NPM" />
+    </a>
+    <a href="https://opensource.org/licenses/MIT">
+      <img src="https://img.shields.io/:license-MIT-blue.svg?style=flat" alt="License: MIT" />
+    </a>
+    <a href="https://github.com/monocloud/auth-js/actions/workflows/build.yml">
+      <img src="https://github.com/monocloud/auth-js/actions/workflows/build.yml/badge.svg" alt="Build Status" />
+    </a>
+  </div>
+</div>
+
+## Introduction
+
+**MonoCloud React Authentication SDK – secure authentication for React single-page applications.**
+
+[MonoCloud](https://www.monocloud.com?utm_source=github&utm_medium=auth_js) is a modern, developer-friendly Identity & Access Management platform.
+
+This SDK provides **React-friendly authentication** for single-page applications. It implements **OAuth 2.0 / OpenID Connect** with **PKCE**, and surfaces authentication state, sign-in and sign-out flows, and route protection through a React provider, hooks, and components.
+
+> This package builds on **`@monocloud/auth-web-js`** and adds React-specific provider, hooks, and components.
+
+## 📘 Documentation
+
+- **Documentation:** [https://www.monocloud.com/docs](https://www.monocloud.com/docs?utm_source=github&utm_medium=auth_js)
+- **Quickstart:** [https://www.monocloud.com/docs/quickstarts/react](https://www.monocloud.com/docs/quickstarts/react?utm_source=github&utm_medium=auth_js)
+- **SDK Reference:** [https://www.monocloud.com/docs/sdks/react](https://www.monocloud.com/docs/sdks/react/index?utm_source=github&utm_medium=auth_js)
+- **API Reference:** [https://monocloud.github.io/auth-js](https://monocloud.github.io/auth-js?utm_source=github&utm_medium=auth_js)
+
+## Supported Platforms
+
+- **React** v18+
+- **Modern Browsers** (Chrome, Edge, Firefox, Safari)
+
+## 🚀 Getting Started
+
+### Requirements
+
+- A **MonoCloud Tenant**
+- A **Client** configured as a Single Page Application (SPA)
+- The application's URL registered in **Callback URLs**, **Sign-out URLs** and **Cross Origin URLs**
+
+## 📦 Installation
+
+```bash
+npm install @monocloud/auth-react
+```
+
+### Add the Provider
+
+Wrap your application with `<MonoCloudAuthProvider>`.
+
+```tsx
+import { MonoCloudAuthProvider } from '@monocloud/auth-react';
+
+export default function Root() {
+  return (
+    <MonoCloudAuthProvider
+      tenantDomain="https://<your-tenant-domain>"
+      clientId="<your-client-id>"
+    >
+      <App />
+    </MonoCloudAuthProvider>
+  );
+}
+```
+
+By default the provider automatically processes the OIDC callback when it mounts.
+
+### Access the Authentication State
+
+```tsx
+import { useAuth } from '@monocloud/auth-react';
+
+export default function Home() {
+  const { isLoading, isAuthenticated, user } = useAuth();
+
+  if (isLoading) return <>Loading…</>;
+  if (!isAuthenticated) return <>Not signed in</>;
+
+  return <>Welcome, {user?.email}</>;
+}
+```
+
+`useAuth()` also exposes the actions `signIn`, `signOut`, `signInSilent`, `refreshSession`, `refetchUserInfo`, and `getTokens`. For lower-level operations use the `useMonoCloudClient()` hook to access the underlying `MonoCloudWebJSClient` client.
+
+### Sign-in, Sign-up and Sign-out
+
+```tsx
+import { SignIn, SignUp, SignOut } from '@monocloud/auth-react';
+
+<SignIn>Sign In</SignIn>
+<SignUp>Sign Up</SignUp>
+<SignOut>Sign Out</SignOut>
+```
+
+### Protect Content
+
+```tsx
+import { Protected } from '@monocloud/auth-react';
+
+<Protected fallback={<>Sign in to view this.</>}>
+  <SecretContent />
+</Protected>
+```
+
+> `<Protected>` only affects what is rendered on the client. Always enforce authorization on your APIs as well.
+
+### Handle the Callback on a Dedicated Route
+
+If you use a client-side router and want the callback to land on a dedicated route (with control over navigation and no full-page reload), disable automatic processing and render `<ProcessCallback>` on that route. Navigation is controlled by the standard `postCallback` option on the provider:
+
+```tsx
+import {
+  MonoCloudAuthProvider,
+  ProcessCallback,
+} from '@monocloud/auth-react';
+import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
+
+function Root() {
+  const navigate = useNavigate();
+  return (
+    <MonoCloudAuthProvider
+      tenantDomain="https://<your-tenant-domain>"
+      clientId="<your-client-id>"
+      callbackPath="/callback"
+      autoProcessCallback={false}
+      postCallback={state => navigate(state.returnUrl ?? '/')}
+    >
+      <Routes>
+        <Route
+          path="/callback"
+          element={
+            <ProcessCallback
+              loading={<p>Completing sign in…</p>}
+              error={err => <p>Sign in failed: {err.message}</p>}
+            />
+          }
+        />
+        <Route path="/" element={<Home />} />
+      </Routes>
+    </MonoCloudAuthProvider>
+  );
+}
+
+export default function App() {
+  return (
+    <BrowserRouter>
+      <Root />
+    </BrowserRouter>
+  );
+}
+```
+
+## When should I use `@monocloud/auth-react`?
+
+Use **`@monocloud/auth-react`** if you are building a **React single-page application** and want a secure authentication solution with minimal configuration.
+
+This package is a good fit if you:
+
+- Are building a **React SPA** (Vite, Create React App, and similar)
+- Want **authentication state and sign-in / sign-out actions** accessible anywhere in your component tree
+- Need to **conditionally render or gate UI** based on the user's authentication status and group membership
+- Want **OIDC redirect callbacks handled for you**, with optional client-side-router integration on a dedicated callback route
+- Prefer **framework-native ergonomics** without managing the OAuth / OpenID Connect flow yourself
+
+`@monocloud/auth-react` builds on top of **`@monocloud/auth-web-js`**, reusing the same browser implementation (PKCE, redirects, popups, silent refresh, and cross-tab coordination) while providing React-specific ergonomics.
+
+## 🤝 Contributing & Support
+
+### Issues & Feedback
+
+- Use **GitHub Issues** for bug reports and feature requests.
+- For tenant or account-specific help, contact MonoCloud Support through your dashboard.
+
+### Security
+
+Do **not** report security issues publicly. Please follow the contact instructions at: [https://www.monocloud.com/contact](https://www.monocloud.com/contact?utm_source=github&utm_medium=auth_js)
+
+## 📄 License
+
+Licensed under the **MIT License**. See the included [`LICENSE`](https://github.com/monocloud/auth-js/blob/main/LICENSE) file.

package/dist/_virtual/_rolldown/runtime.cjs

@@ -0,0 +1,23 @@
+//#region \0rolldown/runtime.js
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
+		key = keys[i];
+		if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: ((k) => from[k]).bind(null, key),
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+//#endregion
+exports.__toESM = __toESM;

package/dist/components/process-callback.cjs

@@ -0,0 +1,62 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_use_process_callback = require("../use-process-callback.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+//#region src/components/process-callback.tsx
+/**
+* `<ProcessCallback/>` completes a pending sign-in or sign-out callback on the
+* current URL and synchronizes the authentication state.
+*
+* Render it on the dedicated route that MonoCloud redirects back to (for
+* example, `/callback`) and disable automatic processing on the provider with
+* `autoProcessCallback={false}`. It renders no UI of its own beyond the optional
+* `loading`, `error`, and `children` slots. Navigation after a successful
+* callback is controlled by the provider-level `postCallback` option, not by
+* this component.
+*
+* @example Dedicated callback route
+*
+* ```tsx title="Dedicated callback route"
+* "use client";
+*
+* import { ProcessCallback } from "@monocloud/auth-react";
+*
+* export default function Callback() {
+*   return (
+*     <ProcessCallback
+*       loading={<p>Completing sign in…</p>}
+*       error={(err) => <p>Sign in failed: {err.message}</p>}
+*     />
+*   );
+* }
+* ```
+*
+* @param props - Props for customizing the rendered states.
+* @returns The `loading`, `error`, or `children` content depending on the
+* processing state.
+*
+* @category Components
+*/
+const ProcessCallback = ({ loading = null, error, children = null }) => {
+	const processCallback = require_use_process_callback.useProcessCallback();
+	const [state, setState] = (0, react.useState)({ status: "processing" });
+	const ran = (0, react.useRef)(false);
+	(0, react.useEffect)(() => {
+		/* v8 ignore start -- StrictMode double-invocation guard */
+		if (ran.current) return;
+		/* v8 ignore stop */
+		ran.current = true;
+		processCallback().then(() => setState({ status: "done" })).catch((e) => setState({
+			status: "error",
+			error: e
+		}));
+	}, [processCallback]);
+	if (state.status === "processing") return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, loading);
+	if (state.status === "error") return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, typeof error === "function" ? error(state.error) : error ?? null);
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, children);
+};
+//#endregion
+exports.ProcessCallback = ProcessCallback;
+
+//# sourceMappingURL=process-callback.cjs.map

package/dist/components/process-callback.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-callback.cjs","names":["useProcessCallback"],"sources":["../../src/components/process-callback.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useProcessCallback } from '../use-process-callback';\nimport type { ProcessCallbackProps } from '../types';\n\ntype State =\n  | { status: 'processing' }\n  | { status: 'done' }\n  | { status: 'error'; error: Error };\n\n/**\n * `<ProcessCallback/>` completes a pending sign-in or sign-out callback on the\n * current URL and synchronizes the authentication state.\n *\n * Render it on the dedicated route that MonoCloud redirects back to (for\n * example, `/callback`) and disable automatic processing on the provider with\n * `autoProcessCallback={false}`. It renders no UI of its own beyond the optional\n * `loading`, `error`, and `children` slots. Navigation after a successful\n * callback is controlled by the provider-level `postCallback` option, not by\n * this component.\n *\n * @example Dedicated callback route\n *\n * ```tsx title=\"Dedicated callback route\"\n * \"use client\";\n *\n * import { ProcessCallback } from \"@monocloud/auth-react\";\n *\n * export default function Callback() {\n *   return (\n *     <ProcessCallback\n *       loading={<p>Completing sign in…</p>}\n *       error={(err) => <p>Sign in failed: {err.message}</p>}\n *     />\n *   );\n * }\n * ```\n *\n * @param props - Props for customizing the rendered states.\n * @returns The `loading`, `error`, or `children` content depending on the\n * processing state.\n *\n * @category Components\n */\nexport const ProcessCallback = ({\n  loading = null,\n  error,\n  children = null,\n}: ProcessCallbackProps): React.ReactNode => {\n  const processCallback = useProcessCallback();\n  const [state, setState] = useState<State>({ status: 'processing' });\n  const ran = useRef(false);\n\n  useEffect(() => {\n    /* v8 ignore start -- StrictMode double-invocation guard */\n    if (ran.current) {\n      return;\n    }\n    /* v8 ignore stop */\n    ran.current = true;\n\n    processCallback()\n      .then(() => setState({ status: 'done' }))\n      .catch((e: Error) => setState({ status: 'error', error: e }));\n  }, [processCallback]);\n\n  if (state.status === 'processing') {\n    return <>{loading}</>;\n  }\n\n  if (state.status === 'error') {\n    return (\n      <>{typeof error === 'function' ? error(state.error) : (error ?? null)}</>\n    );\n  }\n\n  return <>{children}</>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,mBAAmB,EAC9B,UAAU,MACV,OACA,WAAW,WACgC;CAC3C,MAAM,kBAAkBA,6BAAAA,mBAAmB;CAC3C,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAA4B,EAAE,QAAQ,aAAa,CAAC;CAClE,MAAM,OAAA,GAAA,MAAA,QAAa,KAAK;CAExB,CAAA,GAAA,MAAA,iBAAgB;;EAEd,IAAI,IAAI,SACN;;EAGF,IAAI,UAAU;EAEd,gBAAgB,EACb,WAAW,SAAS,EAAE,QAAQ,OAAO,CAAC,CAAC,EACvC,OAAO,MAAa,SAAS;GAAE,QAAQ;GAAS,OAAO;EAAE,CAAC,CAAC;CAChE,GAAG,CAAC,eAAe,CAAC;CAEpB,IAAI,MAAM,WAAW,cACnB,OAAO,sBAAA,QAAA,cAAA,MAAA,QAAA,UAAA,MAAG,OAAU;CAGtB,IAAI,MAAM,WAAW,SACnB,OACE,sBAAA,QAAA,cAAA,MAAA,QAAA,UAAA,MAAG,OAAO,UAAU,aAAa,MAAM,MAAM,KAAK,IAAK,SAAS,IAAQ;CAI5E,OAAO,sBAAA,QAAA,cAAA,MAAA,QAAA,UAAA,MAAG,QAAW;AACvB"}

package/dist/components/process-callback.d.mts

@@ -0,0 +1,46 @@
+import { ProcessCallbackProps } from "../types.mjs";
+import React from "react";
+
+//#region src/components/process-callback.d.ts
+/**
+ * `<ProcessCallback/>` completes a pending sign-in or sign-out callback on the
+ * current URL and synchronizes the authentication state.
+ *
+ * Render it on the dedicated route that MonoCloud redirects back to (for
+ * example, `/callback`) and disable automatic processing on the provider with
+ * `autoProcessCallback={false}`. It renders no UI of its own beyond the optional
+ * `loading`, `error`, and `children` slots. Navigation after a successful
+ * callback is controlled by the provider-level `postCallback` option, not by
+ * this component.
+ *
+ * @example Dedicated callback route
+ *
+ * ```tsx title="Dedicated callback route"
+ * "use client";
+ *
+ * import { ProcessCallback } from "@monocloud/auth-react";
+ *
+ * export default function Callback() {
+ *   return (
+ *     <ProcessCallback
+ *       loading={<p>Completing sign in…</p>}
+ *       error={(err) => <p>Sign in failed: {err.message}</p>}
+ *     />
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Props for customizing the rendered states.
+ * @returns The `loading`, `error`, or `children` content depending on the
+ * processing state.
+ *
+ * @category Components
+ */
+declare const ProcessCallback: ({
+  loading,
+  error,
+  children
+}: ProcessCallbackProps) => React.ReactNode;
+//#endregion
+export { ProcessCallback };
+//# sourceMappingURL=process-callback.d.mts.map

package/dist/components/process-callback.mjs

@@ -0,0 +1,60 @@
+"use client";
+import { useProcessCallback } from "../use-process-callback.mjs";
+import React, { useEffect, useRef, useState } from "react";
+//#region src/components/process-callback.tsx
+/**
+* `<ProcessCallback/>` completes a pending sign-in or sign-out callback on the
+* current URL and synchronizes the authentication state.
+*
+* Render it on the dedicated route that MonoCloud redirects back to (for
+* example, `/callback`) and disable automatic processing on the provider with
+* `autoProcessCallback={false}`. It renders no UI of its own beyond the optional
+* `loading`, `error`, and `children` slots. Navigation after a successful
+* callback is controlled by the provider-level `postCallback` option, not by
+* this component.
+*
+* @example Dedicated callback route
+*
+* ```tsx title="Dedicated callback route"
+* "use client";
+*
+* import { ProcessCallback } from "@monocloud/auth-react";
+*
+* export default function Callback() {
+*   return (
+*     <ProcessCallback
+*       loading={<p>Completing sign in…</p>}
+*       error={(err) => <p>Sign in failed: {err.message}</p>}
+*     />
+*   );
+* }
+* ```
+*
+* @param props - Props for customizing the rendered states.
+* @returns The `loading`, `error`, or `children` content depending on the
+* processing state.
+*
+* @category Components
+*/
+const ProcessCallback = ({ loading = null, error, children = null }) => {
+	const processCallback = useProcessCallback();
+	const [state, setState] = useState({ status: "processing" });
+	const ran = useRef(false);
+	useEffect(() => {
+		/* v8 ignore start -- StrictMode double-invocation guard */
+		if (ran.current) return;
+		/* v8 ignore stop */
+		ran.current = true;
+		processCallback().then(() => setState({ status: "done" })).catch((e) => setState({
+			status: "error",
+			error: e
+		}));
+	}, [processCallback]);
+	if (state.status === "processing") return /* @__PURE__ */ React.createElement(React.Fragment, null, loading);
+	if (state.status === "error") return /* @__PURE__ */ React.createElement(React.Fragment, null, typeof error === "function" ? error(state.error) : error ?? null);
+	return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+};
+//#endregion
+export { ProcessCallback };
+
+//# sourceMappingURL=process-callback.mjs.map

package/dist/components/process-callback.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"process-callback.mjs","names":[],"sources":["../../src/components/process-callback.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport { useProcessCallback } from '../use-process-callback';\nimport type { ProcessCallbackProps } from '../types';\n\ntype State =\n  | { status: 'processing' }\n  | { status: 'done' }\n  | { status: 'error'; error: Error };\n\n/**\n * `<ProcessCallback/>` completes a pending sign-in or sign-out callback on the\n * current URL and synchronizes the authentication state.\n *\n * Render it on the dedicated route that MonoCloud redirects back to (for\n * example, `/callback`) and disable automatic processing on the provider with\n * `autoProcessCallback={false}`. It renders no UI of its own beyond the optional\n * `loading`, `error`, and `children` slots. Navigation after a successful\n * callback is controlled by the provider-level `postCallback` option, not by\n * this component.\n *\n * @example Dedicated callback route\n *\n * ```tsx title=\"Dedicated callback route\"\n * \"use client\";\n *\n * import { ProcessCallback } from \"@monocloud/auth-react\";\n *\n * export default function Callback() {\n *   return (\n *     <ProcessCallback\n *       loading={<p>Completing sign in…</p>}\n *       error={(err) => <p>Sign in failed: {err.message}</p>}\n *     />\n *   );\n * }\n * ```\n *\n * @param props - Props for customizing the rendered states.\n * @returns The `loading`, `error`, or `children` content depending on the\n * processing state.\n *\n * @category Components\n */\nexport const ProcessCallback = ({\n  loading = null,\n  error,\n  children = null,\n}: ProcessCallbackProps): React.ReactNode => {\n  const processCallback = useProcessCallback();\n  const [state, setState] = useState<State>({ status: 'processing' });\n  const ran = useRef(false);\n\n  useEffect(() => {\n    /* v8 ignore start -- StrictMode double-invocation guard */\n    if (ran.current) {\n      return;\n    }\n    /* v8 ignore stop */\n    ran.current = true;\n\n    processCallback()\n      .then(() => setState({ status: 'done' }))\n      .catch((e: Error) => setState({ status: 'error', error: e }));\n  }, [processCallback]);\n\n  if (state.status === 'processing') {\n    return <>{loading}</>;\n  }\n\n  if (state.status === 'error') {\n    return (\n      <>{typeof error === 'function' ? error(state.error) : (error ?? null)}</>\n    );\n  }\n\n  return <>{children}</>;\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6CA,MAAa,mBAAmB,EAC9B,UAAU,MACV,OACA,WAAW,WACgC;CAC3C,MAAM,kBAAkB,mBAAmB;CAC3C,MAAM,CAAC,OAAO,YAAY,SAAgB,EAAE,QAAQ,aAAa,CAAC;CAClE,MAAM,MAAM,OAAO,KAAK;CAExB,gBAAgB;;EAEd,IAAI,IAAI,SACN;;EAGF,IAAI,UAAU;EAEd,gBAAgB,EACb,WAAW,SAAS,EAAE,QAAQ,OAAO,CAAC,CAAC,EACvC,OAAO,MAAa,SAAS;GAAE,QAAQ;GAAS,OAAO;EAAE,CAAC,CAAC;CAChE,GAAG,CAAC,eAAe,CAAC;CAEpB,IAAI,MAAM,WAAW,cACnB,OAAO,sBAAA,cAAA,MAAA,UAAA,MAAG,OAAU;CAGtB,IAAI,MAAM,WAAW,SACnB,OACE,sBAAA,cAAA,MAAA,UAAA,MAAG,OAAO,UAAU,aAAa,MAAM,MAAM,KAAK,IAAK,SAAS,IAAQ;CAI5E,OAAO,sBAAA,cAAA,MAAA,UAAA,MAAG,QAAW;AACvB"}

package/dist/components/protected.cjs

@@ -0,0 +1,85 @@
+"use client";
+const require_runtime = require("../_virtual/_rolldown/runtime.cjs");
+const require_use_auth = require("../use-auth.cjs");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let _monocloud_auth_web_js_utils = require("@monocloud/auth-web-js/utils");
+//#region src/components/protected.tsx
+/**
+* `<Protected>` conditionally renders its children based on the user’s authentication state and (optionally) group membership.
+*
+* > `<Protected>` runs on the client and only affects what is rendered. It does **not** prevent data from being sent to the browser. Always enforce authorization on your APIs as well.
+*
+* @example Basic Usage
+*
+* ```tsx:src/Home.tsx tab="Basic Usage" tab-group="Protected"
+* "use client";
+*
+* import { Protected } from "@monocloud/auth-react";
+*
+* export default function Home() {
+*   return (
+*     <Protected fallback={<>Sign in to view the message.</>}>
+*       <>This is the protected content.</>
+*     </Protected>
+*   );
+* }
+* ```
+*
+* @example With Groups
+*
+* ```tsx:src/Home.tsx tab="With Groups" tab-group="Protected"
+* "use client";
+*
+* import { Protected } from "@monocloud/auth-react";
+*
+* export default function Home() {
+*   return (
+*     <Protected
+*       groups={["admin"]}
+*       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access admin content.</>}
+*     >
+*       <>Signed in as admin</>
+*     </Protected>
+*   );
+* }
+* ```
+*
+* @example Requiring all groups
+*
+* ```tsx:src/Home.tsx tab="Requiring all groups" tab-group="Protected"
+* "use client";
+*
+* import { Protected } from "@monocloud/auth-react";
+*
+* export default function Home() {
+*   return (
+*     <Protected
+*       groups={["admin", "billing"]}
+*       matchAllGroups
+*       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access billing content.</>}
+*     >
+*       <>Sensitive settings</>
+*     </Protected>
+*   );
+* }
+* ```
+*
+* @param props - Props for customizing the Protected component.
+* @returns The children if authorized, the `fallback` or `onGroupAccessDenied` content if unauthenticated or unauthorized, or `null` while loading.
+*
+* @category Components
+*/
+const Protected = ({ children, groups, groupsClaim, matchAllGroups = false, fallback = null, onGroupAccessDenied = () => /* @__PURE__ */ react.default.createElement(react.default.Fragment, null) }) => {
+	const { isLoading, error, isAuthenticated, user } = require_use_auth.useAuth();
+	if (isLoading) return null;
+	if (error || !isAuthenticated || !user) {
+		if (fallback) return fallback;
+		return null;
+	}
+	return /* @__PURE__ */ react.default.createElement(react.default.Fragment, null, !groups || (0, _monocloud_auth_web_js_utils.isUserInGroup)(user, groups, groupsClaim, matchAllGroups) ? children : onGroupAccessDenied(user));
+};
+//#endregion
+exports.Protected = Protected;
+
+//# sourceMappingURL=protected.cjs.map

package/dist/components/protected.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"protected.cjs","names":["useAuth"],"sources":["../../src/components/protected.tsx"],"sourcesContent":["'use client';\n\nimport { isUserInGroup } from '@monocloud/auth-web-js/utils';\nimport React from 'react';\nimport type { MonoCloudUser } from '@monocloud/auth-web-js';\nimport { useAuth } from '../use-auth';\n\n/**\n * Props for the `<Protected />` component.\n *\n * @category Types\n */\nexport interface ProtectedComponentProps {\n  /**\n   * Content to render when access is allowed.\n   */\n  children: React.ReactNode;\n\n  /**\n   * Groups required to view the protected content. By default, the user must belong to **any** of the specified groups.\n   */\n  groups?: string[];\n\n  /**\n   * Name of the claim that contains groups in the user profile.\n   * @defaultValue 'groups'\n   */\n  groupsClaim?: string;\n\n  /**\n   * If `true`, the user must belong to **all** specified `groups` (instead of any).\n   * @defaultValue false\n   */\n  matchAllGroups?: boolean;\n\n  /**\n   * Content to render when the user is not authenticated.\n   */\n  fallback?: React.ReactNode;\n\n  /**\n   * Rendered when the user is authenticated but does not meet the `groups` requirement. If omitted, nothing is rendered (or `fallback` is used only for unauthenticated users).\n   */\n  onGroupAccessDenied?: (user: MonoCloudUser) => React.ReactNode;\n}\n\n/**\n * `<Protected>` conditionally renders its children based on the user’s authentication state and (optionally) group membership.\n *\n * > `<Protected>` runs on the client and only affects what is rendered. It does **not** prevent data from being sent to the browser. Always enforce authorization on your APIs as well.\n *\n * @example Basic Usage\n *\n * ```tsx:src/Home.tsx tab=\"Basic Usage\" tab-group=\"Protected\"\n * \"use client\";\n *\n * import { Protected } from \"@monocloud/auth-react\";\n *\n * export default function Home() {\n *   return (\n *     <Protected fallback={<>Sign in to view the message.</>}>\n *       <>This is the protected content.</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n * @example With Groups\n *\n * ```tsx:src/Home.tsx tab=\"With Groups\" tab-group=\"Protected\"\n * \"use client\";\n *\n * import { Protected } from \"@monocloud/auth-react\";\n *\n * export default function Home() {\n *   return (\n *     <Protected\n *       groups={[\"admin\"]}\n *       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access admin content.</>}\n *     >\n *       <>Signed in as admin</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n * @example Requiring all groups\n *\n * ```tsx:src/Home.tsx tab=\"Requiring all groups\" tab-group=\"Protected\"\n * \"use client\";\n *\n * import { Protected } from \"@monocloud/auth-react\";\n *\n * export default function Home() {\n *   return (\n *     <Protected\n *       groups={[\"admin\", \"billing\"]}\n *       matchAllGroups\n *       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access billing content.</>}\n *     >\n *       <>Sensitive settings</>\n *     </Protected>\n *   );\n * }\n * ```\n *\n * @param props - Props for customizing the Protected component.\n * @returns The children if authorized, the `fallback` or `onGroupAccessDenied` content if unauthenticated or unauthorized, or `null` while loading.\n *\n * @category Components\n */\nexport const Protected = ({\n  children,\n  groups,\n  groupsClaim,\n  matchAllGroups = false,\n  fallback = null,\n  onGroupAccessDenied = (): React.ReactNode => <></>,\n}: ProtectedComponentProps): React.ReactNode | null => {\n  const { isLoading, error, isAuthenticated, user } = useAuth();\n\n  if (isLoading) {\n    return null;\n  }\n\n  if (error || !isAuthenticated || !user) {\n    if (fallback) {\n      return fallback;\n    }\n\n    return null;\n  }\n\n  return (\n    <>\n      {!groups || isUserInGroup(user, groups, groupsClaim, matchAllGroups)\n        ? children\n        : onGroupAccessDenied(user)}\n    </>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+GA,MAAa,aAAa,EACxB,UACA,QACA,aACA,iBAAiB,OACjB,WAAW,MACX,4BAA6C,sBAAA,QAAA,cAAA,MAAA,QAAA,UAAA,IAAI,QACI;CACrD,MAAM,EAAE,WAAW,OAAO,iBAAiB,SAASA,iBAAAA,QAAQ;CAE5D,IAAI,WACF,OAAO;CAGT,IAAI,SAAS,CAAC,mBAAmB,CAAC,MAAM;EACtC,IAAI,UACF,OAAO;EAGT,OAAO;CACT;CAEA,OACE,sBAAA,QAAA,cAAA,MAAA,QAAA,UAAA,MACG,CAAC,WAAA,GAAA,6BAAA,eAAwB,MAAM,QAAQ,aAAa,cAAc,IAC/D,WACA,oBAAoB,IAAI,CAC5B;AAEN"}

package/dist/components/protected.d.mts

@@ -0,0 +1,113 @@
+import { MonoCloudUser } from "@monocloud/auth-web-js";
+import React from "react";
+
+//#region src/components/protected.d.ts
+/**
+ * Props for the `<Protected />` component.
+ *
+ * @category Types
+ */
+interface ProtectedComponentProps {
+  /**
+   * Content to render when access is allowed.
+   */
+  children: React.ReactNode;
+  /**
+   * Groups required to view the protected content. By default, the user must belong to **any** of the specified groups.
+   */
+  groups?: string[];
+  /**
+   * Name of the claim that contains groups in the user profile.
+   * @defaultValue 'groups'
+   */
+  groupsClaim?: string;
+  /**
+   * If `true`, the user must belong to **all** specified `groups` (instead of any).
+   * @defaultValue false
+   */
+  matchAllGroups?: boolean;
+  /**
+   * Content to render when the user is not authenticated.
+   */
+  fallback?: React.ReactNode;
+  /**
+   * Rendered when the user is authenticated but does not meet the `groups` requirement. If omitted, nothing is rendered (or `fallback` is used only for unauthenticated users).
+   */
+  onGroupAccessDenied?: (user: MonoCloudUser) => React.ReactNode;
+}
+/**
+ * `<Protected>` conditionally renders its children based on the user’s authentication state and (optionally) group membership.
+ *
+ * > `<Protected>` runs on the client and only affects what is rendered. It does **not** prevent data from being sent to the browser. Always enforce authorization on your APIs as well.
+ *
+ * @example Basic Usage
+ *
+ * ```tsx:src/Home.tsx tab="Basic Usage" tab-group="Protected"
+ * "use client";
+ *
+ * import { Protected } from "@monocloud/auth-react";
+ *
+ * export default function Home() {
+ *   return (
+ *     <Protected fallback={<>Sign in to view the message.</>}>
+ *       <>This is the protected content.</>
+ *     </Protected>
+ *   );
+ * }
+ * ```
+ *
+ * @example With Groups
+ *
+ * ```tsx:src/Home.tsx tab="With Groups" tab-group="Protected"
+ * "use client";
+ *
+ * import { Protected } from "@monocloud/auth-react";
+ *
+ * export default function Home() {
+ *   return (
+ *     <Protected
+ *       groups={["admin"]}
+ *       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access admin content.</>}
+ *     >
+ *       <>Signed in as admin</>
+ *     </Protected>
+ *   );
+ * }
+ * ```
+ *
+ * @example Requiring all groups
+ *
+ * ```tsx:src/Home.tsx tab="Requiring all groups" tab-group="Protected"
+ * "use client";
+ *
+ * import { Protected } from "@monocloud/auth-react";
+ *
+ * export default function Home() {
+ *   return (
+ *     <Protected
+ *       groups={["admin", "billing"]}
+ *       matchAllGroups
+ *       onGroupAccessDenied={(user) => <>User {user.email} is not allowed to access billing content.</>}
+ *     >
+ *       <>Sensitive settings</>
+ *     </Protected>
+ *   );
+ * }
+ * ```
+ *
+ * @param props - Props for customizing the Protected component.
+ * @returns The children if authorized, the `fallback` or `onGroupAccessDenied` content if unauthenticated or unauthorized, or `null` while loading.
+ *
+ * @category Components
+ */
+declare const Protected: ({
+  children,
+  groups,
+  groupsClaim,
+  matchAllGroups,
+  fallback,
+  onGroupAccessDenied
+}: ProtectedComponentProps) => React.ReactNode | null;
+//#endregion
+export { Protected, ProtectedComponentProps };
+//# sourceMappingURL=protected.d.mts.map