@insforge/react 0.2.9 → 0.3.0

package/README.md

@@ -110,19 +110,19 @@ export default function Home() {
 
 ### Built-in Auth (Recommended)
 
-Uses your deployed Insforge auth pages:
+Uses your deployed Insforge auth pages (includes all flows):
 
 ```tsx
 ...getInsforgeRoutes({
   baseUrl: 'https://your-project.insforge.app',
   builtInAuth: true,  // Default
   paths: {
-    signIn: '/sign-in',           // Custom path (optional)
-    signUp: '/sign-up',
-    verifyEmail: '/verify-email',
-    forgotPassword: '/forgot-password',
-    resetPassword: '/reset-password',
-    callback: '/auth/callback'
+    signIn: '/sign-in',                // Sign in page
+    signUp: '/sign-up',                // Sign up page
+    verifyEmail: '/verify-email',      // Email verification page
+    forgotPassword: '/forgot-password', // Request password reset
+    resetPassword: '/reset-password',   // Reset password with token
+    callback: '/auth/callback'          // OAuth callback handler
   }
 })
 ```
@@ -132,7 +132,13 @@ Uses your deployed Insforge auth pages:
 Use package components with your own styling:
 
 ```tsx
-import { SignIn, SignUp } from '@insforge/react';
+import { 
+  SignIn, 
+  SignUp, 
+  ForgotPassword, 
+  ResetPassword, 
+  VerifyEmail 
+} from '@insforge/react';
 
 const router = createBrowserRouter([
   { path: '/', element: <Home /> },
@@ -143,9 +149,12 @@ const router = createBrowserRouter([
     builtInAuth: false  // Don't redirect to deployed UI
   }),
   
-  // Use package components
+  // Use package components for complete auth flows
   { path: '/sign-in', element: <SignIn afterSignInUrl="/dashboard" /> },
-  { path: '/sign-up', element: <SignUp afterSignUpUrl="/dashboard" /> }
+  { path: '/sign-up', element: <SignUp afterSignUpUrl="/dashboard" /> },
+  { path: '/forgot-password', element: <ForgotPassword backToSignInUrl="/sign-in" /> },
+  { path: '/reset-password', element: <ResetPassword token={searchParams.get('token')} /> },
+  { path: '/verify-email', element: <VerifyEmail token={searchParams.get('token')} /> }
 ]);
 ```
 
@@ -177,7 +186,10 @@ function CustomSignIn() {
 
 **Pre-built with Business Logic:**
 - `<SignIn />` - Complete sign-in with email/password & OAuth
-- `<SignUp />` - Registration with password validation
+- `<SignUp />` - Registration with password validation & email verification
+- `<ForgotPassword />` - Request password reset with email validation
+- `<ResetPassword />` - Reset password with token validation
+- `<VerifyEmail />` - Verify email with automatic token handling
 - `<UserButton />` - User dropdown with sign-out
 - `<Protect />` - Route protection wrapper
 - `<SignedIn>` / `<SignedOut>` - Conditional rendering
@@ -186,12 +198,12 @@ function CustomSignIn() {
 **Form Components (Pure UI):**
 - `<SignInForm />` - Sign-in UI without logic
 - `<SignUpForm />` - Sign-up UI without logic
-- `<ForgotPasswordForm />` - Password reset request
-- `<ResetPasswordForm />` - Password reset with token
-- `<VerifyEmailStatus />` - Email verification status
+- `<ForgotPasswordForm />` - Password reset request UI
+- `<ResetPasswordForm />` - Password reset with token UI
+- `<VerifyEmailStatus />` - Email verification status UI
 
-**Atomic Components (13 total):**
-- `<AuthContainer />`, `<AuthHeader />`, `<AuthFormField />`, `<AuthPasswordField />`, etc.
+**Atomic Components (14 total):**
+- `<AuthContainer />`, `<AuthHeader />`, `<AuthFormField />`, `<AuthPasswordField />`, `<AuthEmailVerificationStep />`, etc.
 
 ### Hooks
 
@@ -217,6 +229,14 @@ All components support `appearance` props:
     button: "bg-blue-600 hover:bg-blue-700"
   }}
 />
+
+// Works with all auth components
+<ForgotPassword
+  appearance={{
+    card: "bg-gradient-to-br from-indigo-50 to-white",
+    button: "bg-indigo-600 hover:bg-indigo-700"
+  }}
+/>
 ```
 
 ### Deep Customization (Hierarchical Appearance)
@@ -255,7 +275,7 @@ Style nested components through hierarchical structure:
 
 #### Complete Appearance Structure
 
-**SignIn / SignUp Components:**
+**All auth components** (`SignIn`, `SignUp`, `ForgotPassword`, `ResetPassword`) support hierarchical appearance:
 
 ```typescript
 appearance?: {
@@ -269,17 +289,17 @@ appearance?: {
   errorBanner?: string;            // Error message banner
   form?: {
     container?: string;            // Form wrapper
-    emailField?: {
-      container?: string;          // Email field wrapper
-      label?: string;              // Email label
-      input?: string;              // Email input
+    emailField?: {                 // Available in SignIn, SignUp, ForgotPassword
+      container?: string;
+      label?: string;
+      input?: string;
     };
-    passwordField?: {
-      container?: string;          // Password field wrapper
-      label?: string;              // Password label
-      input?: string;              // Password input
-      forgotPasswordLink?: string; // Forgot password link (SignIn only)
-      strengthIndicator?: {        // Password strength (SignUp only)
+    passwordField?: {              // Available in SignIn, SignUp, ResetPassword
+      container?: string;
+      label?: string;
+      input?: string;
+      forgotPasswordLink?: string; // SignIn only
+      strengthIndicator?: {        // SignUp and ResetPassword
         container?: string;
         requirement?: string;
       };
@@ -291,17 +311,17 @@ appearance?: {
     text?: string;                 // Link description text
     link?: string;                 // Actual link element
   };
-  divider?: string;                // "or" divider
-  oauth?: {
-    container?: string;            // OAuth buttons wrapper
-    button?: string;               // Individual OAuth button
+  divider?: string;                // "or" divider (SignIn, SignUp)
+  oauth?: {                        // OAuth section (SignIn, SignUp)
+    container?: string;
+    button?: string;
   };
 }
 ```
 
 ### Text Customization
 
-All text is customizable:
+All components support full text customization:
 
 ```tsx
 <SignIn
@@ -316,6 +336,16 @@ All text is customizable:
   signUpLinkText="Create an account"
   dividerText="or continue with"
 />
+
+<ForgotPassword
+  title="Reset Your Password"
+  subtitle="Enter your email to receive a reset code"
+  emailLabel="Email Address"
+  submitButtonText="Send Reset Code"
+  backToSignInText="Remember your password?"
+  successTitle="Check Your Email"
+  successMessage="We've sent a reset code to your inbox"
+/>
 ```
 
 ---
@@ -483,14 +513,22 @@ import type {
   InsforgeUser,
   SignInProps,
   SignUpProps,
+  ForgotPasswordProps,
+  ResetPasswordProps,
+  VerifyEmailProps,
   SignInAppearance,
   SignUpAppearance,
+  ForgotPasswordAppearance,
+  ResetPasswordAppearance,
   UserButtonProps,
   ProtectProps,
   ConditionalProps,
   InsforgeCallbackProps,
   SignInFormProps,
   SignUpFormProps,
+  ForgotPasswordFormProps,
+  ResetPasswordFormProps,
+  VerifyEmailStatusProps,
   AuthFormFieldProps,
   OAuthProvider,
   EmailAuthConfig,
@@ -551,6 +589,7 @@ Low-level building blocks for complete customization:
 - `<AuthOAuthButton />` - Single OAuth provider button
 - `<AuthOAuthProviders />` - Smart OAuth grid
 - `<AuthVerificationCodeInput />` - 6-digit OTP input
+- `<AuthEmailVerificationStep />` - Email verification step with countdown and resend
 
 ---
 

package/dist/atoms.d.mts

@@ -361,6 +361,27 @@ declare function AuthOAuthProviders({ providers, onClick, disabled, loading, app
  *   - `appearance.containerClassName`: Container element
  *   - `appearance.inputClassName`: Input elements
  */
-declare function AuthVerificationCodeInput({ length, value, email, onChange, disabled, appearance, }: AuthVerificationCodeInputProps): react_jsx_runtime.JSX.Element;
+declare function AuthVerificationCodeInput({ length, value, email, onChange, disabled, onComplete, appearance, }: AuthVerificationCodeInputProps): react_jsx_runtime.JSX.Element;
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength };
+type VerificationMethod = 'code' | 'link';
+interface AuthEmailVerificationStepProps {
+    email: string;
+    title?: string;
+    description?: string;
+    method?: VerificationMethod;
+    onVerifyCode?: (code: string) => Promise<void>;
+}
+/**
+ * Email verification step component
+ *
+ * Handles the email verification flow:
+ * - Automatically sends verification email on mount
+ * - Shows countdown timer for resend functionality
+ * - Manages rate limiting for resend attempts
+ * - Supports both code and link verification methods
+ *
+ * @param method - 'code' for OTP input, 'link' for magic link (default: 'code')
+ */
+declare function AuthEmailVerificationStep({ email, title, description, method, onVerifyCode, }: AuthEmailVerificationStepProps): react_jsx_runtime.JSX.Element;
+
+export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength };

package/dist/atoms.d.ts

@@ -361,6 +361,27 @@ declare function AuthOAuthProviders({ providers, onClick, disabled, loading, app
  *   - `appearance.containerClassName`: Container element
  *   - `appearance.inputClassName`: Input elements
  */
-declare function AuthVerificationCodeInput({ length, value, email, onChange, disabled, appearance, }: AuthVerificationCodeInputProps): react_jsx_runtime.JSX.Element;
+declare function AuthVerificationCodeInput({ length, value, email, onChange, disabled, onComplete, appearance, }: AuthVerificationCodeInputProps): react_jsx_runtime.JSX.Element;
 
-export { AuthBranding, AuthContainer, AuthDivider, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength };
+type VerificationMethod = 'code' | 'link';
+interface AuthEmailVerificationStepProps {
+    email: string;
+    title?: string;
+    description?: string;
+    method?: VerificationMethod;
+    onVerifyCode?: (code: string) => Promise<void>;
+}
+/**
+ * Email verification step component
+ *
+ * Handles the email verification flow:
+ * - Automatically sends verification email on mount
+ * - Shows countdown timer for resend functionality
+ * - Manages rate limiting for resend attempts
+ * - Supports both code and link verification methods
+ *
+ * @param method - 'code' for OTP input, 'link' for magic link (default: 'code')
+ */
+declare function AuthEmailVerificationStep({ email, title, description, method, onVerifyCode, }: AuthEmailVerificationStepProps): react_jsx_runtime.JSX.Element;
+
+export { AuthBranding, AuthContainer, AuthDivider, AuthEmailVerificationStep, AuthErrorBanner, AuthFormField, AuthHeader, AuthLink, AuthOAuthButton, AuthOAuthProviders, AuthPasswordField, AuthPasswordStrengthIndicator, AuthSubmitButton, AuthVerificationCodeInput, validatePasswordStrength };

package/dist/atoms.js

@@ -5,6 +5,7 @@ var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var lucideReact = require('lucide-react');
 var react = require('react');
+var sdk = require('@insforge/sdk');
 
 function AuthBranding() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[#FAFAFA] px-2 py-4 flex flex-row justify-center items-center gap-1", children: [
@@ -655,6 +656,7 @@ function AuthVerificationCodeInput({
   email,
   onChange,
   disabled = false,
+  onComplete,
   appearance = {}
 }) {
   const inputRefs = react.useRef([]);
@@ -668,6 +670,9 @@ function AuthVerificationCodeInput({
     if (digit && index < length - 1) {
       inputRefs.current[index + 1]?.focus();
     }
+    if (digit && index === length - 1 && updatedValue.length === length && onComplete) {
+      onComplete(updatedValue);
+    }
   };
   const handleKeyDown = (index, e) => {
     if (e.key === "Backspace") {
@@ -688,6 +693,9 @@ function AuthVerificationCodeInput({
     if (/^\d+$/.test(pastedData) && pastedData.length === length) {
       onChange(pastedData);
       inputRefs.current[length - 1]?.focus();
+      if (onComplete) {
+        onComplete(pastedData);
+      }
     }
   };
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(
@@ -728,10 +736,141 @@ function AuthVerificationCodeInput({
     )) })
   ] });
 }
+var InsforgeContext = react.createContext(
+  void 0
+);
+function useInsforge() {
+  const context = react.useContext(InsforgeContext);
+  if (!context) {
+    throw new Error("useInsforge must be used within InsforgeProvider");
+  }
+  return context;
+}
+function AuthEmailVerificationStep({
+  email,
+  title = "Verify Your Email",
+  description,
+  method = "code",
+  onVerifyCode
+}) {
+  const { baseUrl } = useInsforge();
+  const [insforge] = react.useState(() => sdk.createClient({ baseUrl }));
+  const [resendDisabled, setResendDisabled] = react.useState(true);
+  const [resendCountdown, setResendCountdown] = react.useState(60);
+  const [isSending, setIsSending] = react.useState(false);
+  const [verificationCode, setVerificationCode] = react.useState("");
+  const [isVerifying, setIsVerifying] = react.useState(false);
+  const [verificationError, setVerificationError] = react.useState("");
+  const defaultDescription = method === "code" ? "We've sent a 6-digit verification code to {email}. Please enter it below to verify your account. The code will expire in 10 minutes." : "We've sent a verification link to {email}. Please check your email and click the link to verify your account. The link will expire in 10 minutes.";
+  react.useEffect(() => {
+    const sendInitialEmail = async () => {
+      try {
+        if (method === "code") {
+          await insforge.auth.sendVerificationCode({ email });
+        } else {
+          await insforge.auth.sendVerificationLink({ email });
+        }
+      } catch {
+      }
+    };
+    void sendInitialEmail();
+  }, [email, method, insforge.auth]);
+  react.useEffect(() => {
+    if (resendCountdown > 0) {
+      const timer = setInterval(() => {
+        setResendCountdown((prev) => {
+          if (prev <= 1) {
+            setResendDisabled(false);
+            return 0;
+          }
+          return prev - 1;
+        });
+      }, 1e3);
+      return () => clearInterval(timer);
+    }
+  }, [resendCountdown]);
+  const handleResend = async () => {
+    setResendDisabled(true);
+    setResendCountdown(60);
+    setIsSending(true);
+    setVerificationError("");
+    try {
+      if (method === "code") {
+        await insforge.auth.sendVerificationCode({ email });
+      } else {
+        await insforge.auth.sendVerificationLink({ email });
+      }
+    } catch {
+      setResendDisabled(false);
+      setResendCountdown(0);
+    } finally {
+      setIsSending(false);
+    }
+  };
+  const handleVerifyCode = async (code) => {
+    if (!onVerifyCode) {
+      return;
+    }
+    setIsVerifying(true);
+    setVerificationError("");
+    try {
+      await onVerifyCode(code);
+    } catch (error) {
+      setVerificationError(
+        error instanceof Error ? error.message : "Invalid verification code. Please try again."
+      );
+      setVerificationCode("");
+    } finally {
+      setIsVerifying(false);
+    }
+  };
+  const displayDescription = description || defaultDescription;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full flex flex-col gap-6 items-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full bg-neutral-100 dark:bg-neutral-800 rounded-lg px-4 pt-4 pb-6 flex flex-col gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-black dark:text-white", children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-neutral-600 dark:text-neutral-400 text-sm leading-relaxed", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        part,
+        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-black dark:text-white", children: email })
+      ] }, index)) }),
+      method === "code" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 mt-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AuthVerificationCodeInput,
+          {
+            value: verificationCode,
+            onChange: setVerificationCode,
+            email,
+            disabled: isVerifying,
+            onComplete: (code) => {
+              void handleVerifyCode(code);
+            }
+          }
+        ),
+        verificationError && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-red-600 dark:text-red-400 text-center", children: verificationError }),
+        isVerifying && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-neutral-600 dark:text-neutral-400 text-center", children: "Verifying..." })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full text-sm text-center text-neutral-600 dark:text-neutral-400", children: [
+      "Didn't receive the email?",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => {
+            void handleResend();
+          },
+          disabled: resendDisabled || isSending,
+          className: "text-black dark:text-white font-medium transition-colors disabled:cursor-not-allowed cursor-pointer hover:underline disabled:no-underline disabled:opacity-50",
+          children: isSending ? "Sending..." : resendDisabled ? `Retry in (${resendCountdown}s)` : "Click to resend"
+        }
+      )
+    ] })
+  ] });
+}
 
 exports.AuthBranding = AuthBranding;
 exports.AuthContainer = AuthContainer;
 exports.AuthDivider = AuthDivider;
+exports.AuthEmailVerificationStep = AuthEmailVerificationStep;
 exports.AuthErrorBanner = AuthErrorBanner;
 exports.AuthFormField = AuthFormField;
 exports.AuthHeader = AuthHeader;