@explita/cloud-auth-client 0.0.1

package/README.md

@@ -0,0 +1,238 @@
+### Part of the Explita Cloud Auth Platform
+
+A lightweight authentication library for React applications. Provides utilities to handle common authentication tasks like managing authentication tokens, verifying sessions, handling cookies, and supporting both OTP and token-based authentication.
+
+## ✨ Features
+
+- 📱 OTP-based login support
+- 🔐 JWT token session handling
+- ⚛️ React hooks for seamless UX
+- 💼 Works with Next.js API and server functions
+- 💅 Minimal styles with Tailwind support
+
+---
+
+## 🚀 Installation
+
+```bash
+npm install @explita/cloud-auth-client
+```
+
+or
+
+```bash
+yarn add @explita/cloud-auth-client
+```
+
+or
+
+```bash
+pnpm add @explita/cloud-auth-client
+```
+
+---
+
+### Add the CSS
+
+```bash
+import '@explita/cloud-auth-client/styles.css';
+```
+
+### 📜 Session Management
+
+The cloud-auth-client library handles session management by automatically storing and retrieving authentication tokens using HTTP-only cookies for better security.
+
+Authentication tokens are stored in cookies, with the HttpOnly flag to prevent JavaScript access.
+
+The useAuth hook allows easy access to session data in any component.
+
+---
+
+### 🔐 Authentication Methods
+
+Use JWT tokens for stateless authentication. The library provides helpers to manage tokens and sessions using cookies.
+
+##### OTP-Based Authentication
+
+The OTP is part of the cloud-auth-client library by default, all you have to do is install the cloud-otp-client library and users can enable OTP in their account settings.
+
+##### Add the CSS
+
+```bash
+import '@explita/cloud-otp-client/styles.css';
+```
+
+### Usage
+
+```tsx
+"use client";
+
+import { AuthProvider } from "@explita/cloud-auth-client";
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <AuthProvider
+      config={{
+        hostOverride: process.env.NEXT_PUBLIC_DOMAIN,
+        dashboardPath: "/dashboard", //default is /dashboard
+        loginPath: "/login", //default is /login
+        signupPath: "/signup", //default is /signup
+        resetPasswordPath: "/reset-password", //default is /reset-password
+        cookieOverride: cookieOverrideHandler, //included in the server-side functions and only needed if your app runs on localhost subdomain eg: http://console.localhost:3000
+        disableLoading: true, //default is false
+        excludedPaths: [], //array of strings of relative paths, all the paths mentioned above are already excluded.
+      }}
+    >
+      {children}
+    </AuthProvider>
+  );
+}
+```
+
+```tsx
+"use client";
+
+import { Login } from "@explita/cloud-auth-client/ui";
+import { useEffect } from "react";
+
+export default function LoginPage() {
+  useEffect(() => {
+    document.title = "Login";
+  }, []);
+
+  return (
+    <>
+      <div className="h-screen flex items-center justify-center">
+        <Login />
+      </div>
+    </>
+  );
+}
+```
+
+```tsx
+"use client";
+
+import { signup } from "@/app/actions";
+import { Signup } from "@explita/cloud-auth-client/ui";
+import { useEffect } from "react";
+
+export default function SignupPage() {
+  useEffect(() => {
+    document.title = "Sign Up";
+  }, []);
+
+  return (
+    <div className="flex items-center justify-center min-h-screen p-3">
+      <Signup onSubmit={signup} />
+    </div>
+  );
+}
+```
+
+```tsx
+"use client";
+
+import { ResetPassword } from "@explita/cloud-auth-client/ui";
+import { useEffect } from "react";
+
+export default function ResetPasswordPage() {
+  useEffect(() => {
+    document.title = "Reset Password";
+  }, []);
+
+  return (
+    <>
+      <div className="h-screen flex items-center justify-center">
+        <ResetPassword />
+      </div>
+    </>
+  );
+}
+
+//other available components for logged-in users
+ChangePassword;
+UserCard; //shows currently logged-in user
+Settings;
+Toggle2FA; //toggle 2FA for logged-in users
+ToggleAccountStatus; //suspend or unsuspend a user
+LoggedIn; //check if user is logged in
+LoggedOut; //check if user is logged out
+```
+
+### Server-side functions
+
+```typescript
+"use server";
+
+import {
+  NewRole,
+  ResetPasswordWithToken,
+  ResetPasswordWithUserId,
+  Signup,
+} from "@explita/cloud-auth-client";
+import {
+  addRole,
+  assignPermission,
+  changePassword,
+  getRoles,
+  registerUser,
+  resetPassword,
+  setCookie,
+  toggle2FA,
+  toggleUserStatus,
+  updateRole,
+} from "@explita/cloud-auth-client/server";
+
+export async function cookieOverrideHandler(cookie?: string) {
+  await setCookie(cookie);
+}
+
+export async function resetUserPassword(data: ResetPasswordWithToken) {
+  return resetPassword(data);
+}
+
+export async function changeUserPassword(data: ResetPasswordWithUserId) {
+  return changePassword(data);
+}
+
+export async function signup(data: Signup) {
+  return registerUser(data);
+}
+
+export async function toggleUser2FA() {
+  return toggle2FA();
+}
+
+export async function toggleStatus(userId: string) {
+  return toggleUserStatus(userId);
+}
+
+export async function getAllRoles() {
+  return getRoles();
+}
+
+export async function addNewRole(data: NewRole) {
+  return addRole(data);
+}
+
+export async function editRole(id: string, data: NewRole) {
+  return updateRole(id, data);
+}
+
+export async function assignPermissions(roleId: string, permissions: string[]) {
+  return assignPermission(roleId, permissions);
+}
+```
+
+---
+
+### Getting started
+
+Sign up for an account at [Explita Cloud](https://cloud.explita.ng), create a project, add auth service and get your API key from the dashboard and add it to your environment variables.
+
+---
+
+### 📄 License
+
+MIT — Made with ❤️ by [Explita](https://explita.ng)

package/dist/components/change-password.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import { ResetPasswordWithUserId, FormResponse, User } from "../types";
+type Props = {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onSubmit?: (data: ResetPasswordWithUserId) => Promise<FormResponse>;
+    onSuccess?: () => void;
+    user?: User | null;
+};
+export declare function ChangePassword({ user, open, onOpenChange, onSubmit, onSuccess, }: Props): React.JSX.Element;
+export {};

package/dist/components/change-password.js

@@ -0,0 +1,101 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ChangePassword = ChangePassword;
+const react_1 = __importStar(require("react"));
+const dialog_1 = require("./ui/dialog");
+const button_1 = require("./ui/button");
+const label_1 = require("./ui/label");
+const input_1 = require("./ui/input");
+const auth_provider_1 = require("../contexts/auth-provider");
+const message_1 = require("./message");
+const must_login_1 = require("./must-login");
+const utils_1 = require("../lib/utils");
+function ChangePassword({ user, open, onOpenChange, onSubmit, onSuccess, }) {
+    var _a, _b;
+    const { user: loggedInUser } = (0, auth_provider_1.useAuth)();
+    const [state, handleSubmit, isPending] = (0, react_1.useActionState)(async function (prevState, formData) {
+        if (!onSubmit || typeof onSubmit !== "function") {
+            return {
+                message: "Password change handler is not defined. Please pass onSubmit handler to ChangePassword component. If you are using UserCard component, please pass onChangePassword handler to it.",
+                status: "failure",
+            };
+        }
+        try {
+            const result = await onSubmit({
+                userId: (user === null || user === void 0 ? void 0 : user.id) || loggedInUser.id,
+                password: formData.get("password"),
+                confirmPassword: formData.get("confirmPassword"),
+            });
+            onSuccess === null || onSuccess === void 0 ? void 0 : onSuccess();
+            return result;
+        }
+        catch (error) {
+            console.log(error);
+        }
+    }, undefined);
+    return (react_1.default.createElement(dialog_1.Dialog, { open: open, onOpenChange: (state) => {
+            onOpenChange(state);
+            (0, utils_1.unstuckPointerEvents)();
+        } },
+        react_1.default.createElement(dialog_1.DialogContent, null, !loggedInUser ? (react_1.default.createElement(must_login_1.MustLogin, { onOpenChange: onOpenChange })) : (react_1.default.createElement("form", { action: handleSubmit },
+            react_1.default.createElement(dialog_1.DialogHeader, null,
+                !user || loggedInUser.id === user.id ? (react_1.default.createElement(dialog_1.DialogTitle, null, "Change your password")) : (react_1.default.createElement(dialog_1.DialogTitle, null,
+                    "Change password for ",
+                    user.firstName,
+                    " ",
+                    user.lastName)),
+                react_1.default.createElement(dialog_1.DialogDescription, null, "Please enter the new password"),
+                user && loggedInUser.id !== (user === null || user === void 0 ? void 0 : user.id) && (react_1.default.createElement(dialog_1.DialogDescription, { className: "ecpauth:mt-2 ecpauth:text-base" },
+                    "Username: ",
+                    (user === null || user === void 0 ? void 0 : user.username) || (user === null || user === void 0 ? void 0 : user.email)))),
+            (state === null || state === void 0 ? void 0 : state.status) === "success" ? (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:mt-2 ecpauth:font-semibold ecpauth:text-base", variant: "success" })) : (react_1.default.createElement(message_1.Message, { message: state === null || state === void 0 ? void 0 : state.message, className: "ecpauth:mt-2" })),
+            react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:flex-col ecpauth:gap-6 ecpauth:my-5" },
+                react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
+                    react_1.default.createElement(label_1.Label, { htmlFor: "password" }, "New Password"),
+                    react_1.default.createElement(input_1.Input, { id: "password", type: "password", name: "password" }),
+                    react_1.default.createElement(message_1.Message, { message: (state === null || state === void 0 ? void 0 : state.status) === "validation-error"
+                            ? (_a = state === null || state === void 0 ? void 0 : state.errors) === null || _a === void 0 ? void 0 : _a.password
+                            : "" })),
+                react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
+                    react_1.default.createElement(label_1.Label, { htmlFor: "confirmPassword" }, "Confirm New Password"),
+                    react_1.default.createElement(input_1.Input, { id: "confirmPassword", type: "password", name: "confirmPassword" }),
+                    react_1.default.createElement(message_1.Message, { message: (state === null || state === void 0 ? void 0 : state.status) === "validation-error"
+                            ? (_b = state === null || state === void 0 ? void 0 : state.errors) === null || _b === void 0 ? void 0 : _b.confirmPassword
+                            : "" }))),
+            react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:justify-end ecpauth:gap-2" },
+                react_1.default.createElement(button_1.Button, { type: "button", variant: "outline", onClick: () => onOpenChange(false) }, "Cancel"),
+                react_1.default.createElement(button_1.Button, { disabled: isPending, type: "submit" }, "Change Password")))))));
+}

package/dist/components/loader.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Loader(): React.JSX.Element;

package/dist/components/loader.js

@@ -0,0 +1,11 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Loader = Loader;
+const react_1 = __importDefault(require("react"));
+function Loader() {
+    return (react_1.default.createElement("div", { className: "ecpauth:fixed ecpauth:top-0 ecpauth:left-0 ecpauth:right-0 ecpauth:bottom-0 ecpauth:flex ecpauth:items-center ecpauth:justify-center ecpauth:bg-white/80 ecpauth:dark:bg-gray-950/80 ecpauth:z-50" },
+        react_1.default.createElement("div", { className: "loader" })));
+}

package/dist/components/logged-in.d.ts

@@ -0,0 +1,3 @@
+export declare function LoggedIn({ children }: {
+    children: React.ReactNode;
+}): import("react").ReactNode;

package/dist/components/logged-in.js

@@ -0,0 +1,9 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoggedIn = LoggedIn;
+const auth_provider_1 = require("../contexts/auth-provider");
+function LoggedIn({ children }) {
+    const { isAuthenticated } = (0, auth_provider_1.useAuth)();
+    return isAuthenticated ? children : null;
+}

package/dist/components/logged-out.d.ts

@@ -0,0 +1,3 @@
+export declare function LoggedOut({ children }: {
+    children: React.ReactNode;
+}): import("react").ReactNode;

package/dist/components/logged-out.js

@@ -0,0 +1,9 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoggedOut = LoggedOut;
+const auth_provider_1 = require("../contexts/auth-provider");
+function LoggedOut({ children }) {
+    const { isAuthenticated } = (0, auth_provider_1.useAuth)();
+    return !isAuthenticated ? children : null;
+}

package/dist/components/login-form.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare function Login({ className, ...props }: React.ComponentPropsWithoutRef<"div">): React.JSX.Element;

package/dist/components/login-form.js

@@ -0,0 +1,102 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Login = Login;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../lib/utils");
+const button_1 = require("../components/ui/button");
+const card_1 = require("../components/ui/card");
+const input_1 = require("../components/ui/input");
+const label_1 = require("../components/ui/label");
+const auth_provider_1 = require("../contexts/auth-provider");
+const loader_1 = require("./loader");
+const message_1 = require("./message");
+function Login({ className, ...props }) {
+    var _a, _b;
+    const { login, error, computedRouteContext, isAuthenticated } = (0, auth_provider_1.useAuth)();
+    const [authToken, setAuthToken] = react_1.default.useState(null);
+    const { resetPasswordUrl, signupUrl, loginUrl } = computedRouteContext;
+    (0, react_1.useEffect)(() => {
+        const authToken = new URLSearchParams(window.location.search).get("authToken");
+        if (authToken) {
+            setAuthToken(authToken);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (authToken) {
+            login({
+                email: "",
+                password: "",
+                authToken,
+            });
+        }
+    }, [authToken]);
+    const [state, handleSubmit, isPending] = (0, react_1.useActionState)(async function (prevState, formData) {
+        await login({
+            email: formData.get("email"),
+            password: formData.get("password"),
+        });
+        return { email: formData.get("email") };
+    }, undefined);
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("ecpauth:relative ecpauth:flex ecpauth:flex-col ecpauth:gap-6 ecpauth:w-full ecpauth:max-w-sm", className), ...props },
+        react_1.default.createElement(card_1.Card, { className: "ecpauth:relative ecpauth:overflow-hidden" },
+            isAuthenticated && react_1.default.createElement(loader_1.Loader, null),
+            authToken && !error && (react_1.default.createElement("div", { className: "ecpauth:absolute ecpauth:top-0 ecpauth:left-0 ecpauth:right-0 ecpauth:bottom-0 ecpauth:flex ecpauth:flex-col ecpauth:items-center ecpauth:justify-center ecpauth:gap-2 ecpauth:text-black ecpauth:dark:text-white ecpauth:bg-white/90 ecpauth:dark:bg-gray-900/90 ecpauth:z-50 ecpauth:rounded-xl" },
+                react_1.default.createElement("p", null, "Please wait..."),
+                react_1.default.createElement("a", { href: loginUrl, className: "ecpauth:underline ecpauth:underline-offset-4 ecpauth:!text-blue-500 ecpauth:hover:!text-blue-600" }, "Or go back to login"))),
+            react_1.default.createElement(card_1.CardHeader, null,
+                react_1.default.createElement(card_1.CardTitle, { className: "ecpauth:text-2xl" }, "Login"),
+                react_1.default.createElement(card_1.CardDescription, null, "Enter your email below to login to your account")),
+            react_1.default.createElement(card_1.CardContent, null,
+                error && (react_1.default.createElement("p", { className: "ecpauth:text-red-500 ecpauth:mb-4" }, error.message)),
+                react_1.default.createElement("form", { action: handleSubmit },
+                    react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:flex-col ecpauth:gap-6" },
+                        react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
+                            react_1.default.createElement(label_1.Label, { htmlFor: "email" }, "Email/Username"),
+                            react_1.default.createElement(input_1.Input, { id: "email", type: "text", placeholder: "email@example.com", name: "email", defaultValue: state === null || state === void 0 ? void 0 : state.email }),
+                            react_1.default.createElement(message_1.Message, { message: (_a = error === null || error === void 0 ? void 0 : error.errors) === null || _a === void 0 ? void 0 : _a.email })),
+                        react_1.default.createElement("div", { className: "ecpauth:grid ecpauth:gap-2" },
+                            react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:items-center" },
+                                react_1.default.createElement(label_1.Label, { htmlFor: "password" }, "Password"),
+                                resetPasswordUrl && (react_1.default.createElement("a", { href: resetPasswordUrl, className: "ecpauth:ml-auto ecpauth:inline-block ecpauth:text-sm ecpauth:underline-offset-4 ecpauth:hover:underline" }, "Forgot your password?"))),
+                            react_1.default.createElement(input_1.Input, { id: "password", type: "password", name: "password" }),
+                            react_1.default.createElement(message_1.Message, { message: (_b = error === null || error === void 0 ? void 0 : error.errors) === null || _b === void 0 ? void 0 : _b.password })),
+                        react_1.default.createElement(button_1.Button, { type: "submit", className: "ecpauth:w-full ecpauth:cursor-pointer", disabled: isPending }, isPending ? "Logging in..." : "Login")),
+                    signupUrl && (react_1.default.createElement("div", { className: "ecpauth:mt-4 ecpauth:text-center ecpauth:text-sm" },
+                        "Don't have an account?",
+                        " ",
+                        react_1.default.createElement("a", { href: signupUrl, className: "ecpauth:underline ecpauth:underline-offset-4" }, "Sign up"))))))));
+}

package/dist/components/message.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export declare function Message({ message, variant, className, }: {
+    message?: string;
+    variant?: "error" | "success";
+    className?: string;
+}): React.JSX.Element | null;

package/dist/components/message.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Message = Message;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../lib/utils");
+function Message({ message, variant = "error", className = "ecpauth:-mt-2", }) {
+    if (!message)
+        return null;
+    return (react_1.default.createElement("div", { className: (0, utils_1.cn)("ecpauth:text-sm", variant === "success"
+            ? "ecpauth:text-green-500"
+            : "ecpauth:text-red-500", className) }, message));
+}

package/dist/components/must-login.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare function MustLogin({ onOpenChange, }: {
+    onOpenChange: (open: boolean) => void;
+}): React.JSX.Element;

package/dist/components/must-login.js

@@ -0,0 +1,23 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MustLogin = MustLogin;
+const react_1 = __importDefault(require("react"));
+const button_1 = require("./ui/button");
+const message_1 = require("./message");
+const dialog_1 = require("./ui/dialog");
+const utils_1 = require("../lib/utils");
+function MustLogin({ onOpenChange, }) {
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(dialog_1.DialogHeader, null,
+            react_1.default.createElement(dialog_1.DialogTitle, null, "Authentication Error")),
+        react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:items-center ecpauth:justify-center ecpauth:h-40" },
+            react_1.default.createElement(message_1.Message, { message: "User not found. Make sure you are logged in.", variant: "error" })),
+        react_1.default.createElement("div", { className: "ecpauth:flex ecpauth:justify-end ecpauth:gap-2" },
+            react_1.default.createElement(button_1.Button, { type: "button", variant: "outline", onClick: () => {
+                    onOpenChange(false);
+                    (0, utils_1.unstuckPointerEvents)();
+                } }, "Close"))));
+}

package/dist/components/optional-otp-wrapper.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { OTPProps } from "../types";
+export declare function OptionalOTPWrapper(props: OTPProps): React.JSX.Element | null;

package/dist/components/optional-otp-wrapper.js

@@ -0,0 +1,52 @@
+"use client";
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OptionalOTPWrapper = OptionalOTPWrapper;
+const react_1 = __importStar(require("react"));
+const utils_1 = require("../lib/utils");
+function OptionalOTPWrapper(props) {
+    const [Inner, setInner] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        if (!props.user || !(0, utils_1.isOtpAvailable)())
+            return;
+        import("./optional-otp.js").then((mod) => {
+            setInner(() => mod.OptionalOTPInner);
+        });
+    }, [props.user]);
+    if (!props.user || !Inner)
+        return null;
+    return react_1.default.createElement(Inner, { ...props });
+}

package/dist/components/optional-otp.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { OTPProps } from "../types";
+export declare function OptionalOTPInner({ user, onVerified, onCanceled }: OTPProps): React.JSX.Element | null;