@insforge/react 1.1.1 → 1.1.2-dev.2

package/dist/index.d.cts

@@ -1,10 +1,10 @@
 export { ConditionalProps, ForgotPassword, ForgotPasswordProps, Protect, ProtectProps, ResetPassword, ResetPasswordProps, SignIn, SignInButton, SignInButtonProps, SignInProps, SignOutButton, SignOutButtonProps, SignUp, SignUpButton, SignUpButtonProps, SignUpProps, SignedIn, SignedOut, UserButton, UserButtonProps, UserProfileModal, UserProfileModalProps, VerifyEmail, VerifyEmailProps } from './components.cjs';
 export { ForgotPasswordForm, ForgotPasswordFormProps, ResetPasswordForm, ResetPasswordFormProps, SignInForm, SignInFormProps, SignUpForm, SignUpFormProps, VerifyEmailStatus, VerifyEmailStatusProps } from './forms.cjs';
-export { AuthBranding, AuthContainer, AuthContainerProps, AuthDivider, AuthDividerProps, AuthEmailVerificationStep, AuthEmailVerificationStepProps, AuthErrorBanner, AuthErrorBannerProps, AuthFormField, AuthFormFieldProps, AuthHeader, AuthHeaderProps, AuthLink, AuthLinkProps, AuthOAuthButton, AuthOAuthButtonProps, AuthOAuthProviders, AuthOAuthProvidersProps, AuthPasswordField, AuthPasswordFieldProps, AuthPasswordStrengthIndicator, AuthPasswordStrengthIndicatorProps, AuthResetPasswordVerificationStep, AuthResetPasswordVerificationStepProps, AuthSubmitButton, AuthSubmitButtonProps, AuthVerificationCodeInput, AuthVerificationCodeInputProps } from './atoms.cjs';
+export { AuthBranding, AuthContainer, AuthContainerProps, AuthDivider, AuthDividerProps, AuthEmailVerificationStep, AuthErrorBanner, AuthErrorBannerProps, AuthFormField, AuthFormFieldProps, AuthHeader, AuthHeaderProps, AuthLink, AuthLinkProps, AuthOAuthButton, AuthOAuthButtonProps, AuthOAuthProviders, AuthOAuthProvidersProps, AuthPasswordField, AuthPasswordFieldProps, AuthPasswordStrengthIndicator, AuthPasswordStrengthIndicatorProps, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthSubmitButtonProps, AuthVerificationCodeInput, AuthVerificationCodeInputProps } from './atoms.cjs';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { InsforgeUser, InsforgeContextValue, OAuthProvider } from '@insforge/shared';
-export { InsforgeContextValue, InsforgeUser, OAuthProvider } from '@insforge/shared';
+export { InsforgeAuthConfig, InsforgeAuthMethods, InsforgeAuthState, InsforgeContextValue, InsforgeUser, OAuthProvider } from '@insforge/shared';
 import { InsForgeClient } from '@insforge/sdk';
 export { useAuth, usePublicAuthConfig, useUser } from './hooks.cjs';
 export { checkPasswordStrength, createPasswordSchema, emailSchema, passwordSchema, resolveAuthPath, resolveAuthUrl, validateEmail, validatePassword } from './lib.cjs';
@@ -51,6 +51,15 @@ interface InsforgeProviderProps {
  * Uses singleton InsforgeManager to manage state across packages.
  * Context only subscribes to Manager and triggers React re-renders.
  *
+ * Architecture (pattern learned from Clerk):
+ * - InsforgeMethodsContext: Stable method references (NEVER change)
+ * - InsforgeAuthStateContext: Reactive auth state (changes on sign in/out)
+ * - InsforgeConfigContext: Static configuration values
+ * - InsforgeContext: Combined context for backward compatibility
+ *
+ * This architecture prevents useEffect re-runs when auth state changes,
+ * solving the "duplicate request" bug in components like VerifyEmail.
+ *
  * @example
  * ```tsx
  * // Basic usage (React/Vite)

package/dist/index.d.ts

@@ -1,10 +1,10 @@
 export { ConditionalProps, ForgotPassword, ForgotPasswordProps, Protect, ProtectProps, ResetPassword, ResetPasswordProps, SignIn, SignInButton, SignInButtonProps, SignInProps, SignOutButton, SignOutButtonProps, SignUp, SignUpButton, SignUpButtonProps, SignUpProps, SignedIn, SignedOut, UserButton, UserButtonProps, UserProfileModal, UserProfileModalProps, VerifyEmail, VerifyEmailProps } from './components.js';
 export { ForgotPasswordForm, ForgotPasswordFormProps, ResetPasswordForm, ResetPasswordFormProps, SignInForm, SignInFormProps, SignUpForm, SignUpFormProps, VerifyEmailStatus, VerifyEmailStatusProps } from './forms.js';
-export { AuthBranding, AuthContainer, AuthContainerProps, AuthDivider, AuthDividerProps, AuthEmailVerificationStep, AuthEmailVerificationStepProps, AuthErrorBanner, AuthErrorBannerProps, AuthFormField, AuthFormFieldProps, AuthHeader, AuthHeaderProps, AuthLink, AuthLinkProps, AuthOAuthButton, AuthOAuthButtonProps, AuthOAuthProviders, AuthOAuthProvidersProps, AuthPasswordField, AuthPasswordFieldProps, AuthPasswordStrengthIndicator, AuthPasswordStrengthIndicatorProps, AuthResetPasswordVerificationStep, AuthResetPasswordVerificationStepProps, AuthSubmitButton, AuthSubmitButtonProps, AuthVerificationCodeInput, AuthVerificationCodeInputProps } from './atoms.js';
+export { AuthBranding, AuthContainer, AuthContainerProps, AuthDivider, AuthDividerProps, AuthEmailVerificationStep, AuthErrorBanner, AuthErrorBannerProps, AuthFormField, AuthFormFieldProps, AuthHeader, AuthHeaderProps, AuthLink, AuthLinkProps, AuthOAuthButton, AuthOAuthButtonProps, AuthOAuthProviders, AuthOAuthProvidersProps, AuthPasswordField, AuthPasswordFieldProps, AuthPasswordStrengthIndicator, AuthPasswordStrengthIndicatorProps, AuthResetPasswordVerificationStep, AuthSubmitButton, AuthSubmitButtonProps, AuthVerificationCodeInput, AuthVerificationCodeInputProps } from './atoms.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 import { InsforgeUser, InsforgeContextValue, OAuthProvider } from '@insforge/shared';
-export { InsforgeContextValue, InsforgeUser, OAuthProvider } from '@insforge/shared';
+export { InsforgeAuthConfig, InsforgeAuthMethods, InsforgeAuthState, InsforgeContextValue, InsforgeUser, OAuthProvider } from '@insforge/shared';
 import { InsForgeClient } from '@insforge/sdk';
 export { useAuth, usePublicAuthConfig, useUser } from './hooks.js';
 export { checkPasswordStrength, createPasswordSchema, emailSchema, passwordSchema, resolveAuthPath, resolveAuthUrl, validateEmail, validatePassword } from './lib.js';
@@ -51,6 +51,15 @@ interface InsforgeProviderProps {
  * Uses singleton InsforgeManager to manage state across packages.
  * Context only subscribes to Manager and triggers React re-renders.
  *
+ * Architecture (pattern learned from Clerk):
+ * - InsforgeMethodsContext: Stable method references (NEVER change)
+ * - InsforgeAuthStateContext: Reactive auth state (changes on sign in/out)
+ * - InsforgeConfigContext: Static configuration values
+ * - InsforgeContext: Combined context for backward compatibility
+ *
+ * This architecture prevents useEffect re-runs when auth state changes,
+ * solving the "duplicate request" bug in components like VerifyEmail.
+ *
  * @example
  * ```tsx
  * // Basic usage (React/Vite)

package/dist/index.js

@@ -15,7 +15,7 @@ if (typeof document !== 'undefined' && typeof window !== 'undefined') {
 import * as React2 from 'react';
 import { createContext, forwardRef, useContext, useState, useMemo, useEffect, useRef, useCallback, isValidElement, cloneElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { InsforgeContext } from '@insforge/shared/react';
+import { InsforgeMethodsContext, InsforgeConfigContext, InsforgeAuthStateContext, InsforgeContext } from '@insforge/shared/react';
 import { AlertTriangle, Check, EyeOff, Eye, Loader2, CircleCheck, X, User, LogOut } from 'lucide-react';
 import { z } from 'zod';
 import { createPortal } from 'react-dom';
@@ -545,8 +545,8 @@ var InsforgeManager = class _InsforgeManager {
     this.listeners.forEach((listener) => listener(state));
   }
   // Load auth state
-  // This loads the FULL user data from SDK (including complete profile)
-  // Called after hydration to get complete user information beyond what's in cookies
+  // Gets session and user data from getCurrentSession()
+  // Called after hydration to restore authentication state
   async loadAuthState() {
     try {
       const {
@@ -570,30 +570,18 @@ var InsforgeManager = class _InsforgeManager {
           }
         }
       }
-      const userResult = await this.sdk.auth.getCurrentUser();
-      if (userResult.data) {
-        const userData = {
-          id: userResult.data.user.id,
-          email: userResult.data.user.email,
-          profile: userResult.data.user.profile
-        };
-        this.user = userData;
-        if (this.config.onAuthChange) {
-          this.config.onAuthChange(userData);
-        }
-        this.isLoaded = true;
-        this.notifyListeners();
-        return { success: true };
-      } else {
-        this.user = null;
-        if (this.config.onAuthChange) {
-          this.config.onAuthChange(null);
-        }
-        this.isLoaded = true;
-        this.notifyListeners();
-        const errorMessage = userResult.error?.message ?? "failed_to_get_user";
-        return { success: false, error: errorMessage };
+      const userData = {
+        id: session.user.id,
+        email: session.user.email,
+        profile: session.user.profile
+      };
+      this.user = userData;
+      if (this.config.onAuthChange) {
+        this.config.onAuthChange(userData);
       }
+      this.isLoaded = true;
+      this.notifyListeners();
+      return { success: true };
     } catch (error) {
       this.user = null;
       if (this.config.onAuthChange) {
@@ -650,8 +638,12 @@ var InsforgeManager = class _InsforgeManager {
       };
     }
   }
-  async signUp(email, password) {
-    const sdkResult = await this.sdk.auth.signUp({ email, password });
+  async signUp(email, password, options) {
+    const sdkResult = await this.sdk.auth.signUp({
+      email,
+      password,
+      options
+    });
     if (sdkResult.data) {
       if (sdkResult.data.requireEmailVerification) {
         return sdkResult.data;
@@ -723,8 +715,11 @@ var InsforgeManager = class _InsforgeManager {
   async reloadAuth() {
     return await this.loadAuthState();
   }
-  async sendVerificationEmail(email) {
-    const sdkResult = await this.sdk.auth.sendVerificationEmail({ email });
+  async resendVerificationEmail(email, options) {
+    const sdkResult = await this.sdk.auth.resendVerificationEmail({
+      email,
+      options
+    });
     return sdkResult.data;
   }
   async sendResetPasswordEmail(email) {
@@ -2191,34 +2186,54 @@ function InsforgeProviderCore({
       unsubscribe();
     };
   }, [manager]);
-  const contextValue = useMemo(
+  const stableMethods = useMemo(
     () => ({
-      // State from Manager
-      user: state.user,
-      userId: state.userId,
-      isLoaded: state.isLoaded,
-      isSignedIn: state.isSignedIn,
-      // Methods delegated to Manager
       setUser: (user) => manager.setUser(user),
       signIn: (email, password) => manager.signIn(email, password),
-      signUp: (email, password) => manager.signUp(email, password),
+      signUp: (email, password, options) => manager.signUp(email, password, options),
       signOut: () => manager.signOut(),
       updateUser: (data) => manager.updateUser(data),
       reloadAuth: () => manager.reloadAuth(),
-      sendVerificationEmail: (email) => manager.sendVerificationEmail(email),
+      resendVerificationEmail: (email, options) => manager.resendVerificationEmail(email, options),
       sendResetPasswordEmail: (email) => manager.sendResetPasswordEmail(email),
       resetPassword: (token2, newPassword) => manager.resetPassword(token2, newPassword),
       verifyEmail: (otp, email) => manager.verifyEmail(otp, email),
       exchangeResetPasswordToken: (email, code) => manager.exchangeResetPasswordToken(email, code),
       loginWithOAuth: (provider, redirectTo) => manager.loginWithOAuth(provider, redirectTo),
-      getPublicAuthConfig: () => manager.getPublicAuthConfig(),
-      // Config
+      getPublicAuthConfig: () => manager.getPublicAuthConfig()
+    }),
+    [manager]
+    // Only depends on manager (stable)
+  );
+  const stableConfig = useMemo(
+    () => ({
       baseUrl: manager.getConfig().client.getHttpClient().baseUrl,
       afterSignInUrl: manager.getConfig().afterSignInUrl || "/"
     }),
-    [state, manager]
+    [manager]
+    // Only depends on manager (stable)
+  );
+  const authState = useMemo(
+    () => ({
+      user: state.user,
+      userId: state.userId,
+      isLoaded: state.isLoaded,
+      isSignedIn: state.isSignedIn
+    }),
+    [state.user, state.userId, state.isLoaded, state.isSignedIn]
+  );
+  const contextValue = useMemo(
+    () => ({
+      // Reactive state
+      ...authState,
+      // Stable methods (references don't change!)
+      ...stableMethods,
+      // Stable config
+      ...stableConfig
+    }),
+    [authState, stableMethods, stableConfig]
   );
-  return /* @__PURE__ */ jsx(InsforgeContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(InsforgeMethodsContext.Provider, { value: stableMethods, children: /* @__PURE__ */ jsx(InsforgeConfigContext.Provider, { value: stableConfig, children: /* @__PURE__ */ jsx(InsforgeAuthStateContext.Provider, { value: authState, children: /* @__PURE__ */ jsx(InsforgeContext.Provider, { value: contextValue, children }) }) }) });
 }
 function InsforgeProvider(props) {
   return /* @__PURE__ */ jsx(StyleProvider, { children: /* @__PURE__ */ jsx(NavigationProvider, { adapter: BrowserNavigationAdapter, children: /* @__PURE__ */ jsx(InsforgeProviderCore, { ...props }) }) });
@@ -2238,7 +2253,7 @@ function useInsforge() {
       signOut: () => Promise.resolve(),
       updateUser: () => Promise.resolve({ error: "SSR mode" }),
       reloadAuth: () => Promise.resolve({ success: false, error: "SSR mode" }),
-      sendVerificationEmail: () => Promise.resolve(null),
+      resendVerificationEmail: () => Promise.resolve(null),
       sendResetPasswordEmail: () => Promise.resolve(null),
       resetPassword: () => Promise.resolve(null),
       verifyEmail: () => Promise.resolve({ error: "SSR mode" }),
@@ -3831,7 +3846,7 @@ function AuthEmailVerificationStep({
   onVerifyCode,
   emailSent = false
 }) {
-  const { sendVerificationEmail } = useInsforge();
+  const { resendVerificationEmail } = useInsforge();
   const [resendDisabled, setResendDisabled] = useState(emailSent ? true : false);
   const [resendCountdown, setResendCountdown] = useState(emailSent ? 60 : 0);
   const [isSending, setIsSending] = useState(false);
@@ -3858,7 +3873,7 @@ function AuthEmailVerificationStep({
     setResendCountdown(60);
     setIsSending(true);
     try {
-      await sendVerificationEmail(email);
+      await resendVerificationEmail(email);
     } catch {
       setResendDisabled(false);
       setResendCountdown(0);
@@ -4389,7 +4404,7 @@ function checkPasswordStrength(password) {
   }
   return { score, feedback };
 }
-function SignUp({ onError, ...uiProps }) {
+function SignUp({ onError, emailRedirectTo, ...uiProps }) {
   const { signUp, verifyEmail, loginWithOAuth } = useInsforge();
   const { authConfig } = usePublicAuthConfig();
   const [email, setEmail] = useState("");
@@ -4431,7 +4446,7 @@ function SignUp({ onError, ...uiProps }) {
       return;
     }
     try {
-      const result = await signUp(emailValidation.data, password);
+      const result = await signUp(emailValidation.data, password, { emailRedirectTo });
       if ("error" in result) {
         throw new Error(result.error);
       }