better-auth-ui 3.2.5

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

@@ -0,0 +1,141 @@
+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>
+    other?: boolean
+    provider: Provider
+    redirectTo?: string
+    socialLayout: "auto" | "horizontal" | "grid" | "vertical"
+    setIsSubmitting: (isSubmitting: boolean) => void
+}
+
+export function ProviderButton({
+    className,
+    classNames,
+    callbackURL: callbackURLProp,
+    isSubmitting,
+    localization,
+    other,
+    provider,
+    redirectTo: redirectToProp,
+    socialLayout,
+    setIsSubmitting
+}: ProviderButtonProps) {
+    const {
+        authClient,
+        basePath,
+        baseURL,
+        persistClient,
+        redirectTo: contextRedirectTo,
+        viewPaths,
+        social,
+        genericOAuth,
+        toast
+    } = useContext(AuthUIContext)
+
+    const getRedirectTo = useCallback(
+        () =>
+            redirectToProp || getSearchParam("redirectTo") || contextRedirectTo,
+        [redirectToProp, contextRedirectTo]
+    )
+
+    const getCallbackURL = useCallback(
+        () =>
+            `${baseURL}${
+                callbackURLProp ||
+                (persistClient
+                    ? `${basePath}/${viewPaths.CALLBACK}?redirectTo=${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) {
+            toast({
+                variant: "error",
+                message: getLocalizedError({ error, localization })
+            })
+
+            setIsSubmitting(false)
+        }
+    }
+
+    return (
+        <Button
+            className={cn(
+                socialLayout === "vertical" ? "w-full" : "grow",
+                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/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() {
+    const signingOut = useRef(false)
+
+    const { authClient, basePath, viewPaths } = useContext(AuthUIContext)
+    const { onSuccess } = useOnSuccessTransition({
+        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/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/components/captcha/captcha.tsx

@@ -0,0 +1,79 @@
+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"
+
+    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>
+            )}
+        </>
+    )
+}

package/src/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/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/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
+}

package/src/components/email/email-template.tsx

@@ -0,0 +1,216 @@
+import {
+    Body,
+    Button,
+    Container,
+    Head,
+    Heading,
+    Hr,
+    Html,
+    Img,
+    Link,
+    Preview,
+    Section,
+    Tailwind,
+    Text
+} from "@react-email/components"
+import type { ReactNode } from "react"
+
+import { cn } from "../../lib/utils"
+
+export interface EmailTemplateClassNames {
+    body?: string
+    button?: string
+    container?: string
+    image?: string
+    content?: string
+    footer?: string
+    heading?: string
+    hr?: string
+    link?: string
+}
+
+export interface EmailTemplateProps {
+    classNames?: EmailTemplateClassNames
+    action?: string
+    /** @default process.env.BASE_URL || process.env.NEXT_PUBLIC_BASE_URL */
+    baseUrl?: string
+    content: ReactNode
+    heading: ReactNode
+    /** @default `${baseUrl}/apple-touch-icon.png` */
+    imageUrl?: string
+    preview?: string
+    /** @default process.env.SITE_NAME || process.env.NEXT_PUBLIC_SITE_NAME */
+    siteName?: string
+    url?: string
+    /** @default "vercel" */
+    variant?: "vercel"
+}
+
+export const EmailTemplate = ({
+    classNames,
+    action,
+    baseUrl,
+    content,
+    heading,
+    imageUrl,
+    preview,
+    siteName,
+    variant = "vercel",
+    url
+}: EmailTemplateProps) => {
+    baseUrl =
+        baseUrl || process.env.BASE_URL || process.env.NEXT_PUBLIC_BASE_URL
+    imageUrl = imageUrl || `${baseUrl}/apple-touch-icon.png`
+    siteName =
+        siteName || process.env.SITE_NAME || process.env.NEXT_PUBLIC_SITE_NAME
+    preview = preview || (typeof heading === "string" ? heading : undefined)
+
+    return (
+        <Html>
+            <Head>
+                <meta name="x-apple-disable-message-reformatting" />
+                <meta content="light dark" name="color-scheme" />
+                <meta content="light dark" name="supported-color-schemes" />
+
+                <style type="text/css">
+                    {`
+                        :root {
+                            color-scheme: light dark;
+                            supported-color-schemes: light dark;
+                        }
+                    `}
+                </style>
+
+                <style type="text/css">
+                    {`      
+                        html, body {
+                            background-color: #ffffff;
+                            color: #000000;
+                        }
+
+                        a {
+                            color: #000000;
+                        }
+
+                        .border-color {
+                            border-color: #eaeaea;
+                        }
+
+                        .action-button {
+                            background-color: #000000 !important;
+                            color: #ffffff !important;
+                        }
+
+                        @media (prefers-color-scheme: dark) {
+                            html, body {
+                                background-color: #000000 !important;
+                                color: #ffffff !important;
+                            }
+
+                            a {
+                                color: #ffffff;
+                            }
+
+                            .border-color {
+                                border-color: #333333 !important;
+                            }
+
+                            .action-button {
+                                background-color: rgb(38, 38, 38) !important;
+                                color: #ffffff !important;
+                            }
+                        }
+                    `}
+                </style>
+            </Head>
+
+            {preview && <Preview>{preview}</Preview>}
+
+            <Tailwind>
+                <Body
+                    className={cn(
+                        "mx-auto my-auto px-2 font-sans",
+                        classNames?.body
+                    )}
+                >
+                    <Container className="mx-auto my-[40px] max-w-[465px] rounded border border-color border-solid p-[20px]">
+                        <Section className="mt-[32px]">
+                            <Img
+                                alt={siteName}
+                                className={cn(
+                                    "mx-auto my-0 rounded-full",
+                                    classNames?.image
+                                )}
+                                height="40"
+                                src={imageUrl}
+                                width="40"
+                            />
+                        </Section>
+
+                        <Heading
+                            className={cn(
+                                "mx-0 my-[30px] p-0 text-center font-bold text-[24px]",
+                                classNames?.heading
+                            )}
+                        >
+                            {heading}
+                        </Heading>
+
+                        <Text
+                            className={cn(
+                                "text-[14px] leading-[24px]",
+                                classNames?.content
+                            )}
+                        >
+                            {content}
+                        </Text>
+
+                        {action && url && (
+                            <Section className="mt-[32px] mb-[32px] text-center">
+                                <Button
+                                    className={cn(
+                                        "action-button rounded px-5 py-3 text-center font-semibold text-[12px] no-underline",
+                                        classNames?.button
+                                    )}
+                                    href={url}
+                                >
+                                    {action}
+                                </Button>
+                            </Section>
+                        )}
+
+                        <Hr
+                            className={cn(
+                                "mx-0 my-[26px] w-full border border-color border-solid",
+                                classNames?.hr
+                            )}
+                        />
+
+                        <Text
+                            className={cn(
+                                "text-[#666666] text-[12px] leading-[24px]",
+                                classNames?.footer
+                            )}
+                        >
+                            {siteName && <>{siteName} </>}
+
+                            {baseUrl && (
+                                <Link
+                                    className={cn(
+                                        "no-underline",
+                                        classNames?.link
+                                    )}
+                                    href={baseUrl}
+                                >
+                                    {baseUrl
+                                        ?.replace("https://", "")
+                                        .replace("http://", "")}
+                                </Link>
+                            )}
+                        </Text>
+                    </Container>
+                </Body>
+            </Tailwind>
+        </Html>
+    )
+}