@insforge/react 0.4.7 → 0.4.9

package/README.md

@@ -7,7 +7,7 @@
 ✅ **5-Minute Setup** - One provider + one line of router config = done  
 ✅ **Built-in Auth UI** - Use deployed auth pages (like Next.js middleware)  
 ✅ **Framework Agnostic** - Works with any React framework  
-✅ **Full TypeScript** - Complete type safety out of the box  
+✅ **Full TypeScript** - Complete type safety out of the box
 
 ---
 
@@ -25,6 +25,15 @@ yarn add @insforge/react
 pnpm add @insforge/react
 ```
 
+**Required Dependencies:** `bash npm install react@^19.0.0 react-dom@^19.0.0
+  react-router-dom@^7.9.0 `
+
+#### Environment Variables
+
+```bash .env
+VITE_INSFORGE_BASE_URL=https://your-project.insforge.app/
+```
+
 ### 2. Setup Provider
 
 Wrap your app with `InsforgeProvider`:
@@ -34,39 +43,45 @@ Wrap your app with `InsforgeProvider`:
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { InsforgeProvider } from '@insforge/react';
-import '@insforge/react/styles.css';
 import App from './App';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <InsforgeProvider 
-      baseUrl={import.meta.env.VITE_INSFORGE_BASE_URL}
-      afterSignInUrl="/dashboard"
-    >
+    <InsforgeProvider baseUrl={import.meta.env.VITE_INSFORGE_BASE_URL} afterSignInUrl="/dashboard">
       <App />
     </InsforgeProvider>
   </StrictMode>
 );
 ```
 
-### 3. Configure Router (Built-in Auth)
+### Step 3: Configure Router (Built-in Auth)
 
-```tsx
-// src/App.tsx
+**The fastest way** - Use deployed auth pages with Layout pattern:
+
+```tsx src/App.tsx
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { getInsforgeRoutes } from '@insforge/react/router';
+import Layout from './components/Layout';
 import Home from './pages/Home';
 import Dashboard from './pages/Dashboard';
 
 const router = createBrowserRouter([
-  { path: '/', element: <Home /> },
-  
+  {
+    path: '/',
+    element: <Layout />,
+    children: [
+      { index: true, element: <Home /> },
+
+      { path: 'dashboard', element: <Dashboard /> }
+    ]
+  },
+
+  // Add built-in auth redirect routes (sign-in, sign-up, forgot-password, etc.)
   ...getInsforgeRoutes({
     baseUrl: import.meta.env.VITE_INSFORGE_BASE_URL,
-    builtInAuth: true
-  }),
-  
-  { path: '/dashboard', element: <Dashboard /> }
+    afterSignInUrl="/dashboard"
+    builtInAuth: true  // Redirects to deployed auth pages
+  })
 ]);
 
 export default function App() {
@@ -75,17 +90,22 @@ export default function App() {
 ```
 
 **What this does:**
+
 - Visiting `/sign-in` → Redirects to `your-project.insforge.app/auth/sign-in`
 - Visiting `/sign-up` → Redirects to `your-project.insforge.app/auth/sign-up`
+- Visiting `/forgot-password` → Redirects to `your-project.insforge.app/auth/forgot-password`
 - After auth → Backend redirects with token in URL → SDK auto-detects and stores token
 
-### 4. Add Auth UI to Your Pages
+### 4. Use Hooks & Components
 
 ```tsx
 // src/pages/Home.tsx
-import { SignedIn, SignedOut, UserButton } from '@insforge/react';
+import { SignedIn, SignedOut, UserButton, useAuth, useUser } from '@insforge/react';
 
 export default function Home() {
+  const { isSignedIn } = useAuth();
+  const { user } = useUser();
+
   return (
     <div>
       <nav>
@@ -95,6 +115,7 @@ export default function Home() {
 
         <SignedIn>
           <UserButton afterSignOutUrl="/" />
+          <h1>Welcome, {user?.email}!</h1>
         </SignedIn>
       </nav>
 
@@ -121,9 +142,7 @@ Uses your deployed Insforge auth pages (includes all flows):
   paths: {
     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
   }
 })
 ```
@@ -133,23 +152,15 @@ Uses your deployed Insforge auth pages (includes all flows):
 Use package components with your own styling:
 
 ```tsx
-import { 
-  SignIn, 
-  SignUp, 
-  ForgotPassword, 
-  ResetPassword, 
-  VerifyEmail 
-} from '@insforge/react';
+import { SignIn, SignUp, ForgotPassword, ResetPassword, VerifyEmail } from '@insforge/react';
 
 const router = createBrowserRouter([
   { path: '/', element: <Home /> },
-  
+
   // Use package components for complete auth flows
   { path: '/sign-in', element: <SignIn afterSignInUrl="/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')} /> }
+  { path: '/forgot-password', element: <ForgotPassword /> },
 ]);
 ```
 
@@ -162,13 +173,13 @@ import { useAuth } from '@insforge/react';
 
 function CustomSignIn() {
   const { signIn } = useAuth();
-  
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     await signIn(email, password);
     navigate('/dashboard');
   };
-  
+
   return <form onSubmit={handleSubmit}>...</form>;
 }
 ```
@@ -180,6 +191,7 @@ function CustomSignIn() {
 ### Components
 
 **Pre-built with Business Logic:**
+
 - `<SignIn />` - Complete sign-in with email/password & OAuth
 - `<SignUp />` - Registration with password validation & email verification
 - `<ForgotPassword />` - Request password reset with email validation
@@ -190,6 +202,7 @@ function CustomSignIn() {
 - `<SignedIn>` / `<SignedOut>` - Conditional rendering
 
 **Form Components (Pure UI):**
+
 - `<SignInForm />` - Sign-in UI without logic
 - `<SignUpForm />` - Sign-up UI without logic
 - `<ForgotPasswordForm />` - Password reset request UI
@@ -197,6 +210,7 @@ function CustomSignIn() {
 - `<VerifyEmailStatus />` - Email verification status UI
 
 **Atomic Components (14 total):**
+
 - `<AuthContainer />`, `<AuthHeader />`, `<AuthFormField />`, `<AuthPasswordField />`, `<AuthEmailVerificationStep />`, etc.
 
 ### Hooks
@@ -239,6 +253,7 @@ All components support full text customization:
   successMessage="We've sent a reset code to your inbox"
 />
 ```
+
 ---
 
 ## Advanced Usage
@@ -260,7 +275,7 @@ function CustomSignIn() {
     e.preventDefault();
     setLoading(true);
     setError('');
-    
+
     try {
       await signIn(email, password);
       // Custom success logic
@@ -282,7 +297,7 @@ function CustomSignIn() {
       loading={loading}
       availableProviders={['google', 'github']}
       onOAuthClick={(provider) => {
-        // Custom OAuth logic
+        console.log(provider);
       }}
     />
   );
@@ -307,10 +322,7 @@ import {
 function CompletelyCustomAuth() {
   return (
     <AuthContainer>
-      <AuthHeader
-        title="Welcome to MyApp"
-        subtitle="Sign in to continue"
-      />
+      <AuthHeader title="Welcome to MyApp" subtitle="Sign in to continue" />
 
       <AuthErrorBanner error={error} />
 
@@ -332,9 +344,7 @@ function CompletelyCustomAuth() {
           showStrengthIndicator
         />
 
-        <AuthSubmitButton isLoading={loading}>
-          Sign In
-        </AuthSubmitButton>
+        <AuthSubmitButton isLoading={loading}>Sign In</AuthSubmitButton>
       </form>
 
       <AuthDivider text="or" />
@@ -345,11 +355,7 @@ function CompletelyCustomAuth() {
         loading={oauthLoading}
       />
 
-      <AuthLink
-        text="Don't have an account?"
-        linkText="Sign up"
-        href="/sign-up"
-      />
+      <AuthLink text="Don't have an account?" linkText="Sign up" href="/sign-up" />
     </AuthContainer>
   );
 }
@@ -364,17 +370,14 @@ function Dashboard() {
   return (
     <div>
       <h1>Dashboard</h1>
-      
+
       {/* Simple protection */}
       <Protect redirectTo="/sign-in">
         <UserContent />
       </Protect>
 
       {/* Role-based protection */}
-      <Protect
-        redirectTo="/unauthorized"
-        condition={(user) => user.role === 'admin'}
-      >
+      <Protect redirectTo="/unauthorized" condition={(user) => user.role === 'admin'}>
         <AdminPanel />
       </Protect>
     </div>
@@ -384,39 +387,10 @@ function Dashboard() {
 
 ---
 
-## TypeScript
-
-Full TypeScript support with exported types:
-
-```tsx
-import type {
-  InsforgeUser,
-  SignInProps,
-  SignUpProps,
-  ForgotPasswordProps,
-  ResetPasswordProps,
-  VerifyEmailProps,
-  UserButtonProps,
-  ProtectProps,
-  ConditionalProps,
-  SignInFormProps,
-  SignUpFormProps,
-  ForgotPasswordFormProps,
-  ResetPasswordFormProps,
-  VerifyEmailStatusProps,
-  AuthFormFieldProps,
-  OAuthProvider,
-  AuthConfig,
-  InsforgeProviderProps,
-  GetInsforgeRoutesConfig,
-} from '@insforge/react';
-```
-
----
-
 ## OAuth Providers
 
 Built-in support for 10+ OAuth providers:
+
 - Google
 - GitHub
 - Discord
@@ -433,20 +407,6 @@ Providers are auto-detected from your backend configuration.
 
 ---
 
-## Validation Utilities
-
-```tsx
-import { emailSchema, cn } from '@insforge/react/lib';
-
-// Validate email with Zod
-const result = emailSchema.safeParse('user@example.com');
-
-// Merge Tailwind classes
-const className = cn('px-4 py-2', 'bg-blue-500', conditionalClass);
-```
-
----
-
 ## Available Atomic Components
 
 Low-level building blocks for complete customization:

package/dist/atoms.cjs

@@ -108,34 +108,27 @@ function AuthPasswordStrengthIndicator({
   config
 }) {
   const requirements = createRequirements(config);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `if-passwordStrength-requirement ${req.test(password) ? "met" : "unmet"}`,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              width: "1rem",
-              height: "1rem",
-              borderRadius: "50%",
-              border: "2px solid",
-              borderColor: req.test(password) ? "transparent" : "#9ca3af",
-              backgroundColor: req.test(password) ? "#059669" : "white",
-              transition: "all 0.2s"
-            },
-            children: req.test(password) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { children: req.label })
-      ]
-    },
-    req.label
-  )) }) });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-passwordStrength if-internal-ps6w3k", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-passwordStrength-requirements", children: requirements.map((req) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-passwordStrength-requirement", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: "1rem",
+          height: "1rem",
+          borderRadius: "50%",
+          border: "2px solid",
+          borderColor: req.test(password) ? "transparent" : "#9ca3af",
+          backgroundColor: req.test(password) ? "#059669" : "white",
+          transition: "all 0.2s"
+        },
+        children: req.test(password) && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { style: { width: "0.75rem", height: "0.75rem", color: "white" } })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { children: req.label })
+  ] }, req.label)) }) });
 }
 function createRequirements(config) {
   const requirements = [];
@@ -203,11 +196,12 @@ function AuthPasswordField({
   onFocus,
   ...props
 }) {
+  const [searchParams] = reactRouterDom.useSearchParams();
   const [showPassword, setShowPassword] = react.useState(false);
   const [showStrength, setShowStrength] = react.useState(false);
   const resolvedForgotPasswordHref = react.useMemo(
-    () => forgotPasswordLink ? resolveAuthPath(forgotPasswordLink.href) : void 0,
-    [forgotPasswordLink]
+    () => forgotPasswordLink ? resolveAuthUrl(forgotPasswordLink.href, searchParams) : void 0,
+    [forgotPasswordLink, searchParams]
   );
   const handleFocus = (e) => {
     if (showStrengthIndicator) {
@@ -545,7 +539,6 @@ function AuthOAuthProviders({
 function AuthVerificationCodeInput({
   length = 6,
   value,
-  email,
   onChange,
   disabled = false,
   onComplete
@@ -593,33 +586,25 @@ function AuthVerificationCodeInput({
       }
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationCode if-internal-vc8m4p", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "if-verificationCode-description", children: [
-      "We've sent a verification code to your inbox at",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationCode-email", children: email }),
-      ". Enter it below to proceed."
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-      "input",
-      {
-        ref: (el) => {
-          inputRefs.current[index] = el;
-        },
-        type: "text",
-        inputMode: "numeric",
-        maxLength: 1,
-        value: value[index] || "",
-        onChange: (e) => handleChange(index, e.target.value),
-        onKeyDown: (e) => handleKeyDown(index, e),
-        onPaste: handlePaste,
-        disabled,
-        className: "if-verificationCode-input",
-        autoComplete: "one-time-code"
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationCode-inputContainer", children: Array.from({ length }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    "input",
+    {
+      ref: (el) => {
+        inputRefs.current[index] = el;
       },
-      index
-    )) })
-  ] });
+      type: "text",
+      inputMode: "numeric",
+      maxLength: 1,
+      value: value[index] || "",
+      onChange: (e) => handleChange(index, e.target.value),
+      onKeyDown: (e) => handleKeyDown(index, e),
+      onPaste: handlePaste,
+      disabled,
+      className: "if-verificationCode-input",
+      autoComplete: "one-time-code"
+    },
+    index
+  )) });
 }
 var InsforgeContext = react.createContext(void 0);
 function useInsforge() {
@@ -631,28 +616,20 @@ function useInsforge() {
 }
 function AuthEmailVerificationStep({
   email,
-  method = "code",
-  onVerifyCode
+  method,
+  onVerifyCode,
+  emailSent = false
 }) {
   const { sendVerificationEmail } = useInsforge();
   const [resendDisabled, setResendDisabled] = react.useState(true);
-  const [resendCountdown, setResendCountdown] = react.useState(60);
+  const [resendCountdown, setResendCountdown] = react.useState(emailSent ? 60 : 0);
   const [isSending, setIsSending] = react.useState(false);
   const [verificationCode, setVerificationCode] = react.useState("");
   const [isVerifying, setIsVerifying] = react.useState(false);
-  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 {
-        await sendVerificationEmail(email);
-      } catch (error) {
-        console.error("Failed to send verification email:", error);
-      }
-    };
-    void sendInitialEmail();
-  }, [email, sendVerificationEmail]);
+  const isLinkMethod = method === "link";
+  const displayDescription = isLinkMethod ? "We've sent an email to {email}. Please check your email to confirm your account before signing in. The confirmation link expires in 10 minutes." : "We've sent a verification code to your inbox at {email}. Enter it below to proceed.";
   react.useEffect(() => {
-    if (resendCountdown > 0) {
+    if (emailSent && resendCountdown > 0) {
       const timer = setInterval(() => {
         setResendCountdown((prev) => {
           if (prev <= 1) {
@@ -664,7 +641,7 @@ function AuthEmailVerificationStep({
       }, 1e3);
       return () => clearInterval(timer);
     }
-  }, [resendCountdown]);
+  }, [emailSent, resendCountdown]);
   const handleResend = async () => {
     setResendDisabled(true);
     setResendCountdown(60);
@@ -690,23 +667,29 @@ function AuthEmailVerificationStep({
       setVerificationCode("");
     }
   };
-  const displayDescription = defaultDescription;
-  const isLinkMethod = method === "link";
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-      part,
-      index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationCode-email", children: email })
-    ] }, index)) }),
+    isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Verify Your Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        part,
+        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationLink-email", children: email })
+      ] }, index)) })
+    ] }),
     !isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-codeContainer", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
-        AuthVerificationCodeInput,
-        {
-          value: verificationCode,
-          onChange: setVerificationCode,
-          email,
-          disabled: isVerifying
-        }
-      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-codeInputWrapper", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-codeDescription", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+          part,
+          index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationCode-email", children: email })
+        ] }, index)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          AuthVerificationCodeInput,
+          {
+            value: verificationCode,
+            onChange: setVerificationCode,
+            disabled: isVerifying
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntime.jsx(
         AuthSubmitButton,
         {
@@ -716,7 +699,7 @@ function AuthEmailVerificationStep({
           onClick: () => {
             void handleSubmit();
           },
-          children: isVerifying ? "Verifying..." : "Verify Code"
+          children: isVerifying ? "Verifying..." : "Continue"
         }
       )
     ] }),
@@ -748,6 +731,8 @@ function AuthResetPasswordVerificationStep({
   const [isSending, setIsSending] = react.useState(false);
   const [verificationCode, setVerificationCode] = react.useState("");
   const [isVerifying, setIsVerifying] = react.useState(false);
+  const isLinkMethod = method === "link";
+  const displayDescription = isLinkMethod ? "We have sent an email to {email}. Please check your email to reset your password. The link expires in 10 minutes." : "We've sent a reset password code to your inbox at {email}. Enter it below to proceed.";
   react.useEffect(() => {
     if (resendCountdown > 0) {
       const timer = setInterval(() => {
@@ -787,17 +772,20 @@ function AuthResetPasswordVerificationStep({
       setVerificationCode("");
     }
   };
-  const isLinkMethod = method === "link";
-  const description = isLinkMethod ? `We've sent a password reset link to ${email}. Please check your email and click the link to reset your password. The link will expire in 10 minutes.` : `We've sent a 6-digit verification code to ${email}. Please enter it below to reset your password. The code will expire in 10 minutes.`;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: description }),
+    isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-descriptionContainer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-descriptionTitle", children: "Check Your Email" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "if-verificationStep-description", children: displayDescription.split("{email}").map((part, index, array) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        part,
+        index < array.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "if-verificationLink-email", children: email })
+      ] }, index)) })
+    ] }),
     !isLinkMethod && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "if-verificationStep-codeContainer", children: [
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "if-verificationStep-codeInputWrapper", children: /* @__PURE__ */ jsxRuntime.jsx(
         AuthVerificationCodeInput,
         {
           value: verificationCode,
           onChange: setVerificationCode,
-          email,
           disabled: isVerifying
         }
       ) }),