@erikey/react 0.4.32 → 0.4.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@erikey/react",
-  "version": "0.4.32",
+  "version": "0.4.34",
   "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

@@ -1,6 +1,12 @@
 "use client"
 
-import { type ReactNode, useCallback, useMemo, useState } from "react"
+import {
+    type ReactNode,
+    type MouseEvent,
+    useCallback,
+    useMemo,
+    useState
+} from "react"
 
 import { AuthUIContext, AuthUIProvider } from "../../lib/auth-ui-provider"
 import type { AuthUIProviderProps } from "../../lib/auth-ui-provider"
@@ -80,7 +86,9 @@ const flowViewToPathKey: Record<AuthFlowView, keyof AuthViewPaths> = {
     TWO_FACTOR: "TWO_FACTOR",
     FORGOT_PASSWORD: "FORGOT_PASSWORD",
     RESET_PASSWORD: "RESET_PASSWORD",
-    MAGIC_LINK: "MAGIC_LINK"
+    MAGIC_LINK: "MAGIC_LINK",
+    EMAIL_OTP: "EMAIL_OTP",
+    RECOVER_ACCOUNT: "RECOVER_ACCOUNT"
 }
 
 /**
@@ -109,6 +117,12 @@ function parsePathToView(path: string): { view: AuthFlowView; email?: string } {
     if (pathname.includes("magic-link")) {
         return { view: "MAGIC_LINK", email }
     }
+    if (pathname.includes("email-otp")) {
+        return { view: "SIGN_IN", email } // EMAIL_OTP is a sign-in variant
+    }
+    if (pathname.includes("recover-account")) {
+        return { view: "TWO_FACTOR", email } // Recover account is part of 2FA flow
+    }
     return { view: "SIGN_IN", email }
 }
 
@@ -144,6 +158,24 @@ function parsePathToView(path: string): { view: AuthFlowView; email?: string } {
  *   basePath="/auth"
  * />
  */
+/**
+ * Check if a path is an auth-related path that should be intercepted
+ * These match the viewPaths defined in view-paths.ts
+ */
+function isAuthPath(href: string): boolean {
+    return (
+        href.includes("sign-in") ||
+        href.includes("sign-up") ||
+        href.includes("email-verification") ||
+        href.includes("two-factor") ||
+        href.includes("forgot-password") ||
+        href.includes("reset-password") ||
+        href.includes("magic-link") ||
+        href.includes("email-otp") ||
+        href.includes("recover-account")
+    )
+}
+
 export function AuthFlow({
     mode = "internal",
     onEvent,
@@ -159,6 +191,7 @@ export function AuthFlow({
     // AuthUIProvider props
     authClient,
     basePath = "/auth",
+    Link: ExternalLink,
     ...providerProps
 }: AuthFlowProps) {
     // Internal state for "internal" mode
@@ -192,6 +225,56 @@ export function AuthFlow({
         [mode, externalNavigate, onEvent]
     )
 
+    // Custom Link component for internal mode that intercepts auth paths
+    const InternalLink = useCallback(
+        ({
+            href,
+            children,
+            className: linkClassName,
+            ...rest
+        }: {
+            href: string
+            children: ReactNode
+            className?: string
+        }) => {
+            const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+                // In internal mode, intercept auth-related links
+                if (mode === "internal" && isAuthPath(href)) {
+                    e.preventDefault()
+                    handleNavigate(href)
+                }
+                // In route mode, or for non-auth paths, let the link work normally
+            }
+
+            // If external Link provided (e.g., react-router), use it
+            if (ExternalLink) {
+                return (
+                    <ExternalLink
+                        href={href}
+                        className={linkClassName}
+                        onClick={handleClick}
+                        {...rest}
+                    >
+                        {children}
+                    </ExternalLink>
+                )
+            }
+
+            // Default to anchor tag
+            return (
+                <a
+                    href={href}
+                    className={linkClassName}
+                    onClick={handleClick}
+                    {...rest}
+                >
+                    {children}
+                </a>
+            )
+        },
+        [mode, handleNavigate, ExternalLink]
+    )
+
     // Combined event handler that wraps user's onEvent
     const handleAuthEvent = useCallback(
         (event: AuthFlowEvent) => {
@@ -225,6 +308,7 @@ export function AuthFlow({
             navigate={handleNavigate}
             onAuthEvent={handleAuthEvent}
             redirectTo={redirectTo}
+            Link={InternalLink}
             {...providerProps}
         >
             <AuthViewComponent

package/src/ui/types/auth-flow-events.ts

@@ -16,6 +16,8 @@ export type AuthFlowView =
     | "FORGOT_PASSWORD"
     | "RESET_PASSWORD"
     | "MAGIC_LINK"
+    | "EMAIL_OTP"
+    | "RECOVER_ACCOUNT"
 
 /**
  * Error information included in error events