@erikey/react 0.5.0 → 0.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erikey/react",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "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(
@@ -304,38 +359,54 @@ export function AuthFlow({
                     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()
                         }
-                        // If token present, let session state handle UI
                         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 - let React re-render via useSession
-                    // No action needed - session state triggers re-render
+                    // AUTH_SUCCESS - clear persisted state, let React re-render via useSession
+                    case "AUTH_SUCCESS":
+                        clearPersistedState()
+                        break
                 }
             }
         },

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

@@ -77,6 +77,7 @@ export function AuthView({
 }: AuthViewProps) {
     const isHydrated = useIsHydrated()
     const {
+        authFlowMode,
         basePath,
         credentials,
         localization: contextLocalization,
@@ -421,6 +422,25 @@ export function AuthView({
                                     : localization.SIGN_IN}
                             </Button>
                         </Link>
+                    ) : authFlowMode === "internal" ? (
+                        <Link
+                            className={cn(
+                                "text-foreground underline",
+                                classNames?.footerLink
+                            )}
+                            href={`${basePath}/${viewPaths.SIGN_IN}${isHydrated ? window.location.search : ""}`}
+                        >
+                            <Button
+                                variant="link"
+                                size="sm"
+                                className={cn(
+                                    "px-0 text-foreground underline",
+                                    classNames?.footerLink
+                                )}
+                            >
+                                {localization.GO_BACK}
+                            </Button>
+                        </Link>
                     ) : (
                         <Button
                             variant="link"