@erikey/react 0.4.26 → 0.4.28

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

@@ -0,0 +1,435 @@
+"use client"
+
+import { ArrowLeftIcon } from "lucide-react"
+import { type ReactNode, useContext, useEffect, useState } from "react"
+import { useIsHydrated } from "../../hooks/use-hydrated"
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { socialProviders } from "../../lib/social-providers"
+import { cn, getViewByPath } from "../../lib/utils"
+import type { AuthViewPaths } from "../../lib/view-paths"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import { Button } from "../ui/button"
+import {
+    Card,
+    CardContent,
+    CardDescription,
+    CardFooter,
+    CardHeader,
+    CardTitle
+} from "../ui/card"
+import { Separator } from "../ui/separator"
+import { AuthCallback } from "./auth-callback"
+import { AuthForm, type AuthFormClassNames } from "./auth-form"
+import { EmailOTPButton } from "./email-otp-button"
+import { MagicLinkButton } from "./magic-link-button"
+import { OneTap } from "./one-tap"
+import { PasskeyButton } from "./passkey-button"
+import { ProviderButton } from "./provider-button"
+import { WalletButton } from "./wallet-button"
+import { SignOut } from "./sign-out"
+
+export type AuthViewClassNames = {
+    base?: string
+    content?: string
+    description?: string
+    footer?: string
+    footerLink?: string
+    continueWith?: string
+    form?: AuthFormClassNames
+    header?: string
+    separator?: string
+    title?: string
+}
+
+export interface AuthViewProps {
+    className?: string
+    classNames?: AuthViewClassNames
+    callbackURL?: string
+    cardHeader?: ReactNode
+    cardFooter?: ReactNode
+    localization?: AuthLocalization
+    path?: string
+    pathname?: string
+    redirectTo?: string
+    socialLayout?: "auto" | "horizontal" | "grid" | "vertical"
+    view?: keyof AuthViewPaths
+    otpSeparators?: 0 | 1 | 2
+}
+
+export function AuthView({
+    className,
+    classNames,
+    callbackURL,
+    cardHeader,
+    cardFooter,
+    localization,
+    path: pathProp,
+    pathname,
+    redirectTo,
+    socialLayout: socialLayoutProp = "auto",
+    view: viewProp,
+    otpSeparators = 0
+}: AuthViewProps) {
+    const isHydrated = useIsHydrated()
+    const {
+        basePath,
+        credentials,
+        localization: contextLocalization,
+        magicLink,
+        emailOTP,
+        oneTap,
+        passkey,
+        wallet,
+        signUp,
+        social,
+        genericOAuth,
+        viewPaths,
+        Link
+    } = useContext(AuthUIContext)
+
+    localization = { ...contextLocalization, ...localization }
+
+    let socialLayout = socialLayoutProp
+    if (socialLayout === "auto") {
+        socialLayout = !credentials
+            ? "vertical"
+            : social?.providers && social.providers.length > 2
+              ? "horizontal"
+              : "vertical"
+    }
+
+    const path = pathProp ?? pathname?.split("/").pop()
+
+    const view = viewProp || getViewByPath(viewPaths!, path) || "SIGN_IN"
+
+    const [isSubmitting, setIsSubmitting] = useState(false)
+    const [providerError, setProviderError] = useState<string | null>(null)
+
+    // Clear provider error when starting a new submission
+    const handleSetIsSubmitting = (value: boolean) => {
+        if (value) setProviderError(null)
+        setIsSubmitting(value)
+    }
+
+    useEffect(() => {
+        const handlePageHide = () => setIsSubmitting(false)
+        window.addEventListener("pagehide", handlePageHide)
+        return () => {
+            setIsSubmitting(false)
+            window.removeEventListener("pagehide", handlePageHide)
+        }
+    }, [])
+
+    if (view === "CALLBACK") return <AuthCallback redirectTo={redirectTo} />
+    if (view === "SIGN_OUT") return <SignOut redirectTo={redirectTo} />
+
+    const description =
+        !credentials && !magicLink && !emailOTP
+            ? localization.DISABLED_CREDENTIALS_DESCRIPTION
+            : localization[`${view}_DESCRIPTION` as keyof typeof localization]
+
+    return (
+        <Card className={cn("w-full max-w-sm", className, classNames?.base)}>
+            <CardHeader className={classNames?.header}>
+                {cardHeader ? (
+                    cardHeader
+                ) : (
+                    <>
+                        <CardTitle
+                            className={cn(
+                                "text-lg md:text-xl",
+                                classNames?.title
+                            )}
+                        >
+                            {localization[view as keyof typeof localization]}
+                        </CardTitle>
+                        {description && (
+                            <CardDescription
+                                className={cn(
+                                    "text-xs md:text-sm",
+                                    classNames?.description
+                                )}
+                            >
+                                {description}
+                            </CardDescription>
+                        )}
+                    </>
+                )}
+            </CardHeader>
+
+            <CardContent className={cn("grid gap-6", classNames?.content)}>
+                {oneTap &&
+                    ["SIGN_IN", "SIGN_UP", "MAGIC_LINK", "EMAIL_OTP"].includes(
+                        view as string
+                    ) && (
+                        <OneTap
+                            localization={localization}
+                            redirectTo={redirectTo}
+                        />
+                    )}
+
+                {(credentials || magicLink || emailOTP) && (
+                    <div className="grid gap-4">
+                        <AuthForm
+                            classNames={classNames?.form}
+                            callbackURL={callbackURL}
+                            isSubmitting={isSubmitting}
+                            localization={localization}
+                            otpSeparators={otpSeparators}
+                            view={view}
+                            redirectTo={redirectTo}
+                            setIsSubmitting={handleSetIsSubmitting}
+                        />
+
+                        {magicLink &&
+                            ((credentials &&
+                                [
+                                    "FORGOT_PASSWORD",
+                                    "SIGN_UP",
+                                    "SIGN_IN",
+                                    "MAGIC_LINK",
+                                    "EMAIL_OTP"
+                                ].includes(view as string)) ||
+                                (emailOTP && view === "EMAIL_OTP")) && (
+                                <MagicLinkButton
+                                    classNames={classNames}
+                                    localization={localization}
+                                    view={view}
+                                    isSubmitting={isSubmitting}
+                                />
+                            )}
+
+                        {emailOTP &&
+                            ((credentials &&
+                                [
+                                    "FORGOT_PASSWORD",
+                                    "SIGN_UP",
+                                    "SIGN_IN",
+                                    "MAGIC_LINK",
+                                    "EMAIL_OTP"
+                                ].includes(view as string)) ||
+                                (magicLink &&
+                                    ["SIGN_IN", "MAGIC_LINK"].includes(
+                                        view as string
+                                    ))) && (
+                                <EmailOTPButton
+                                    classNames={classNames}
+                                    localization={localization}
+                                    view={view}
+                                    isSubmitting={isSubmitting}
+                                />
+                            )}
+                    </div>
+                )}
+
+                {view !== "RESET_PASSWORD" &&
+                    view !== "EMAIL_VERIFICATION" &&
+                    (social?.providers?.length ||
+                        genericOAuth?.providers?.length ||
+                        (view === "SIGN_IN" && passkey)) && (
+                        <>
+                            {(credentials || magicLink || emailOTP) && (
+                                <div
+                                    className={cn(
+                                        "flex items-center gap-2",
+                                        classNames?.continueWith
+                                    )}
+                                >
+                                    <Separator
+                                        className={cn(
+                                            "!w-auto grow",
+                                            classNames?.separator
+                                        )}
+                                    />
+                                    <span className="flex-shrink-0 text-muted-foreground text-sm">
+                                        {localization.OR_CONTINUE_WITH}
+                                    </span>
+                                    <Separator
+                                        className={cn(
+                                            "!w-auto grow",
+                                            classNames?.separator
+                                        )}
+                                    />
+                                </div>
+                            )}
+
+                            <div className="grid gap-4">
+                                {(social?.providers?.length ||
+                                    genericOAuth?.providers?.length) && (
+                                    <div
+                                        className={cn(
+                                            "flex w-full items-center justify-between gap-4",
+                                            socialLayout === "horizontal" &&
+                                                "flex-wrap",
+                                            socialLayout === "vertical" &&
+                                                "flex-col",
+                                            socialLayout === "grid" &&
+                                                "grid grid-cols-2"
+                                        )}
+                                    >
+                                        {social?.providers?.map((provider) => {
+                                            const socialProvider =
+                                                socialProviders.find(
+                                                    (socialProvider) =>
+                                                        socialProvider.provider ===
+                                                        provider
+                                                )
+                                            if (!socialProvider) return null
+                                            return (
+                                                <ProviderButton
+                                                    key={provider}
+                                                    classNames={classNames}
+                                                    callbackURL={callbackURL}
+                                                    isSubmitting={isSubmitting}
+                                                    localization={localization}
+                                                    onError={setProviderError}
+                                                    provider={socialProvider}
+                                                    redirectTo={redirectTo}
+                                                    setIsSubmitting={
+                                                        handleSetIsSubmitting
+                                                    }
+                                                    socialLayout={socialLayout}
+                                                />
+                                            )
+                                        })}
+                                        {genericOAuth?.providers?.map(
+                                            (provider) => (
+                                                <ProviderButton
+                                                    key={provider.provider}
+                                                    classNames={classNames}
+                                                    callbackURL={callbackURL}
+                                                    isSubmitting={isSubmitting}
+                                                    localization={localization}
+                                                    onError={setProviderError}
+                                                    provider={provider}
+                                                    redirectTo={redirectTo}
+                                                    setIsSubmitting={
+                                                        handleSetIsSubmitting
+                                                    }
+                                                    socialLayout={socialLayout}
+                                                    other
+                                                />
+                                            )
+                                        )}
+                                    </div>
+                                )}
+
+                                {providerError && (
+                                    <div className="rounded-md bg-destructive/10 p-3 text-sm text-destructive">
+                                        {providerError}
+                                    </div>
+                                )}
+
+                                {passkey &&
+                                    [
+                                        "SIGN_IN",
+                                        "MAGIC_LINK",
+                                        "EMAIL_OTP",
+                                        "RECOVER_ACCOUNT",
+                                        "TWO_FACTOR",
+                                        "FORGOT_PASSWORD"
+                                    ].includes(view as string) && (
+                                        <PasskeyButton
+                                            classNames={classNames}
+                                            isSubmitting={isSubmitting}
+                                            localization={localization}
+                                            redirectTo={redirectTo}
+                                            setIsSubmitting={handleSetIsSubmitting}
+                                        />
+                                    )}
+
+                                {wallet &&
+                                    [
+                                        "SIGN_IN",
+                                        "SIGN_UP",
+                                        "MAGIC_LINK",
+                                        "EMAIL_OTP"
+                                    ].includes(view as string) && (
+                                        <WalletButton
+                                            classNames={classNames}
+                                            isSubmitting={isSubmitting}
+                                            localization={localization}
+                                            redirectTo={redirectTo}
+                                            setIsSubmitting={handleSetIsSubmitting}
+                                        />
+                                    )}
+                            </div>
+                        </>
+                    )}
+            </CardContent>
+
+            {cardFooter && (
+                <CardFooter className={classNames?.footer}>
+                    {cardFooter}
+                </CardFooter>
+            )}
+
+            {credentials && signUp && (
+                <CardFooter
+                    className={cn(
+                        "justify-center gap-1.5 text-muted-foreground text-sm",
+                        classNames?.footer
+                    )}
+                >
+                    {view === "SIGN_IN" ||
+                    view === "MAGIC_LINK" ||
+                    view === "EMAIL_OTP" ? (
+                        localization.DONT_HAVE_AN_ACCOUNT
+                    ) : view === "SIGN_UP" ? (
+                        localization.ALREADY_HAVE_AN_ACCOUNT
+                    ) : (
+                        <ArrowLeftIcon className="size-3" />
+                    )}
+
+                    {view === "SIGN_IN" ||
+                    view === "MAGIC_LINK" ||
+                    view === "EMAIL_OTP" ||
+                    view === "SIGN_UP" ? (
+                        <Link
+                            className={cn(
+                                "text-foreground underline",
+                                classNames?.footerLink
+                            )}
+                            href={`${basePath}/${
+                                viewPaths[
+                                    view === "SIGN_IN" ||
+                                    view === "MAGIC_LINK" ||
+                                    view === "EMAIL_OTP"
+                                        ? "SIGN_UP"
+                                        : "SIGN_IN"
+                                ]
+                            }${isHydrated ? window.location.search : ""}`}
+                        >
+                            <Button
+                                variant="link"
+                                size="sm"
+                                className={cn(
+                                    "px-0 text-foreground underline",
+                                    classNames?.footerLink
+                                )}
+                            >
+                                {view === "SIGN_IN" ||
+                                view === "MAGIC_LINK" ||
+                                view === "EMAIL_OTP"
+                                    ? localization.SIGN_UP
+                                    : localization.SIGN_IN}
+                            </Button>
+                        </Link>
+                    ) : (
+                        <Button
+                            variant="link"
+                            size="sm"
+                            className={cn(
+                                "px-0 text-foreground underline",
+                                classNames?.footerLink
+                            )}
+                            onClick={() => window.history.back()}
+                        >
+                            {localization.GO_BACK}
+                        </Button>
+                    )}
+                </CardFooter>
+            )}
+        </Card>
+    )
+}

package/src/ui/components/auth/email-otp-button.tsx

@@ -0,0 +1,53 @@
+import { LockIcon, MailIcon } from "lucide-react"
+import { useContext } from "react"
+
+import { AuthUIContext } from "../../lib/auth-ui-provider"
+import { cn } from "../../lib/utils"
+import type { AuthViewPath } from "../../lib/view-paths"
+import type { AuthLocalization } from "../../localization/auth-localization"
+import { Button } from "../ui/button"
+import type { AuthViewClassNames } from "./auth-view"
+
+interface EmailOTPButtonProps {
+    classNames?: AuthViewClassNames
+    isSubmitting?: boolean
+    localization: Partial<AuthLocalization>
+    view: AuthViewPath
+}
+
+export function EmailOTPButton({
+    classNames,
+    isSubmitting,
+    localization,
+    view
+}: EmailOTPButtonProps) {
+    const { viewPaths, navigate, basePath } = useContext(AuthUIContext)
+
+    return (
+        <Button
+            className={cn(
+                "w-full",
+                classNames?.form?.button,
+                classNames?.form?.secondaryButton
+            )}
+            disabled={isSubmitting}
+            type="button"
+            variant="secondary"
+            onClick={() =>
+                navigate(
+                    `${basePath}/${view === "EMAIL_OTP" ? viewPaths.SIGN_IN : viewPaths.EMAIL_OTP}${window.location.search}`
+                )
+            }
+        >
+            {view === "EMAIL_OTP" ? (
+                <LockIcon className={classNames?.form?.icon} />
+            ) : (
+                <MailIcon className={classNames?.form?.icon} />
+            )}
+            {localization.SIGN_IN_WITH}{" "}
+            {view === "EMAIL_OTP"
+                ? localization.PASSWORD
+                : localization.EMAIL_OTP}
+        </Button>
+    )
+}