@insforge/react 1.1.1 → 1.1.2-dev.0

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) {
@@ -2191,14 +2179,8 @@ 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),
@@ -2211,14 +2193,40 @@ function InsforgeProviderCore({
       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 }) }) });