@erikey/react 0.4.36 → 0.5.1

package/dist/ui/style.css

@@ -5,6 +5,34 @@
   --team-3: oklch(0.398 0.07 227.392);
   --team-4: oklch(0.828 0.189 84.429);
   --team-5: oklch(0.769 0.188 70.08);
+  --card: 0 0% 100%;
+  --card-foreground: 240 10% 3.9%;
+  --background: 0 0% 100%;
+  --foreground: 240 10% 3.9%;
+  --muted: 240 4.8% 95.9%;
+  --muted-foreground: 240 3.8% 46.1%;
+  --border: 240 5.9% 90%;
+  --input: 240 5.9% 90%;
+  --ring: 240 5.9% 10%;
+  --primary: 240 5.9% 10%;
+  --primary-foreground: 0 0% 98%;
+  --destructive: 0 84.2% 60.2%;
+  --destructive-foreground: 0 0% 98%;
+}
+.dark {
+  --card: 240 10% 3.9%;
+  --card-foreground: 0 0% 98%;
+  --background: 240 10% 3.9%;
+  --foreground: 0 0% 98%;
+  --muted: 240 3.7% 15.9%;
+  --muted-foreground: 240 5% 64.9%;
+  --border: 240 3.7% 15.9%;
+  --input: 240 3.7% 15.9%;
+  --ring: 240 4.9% 83.9%;
+  --primary: 0 0% 98%;
+  --primary-foreground: 240 5.9% 10%;
+  --destructive: 0 62.8% 30.6%;
+  --destructive-foreground: 0 0% 98%;
 }
 @keyframes enter {
   from {

package/dist/ui/style.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/style.css"],"sourcesContent":["/* Team color variables - users can override these in their own CSS */\n:root {\n\t--team-1: oklch(0.646 0.222 41.116);\n\t--team-2: oklch(0.6 0.118 184.704);\n\t--team-3: oklch(0.398 0.07 227.392);\n\t--team-4: oklch(0.828 0.189 84.429);\n\t--team-5: oklch(0.769 0.188 70.08);\n}\n\n/*\n * Animation CSS for SDK components\n *\n * These styles are bundled with the SDK to ensure they work regardless of\n * consumer's Tailwind configuration. Uses @layer for cascade control so\n * consumers can override with their own Tailwind utilities if needed.\n *\n * This solves the problem where consumer's Tailwind purges animation classes\n * because they only exist in the SDK's minified bundle.\n */\n\n/* Keyframes for enter/exit animations (from tailwindcss-animate) */\n@keyframes enter {\n\tfrom {\n\t\topacity: var(--tw-enter-opacity, 1);\n\t\ttransform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)\n\t\t\tscale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))\n\t\t\trotate(var(--tw-enter-rotate, 0));\n\t}\n}\n\n@keyframes exit {\n\tto {\n\t\topacity: var(--tw-exit-opacity, 1);\n\t\ttransform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)\n\t\t\tscale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))\n\t\t\trotate(var(--tw-exit-rotate, 0));\n\t}\n}\n\n/* Animation base classes */\n.animate-in {\n\tanimation-name: enter;\n\tanimation-duration: 150ms;\n\t--tw-enter-opacity: initial;\n\t--tw-enter-scale: initial;\n\t--tw-enter-rotate: initial;\n\t--tw-enter-translate-x: initial;\n\t--tw-enter-translate-y: initial;\n}\n\n.animate-out {\n\tanimation-name: exit;\n\tanimation-duration: 150ms;\n\t--tw-exit-opacity: initial;\n\t--tw-exit-scale: initial;\n\t--tw-exit-rotate: initial;\n\t--tw-exit-translate-x: initial;\n\t--tw-exit-translate-y: initial;\n}\n\n/* Opacity variants */\n.fade-in-0 { --tw-enter-opacity: 0; }\n.fade-out-0 { --tw-exit-opacity: 0; }\n\n/* Scale variants */\n.zoom-in-95 { --tw-enter-scale: 0.95; }\n.zoom-out-95 { --tw-exit-scale: 0.95; }\n\n/* Slide variants */\n.slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }\n.slide-in-from-bottom-2 { --tw-enter-translate-y: 0.5rem; }\n.slide-in-from-left-2 { --tw-enter-translate-x: -0.5rem; }\n.slide-in-from-right-2 { --tw-enter-translate-x: 0.5rem; }\n\n/* Data attribute variants for Radix UI components */\n[data-state=\"open\"].animate-in {\n\tanimation-name: enter;\n\tanimation-duration: 150ms;\n}\n\n[data-state=\"closed\"].animate-out {\n\tanimation-name: exit;\n\tanimation-duration: 150ms;\n}\n\n[data-state=\"open\"].fade-in-0,\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=\"open\"] {\n\t--tw-enter-opacity: 0;\n}\n\n[data-state=\"closed\"].fade-out-0,\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=\"closed\"] {\n\t--tw-exit-opacity: 0;\n}\n\n[data-state=\"open\"].zoom-in-95,\n.data-\\[state\\=open\\]\\:zoom-in-95[data-state=\"open\"] {\n\t--tw-enter-scale: 0.95;\n}\n\n[data-state=\"closed\"].zoom-out-95,\n.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=\"closed\"] {\n\t--tw-exit-scale: 0.95;\n}\n\n/* Slide variants with data-side for dropdown positioning */\n[data-side=\"bottom\"].slide-in-from-top-2,\n.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=\"bottom\"] {\n\t--tw-enter-translate-y: -0.5rem;\n}\n\n[data-side=\"top\"].slide-in-from-bottom-2,\n.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=\"top\"] {\n\t--tw-enter-translate-y: 0.5rem;\n}\n\n[data-side=\"left\"].slide-in-from-right-2,\n.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=\"left\"] {\n\t--tw-enter-translate-x: 0.5rem;\n}\n\n[data-side=\"right\"].slide-in-from-left-2,\n.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=\"right\"] {\n\t--tw-enter-translate-x: -0.5rem;\n}\n\n/* Tailwind's data attribute variant syntax support */\n.data-\\[state\\=open\\]\\:animate-in[data-state=\"open\"] {\n\tanimation-name: enter;\n\tanimation-duration: 150ms;\n\t--tw-enter-opacity: initial;\n\t--tw-enter-scale: initial;\n\t--tw-enter-rotate: initial;\n\t--tw-enter-translate-x: initial;\n\t--tw-enter-translate-y: initial;\n}\n\n.data-\\[state\\=closed\\]\\:animate-out[data-state=\"closed\"] {\n\tanimation-name: exit;\n\tanimation-duration: 150ms;\n\t--tw-exit-opacity: initial;\n\t--tw-exit-scale: initial;\n\t--tw-exit-rotate: initial;\n\t--tw-exit-translate-x: initial;\n\t--tw-exit-translate-y: initial;\n}\n"],"mappings":";AACA;AACC,YAAU,MAAM,MAAM,MAAM;AAC5B,YAAU,MAAM,IAAI,MAAM;AAC1B,YAAU,MAAM,MAAM,KAAK;AAC3B,YAAU,MAAM,MAAM,MAAM;AAC5B,YAAU,MAAM,MAAM,MAAM;AAC7B;AAcA,WAAW;AACV;AACC,aAAS,IAAI,kBAAkB,EAAE;AACjC,eAAW,YAAY,IAAI,sBAAsB,EAAE,EAAE,EAAE,IAAI,sBAAsB,EAAE,EAAE,EAAE,GACtF,QAAQ,IAAI,gBAAgB,EAAE,EAAE,EAAE,IAAI,gBAAgB,EAAE,EAAE,EAAE,IAAI,gBAAgB,EAAE,IAClF,OAAO,IAAI,iBAAiB,EAAE;AAChC;AACD;AAEA,WAAW;AACV;AACC,aAAS,IAAI,iBAAiB,EAAE;AAChC,eAAW,YAAY,IAAI,qBAAqB,EAAE,EAAE,EAAE,IAAI,qBAAqB,EAAE,EAAE,EAAE,GACpF,QAAQ,IAAI,eAAe,EAAE,EAAE,EAAE,IAAI,eAAe,EAAE,EAAE,EAAE,IAAI,eAAe,EAAE,IAC/E,OAAO,IAAI,gBAAgB,EAAE;AAC/B;AACD;AAGA,CAAC;AACA,kBAAgB;AAChB,sBAAoB;AACpB,sBAAoB;AACpB,oBAAkB;AAClB,qBAAmB;AACnB,0BAAwB;AACxB,0BAAwB;AACzB;AAEA,CAAC;AACA,kBAAgB;AAChB,sBAAoB;AACpB,qBAAmB;AACnB,mBAAiB;AACjB,oBAAkB;AAClB,yBAAuB;AACvB,yBAAuB;AACxB;AAGA,CAAC;AAAY,sBAAoB;AAAG;AACpC,CAAC;AAAa,qBAAmB;AAAG;AAGpC,CAAC;AAAa,oBAAkB;AAAM;AACtC,CAAC;AAAc,mBAAiB;AAAM;AAGtC,CAAC;AAAsB,0BAAwB;AAAS;AACxD,CAAC;AAAyB,0BAAwB;AAAQ;AAC1D,CAAC;AAAuB,0BAAwB;AAAS;AACzD,CAAC;AAAwB,0BAAwB;AAAQ;AAGzD,CAAC,gBAAkB,CAnClB;AAoCA,kBAAgB;AAChB,sBAAoB;AACrB;AAEA,CAAC,kBAAoB,CA9BpB;AA+BA,kBAAgB;AAChB,sBAAoB;AACrB;AAEA,CAAC,gBAAkB,CAxBlB;AAyBD,CAAC,+BAA+B,CAAC;AAChC,sBAAoB;AACrB;AAEA,CAAC,kBAAoB,CA5BpB;AA6BD,CAAC,kCAAkC,CAAC;AACnC,qBAAmB;AACpB;AAEA,CAAC,gBAAkB,CA9BlB;AA+BD,CAAC,gCAAgC,CAAC;AACjC,oBAAkB;AACnB;AAEA,CAAC,kBAAoB,CAlCpB;AAmCD,CAAC,mCAAmC,CAAC;AACpC,mBAAiB;AAClB;AAGA,CAAC,iBAAmB,CArCnB;AAsCD,CAAC,0CAA0C,CAAC;AAC3C,0BAAwB;AACzB;AAEA,CAAC,cAAgB,CAzChB;AA0CD,CAAC,0CAA0C,CAAC;AAC3C,0BAAwB;AACzB;AAEA,CAAC,eAAiB,CA5CjB;AA6CD,CAAC,0CAA0C,CAAC;AAC3C,0BAAwB;AACzB;AAEA,CAAC,gBAAkB,CAlDlB;AAmDD,CAAC,0CAA0C,CAAC;AAC3C,0BAAwB;AACzB;AAGA,CAAC,gCAAgC,CAAC;AACjC,kBAAgB;AAChB,sBAAoB;AACpB,sBAAoB;AACpB,oBAAkB;AAClB,qBAAmB;AACnB,0BAAwB;AACxB,0BAAwB;AACzB;AAEA,CAAC,mCAAmC,CAAC;AACpC,kBAAgB;AAChB,sBAAoB;AACpB,qBAAmB;AACnB,mBAAiB;AACjB,oBAAkB;AAClB,yBAAuB;AACvB,yBAAuB;AACxB;","names":[]}
+{"version":3,"sources":["../../src/ui/style.css"],"sourcesContent":["/* Default theme variables - users can override these in their own CSS */\n:root {\n\t--team-1: oklch(0.646 0.222 41.116);\n\t--team-2: oklch(0.6 0.118 184.704);\n\t--team-3: oklch(0.398 0.07 227.392);\n\t--team-4: oklch(0.828 0.189 84.429);\n\t--team-5: oklch(0.769 0.188 70.08);\n\n\t/* Card and UI component default colors */\n\t--card: 0 0% 100%;\n\t--card-foreground: 240 10% 3.9%;\n\t--background: 0 0% 100%;\n\t--foreground: 240 10% 3.9%;\n\t--muted: 240 4.8% 95.9%;\n\t--muted-foreground: 240 3.8% 46.1%;\n\t--border: 240 5.9% 90%;\n\t--input: 240 5.9% 90%;\n\t--ring: 240 5.9% 10%;\n\t--primary: 240 5.9% 10%;\n\t--primary-foreground: 0 0% 98%;\n\t--destructive: 0 84.2% 60.2%;\n\t--destructive-foreground: 0 0% 98%;\n}\n\n.dark {\n\t--card: 240 10% 3.9%;\n\t--card-foreground: 0 0% 98%;\n\t--background: 240 10% 3.9%;\n\t--foreground: 0 0% 98%;\n\t--muted: 240 3.7% 15.9%;\n\t--muted-foreground: 240 5% 64.9%;\n\t--border: 240 3.7% 15.9%;\n\t--input: 240 3.7% 15.9%;\n\t--ring: 240 4.9% 83.9%;\n\t--primary: 0 0% 98%;\n\t--primary-foreground: 240 5.9% 10%;\n\t--destructive: 0 62.8% 30.6%;\n\t--destructive-foreground: 0 0% 98%;\n}\n\n/*\n * Animation CSS for SDK components\n *\n * These styles are bundled with the SDK to ensure they work regardless of\n * consumer's Tailwind configuration. Uses @layer for cascade control so\n * consumers can override with their own Tailwind utilities if needed.\n *\n * This solves the problem where consumer's Tailwind purges animation classes\n * because they only exist in the SDK's minified bundle.\n */\n\n/* Keyframes for enter/exit animations (from tailwindcss-animate) */\n@keyframes enter {\n\tfrom {\n\t\topacity: var(--tw-enter-opacity, 1);\n\t\ttransform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)\n\t\t\tscale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))\n\t\t\trotate(var(--tw-enter-rotate, 0));\n\t}\n}\n\n@keyframes exit {\n\tto {\n\t\topacity: var(--tw-exit-opacity, 1);\n\t\ttransform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)\n\t\t\tscale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))\n\t\t\trotate(var(--tw-exit-rotate, 0));\n\t}\n}\n\n/* Animation base classes */\n.animate-in {\n\tanimation-name: enter;\n\tanimation-duration: 150ms;\n\t--tw-enter-opacity: initial;\n\t--tw-enter-scale: initial;\n\t--tw-enter-rotate: initial;\n\t--tw-enter-translate-x: initial;\n\t--tw-enter-translate-y: initial;\n}\n\n.animate-out {\n\tanimation-name: exit;\n\tanimation-duration: 150ms;\n\t--tw-exit-opacity: initial;\n\t--tw-exit-scale: initial;\n\t--tw-exit-rotate: initial;\n\t--tw-exit-translate-x: initial;\n\t--tw-exit-translate-y: initial;\n}\n\n/* Opacity variants */\n.fade-in-0 { --tw-enter-opacity: 0; }\n.fade-out-0 { --tw-exit-opacity: 0; }\n\n/* Scale variants */\n.zoom-in-95 { --tw-enter-scale: 0.95; }\n.zoom-out-95 { --tw-exit-scale: 0.95; }\n\n/* Slide variants */\n.slide-in-from-top-2 { --tw-enter-translate-y: -0.5rem; }\n.slide-in-from-bottom-2 { --tw-enter-translate-y: 0.5rem; }\n.slide-in-from-left-2 { --tw-enter-translate-x: -0.5rem; }\n.slide-in-from-right-2 { --tw-enter-translate-x: 0.5rem; }\n\n/* Data attribute variants for Radix UI components */\n[data-state=\"open\"].animate-in {\n\tanimation-name: enter;\n\tanimation-duration: 150ms;\n}\n\n[data-state=\"closed\"].animate-out {\n\tanimation-name: exit;\n\tanimation-duration: 150ms;\n}\n\n[data-state=\"open\"].fade-in-0,\n.data-\\[state\\=open\\]\\:fade-in-0[data-state=\"open\"] {\n\t--tw-enter-opacity: 0;\n}\n\n[data-state=\"closed\"].fade-out-0,\n.data-\\[state\\=closed\\]\\:fade-out-0[data-state=\"closed\"] {\n\t--tw-exit-opacity: 0;\n}\n\n[data-state=\"open\"].zoom-in-95,\n.data-\\[state\\=open\\]\\:zoom-in-95[data-state=\"open\"] {\n\t--tw-enter-scale: 0.95;\n}\n\n[data-state=\"closed\"].zoom-out-95,\n.data-\\[state\\=closed\\]\\:zoom-out-95[data-state=\"closed\"] {\n\t--tw-exit-scale: 0.95;\n}\n\n/* Slide variants with data-side for dropdown positioning */\n[data-side=\"bottom\"].slide-in-from-top-2,\n.data-\\[side\\=bottom\\]\\:slide-in-from-top-2[data-side=\"bottom\"] {\n\t--tw-enter-translate-y: -0.5rem;\n}\n\n[data-side=\"top\"].slide-in-from-bottom-2,\n.data-\\[side\\=top\\]\\:slide-in-from-bottom-2[data-side=\"top\"] {\n\t--tw-enter-translate-y: 0.5rem;\n}\n\n[data-side=\"left\"].slide-in-from-right-2,\n.data-\\[side\\=left\\]\\:slide-in-from-right-2[data-side=\"left\"] {\n\t--tw-enter-translate-x: 0.5rem;\n}\n\n[data-side=\"right\"].slide-in-from-left-2,\n.data-\\[side\\=right\\]\\:slide-in-from-left-2[data-side=\"right\"] {\n\t--tw-enter-translate-x: -0.5rem;\n}\n\n/* Tailwind's data attribute variant syntax support */\n.data-\\[state\\=open\\]\\:animate-in[data-state=\"open\"] {\n\tanimation-name: enter;\n\tanimation-duration: 150ms;\n\t--tw-enter-opacity: initial;\n\t--tw-enter-scale: initial;\n\t--tw-enter-rotate: initial;\n\t--tw-enter-translate-x: initial;\n\t--tw-enter-translate-y: initial;\n}\n\n.data-\\[state\\=closed\\]\\:animate-out[data-state=\"closed\"] {\n\tanimation-name: exit;\n\tanimation-duration: 150ms;\n\t--tw-exit-opacity: initial;\n\t--tw-exit-scale: initial;\n\t--tw-exit-rotate: initial;\n\t--tw-exit-translate-x: initial;\n\t--tw-exit-translate-y: initial;\n}\n"],"mappings":"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","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erikey/react",
-  "version": "0.4.36",
+  "version": "0.5.1",
   "description": "React SDK for Erikey - B2B authentication and user management. UI components based on better-auth-ui.",
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",

package/src/ui/components/auth/auth-flow.tsx

@@ -177,6 +177,46 @@ function isAuthPath(href: string): boolean {
     )
 }
 
+// Session storage key for persisting view state across remounts
+const AUTH_FLOW_STATE_KEY = "erikey_auth_flow_state"
+
+function getPersistedState(): {
+    view: AuthFlowView
+    email?: string
+} | null {
+    if (typeof window === "undefined") return null
+    try {
+        const stored = sessionStorage.getItem(AUTH_FLOW_STATE_KEY)
+        if (stored) {
+            return JSON.parse(stored)
+        }
+    } catch {
+        // Ignore parse errors
+    }
+    return null
+}
+
+function persistState(view: AuthFlowView, email?: string) {
+    if (typeof window === "undefined") return
+    try {
+        sessionStorage.setItem(
+            AUTH_FLOW_STATE_KEY,
+            JSON.stringify({ view, email })
+        )
+    } catch {
+        // Ignore storage errors
+    }
+}
+
+function clearPersistedState() {
+    if (typeof window === "undefined") return
+    try {
+        sessionStorage.removeItem(AUTH_FLOW_STATE_KEY)
+    } catch {
+        // Ignore storage errors
+    }
+}
+
 export function AuthFlow({
     mode = "internal",
     onEvent,
@@ -196,8 +236,23 @@ export function AuthFlow({
     ...providerProps
 }: AuthFlowProps) {
     // Internal state for "internal" mode
-    const [currentView, setCurrentView] = useState<AuthFlowView>(initialView)
-    const [verifyEmail, setVerifyEmail] = useState<string | undefined>()
+    // Restore from sessionStorage if available (survives remounts caused by parent re-renders)
+    const [currentView, setCurrentView] = useState<AuthFlowView>(() => {
+        if (mode === "internal") {
+            const persisted = getPersistedState()
+            if (persisted) {
+                return persisted.view
+            }
+        }
+        return initialView
+    })
+    const [verifyEmail, setVerifyEmail] = useState<string | undefined>(() => {
+        if (mode === "internal") {
+            const persisted = getPersistedState()
+            return persisted?.email
+        }
+        return undefined
+    })
 
     // Handle navigation based on mode
     const handleNavigate = useCallback(
@@ -291,16 +346,71 @@ export function AuthFlow({
     )
 
     // Combined event handler that wraps user's onEvent
+    // In internal mode, this handles ALL view transitions centrally
     const handleAuthEvent = useCallback(
         (event: AuthFlowEvent) => {
             // Forward to user's handler
             onEvent?.(event)
 
-            // In internal mode, don't auto-redirect on AUTH_SUCCESS
-            // Let React re-render based on session state (useSession hook)
-            // User can handle AUTH_SUCCESS in onEvent if custom behavior needed
+            // In internal mode, handle view transitions based on events
+            if (mode === "internal") {
+                switch (event.type) {
+                    // Sign-up flow
+                    case "SIGN_UP_REQUIRES_VERIFICATION":
+                        setCurrentView("EMAIL_VERIFICATION")
+                        setVerifyEmail(event.email)
+                        persistState("EMAIL_VERIFICATION", event.email)
+                        break
+
+                    // Sign-in flow
+                    case "SIGN_IN_REQUIRES_2FA":
+                        setCurrentView("TWO_FACTOR")
+                        persistState("TWO_FACTOR")
+                        break
+                    case "SIGN_IN_REQUIRES_VERIFICATION":
+                        setCurrentView("EMAIL_VERIFICATION")
+                        setVerifyEmail(event.email)
+                        persistState("EMAIL_VERIFICATION", event.email)
+                        break
+
+                    // Verification success without token → sign in
+                    case "VERIFICATION_SUCCESS":
+                        if (!event.session?.token) {
+                            setCurrentView("SIGN_IN")
+                            clearPersistedState()
+                        }
+                        // If token present, clear state - auth succeeded
+                        if (event.session?.token) {
+                            clearPersistedState()
+                        }
+                        break
+
+                    // Password reset flow
+                    case "PASSWORD_RESET_SUCCESS":
+                        setCurrentView("SIGN_IN")
+                        clearPersistedState()
+                        break
+
+                    // View toggles (footer links) - handled by InternalLink
+                    case "VIEW_CHANGE":
+                        setCurrentView(event.view)
+                        if (event.email) setVerifyEmail(event.email)
+                        // Only persist non-initial views
+                        if (event.view !== "SIGN_IN") {
+                            persistState(event.view, event.email)
+                        } else {
+                            clearPersistedState()
+                        }
+                        break
+
+                    // AUTH_SUCCESS - clear persisted state, let React re-render via useSession
+                    case "AUTH_SUCCESS":
+                        clearPersistedState()
+                        break
+                }
+            }
         },
-        [onEvent]
+        [onEvent, mode]
     )
 
     // Get the view key for AuthView component
@@ -317,6 +427,7 @@ export function AuthFlow({
             basePath={basePath}
             navigate={handleNavigate}
             onAuthEvent={handleAuthEvent}
+            authFlowMode={mode}
             redirectTo={redirectTo}
             Link={InternalLink}
             {...providerProps}
@@ -326,6 +437,7 @@ export function AuthFlow({
                 classNames={classNames}
                 cardHeader={cardHeader}
                 cardFooter={cardFooter}
+                email={verifyEmail}
                 socialLayout={socialLayout}
                 otpSeparators={otpSeparators}
                 redirectTo={redirectTo}

package/src/ui/components/auth/auth-form.tsx

@@ -41,6 +41,10 @@ export interface AuthFormProps {
     className?: string
     classNames?: AuthFormClassNames
     callbackURL?: string
+    /**
+     * Email for verification flows (passed in internal mode)
+     */
+    email?: string
     isSubmitting?: boolean
     localization?: Partial<AuthLocalization>
     pathname?: string
@@ -71,6 +75,7 @@ export function AuthForm({
     className,
     classNames,
     callbackURL,
+    email,
     isSubmitting,
     localization,
     pathname,
@@ -261,6 +266,7 @@ export function AuthForm({
                 className={className}
                 classNames={classNames}
                 callbackURL={callbackURL}
+                email={email}
                 localization={localization}
                 otpSeparators={otpSeparators}
                 redirectTo={redirectTo}

package/src/ui/components/auth/auth-view.tsx

@@ -47,6 +47,10 @@ export interface AuthViewProps {
     callbackURL?: string
     cardHeader?: ReactNode
     cardFooter?: ReactNode
+    /**
+     * Email for verification flows (passed in internal mode)
+     */
+    email?: string
     localization?: AuthLocalization
     path?: string
     pathname?: string
@@ -62,6 +66,7 @@ export function AuthView({
     callbackURL,
     cardHeader,
     cardFooter,
+    email,
     localization,
     path: pathProp,
     pathname,
@@ -173,6 +178,7 @@ export function AuthView({
                         <AuthForm
                             classNames={classNames?.form}
                             callbackURL={callbackURL}
+                            email={email}
                             isSubmitting={isSubmitting}
                             localization={localization}
                             otpSeparators={otpSeparators}

package/src/ui/components/auth/forms/email-verification-form.tsx

@@ -63,7 +63,8 @@ export function EmailVerificationForm({
         basePath,
         viewPaths,
         emailVerification,
-        onAuthEvent
+        onAuthEvent,
+        authFlowMode
     } = useContext(AuthUIContext)
 
     localization = { ...contextLocalization, ...localization }
@@ -159,13 +160,16 @@ export function EmailVerificationForm({
                 // No token - verification succeeded but no session
                 const session = { user }
                 onAuthEvent?.({ type: "VERIFICATION_SUCCESS", user, session })
-                navigate(
-                    `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
-                )
-                toast({
-                    variant: "success",
-                    message: localization.EMAIL_VERIFICATION_SUCCESS!
-                })
+                // In internal mode, AuthFlow handles view transitions via events
+                if (authFlowMode !== "internal") {
+                    navigate(
+                        `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
+                    )
+                    toast({
+                        variant: "success",
+                        message: localization.EMAIL_VERIFICATION_SUCCESS!
+                    })
+                }
             }
         } catch (error) {
             const errorMessage = getLocalizedError({

package/src/ui/components/auth/forms/forgot-password-form.tsx

@@ -52,7 +52,9 @@ export function ForgotPasswordForm({
         navigate,
         toast,
         viewPaths,
-        localizeErrors
+        localizeErrors,
+        onAuthEvent,
+        authFlowMode
     } = useContext(AuthUIContext)
 
     localization = { ...contextLocalization, ...localization }
@@ -94,14 +96,19 @@ export function ForgotPasswordForm({
                 fetchOptions
             })
 
+            onAuthEvent?.({ type: "FORGOT_PASSWORD_EMAIL_SENT", email })
+
             toast({
                 variant: "success",
                 message: localization.FORGOT_PASSWORD_EMAIL
             })
 
-            navigate(
-                `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
-            )
+            // In internal mode, AuthFlow handles view transitions via events
+            if (authFlowMode !== "internal") {
+                navigate(
+                    `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
+                )
+            }
         } catch (error) {
             toast({
                 variant: "error",

package/src/ui/components/auth/forms/reset-password-form.tsx

@@ -45,7 +45,9 @@ export function ResetPasswordForm({
         viewPaths,
         navigate,
         toast,
-        localizeErrors
+        localizeErrors,
+        onAuthEvent,
+        authFlowMode
     } = useContext(AuthUIContext)
 
     const confirmPasswordEnabled = credentials?.confirmPassword
@@ -99,12 +101,15 @@ export function ResetPasswordForm({
         const token = searchParams.get("token")
 
         if (!token || token === "INVALID_TOKEN") {
-            navigate(
-                `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
-            )
+            // In internal mode, AuthFlow handles view transitions via events
+            if (authFlowMode !== "internal") {
+                navigate(
+                    `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
+                )
+            }
             toast({ variant: "error", message: localization.INVALID_TOKEN })
         }
-    }, [basePath, navigate, toast, viewPaths, localization])
+    }, [basePath, navigate, toast, viewPaths, localization, authFlowMode])
 
     async function resetPassword({ newPassword }: z.infer<typeof formSchema>) {
         try {
@@ -117,14 +122,19 @@ export function ResetPasswordForm({
                 fetchOptions: { throw: true }
             })
 
+            onAuthEvent?.({ type: "PASSWORD_RESET_SUCCESS" })
+
             toast({
                 variant: "success",
                 message: localization.RESET_PASSWORD_SUCCESS
             })
 
-            navigate(
-                `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
-            )
+            // In internal mode, AuthFlow handles view transitions via events
+            if (authFlowMode !== "internal") {
+                navigate(
+                    `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
+                )
+            }
         } catch (error) {
             toast({
                 variant: "error",

package/src/ui/components/auth/forms/sign-in-form.tsx

@@ -69,7 +69,8 @@ export function SignInForm({
         Link,
         localizeErrors,
         emailVerification,
-        onAuthEvent
+        onAuthEvent,
+        authFlowMode
     } = useContext(AuthUIContext)
 
     const rememberMeEnabled = credentials?.rememberMe
@@ -150,9 +151,12 @@ export function SignInForm({
 
             if (response.twoFactorRedirect) {
                 onAuthEvent?.({ type: "SIGN_IN_REQUIRES_2FA", email })
-                navigate(
-                    `${basePath}/${viewPaths.TWO_FACTOR}${window.location.search}`
-                )
+                // In internal mode, AuthFlow handles view transitions via events
+                if (authFlowMode !== "internal") {
+                    navigate(
+                        `${basePath}/${viewPaths.TWO_FACTOR}${window.location.search}`
+                    )
+                }
             } else {
                 // Build user and session for events
                 const user = response.user as {
@@ -202,11 +206,14 @@ export function SignInForm({
 
             if (errorCode === "EMAIL_NOT_VERIFIED") {
                 onAuthEvent?.({ type: "SIGN_IN_REQUIRES_VERIFICATION", email })
-                navigate(
-                    `${basePath}/${
-                        viewPaths.EMAIL_VERIFICATION
-                    }?email=${encodeURIComponent(email)}`
-                )
+                // In internal mode, AuthFlow handles view transitions via events
+                if (authFlowMode !== "internal") {
+                    navigate(
+                        `${basePath}/${
+                            viewPaths.EMAIL_VERIFICATION
+                        }?email=${encodeURIComponent(email)}`
+                    )
+                }
             }
         }
     }

package/src/ui/components/auth/forms/sign-up-form.tsx

@@ -93,7 +93,8 @@ export function SignUpForm({
         avatar,
         localizeErrors,
         emailVerification,
-        onAuthEvent
+        onAuthEvent,
+        authFlowMode
     } = useContext(AuthUIContext)
 
     const confirmPasswordEnabled = credentials?.confirmPassword
@@ -415,9 +416,16 @@ export function SignUpForm({
 
             // Check for 2FA redirect first (same pattern as sign-in form)
             if (response.twoFactorRedirect) {
-                navigate(
-                    `${basePath}/${viewPaths.TWO_FACTOR}${window.location.search}`
-                )
+                onAuthEvent?.({
+                    type: "SIGN_IN_REQUIRES_2FA",
+                    email: email as string
+                })
+                // In internal mode, AuthFlow handles view transitions via events
+                if (authFlowMode !== "internal") {
+                    navigate(
+                        `${basePath}/${viewPaths.TWO_FACTOR}${window.location.search}`
+                    )
+                }
             } else if (response.token && user) {
                 // Token present = verified or no verification required
                 const session = {
@@ -433,22 +441,28 @@ export function SignUpForm({
                     type: "SIGN_UP_REQUIRES_VERIFICATION",
                     email: email as string
                 })
-                navigate(
-                    `${basePath}/${viewPaths.EMAIL_VERIFICATION}?email=${encodeURIComponent(email as string)}`
-                )
+                // In internal mode, AuthFlow handles view transitions via events
+                if (authFlowMode !== "internal") {
+                    navigate(
+                        `${basePath}/${viewPaths.EMAIL_VERIFICATION}?email=${encodeURIComponent(email as string)}`
+                    )
+                }
             } else {
                 // Fallback: redirect to sign-in (e.g., link-based verification sent)
                 onAuthEvent?.({
                     type: "SIGN_UP_REQUIRES_VERIFICATION",
                     email: email as string
                 })
-                navigate(
-                    `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
-                )
-                toast({
-                    variant: "success",
-                    message: localization.SIGN_UP_EMAIL!
-                })
+                // In internal mode, AuthFlow handles view transitions via events
+                if (authFlowMode !== "internal") {
+                    navigate(
+                        `${basePath}/${viewPaths.SIGN_IN}${window.location.search}`
+                    )
+                    toast({
+                        variant: "success",
+                        message: localization.SIGN_UP_EMAIL!
+                    })
+                }
             }
         } catch (error) {
             const errorMessage = getLocalizedError({

package/src/ui/lib/auth-ui-provider.tsx

@@ -225,6 +225,11 @@ export type AuthUIContextType = {
      * Called with typed events during sign-in, sign-up, verification, etc.
      */
     onAuthEvent?: AuthFlowEventHandler
+    /**
+     * AuthFlow mode - when 'internal', forms skip navigation and let AuthFlow handle view transitions.
+     * undefined = standalone form usage (normal navigation)
+     */
+    authFlowMode?: "internal" | "route"
     /**
      * Replace the current URL
      * @default navigate

package/src/ui/style.css

@@ -1,10 +1,41 @@
-/* Team color variables - users can override these in their own CSS */
+/* Default theme variables - users can override these in their own CSS */
 :root {
 	--team-1: oklch(0.646 0.222 41.116);
 	--team-2: oklch(0.6 0.118 184.704);
 	--team-3: oklch(0.398 0.07 227.392);
 	--team-4: oklch(0.828 0.189 84.429);
 	--team-5: oklch(0.769 0.188 70.08);
+
+	/* Card and UI component default colors */
+	--card: 0 0% 100%;
+	--card-foreground: 240 10% 3.9%;
+	--background: 0 0% 100%;
+	--foreground: 240 10% 3.9%;
+	--muted: 240 4.8% 95.9%;
+	--muted-foreground: 240 3.8% 46.1%;
+	--border: 240 5.9% 90%;
+	--input: 240 5.9% 90%;
+	--ring: 240 5.9% 10%;
+	--primary: 240 5.9% 10%;
+	--primary-foreground: 0 0% 98%;
+	--destructive: 0 84.2% 60.2%;
+	--destructive-foreground: 0 0% 98%;
+}
+
+.dark {
+	--card: 240 10% 3.9%;
+	--card-foreground: 0 0% 98%;
+	--background: 240 10% 3.9%;
+	--foreground: 0 0% 98%;
+	--muted: 240 3.7% 15.9%;
+	--muted-foreground: 240 5% 64.9%;
+	--border: 240 3.7% 15.9%;
+	--input: 240 3.7% 15.9%;
+	--ring: 240 4.9% 83.9%;
+	--primary: 0 0% 98%;
+	--primary-foreground: 240 5.9% 10%;
+	--destructive: 0 62.8% 30.6%;
+	--destructive-foreground: 0 0% 98%;
 }
 
 /*