Headless Auth: POC demo

apps/wallets/smart-wallet/next/src/app/_lib/providers.tsx

@@ -19,7 +19,7 @@ export function Providers({ children }: { children: ReactNode }) {
                     }}
                     appearance={{
                         spacingUnit: "8px",
-                        borderRadius: "12px",
+                        borderRadius: "16px",
                         colors: {
                             inputBackground: "#fffdf9",
                             buttonBackground: "#fffaf2",
@@ -31,6 +31,7 @@ export function Providers({ children }: { children: ReactNode }) {
                             accent: "#602C1B",
                         },
                     }}
+                    loginMethods={["email", "google", "farcaster", "discord"]}
                 >
                     {children}
                 </CrossmintAuthProvider>

packages/client/ui/react-ui/package.json

@@ -24,19 +24,24 @@
         "@crossmint/client-sdk-base": "workspace:*",
         "@crossmint/client-sdk-smart-wallet": "workspace:*",
         "@crossmint/client-sdk-window": "workspace:*",
-        "@crossmint/common-sdk-base": "workspace:*",
         "@crossmint/common-sdk-auth": "workspace:*",
+        "@crossmint/common-sdk-base": "workspace:*",
         "@ethersproject/transactions": "5.7.0",
+        "@farcaster/auth-kit": "0.6.0",
         "@headlessui/react": "2.1.5",
+        "@radix-ui/react-dialog": "1.1.2",
+        "@radix-ui/react-visually-hidden": "1.1.0",
         "@solana/web3.js": "1.95.1",
         "@twind/core": "1.1.3",
         "@twind/preset-tailwind": "1.1.4",
         "bs58": "5.0.0",
         "clsx": "2.1.1",
+        "input-otp": "1.2.4",
         "lodash.isequal": "4.5.0",
         "react-jss": "10.10.0",
         "tailwind-merge": "2.4.0",
         "tailwindcss": "3.4.10",
+        "viem": "2.17.5",
         "zod": "3.22.4"
     },
     "devDependencies": {

packages/client/ui/react-ui/src/components/auth/AuthForm.tsx

@@ -0,0 +1,80 @@
+import type React from "react";
+import { useAuthForm } from "@/providers/auth/AuthFormProvider";
+import { EmailAuthFlow } from "./methods/email/EmailAuthFlow";
+import { Divider } from "../common/Divider";
+import { GoogleSignIn } from "./methods/google/GoogleSignIn";
+import { FarcasterSignIn } from "./methods/farcaster/FarcasterSignIn";
+import { PoweredByCrossmint } from "../common/PoweredByCrossmint";
+import { FarcasterProvider } from "../../providers/auth/FarcasterProvider";
+import { DiscordSignIn } from "./methods/discord/DiscordSignIn";
+import { classNames } from "@/utils/classNames";
+import { LeftArrowIcon } from "@/icons/leftArrow";
+import type { LoginMethod } from "../../providers/CrossmintAuthProvider";
+
+export function AuthForm({ loginMethods }: { loginMethods: LoginMethod[] }) {
+    const { step, appearance, baseUrl } = useAuthForm();
+
+    return (
+        <div className="flex flex-col gap-4 max-w-[448px]">
+            {step === "initial" ? (
+                <div>
+                    <h1
+                        className="text-2xl font-semibold text-cm-text-primary"
+                        style={{ color: appearance?.colors?.textPrimary }}
+                    >
+                        Sign In
+                    </h1>
+                    <p
+                        className="text-base font-normal mb-5 text-cm-text-secondary"
+                        style={{ color: appearance?.colors?.textSecondary }}
+                    >
+                        Sign in using one of the options below
+                    </p>
+                </div>
+            ) : null}
+
+            {loginMethods.includes("email") ? (
+                <>
+                    <EmailAuthFlow />
+                    {loginMethods.length > 1 ? <Divider appearance={appearance} text="OR" /> : null}
+                </>
+            ) : null}
+
+            {loginMethods.includes("google") ? <GoogleSignIn /> : null}
+            {loginMethods.includes("farcaster") ? (
+                <FarcasterProvider baseUrl={baseUrl}>
+                    <FarcasterSignIn />
+                </FarcasterProvider>
+            ) : null}
+
+            {loginMethods.includes("discord") ? <DiscordSignIn /> : null}
+
+            {step === "initial" || step === "otp" ? (
+                <PoweredByCrossmint className="justify-center" color={appearance?.colors?.textSecondary ?? "#A4AFB2"} />
+            ) : null}
+        </div>
+    );
+}
+
+export const AuthFormBackButton = ({
+    className,
+    iconColor,
+    ringColor,
+    ...props
+}: React.HTMLAttributes<HTMLButtonElement> & { iconColor?: string; ringColor?: string }) => {
+    return (
+        <button
+            className={classNames(
+                "relative rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-cm-ring focus:ring-offset-2 disabled:pointer-events-none",
+                className
+            )}
+            style={{
+                // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
+                "--tw-ring-color": ringColor ?? "#1A73E8",
+            }}
+            {...props}
+        >
+            <LeftArrowIcon className="w-6 h-6" style={{ color: iconColor }} />
+        </button>
+    );
+};

packages/client/ui/react-ui/src/components/auth/AuthFormDialog.tsx

@@ -0,0 +1,33 @@
+import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
+import { useAuthForm } from "@/providers/auth/AuthFormProvider";
+import { AuthForm } from "./AuthForm";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../common/Dialog";
+import type { LoginMethod } from "../../providers/CrossmintAuthProvider";
+
+export default function AuthFormDialog({ open, loginMethods }: { open: boolean; loginMethods: LoginMethod[] }) {
+    const { appearance, setDialogOpen } = useAuthForm();
+
+    return (
+        <Dialog open={open} onOpenChange={setDialogOpen}>
+            <DialogContent
+                onInteractOutside={(e) => e.preventDefault()}
+                onOpenAutoFocus={(e) => e.preventDefault()}
+                closeButtonColor={appearance?.colors?.textPrimary}
+                closeButtonRingColor={appearance?.colors?.accent}
+                style={{
+                    borderTopLeftRadius: appearance?.borderRadius,
+                    borderTopRightRadius: appearance?.borderRadius,
+                    backgroundColor: appearance?.colors?.background,
+                }}
+            >
+                <VisuallyHidden asChild>
+                    <DialogTitle>Crossmint Auth</DialogTitle>
+                </VisuallyHidden>
+                <VisuallyHidden asChild>
+                    <DialogDescription>Sign in via Crossmint</DialogDescription>
+                </VisuallyHidden>
+                <AuthForm loginMethods={loginMethods} />
+            </DialogContent>
+        </Dialog>
+    );
+}