@insforge/nextjs 0.7.0 → 0.7.2

package/dist/index.mjs

@@ -1,5 +1,19 @@
 "use client";
 
+// Auto-inject InsForge styles
+if (typeof document !== 'undefined' && typeof window !== 'undefined') {
+  const styleId = 'insforge-nextjs-styles';
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = "/**\n * InsForge Next.js Component Library Styles\n * A standalone CSS file for auth components - no Tailwind required!\n */\n\n/* Font Face Declaration */\n@font-face {\n  font-family: 'Manrope';\n  src: url('./fonts/Manrope-VariableFont_wght.ttf') format('truetype');\n  font-weight: 100 900;\n  font-style: normal;\n  font-display: swap;\n}\n\n/* CSS Variables */\n:root {\n  --font-manrope: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n/* Reset and Base Styles */\n.insforge-auth-container * {\n  box-sizing: border-box;\n}\n\n/* Main Container - App handles layout, we just provide the card */\n.insforge-auth-container {\n  width: 100%;\n  max-width: 400px;\n  background: white;\n}\n\n.insforge-branding {\n  background: #FAFAFA;\n  padding: 8px 8px 16px 8px;\n  display: flex;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 4px;\n}\n\n.insforge-branding-text {\n  color: #000;\n  font-family: var(--font-manrope);\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: normal;\n}\n\n/* Form Card */\n.insforge-auth-card {\n  width: 100%;\n  border-radius: 12px;\n  overflow: hidden;\n  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.25);\n}\n\n.insforge-auth-content {\n  padding: 24px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: 24px;\n}\n\n/* Header */\n.insforge-auth-header {\n  display: flex;\n  flex-direction: column;\n  justify-content: start;\n  align-items: start;\n  gap: 8px;\n}\n\n.insforge-auth-title {\n  color: #000;\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 32px; /* 133.333% */\n}\n\n.insforge-auth-subtitle {\n  color: #828282;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px; /* 171.429% */\n}\n\n/* Error Banner */\n.insforge-error-banner {\n  display: flex;\n  padding: 8px 8px 8px 12px;\n  margin-bottom: 16px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 4px;\n  border: 2px solid #DC2626;\n  background: #FEF2F2;\n  color: #DC2626;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px; /* 142.857% */\n}\n\n.insforge-error-icon {\n  color: #EF4444;\n  flex-shrink: 0;\n  width: 24px;\n  height: 24px;\n}\n\n/* Form Elements */\n.insforge-form {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: 24px;\n}\n\n.insforge-form-group {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: stretch;\n  gap: 4px;\n}\n\n.insforge-form-label-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.insforge-form-label {\n  color: #000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n.insforge-form-link {\n  color: #828282;\n  text-align: right;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n.insforge-form-link:hover {\n  color: #828282;\n  text-decoration: underline;\n}\n\n/* Input Container for Password (with icon) */\n.insforge-input-wrapper {\n  position: relative;\n}\n\n.insforge-input {\n  width: 100%;\n  display: flex;\n  padding: 8px 8px 10px 12px;\n  align-items: center;\n  gap: 8px;\n  align-self: stretch;\n  border-radius: 4px;\n  border: 1px solid #BCBCBC;\n  background: #FFF;\n  font-family: Inter;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n.insforge-input::placeholder {\n  color: #A6A6A6;\n}\n\n.insforge-input:focus {\n  outline: none;\n}\n\n.insforge-input-with-icon {\n  padding-right: 3rem;\n}\n\n.insforge-input-icon-btn {\n  position: absolute;\n  right: 8px;\n  top: 50%;\n  transform: translateY(-50%);\n  background: transparent;\n  border: none;\n  color: #A6A6A6;\n  cursor: pointer;\n  transition: color 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.insforge-input-icon-btn:hover {\n  color: #6b7280;\n}\n\n/* Primary Button */\n.insforge-btn-primary {\n  border-radius: 4px;\n  background: #000;\n  width: 100%;\n  display: flex;\n  margin: 16px 0 0 0;\n  padding: 8px 16px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  align-self: stretch;\n  color: #FFF;\n  font-family: Manrope;\n  font-size: 16px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n  border: none;\n  cursor: pointer;\n}\n\n.insforge-btn-primary:hover {\n  background: #303030;\n}\n\n.insforge-btn-primary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n.insforge-btn-primary .insforge-btn-loader {\n  display: none;\n  animation: insforge-spin 1s linear infinite;\n}\n\n.insforge-btn-primary[data-loading] .insforge-btn-loader {\n  display: block;\n}\n\n.insforge-btn-primary .insforge-btn-check {\n  display: none;\n}\n\n.insforge-btn-primary[data-confirmed] .insforge-btn-check {\n  display: block;\n}\n\n/* Text Link Section */\n.insforge-text-center {\n  text-align: center;\n  color: #828282;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n.insforge-link-primary {\n  color: #000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n}\n\n/* Divider */\n.insforge-divider {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n  align-self: stretch;\n}\n\n.insforge-divider::before,\n.insforge-divider::after {\n  content: '';\n  flex: 1;\n  height: 1px;\n  background: #C6C6C6;\n}\n\n.insforge-divider-text {\n  color: #C6C6C6;\n  font-family: Manrope;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: normal;\n}\n\n/* OAuth Section */\n.insforge-oauth-container {\n  display: grid;\n  gap: 12px;\n  width: 100%;\n}\n\n/* ============================================================================\n   SMART OAUTH GRID LAYOUT SYSTEM\n   Pattern: 1→1x1, 2→1x2, 3→1x3, 4→2x2, 5+→auto (3 per row, last row centered)\n   ============================================================================ */\n\n/* 1 provider: single column, full width - displays \"Continue with Provider\" */\n.insforge-oauth-container[data-provider-count=\"1\"] {\n  grid-template-columns: 1fr;\n}\n\n/* 2 providers: two columns - displays \"Provider\" */\n.insforge-oauth-container[data-provider-count=\"2\"] {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n/* 3 providers: three columns - icon only */\n.insforge-oauth-container[data-provider-count=\"3\"] {\n  grid-template-columns: repeat(3, 1fr);\n}\n\n/* 4 providers: 2x2 grid - displays \"Provider\" */\n.insforge-oauth-container[data-provider-count=\"4\"] {\n  grid-template-columns: repeat(2, 1fr);\n}\n\n/* 5+ providers: Universal 6-column grid system\n   - Grid columns managed by OAuthProviderList component via inline styles\n   - This provides precise control over button positioning */\n.insforge-oauth-container:not([data-provider-count=\"1\"]):not([data-provider-count=\"2\"]):not([data-provider-count=\"3\"]):not([data-provider-count=\"4\"]) {\n  grid-template-columns: repeat(6, 1fr);\n}\n\n/* OAuth Button */\n.insforge-oauth-btn {\n  display: flex;\n  width: 100%;\n  height: 36px;\n  padding: 8px 12px;\n  flex-direction: row;\n  justify-content: center;\n  align-items: center;\n  gap: 12px;\n  border-radius: 6px;\n  border: 1px solid #E4E4E7;\n  background: #FFF;\n  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.10);\n  color: #09090B;\n  text-align: center;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 20px;\n  cursor: pointer;\n  transition: all 0.2s ease;\n}\n\n/* Full mode: show icon + \"Continue with Provider\" */\n.insforge-oauth-btn[data-display-mode=\"full\"] {\n  justify-content: center;\n}\n\n/* Short mode: show icon + \"Provider\" */\n.insforge-oauth-btn[data-display-mode=\"short\"] {\n  justify-content: center;\n  padding: 8px;\n  gap: 8px;\n}\n\n/* Icon only mode: show only icon */\n.insforge-oauth-btn[data-display-mode=\"icon\"] {\n  justify-content: center;\n  gap: 0;\n}\n\n.insforge-oauth-btn[data-display-mode=\"icon\"] .insforge-oauth-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.insforge-oauth-btn:hover {\n  background: #f9fafb;\n  border-color: #9ca3af;\n}\n\n.insforge-oauth-btn:disabled {\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n.insforge-oauth-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n}\n\n.insforge-oauth-loader {\n  display: none;\n  animation: insforge-spin 1s linear infinite;\n}\n\n.insforge-oauth-btn[data-loading] .insforge-oauth-icon {\n  display: none;\n}\n\n.insforge-oauth-btn[data-loading] .insforge-oauth-loader {\n  display: block;\n}\n\n/* Spin Animation */\n@keyframes insforge-spin {\n  from {\n    transform: rotate(0deg);\n  }\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* UserButton Styles */\n.insforge-user-button-container {\n  position: relative;\n  display: inline-block;\n}\n\n.insforge-user-button {\n  padding: 0.25rem;\n  background: transparent;\n  border: none;\n  border-radius: 9999px;\n  cursor: pointer;\n  transition: all 0.2s;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 0.5rem;\n}\n\n.insforge-user-button:hover {\n  background: rgba(0, 0, 0, 0.05);\n}\n\n.insforge-user-button-detailed {\n  border-radius: 0.5rem;\n  padding: 0.5rem;\n}\n\n.insforge-user-button-info {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 0.125rem;\n}\n\n.insforge-user-button-name {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: #111827;\n  line-height: 1.25rem;\n  text-align: left;\n}\n\n.insforge-user-button-email {\n  font-size: 0.75rem;\n  color: #6b7280;\n  line-height: 1rem;\n  text-align: left;\n}\n\n.insforge-user-avatar {\n  width: 2.5rem;\n  height: 2.5rem;\n  border-radius: 9999px;\n  object-fit: cover;\n}\n\n.insforge-user-avatar-placeholder {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 2.5rem;\n  height: 2.5rem;\n  background: #3b82f6;\n  color: white;\n  font-weight: 600;\n  font-size: 0.875rem;\n  border-radius: 9999px;\n}\n\n.insforge-user-dropdown {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  margin-top: 0.5rem;\n  min-width: 10rem;\n  background: white;\n  border: 1px solid #e5e7eb;\n  border-radius: 0.5rem;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\n  z-index: 50;\n  overflow: hidden;\n  padding: 0.25rem;\n}\n\n.insforge-sign-out-button {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 0.5rem;\n  width: 100%;\n  padding: 0.5rem 0.75rem;\n  font-size: 0.875rem;\n  font-family: inherit;\n  color: #dc2626;\n  background: transparent;\n  border: none;\n  border-radius: 0.375rem;\n  cursor: pointer;\n  transition: background 0.2s;\n  text-align: left;\n}\n\n.insforge-sign-out-button:hover {\n  background: #fef2f2;\n}\n\n/* Loading State */\n.insforge-loading {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  padding: 2rem;\n  color: #6b7280;\n  font-size: 0.875rem;\n}\n\n/* Password Strength Indicator */\n.insforge-password-strength {\n  display: flex;\n  flex-direction: column;\n  gap: 0.25rem;\n  margin-top: 0.5rem;\n}\n\n.insforge-password-requirement {\n  height: 1.5rem;\n  display: flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.insforge-password-check {\n  width: 1.25rem;\n  height: 1.25rem;\n  border-radius: 9999px;\n  display: flex;\n  border-width: 2px;\n  border-style: solid;\n  align-items: center;\n  justify-content: center;\n  transition: all 0.2s ease-in-out;\n  background-color: transparent;\n  border-color: #a3a3a3;\n  flex-shrink: 0;\n}\n\n.insforge-password-check-valid {\n  background-color: #22c55e;\n  border-color: transparent;\n}\n\n.insforge-password-check-icon {\n  color: #fff;\n  stroke-width: 3;\n}\n\n.insforge-password-requirement-label {\n  color:#000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n}\n\n/* Verification Code Input */\n.insforge-verification-code-container {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n  gap: 24px;\n}\n\n.insforge-verification-instructions {\n  color: #525252;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 20px;\n}\n\n.insforge-verification-instructions > span {\n  color: #000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 20px;\n}\n\n.insforge-verification-code-inputs {\n  display: flex;\n  flex-direction: row;\n  gap: 12px;\n  justify-content: center;\n  align-items: center;\n}\n\n.insforge-verification-code-input {\n  width: 100%;\n  height: 48px;\n  padding: 8px 12px;\n  border-radius: 4px;\n  border: 1px solid #E0E0E0;\n  background: #FFF;\n  text-align: center;\n  font-size: 16px;\n  font-style: normal;\n  line-height: 20px;\n  font-weight: 600;\n  font-family: var(--font-manrope);\n  color: #000;\n  transition: all 0.2s ease-in-out;\n  outline: none;\n}\n\n.insforge-verification-code-input:focus {\n  border-color: #000;\n  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);\n}\n\n.insforge-verification-code-input:disabled {\n  background-color: #F5F5F5;\n  cursor: not-allowed;\n  opacity: 0.6;\n}\n\n/* Verification Instructions */\n.insforge-verification-instructions {\n  color: #4F4F4F;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n  margin-bottom: 8px;\n}\n\n.insforge-verification-email {\n  color: #000;\n  font-weight: 600;\n}\n\n.insforge-resend-code {\n  color: #525252;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 24px;\n  text-align: center;\n}\n\n.insforge-resend-link {\n  color: #000;\n  font-family: Inter;\n  font-size: 14px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 24px;\n}\n\n.insforge-resend-link:hover {\n  text-decoration: underline;\n}\n\n.insforge-resend-link:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n\n/* Responsive adjustments */\n@media (max-width: 640px) {\n  .insforge-auth-card {\n    padding: 2rem 1.5rem;\n  }\n\n  .insforge-auth-title {\n    font-size: 1.75rem;\n  }\n\n  .insforge-verification-code-container {\n    gap: 8px;\n  }\n\n  .insforge-verification-code-input {\n    width: 40px;\n    height: 48px;\n    font-size: 20px;\n  }\n}\n\n";
+    if (document.head) {
+      document.head.appendChild(style);
+    }
+  }
+}
+
+
 // src/provider/InsforgeProvider.tsx
 import { createContext, useContext, useEffect, useState, useCallback, useRef } from "react";
 import { createClient } from "@insforge/sdk";
@@ -59,9 +73,8 @@ function InsforgeProvider({
             const userData = {
               id: cachedData.user.id,
               email: cachedData.user.email,
-              createdAt: cachedData.user.createdAt || (/* @__PURE__ */ new Date()).toISOString(),
-              updatedAt: cachedData.user.updatedAt || (/* @__PURE__ */ new Date()).toISOString(),
-              ...cachedData.profile
+              name: cachedData.profile?.nickname || "",
+              avatarUrl: cachedData.profile?.avatar_url || ""
             };
             setUser(userData);
             setSession({
@@ -88,9 +101,8 @@ function InsforgeProvider({
         const userData = {
           id: userResult.data.user.id,
           email: userResult.data.user.email,
-          createdAt: userResult.data.user.createdAt || (/* @__PURE__ */ new Date()).toISOString(),
-          updatedAt: userResult.data.user.updatedAt || (/* @__PURE__ */ new Date()).toISOString(),
-          ...userResult.data.profile
+          name: userResult.data.profile?.nickname || "",
+          avatarUrl: userResult.data.profile?.avatar_url || ""
         };
         setUser(userData);
         setSession({
@@ -141,120 +153,90 @@ function InsforgeProvider({
       }
     };
   }, []);
+  const handleAuthSuccess = useCallback(
+    async (authToken, fallbackUser) => {
+      const userResult = await insforge.auth.getCurrentUser();
+      if (userResult.data) {
+        const userData = {
+          id: userResult.data.user.id,
+          email: userResult.data.user.email,
+          name: userResult.data.profile?.nickname || "",
+          avatarUrl: userResult.data.profile?.avatar_url || ""
+        };
+        const sessionData = {
+          userId: userResult.data.user.id,
+          token: authToken,
+          expiresAt: "",
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        };
+        setUser(userData);
+        setSession(sessionData);
+        localStorage.setItem("insforge-user-profile", JSON.stringify(userResult.data));
+        if (onAuthChange) {
+          onAuthChange(userData);
+        }
+        try {
+          await syncTokenToCookie(authToken);
+        } catch (error) {
+        }
+      } else if (fallbackUser) {
+        const userData = {
+          id: fallbackUser.id || "",
+          email: fallbackUser.email || "",
+          name: fallbackUser.name || "",
+          avatarUrl: ""
+        };
+        setUser(userData);
+        setSession({
+          userId: fallbackUser.id || "",
+          token: authToken,
+          expiresAt: "",
+          createdAt: (/* @__PURE__ */ new Date()).toISOString()
+        });
+        if (onAuthChange) {
+          onAuthChange(userData);
+        }
+      }
+    },
+    [insforge, onAuthChange]
+  );
   const signIn = useCallback(
     async (email, password) => {
       const sdkResult = await insforge.auth.signInWithPassword({ email, password });
       if (sdkResult.data) {
-        const userResult = await insforge.auth.getCurrentUser();
-        if (userResult.data) {
-          const userData = {
-            id: userResult.data.user.id,
-            email: userResult.data.user.email,
-            name: userResult.data.user.name || void 0,
-            createdAt: userResult.data.user.createdAt,
-            updatedAt: userResult.data.user.updatedAt,
-            ...userResult.data.profile
-            // Include profile fields (nickname, avatar_url, etc.)
-          };
-          const sessionData = {
-            userId: userResult.data.user.id,
-            token: sdkResult.data.accessToken || "",
-            expiresAt: "",
-            createdAt: (/* @__PURE__ */ new Date()).toISOString()
-          };
-          setUser(userData);
-          setSession(sessionData);
-          localStorage.setItem("insforge-user-profile", JSON.stringify(userResult.data));
-          if (onAuthChange) {
-            onAuthChange(userData);
-          }
-          try {
-            await syncTokenToCookie(sdkResult.data.accessToken || "");
-          } catch (error) {
-            console.error("Please add /api/auth route to your server to sync token to cookie:", error);
-          }
-        } else {
-          const userData = {
+        await handleAuthSuccess(
+          sdkResult.data.accessToken || "",
+          sdkResult.data.user ? {
             id: sdkResult.data.user.id,
             email: sdkResult.data.user.email,
-            name: sdkResult.data.user.name || void 0,
-            createdAt: sdkResult.data.user.createdAt,
-            updatedAt: sdkResult.data.user.updatedAt
-          };
-          setUser(userData);
-          setSession({
-            userId: sdkResult.data.user.id,
-            token: sdkResult.data.accessToken || "",
-            expiresAt: "",
-            createdAt: (/* @__PURE__ */ new Date()).toISOString()
-          });
-          if (onAuthChange) {
-            onAuthChange(userData);
-          }
-        }
+            name: sdkResult.data.user.name
+          } : void 0
+        );
       } else {
         const errorMessage = sdkResult.error?.message || "Invalid email or password";
         throw new Error(errorMessage);
       }
     },
-    [insforge, onAuthChange]
+    [insforge, handleAuthSuccess]
   );
   const signUp = useCallback(
     async (email, password) => {
       const sdkResult = await insforge.auth.signUp({ email, password });
       if (sdkResult.data) {
-        const userResult = await insforge.auth.getCurrentUser();
-        if (userResult.data) {
-          const userData = {
-            id: userResult.data.user.id,
-            email: userResult.data.user.email,
-            name: userResult.data.user.name || void 0,
-            createdAt: userResult.data.user.createdAt,
-            updatedAt: userResult.data.user.updatedAt,
-            ...userResult.data.profile
-            // Include profile fields (nickname, avatar_url, etc.)
-          };
-          const sessionData = {
-            userId: userResult.data.user.id,
-            token: sdkResult.data.accessToken || "",
-            expiresAt: "",
-            createdAt: (/* @__PURE__ */ new Date()).toISOString()
-          };
-          setUser(userData);
-          setSession(sessionData);
-          localStorage.setItem("insforge-user-profile", JSON.stringify(userResult.data));
-          if (onAuthChange) {
-            onAuthChange(userData);
-          }
-          try {
-            await syncTokenToCookie(sdkResult.data.accessToken || "");
-          } catch (error) {
-          }
-        } else {
-          const userData = {
+        await handleAuthSuccess(
+          sdkResult.data.accessToken || "",
+          sdkResult.data.user ? {
             id: sdkResult.data.user.id,
             email: sdkResult.data.user.email,
-            name: sdkResult.data.user.name || void 0,
-            createdAt: sdkResult.data.user.createdAt,
-            updatedAt: sdkResult.data.user.updatedAt
-          };
-          setUser(userData);
-          setSession({
-            userId: sdkResult.data.user.id,
-            token: sdkResult.data.accessToken || "",
-            expiresAt: "",
-            createdAt: (/* @__PURE__ */ new Date()).toISOString()
-          });
-          if (onAuthChange) {
-            onAuthChange(userData);
-          }
-        }
+            name: sdkResult.data.user.name
+          } : void 0
+        );
       } else {
         const errorMessage = sdkResult.error?.message || "Sign up failed";
         throw new Error(errorMessage);
       }
     },
-    [insforge, onAuthChange]
+    [insforge, handleAuthSuccess]
   );
   const signOut = useCallback(async () => {
     await insforge.auth.signOut();
@@ -273,7 +255,10 @@ function InsforgeProvider({
   const updateUser = useCallback(
     async (data) => {
       if (!user) throw new Error("No user signed in");
-      const result = await insforge.auth.setProfile(data);
+      const result = await insforge.auth.setProfile({
+        nickname: data.name || "",
+        avatar_url: data.avatarUrl || ""
+      });
       if (result.data) {
         const updatedUser = { ...user, ...result.data };
         setUser(updatedUser);
@@ -336,8 +321,8 @@ function useSession() {
 }
 
 // src/components/SignIn.tsx
-import { useState as useState4 } from "react";
-import { createClient as createClient3 } from "@insforge/sdk";
+import { useState as useState5 } from "react";
+import { createClient as createClient4 } from "@insforge/sdk";
 
 // src/hooks/useOAuthProviders.ts
 import { useState as useState2, useEffect as useEffect2 } from "react";
@@ -357,8 +342,8 @@ function useOAuthProviders() {
           console.warn("[useOAuthProviders] Failed to fetch OAuth providers:", error);
           setProviders([]);
         } else if (data) {
-          const configuredProviders = data.filter((p) => p.isConfigured).map((p) => p.provider);
-          setProviders(configuredProviders);
+          const providerNames = data.map((p) => p.provider);
+          setProviders(providerNames);
         } else {
           setProviders([]);
         }
@@ -379,6 +364,43 @@ function useOAuthProviders() {
   return { providers, isLoaded };
 }
 
+// src/hooks/useEmailAuthConfig.ts
+import { useState as useState3, useEffect as useEffect3 } from "react";
+import { createClient as createClient3 } from "@insforge/sdk";
+function useEmailAuthConfig() {
+  const { baseUrl } = useInsforge();
+  const [config, setConfig] = useState3(null);
+  const [isLoaded, setIsLoaded] = useState3(false);
+  useEffect3(() => {
+    let mounted = true;
+    async function fetchConfig() {
+      try {
+        const insforge = createClient3({ baseUrl });
+        const { data, error } = await insforge.auth.getEmailAuthConfig();
+        if (!mounted) return;
+        if (error) {
+          console.warn("[useEmailAuthConfig] Failed to fetch email auth config:", error);
+          setConfig(null);
+        } else {
+          setConfig(data);
+        }
+        setIsLoaded(true);
+      } catch (error) {
+        console.warn("[useEmailAuthConfig] Unexpected error:", error);
+        if (mounted) {
+          setConfig(null);
+          setIsLoaded(true);
+        }
+      }
+    }
+    fetchConfig();
+    return () => {
+      mounted = false;
+    };
+  }, [baseUrl]);
+  return { config, isLoaded };
+}
+
 // src/components/auth/AuthBranding.tsx
 import Link from "next/link";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
@@ -489,35 +511,59 @@ function AuthFormField({ label, id, className = "", ...props }) {
 }
 
 // src/components/auth/AuthPasswordField.tsx
-import { useState as useState3 } from "react";
+import { useState as useState4 } from "react";
 import { Eye, EyeOff } from "lucide-react";
 
 // src/components/auth/AuthPasswordStrengthIndicator.tsx
 import { Check } from "lucide-react";
 import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
-var requirements = [
-  {
-    label: "At least 1 Uppercase letter",
-    test: (pwd) => /[A-Z]/.test(pwd)
-  },
-  {
-    label: "At least 1 Number",
-    test: (pwd) => /\d/.test(pwd)
-  },
-  {
-    label: "Special character (e.g. !?<>@#$%)",
-    test: (pwd) => /[!@#$%^&*()_+\-=[\]{};\\|,.<>/?]/.test(pwd)
-  },
-  {
-    label: "8 characters or more",
-    test: (pwd) => pwd.length >= 8
+function createRequirements(config) {
+  const requirements = [];
+  const minLength = config.passwordMinLength;
+  const requireUppercase = config.requireUppercase;
+  const requireLowercase = config.requireLowercase;
+  const requireNumber = config.requireNumber;
+  const requireSpecialChar = config.requireSpecialChar;
+  if (requireUppercase) {
+    requirements.push({
+      label: "At least 1 Uppercase letter",
+      test: (pwd) => /[A-Z]/.test(pwd)
+    });
+  }
+  if (requireLowercase) {
+    requirements.push({
+      label: "At least 1 Lowercase letter",
+      test: (pwd) => /[a-z]/.test(pwd)
+    });
   }
-];
-function validatePasswordStrength(password) {
+  if (requireNumber) {
+    requirements.push({
+      label: "At least 1 Number",
+      test: (pwd) => /\d/.test(pwd)
+    });
+  }
+  if (requireSpecialChar) {
+    requirements.push({
+      label: "Special character (e.g. !?<>@#$%)",
+      test: (pwd) => /[!@#$%^&*()_+\-=[\]{};\\|,.<>/?]/.test(pwd)
+    });
+  }
+  requirements.push({
+    label: `${minLength} characters or more`,
+    test: (pwd) => pwd.length >= minLength
+  });
+  return requirements;
+}
+function validatePasswordStrength(password, config) {
   if (!password) return false;
+  const requirements = createRequirements(config);
   return requirements.every((req) => req.test(password));
 }
-function AuthPasswordStrengthIndicator({ password }) {
+function AuthPasswordStrengthIndicator({
+  password,
+  config
+}) {
+  const requirements = createRequirements(config);
   return /* @__PURE__ */ jsx7("div", { className: "insforge-password-strength", children: requirements.map((requirement, index) => {
     const isValid = requirement.test(password);
     return /* @__PURE__ */ jsxs6("div", { className: "insforge-password-requirement", children: [
@@ -539,14 +585,15 @@ function AuthPasswordField({
   label,
   id,
   showStrengthIndicator = false,
+  emailAuthConfig,
   forgotPasswordLink,
   value,
   className = "",
   onFocus,
   ...props
 }) {
-  const [showPassword, setShowPassword] = useState3(false);
-  const [showStrength, setShowStrength] = useState3(false);
+  const [showPassword, setShowPassword] = useState4(false);
+  const [showStrength, setShowStrength] = useState4(false);
   const handleFocus = (e) => {
     if (showStrengthIndicator) {
       setShowStrength(true);
@@ -581,7 +628,13 @@ function AuthPasswordField({
         }
       )
     ] }),
-    showStrengthIndicator && showStrength && /* @__PURE__ */ jsx8(AuthPasswordStrengthIndicator, { password: String(value || "") })
+    showStrengthIndicator && showStrength && /* @__PURE__ */ jsx8(
+      AuthPasswordStrengthIndicator,
+      {
+        password: String(value || ""),
+        config: emailAuthConfig
+      }
+    )
   ] });
 }
 
@@ -968,12 +1021,13 @@ function SignIn({
 }) {
   const { signIn, baseUrl } = useInsforge();
   const { providers: oauthProviders } = useOAuthProviders();
-  const [email, setEmail] = useState4("");
-  const [password, setPassword] = useState4("");
-  const [error, setError] = useState4("");
-  const [loading, setLoading] = useState4(false);
-  const [oauthLoading, setOauthLoading] = useState4(null);
-  const insforge = useState4(() => createClient3({ baseUrl }))[0];
+  const { config: emailAuthConfig } = useEmailAuthConfig();
+  const [email, setEmail] = useState5("");
+  const [password, setPassword] = useState5("");
+  const [error, setError] = useState5("");
+  const [loading, setLoading] = useState5(false);
+  const [oauthLoading, setOauthLoading] = useState5(null);
+  const insforge = useState5(() => createClient4({ baseUrl }))[0];
   async function handleSubmit(e) {
     e.preventDefault();
     setLoading(true);
@@ -1035,7 +1089,15 @@ function SignIn({
           value: password,
           onChange: (e) => setPassword(e.target.value),
           required: true,
-          autoComplete: "current-password"
+          autoComplete: "current-password",
+          emailAuthConfig: emailAuthConfig || {
+            requireEmailVerification: false,
+            passwordMinLength: 6,
+            requireNumber: false,
+            requireLowercase: false,
+            requireUppercase: false,
+            requireSpecialChar: false
+          }
         }
       ),
       /* @__PURE__ */ jsx16(
@@ -1065,8 +1127,8 @@ function SignIn({
 }
 
 // src/components/SignUp.tsx
-import { useState as useState5 } from "react";
-import { createClient as createClient4 } from "@insforge/sdk";
+import { useState as useState6 } from "react";
+import { createClient as createClient5 } from "@insforge/sdk";
 import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
 function SignUp({
   afterSignUpUrl = "/",
@@ -1091,17 +1153,18 @@ function SignUp({
 }) {
   const { signUp, baseUrl } = useInsforge();
   const { providers: oauthProviders } = useOAuthProviders();
-  const [email, setEmail] = useState5("");
-  const [password, setPassword] = useState5("");
-  const [error, setError] = useState5("");
-  const [loading, setLoading] = useState5(false);
-  const [oauthLoading, setOauthLoading] = useState5(null);
-  const insforge = useState5(() => createClient4({ baseUrl }))[0];
+  const { config: emailAuthConfig } = useEmailAuthConfig();
+  const [email, setEmail] = useState6("");
+  const [password, setPassword] = useState6("");
+  const [error, setError] = useState6("");
+  const [loading, setLoading] = useState6(false);
+  const [oauthLoading, setOauthLoading] = useState6(null);
+  const insforge = useState6(() => createClient5({ baseUrl }))[0];
   async function handleCredentialsSubmit(e) {
     e.preventDefault();
     setLoading(true);
     setError("");
-    if (!validatePasswordStrength(password)) {
+    if (emailAuthConfig && !validatePasswordStrength(password, emailAuthConfig)) {
       setError("Password does not meet all requirements");
       setLoading(false);
       return;
@@ -1166,9 +1229,17 @@ function SignUp({
           value: password,
           onChange: (e) => setPassword(e.target.value),
           required: true,
-          minLength: 8,
+          minLength: emailAuthConfig?.passwordMinLength ?? 8,
           autoComplete: "new-password",
-          showStrengthIndicator: true
+          showStrengthIndicator: true,
+          emailAuthConfig: emailAuthConfig || {
+            requireEmailVerification: false,
+            passwordMinLength: 6,
+            requireNumber: false,
+            requireLowercase: false,
+            requireUppercase: false,
+            requireSpecialChar: false
+          }
         }
       ),
       /* @__PURE__ */ jsx17(
@@ -1205,7 +1276,7 @@ function SignUp({
 }
 
 // src/components/UserButton.tsx
-import { useState as useState6, useRef as useRef3, useEffect as useEffect3 } from "react";
+import { useState as useState7, useRef as useRef3, useEffect as useEffect4 } from "react";
 import { LogOut } from "lucide-react";
 import { jsx as jsx18, jsxs as jsxs15 } from "react/jsx-runtime";
 function UserButton({
@@ -1214,9 +1285,9 @@ function UserButton({
   appearance = {}
 }) {
   const { user, signOut } = useInsforge();
-  const [isOpen, setIsOpen] = useState6(false);
+  const [isOpen, setIsOpen] = useState7(false);
   const dropdownRef = useRef3(null);
-  useEffect3(() => {
+  useEffect4(() => {
     function handleClickOutside(event) {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1281,7 +1352,7 @@ function SignedOut({ children }) {
 }
 
 // src/components/Protect.tsx
-import { useEffect as useEffect4 } from "react";
+import { useEffect as useEffect5 } from "react";
 import { useRouter } from "next/navigation";
 import { Fragment as Fragment5, jsx as jsx21 } from "react/jsx-runtime";
 function Protect({
@@ -1292,7 +1363,7 @@ function Protect({
 }) {
   const { isSignedIn, isLoaded, user } = useInsforge();
   const router = useRouter();
-  useEffect4(() => {
+  useEffect5(() => {
     if (isLoaded && !isSignedIn) {
       router.push(redirectTo);
     } else if (isLoaded && isSignedIn && condition && user) {