@erikey/react 0.4.26 → 0.4.28

package/src/ui/components/auth/provider-button.tsx

@@ -0,0 +1,155 @@
+import type { SocialProvider } from "better-auth/social-providers"
+import { useCallback, useContext } from "react"
+
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import type { Provider } from "../../lib/social-providers"
+import { cn, getLocalizedError, getSearchParam } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import { Button } from "../ui/button"
+import type { AuthViewClassNames } from "./auth-view"
+
+interface ProviderButtonProps {
+    className?: string
+    classNames?: AuthViewClassNames
+    callbackURL?: string
+    isSubmitting: boolean
+    localization: Partial<AuthLocalization>
+    onError?: (error: string) => void
+    other?: boolean
+    provider: Provider
+    redirectTo?: string
+    socialLayout: "auto" | "horizontal" | "grid" | "vertical"
+    setIsSubmitting: (isSubmitting: boolean) => void
+}
+
+export function ProviderButton({
+    className,
+    classNames,
+    callbackURL: callbackURLProp,
+    isSubmitting,
+    localization,
+    onError,
+    other,
+    provider,
+    redirectTo: redirectToProp,
+    socialLayout,
+    setIsSubmitting
+}: ProviderButtonProps) {
+    const {
+        authClient,
+        basePath,
+        baseURL,
+        persistClient,
+        redirectTo: contextRedirectTo,
+        viewPaths,
+        social,
+        genericOAuth,
+        toast,
+        localizeErrors
+    } = useContext(AuthUIContext)
+
+    const getRedirectTo = useCallback(
+        () =>
+            redirectToProp || getSearchParam("redirectTo") || contextRedirectTo,
+        [redirectToProp, contextRedirectTo]
+    )
+
+    const getCallbackURL = useCallback(
+        () =>
+            `${baseURL}${
+                callbackURLProp ||
+                (persistClient
+                    ? `${basePath}/${viewPaths.CALLBACK}?redirectTo=${encodeURIComponent(getRedirectTo())}`
+                    : getRedirectTo())
+            }`,
+        [
+            callbackURLProp,
+            persistClient,
+            basePath,
+            viewPaths,
+            baseURL,
+            getRedirectTo
+        ]
+    )
+
+    const doSignInSocial = async () => {
+        setIsSubmitting(true)
+
+        try {
+            if (other) {
+                const oauth2Params = {
+                    providerId: provider.provider,
+                    callbackURL: getCallbackURL(),
+                    fetchOptions: { throw: true }
+                }
+
+                if (genericOAuth?.signIn) {
+                    await genericOAuth.signIn(oauth2Params)
+
+                    setTimeout(() => {
+                        setIsSubmitting(false)
+                    }, 10000)
+                } else {
+                    await authClient.signIn.oauth2(oauth2Params)
+                }
+            } else {
+                const socialParams = {
+                    provider: provider.provider as SocialProvider,
+                    callbackURL: getCallbackURL(),
+                    fetchOptions: { throw: true }
+                }
+
+                if (social?.signIn) {
+                    await social.signIn(socialParams)
+
+                    setTimeout(() => {
+                        setIsSubmitting(false)
+                    }, 10000)
+                } else {
+                    await authClient.signIn.social(socialParams)
+                }
+            }
+        } catch (error) {
+            const errorMessage = getLocalizedError({
+                error,
+                localization,
+                localizeErrors
+            })
+
+            // Call onError callback if provided (for inline display in parent)
+            onError?.(errorMessage)
+
+            // Also call toast for users who provide custom toast handler
+            toast({
+                variant: "error",
+                message: errorMessage
+            })
+
+            setIsSubmitting(false)
+        }
+    }
+
+    return (
+        <Button
+            className={cn(
+                socialLayout === "vertical" && "w-full",
+                socialLayout === "horizontal" && "flex-1 min-w-0",
+                className,
+                classNames?.form?.button,
+                classNames?.form?.outlineButton,
+                classNames?.form?.providerButton
+            )}
+            disabled={isSubmitting}
+            variant="outline"
+            onClick={doSignInSocial}
+        >
+            {provider.icon && (
+                <provider.icon className={classNames?.form?.icon} />
+            )}
+
+            {socialLayout === "grid" && provider.name}
+            {socialLayout === "vertical" &&
+                `${localization.SIGN_IN_WITH} ${provider.name}`}
+        </Button>
+    )
+}

package/src/ui/components/auth/sign-out.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import { Loader2 } from "lucide-react"
+import { useContext, useEffect, useRef } from "react"
+
+import { useOnSuccessTransition } from "../../hooks/use-success-transition"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+
+export function SignOut({ redirectTo }: { redirectTo?: string }) {
+    const signingOut = useRef(false)
+
+    const { authClient, basePath, viewPaths } = useContext(AuthUIContext)
+    const { onSuccess } = useOnSuccessTransition({
+        redirectTo: redirectTo || `${basePath}/${viewPaths.SIGN_IN}`
+    })
+
+    useEffect(() => {
+        if (signingOut.current) return
+        signingOut.current = true
+
+        authClient.signOut().finally(onSuccess)
+    }, [authClient, onSuccess])
+
+    return <Loader2 className="animate-spin" />
+}

package/src/ui/components/auth/wallet-button.tsx

@@ -0,0 +1,192 @@
+/**
+ * Wallet Button - Sign-In with Ethereum (SIWE)
+ *
+ * Flow: Connect wallet → Get nonce → Sign message → Verify → Success
+ */
+import { WalletIcon } from 'lucide-react';
+import { useContext, useState, useEffect, useCallback } from 'react';
+
+import { useOnSuccessTransition } from '../../hooks/use-success-transition';
+import { AuthUIContext } from '../../lib/auth-ui-provider';
+import { cn, getLocalizedError } from '../../lib/utils';
+import type { AuthLocalization } from '../../localization/auth-localization';
+import { Button } from '../ui/button';
+import type { AuthViewClassNames } from './auth-view';
+import {
+  hasInjectedWallet,
+  connectWallet,
+  signMessage,
+  buildSiweMessage,
+} from '../../lib/wallet';
+
+interface WalletButtonProps {
+  classNames?: AuthViewClassNames;
+  isSubmitting?: boolean;
+  localization?: Partial<AuthLocalization>;
+  redirectTo?: string;
+  setIsSubmitting?: (isSubmitting: boolean) => void;
+}
+
+export function WalletButton({
+  classNames,
+  isSubmitting,
+  localization,
+  redirectTo,
+  setIsSubmitting,
+}: WalletButtonProps) {
+  const {
+    authClient,
+    localization: contextLocalization,
+    toast,
+    localizeErrors,
+  } = useContext(AuthUIContext);
+
+  localization = { ...contextLocalization, ...localization };
+
+  const { onSuccess } = useOnSuccessTransition({ redirectTo });
+
+  // Track mounted state to avoid hydration mismatch
+  const [mounted, setMounted] = useState(false);
+  const [walletAddress, setWalletAddress] = useState<string | null>(null);
+  const [chainId, setChainId] = useState<number | null>(null);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const handleWalletAuth = useCallback(async () => {
+    setIsSubmitting?.(true);
+
+    try {
+      // Step 1: Connect wallet if not connected
+      let address = walletAddress;
+      let chain = chainId;
+
+      if (!address || !chain) {
+        const connection = await connectWallet();
+        address = connection.address;
+        chain = connection.chainId;
+        setWalletAddress(address);
+        setChainId(chain);
+      }
+
+      // Step 2: Get nonce from server
+      const nonceResult = await (authClient as any).siwe.nonce({
+        walletAddress: address,
+        chainId: chain,
+      });
+
+      if (nonceResult.error) {
+        throw new Error(nonceResult.error.message || 'Failed to get nonce');
+      }
+
+      const nonce = nonceResult.data?.nonce;
+      if (!nonce) {
+        throw new Error('No nonce received from server');
+      }
+
+      // Step 3: Build SIWE message
+      const message = buildSiweMessage({
+        domain: window.location.host,
+        address: address,
+        statement: 'Sign in with Ethereum',
+        uri: window.location.origin,
+        version: '1',
+        chainId: chain,
+        nonce,
+      });
+
+      // Step 4: Sign with wallet
+      const signature = await signMessage(message, address);
+
+      // Step 5: Verify with server
+      const verifyResult = await (authClient as any).siwe.verify({
+        message,
+        signature,
+        walletAddress: address,
+        chainId: chain,
+      });
+
+      if (verifyResult.error) {
+        throw new Error(verifyResult.error.message || 'Verification failed');
+      }
+
+      // Success!
+      onSuccess();
+    } catch (error) {
+      toast({
+        variant: 'error',
+        message: getLocalizedError({
+          error,
+          localization,
+          localizeErrors,
+        }),
+      });
+      setIsSubmitting?.(false);
+    }
+  }, [
+    authClient,
+    walletAddress,
+    chainId,
+    localization,
+    localizeErrors,
+    onSuccess,
+    setIsSubmitting,
+    toast,
+  ]);
+
+  // Don't render during SSR to avoid hydration mismatch
+  if (!mounted) {
+    return (
+      <Button
+        className={cn(
+          'w-full',
+          classNames?.form?.button,
+          classNames?.form?.secondaryButton
+        )}
+        disabled
+        variant="secondary"
+      >
+        <WalletIcon className="h-4 w-4" />
+        Connect Wallet
+      </Button>
+    );
+  }
+
+  // No wallet available
+  if (!hasInjectedWallet()) {
+    return (
+      <Button
+        className={cn(
+          'w-full',
+          classNames?.form?.button,
+          classNames?.form?.secondaryButton
+        )}
+        disabled
+        variant="secondary"
+        title="Install MetaMask or Phantom to use wallet sign-in"
+      >
+        <WalletIcon className="h-4 w-4" />
+        No Wallet Found
+      </Button>
+    );
+  }
+
+  return (
+    <Button
+      className={cn(
+        'w-full',
+        classNames?.form?.button,
+        classNames?.form?.secondaryButton
+      )}
+      disabled={isSubmitting}
+      variant="secondary"
+      onClick={handleWalletAuth}
+    >
+      <WalletIcon className="h-4 w-4" />
+      {walletAddress
+        ? `Sign in with ${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)}`
+        : 'Sign in with Wallet'}
+    </Button>
+  );
+}

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

@@ -0,0 +1,21 @@
+"use client"
+
+import { type ReactNode, useContext } from "react"
+import { AuthUIContext } from "../lib/auth-ui-provider"
+
+/**
+ * Conditionally renders content during authentication loading state
+ *
+ * Renders its children only when the authentication state is being determined
+ * (during the loading/pending phase). Once the authentication state is resolved,
+ * nothing is rendered. Useful for displaying loading indicators or temporary
+ * content while waiting for the authentication check to complete.
+ */
+export function AuthLoading({ children }: { children: ReactNode }) {
+    const {
+        hooks: { useSession }
+    } = useContext(AuthUIContext)
+    const { isPending } = useSession()
+
+    return isPending ? children : null
+}

package/src/ui/components/captcha/captcha.tsx

@@ -0,0 +1,91 @@
+import { CaptchaFox } from "@captchafox/react"
+import HCaptcha from "@hcaptcha/react-hcaptcha"
+import { Turnstile } from "@marsidev/react-turnstile"
+import { type RefObject, useContext } from "react"
+
+import { useTheme } from "../../hooks/use-theme"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import { RecaptchaBadge } from "./recaptcha-badge"
+import { RecaptchaV2 } from "./recaptcha-v2"
+
+// Default captcha endpoints
+const DEFAULT_CAPTCHA_ENDPOINTS = [
+    "/sign-up/email",
+    "/sign-in/email",
+    "/forget-password"
+]
+
+interface CaptchaProps {
+    // biome-ignore lint/suspicious/noExplicitAny: ignore
+    ref: RefObject<any>
+    localization: Partial<AuthLocalization>
+    action?: string // Optional action to check if it's in the endpoints list
+}
+
+export function Captcha({ ref, localization, action }: CaptchaProps) {
+    const { captcha } = useContext(AuthUIContext)
+    if (!captcha) return null
+
+    // If action is provided, check if it's in the list of captcha-enabled endpoints
+    if (action) {
+        const endpoints = captcha.endpoints || DEFAULT_CAPTCHA_ENDPOINTS
+        if (!endpoints.includes(action)) {
+            return null
+        }
+    }
+
+    const { theme } = useTheme()
+
+    const showRecaptchaV2 =
+        captcha.provider === "google-recaptcha-v2-checkbox" ||
+        captcha.provider === "google-recaptcha-v2-invisible"
+
+    const showRecaptchaBadge =
+        captcha.provider === "google-recaptcha-v3" ||
+        captcha.provider === "google-recaptcha-v2-invisible"
+
+    const showTurnstile = captcha.provider === "cloudflare-turnstile"
+
+    const showHCaptcha = captcha.provider === "hcaptcha"
+
+    const showCaptchaFox = captcha.provider === "captchafox"
+
+    return (
+        <>
+            {showRecaptchaV2 && <RecaptchaV2 ref={ref} />}
+            {showRecaptchaBadge && (
+                <RecaptchaBadge localization={localization} />
+            )}
+            {showTurnstile && (
+                <Turnstile
+                    className="mx-auto"
+                    ref={ref}
+                    siteKey={captcha.siteKey}
+                    options={{
+                        theme: theme,
+                        size: "flexible"
+                    }}
+                />
+            )}
+            {showHCaptcha && (
+                <div className="mx-auto">
+                    <HCaptcha
+                        ref={ref}
+                        sitekey={captcha.siteKey}
+                        theme={theme}
+                    />
+                </div>
+            )}
+            {showCaptchaFox && (
+                <div className="mx-auto">
+                    <CaptchaFox
+                        ref={ref}
+                        sitekey={captcha.siteKey}
+                        theme={theme}
+                    />
+                </div>
+            )}
+        </>
+    )
+}

package/src/ui/components/captcha/recaptcha-badge.tsx

@@ -0,0 +1,61 @@
+import { useContext } from "react"
+import { useIsHydrated } from "../../hooks/use-hydrated"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+import type { AuthLocalization } from "../../localization/auth-localization"
+
+export interface RecaptchaBadgeProps {
+    className?: string
+    localization?: Partial<AuthLocalization>
+}
+
+export function RecaptchaBadge({
+    className,
+    localization: propLocalization
+}: RecaptchaBadgeProps) {
+    const isHydrated = useIsHydrated()
+    const { captcha, localization: contextLocalization } =
+        useContext(AuthUIContext)
+    const localization = { ...contextLocalization, ...propLocalization }
+
+    if (!captcha) return null
+
+    if (!captcha.hideBadge) {
+        return isHydrated ? (
+            <style>{`
+                .grecaptcha-badge { visibility: visible !important; }
+            `}</style>
+        ) : null
+    }
+
+    return (
+        <>
+            <style>{`
+                .grecaptcha-badge { visibility: hidden; }
+            `}</style>
+
+            <p className={cn("text-muted-foreground text-xs", className)}>
+                {localization.PROTECTED_BY_RECAPTCHA}{" "}
+                {localization.BY_CONTINUING_YOU_AGREE} Google{" "}
+                <a
+                    className="text-foreground hover:underline"
+                    href="https://policies.google.com/privacy"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    {localization.PRIVACY_POLICY}
+                </a>{" "}
+                &{" "}
+                <a
+                    className="text-foreground hover:underline"
+                    href="https://policies.google.com/terms"
+                    target="_blank"
+                    rel="noreferrer"
+                >
+                    {localization.TERMS_OF_SERVICE}
+                </a>
+                .
+            </p>
+        </>
+    )
+}

package/src/ui/components/captcha/recaptcha-v2.tsx

@@ -0,0 +1,58 @@
+import { type RefObject, useContext, useEffect } from "react"
+import ReCAPTCHA from "react-google-recaptcha"
+import { useLang } from "../../hooks/use-lang"
+import { useTheme } from "../../hooks/use-theme"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+
+export function RecaptchaV2({ ref }: { ref: RefObject<ReCAPTCHA | null> }) {
+    const { captcha } = useContext(AuthUIContext)
+    const { theme } = useTheme()
+    const { lang } = useLang()
+
+    useEffect(() => {
+        // biome-ignore lint/suspicious/noExplicitAny: ignore
+        ;(window as any).recaptchaOptions = {
+            useRecaptchaNet: captcha?.recaptchaNet,
+            enterprise: captcha?.enterprise
+        }
+    }, [captcha])
+
+    if (!captcha) return null
+
+    return (
+        <>
+            <style>{`
+                .grecaptcha-badge {
+                    border-radius: var(--radius) !important;
+                    --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+                    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+                    border-style: var(--tw-border-style) !important;
+                    border-width: 1px;
+                }
+
+                .dark .grecaptcha-badge {
+                    border-color: var(--input) !important;
+                }
+            `}</style>
+
+            <ReCAPTCHA
+                ref={ref}
+                key={`${theme}-${lang}-${captcha.provider}`}
+                sitekey={captcha.siteKey}
+                theme={theme}
+                hl={lang}
+                size={
+                    captcha.provider === "google-recaptcha-v2-invisible"
+                        ? "invisible"
+                        : "normal"
+                }
+                className={cn(
+                    captcha.provider === "google-recaptcha-v2-invisible"
+                        ? "absolute"
+                        : "mx-auto h-[76px] w-[302px] overflow-hidden rounded bg-muted"
+                )}
+            />
+        </>
+    )
+}

package/src/ui/components/captcha/recaptcha-v3.tsx

@@ -0,0 +1,73 @@
+import {
+    GoogleReCaptchaProvider,
+    useGoogleReCaptcha
+} from "@wojtekmaj/react-recaptcha-v3"
+import { type ReactNode, useContext, useEffect } from "react"
+
+import { useIsHydrated } from "../../hooks/use-hydrated"
+import { useLang } from "../../hooks/use-lang"
+import { useTheme } from "../../hooks/use-theme"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+
+export function RecaptchaV3({ children }: { children: ReactNode }) {
+    const isHydrated = useIsHydrated()
+    const { captcha } = useContext(AuthUIContext)
+
+    if (captcha?.provider !== "google-recaptcha-v3") return children
+
+    return (
+        <GoogleReCaptchaProvider
+            reCaptchaKey={captcha.siteKey}
+            useEnterprise={captcha.enterprise}
+            useRecaptchaNet={captcha.recaptchaNet}
+        >
+            {isHydrated && (
+                <style>{`
+                    .grecaptcha-badge {
+                        visibility: hidden;
+                        border-radius: var(--radius) !important;
+                        --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, #0000000d);
+                        box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
+                        border-style: var(--tw-border-style) !important;
+                        border-width: 1px;
+                    }
+
+                    .dark .grecaptcha-badge {
+                        border-color: var(--input) !important;
+                    }
+                `}</style>
+            )}
+
+            <RecaptchaV3Style />
+
+            {children}
+        </GoogleReCaptchaProvider>
+    )
+}
+
+function RecaptchaV3Style() {
+    const { executeRecaptcha } = useGoogleReCaptcha()
+    const { theme } = useTheme()
+    const { lang } = useLang()
+
+    useEffect(() => {
+        if (!executeRecaptcha) return
+
+        const updateRecaptcha = async () => {
+            // find iframe with title "reCAPTCHA"
+            const iframe = document.querySelector(
+                "iframe[title='reCAPTCHA']"
+            ) as HTMLIFrameElement
+            if (iframe) {
+                const iframeSrcUrl = new URL(iframe.src)
+                iframeSrcUrl.searchParams.set("theme", theme)
+                if (lang) iframeSrcUrl.searchParams.set("hl", lang)
+                iframe.src = iframeSrcUrl.toString()
+            }
+        }
+
+        updateRecaptcha()
+    }, [executeRecaptcha, theme, lang])
+
+    return null
+}