@crossmint/client-sdk-react-ui 1.7.1 → 1.9.1

package/src/providers/CrossmintAuthProvider.tsx

@@ -1,21 +1,26 @@
-import { REFRESH_TOKEN_PREFIX, SESSION_PREFIX, deleteCookie, getCookie, setCookie } from "@/utils/authCookies";
 import { type ReactNode, createContext, useEffect, useState } from "react";
-import { createPortal } from "react-dom";
 
 import { CrossmintAuthService } from "@crossmint/client-sdk-auth";
 import type { EVMSmartWalletChain } from "@crossmint/client-sdk-smart-wallet";
 import { type UIConfig, validateApiKeyAndGetCrossmintBaseUrl } from "@crossmint/common-sdk-base";
-
-import AuthModal from "../components/auth/AuthModal";
+import {
+    SESSION_PREFIX,
+    REFRESH_TOKEN_PREFIX,
+    type AuthMaterialWithUser,
+    type SDKExternalUser,
+} from "@crossmint/common-sdk-auth";
+
+import AuthFormDialog from "../components/auth/AuthFormDialog";
 import { useCrossmint, useRefreshToken, useWallet } from "../hooks";
 import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
-import type { AuthMaterial, SDKExternalUser } from "@crossmint/common-sdk-auth";
+import { deleteCookie, getCookie, setCookie } from "@/utils/authCookies";
+import { AuthFormProvider } from "./auth/AuthFormProvider";
 
 export type CrossmintAuthWalletConfig = {
     defaultChain: EVMSmartWalletChain;
     createOnLogin: "all-users" | "off";
     type: "evm-smart-wallet";
-    showWalletModals?: boolean;
+    showPasskeyHelpers?: boolean;
 };
 
 export type LoginMethod = "email" | "google" | "farcaster";
@@ -64,12 +69,12 @@ export function CrossmintAuthProvider({
     );
     const crossmintAuthService = new CrossmintAuthService(crossmint.apiKey);
     const crossmintBaseUrl = validateApiKeyAndGetCrossmintBaseUrl(crossmint.apiKey);
-    const [modalOpen, setModalOpen] = useState(false);
+    const [dialogOpen, setDialogOpen] = useState(false);
 
-    const setAuthMaterial = (authMaterial: AuthMaterial) => {
-        setCookie(SESSION_PREFIX, authMaterial.jwtToken);
+    const setAuthMaterial = (authMaterial: AuthMaterialWithUser) => {
+        setCookie(SESSION_PREFIX, authMaterial.jwt);
         setCookie(REFRESH_TOKEN_PREFIX, authMaterial.refreshToken.secret, authMaterial.refreshToken.expiresAt);
-        setJwt(authMaterial.jwtToken);
+        setJwt(authMaterial.jwt);
         setRefreshToken(authMaterial.refreshToken.secret);
         setUser(authMaterial.user);
     };
@@ -96,7 +101,7 @@ export function CrossmintAuthProvider({
             return;
         }
 
-        setModalOpen(false);
+        setDialogOpen(false);
     }, [crossmint.jwt]);
 
     const login = () => {
@@ -105,20 +110,20 @@ export function CrossmintAuthProvider({
             return;
         }
 
-        setModalOpen(true);
+        setDialogOpen(true);
     };
 
     const getAuthStatus = (): AuthStatus => {
         if (crossmint.jwt != null) {
             return "logged-in";
         }
-        if (modalOpen) {
+        if (dialogOpen) {
             return "in-progress";
         }
         return "logged-out";
     };
 
-    const fetchAuthMaterial = async (refreshToken: string): Promise<AuthMaterial> => {
+    const fetchAuthMaterial = async (refreshToken: string): Promise<AuthMaterialWithUser> => {
         const authMaterial = await crossmintAuthService.refreshAuthMaterial(refreshToken);
         setAuthMaterial(authMaterial);
         return authMaterial;
@@ -148,26 +153,25 @@ export function CrossmintAuthProvider({
         >
             <CrossmintWalletProvider
                 defaultChain={embeddedWallets.defaultChain}
-                showWalletModals={embeddedWallets.showWalletModals}
+                showPasskeyHelpers={embeddedWallets.showPasskeyHelpers}
                 appearance={appearance}
             >
-                <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
-                    {children}
-                </WalletManager>
-                {modalOpen
-                    ? createPortal(
-                          <AuthModal
-                              baseUrl={crossmintBaseUrl}
-                              setModalOpen={setModalOpen}
-                              fetchAuthMaterial={fetchAuthMaterial}
-                              apiKey={crossmint.apiKey}
-                              appearance={appearance}
-                              loginMethods={loginMethods}
-                          />,
-
-                          document.body
-                      )
-                    : null}
+                <AuthFormProvider
+                    initialState={{
+                        apiKey: crossmint.apiKey,
+                        baseUrl: crossmintBaseUrl,
+                        fetchAuthMaterial,
+                        appearance,
+                        setDialogOpen,
+                        loginMethods,
+                    }}
+                >
+                    <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
+                        {children}
+                    </WalletManager>
+
+                    <AuthFormDialog open={dialogOpen} />
+                </AuthFormProvider>
             </CrossmintWalletProvider>
         </AuthContext.Provider>
     );

package/src/providers/CrossmintWalletProvider.tsx

@@ -57,12 +57,12 @@ export type WalletConfig = WalletParams & { type: "evm-smart-wallet" };
 export function CrossmintWalletProvider({
     children,
     defaultChain,
-    showWalletModals = true, // enabled by default
+    showPasskeyHelpers = true, // enabled by default
     appearance,
 }: {
     children: ReactNode;
     defaultChain: EVMSmartWalletChain;
-    showWalletModals?: boolean;
+    showPasskeyHelpers?: boolean;
     appearance?: UIConfig;
 }) {
     const { crossmint } = useCrossmint("CrossmintWalletProvider must be used within CrossmintProvider");
@@ -99,7 +99,7 @@ export function CrossmintWalletProvider({
     };
 
     const enhanceConfigWithPasskeyPrompts = (config: WalletConfig) => {
-        if (showWalletModals && (config.signer as PasskeySigner).type === "PASSKEY") {
+        if (showPasskeyHelpers && (config.signer as PasskeySigner).type === "PASSKEY") {
             return {
                 ...config,
                 signer: {

package/src/providers/auth/AuthFormProvider.test.tsx

@@ -0,0 +1,105 @@
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { AuthFormProvider, useAuthForm } from "./AuthFormProvider";
+import { describe, expect, test, vi } from "vitest";
+import type { LoginMethod } from "..";
+
+// Mock component to test the AuthFormProvider
+function TestComponent() {
+    const { step, apiKey, baseUrl, loginMethods, setStep, setDialogOpen, oauthUrlMap, isLoadingOauthUrlMap } =
+        useAuthForm();
+
+    return (
+        <div>
+            <div data-testid="step">{step}</div>
+            <div data-testid="api-key">{apiKey}</div>
+            <div data-testid="base-url">{baseUrl}</div>
+            <div data-testid="login-methods">{JSON.stringify(loginMethods)}</div>
+            <button onClick={() => setStep("otp")} data-testid="set-step">
+                Set Step to OTP
+            </button>
+            <button onClick={() => setDialogOpen(true)} data-testid="set-dialog-open">
+                Open Dialog
+            </button>
+            <div data-testid="oauth-url">{JSON.stringify(oauthUrlMap)}</div>
+            <div data-testid="is-loading-oauth-url">{isLoadingOauthUrlMap.toString()}</div>
+        </div>
+    );
+}
+
+describe("AuthFormProvider", () => {
+    const mockFetchAuthMaterial = vi.fn().mockResolvedValue({});
+    const mockInitialState = {
+        apiKey: "test-api-key",
+        baseUrl: "https://api.example.com",
+        fetchAuthMaterial: mockFetchAuthMaterial,
+        loginMethods: ["email", "google"] as LoginMethod[],
+        setDialogOpen: vi.fn(),
+    };
+
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn().mockResolvedValue({
+            ok: true,
+            json: () => Promise.resolve({ oauthUrl: "https://oauth.example.com" }),
+        });
+    });
+
+    test("provides initial context values and fetches OAuth URLs", async () => {
+        const { getByTestId } = render(
+            <AuthFormProvider initialState={mockInitialState}>
+                <TestComponent />
+            </AuthFormProvider>
+        );
+
+        expect(getByTestId("step").textContent).toBe("initial");
+        expect(getByTestId("api-key").textContent).toBe("test-api-key");
+        expect(getByTestId("base-url").textContent).toBe("https://api.example.com");
+        expect(getByTestId("login-methods").textContent).toBe('["email","google"]');
+
+        await waitFor(() => {
+            expect(getByTestId("oauth-url").textContent).toBe('{"google":"https://oauth.example.com"}');
+            expect(getByTestId("is-loading-oauth-url").textContent).toBe("false");
+        });
+    });
+
+    test("updates step", () => {
+        const { getByTestId } = render(
+            <AuthFormProvider initialState={mockInitialState}>
+                <TestComponent />
+            </AuthFormProvider>
+        );
+
+        fireEvent.click(getByTestId("set-step"));
+        expect(getByTestId("step").textContent).toBe("otp");
+    });
+
+    test("calls setDialogOpen", () => {
+        const { getByTestId } = render(
+            <AuthFormProvider initialState={mockInitialState}>
+                <TestComponent />
+            </AuthFormProvider>
+        );
+
+        fireEvent.click(getByTestId("set-dialog-open"));
+        expect(mockInitialState.setDialogOpen).toHaveBeenCalledWith(true);
+    });
+
+    test("handles OAuth URL fetch error", async () => {
+        global.fetch = vi.fn().mockRejectedValue(new Error("Fetch failed"));
+        const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+        const { getByTestId } = render(
+            <AuthFormProvider initialState={mockInitialState}>
+                <TestComponent />
+            </AuthFormProvider>
+        );
+
+        await waitFor(() => {
+            expect(getByTestId("oauth-url").textContent).toBe('{"google":""}');
+            expect(getByTestId("is-loading-oauth-url").textContent).toBe("false");
+        });
+
+        expect(consoleSpy).toHaveBeenCalled();
+        consoleSpy.mockRestore();
+    });
+});

package/src/providers/auth/AuthFormProvider.tsx

@@ -0,0 +1,116 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import type { AuthMaterialWithUser, OAuthProvider } from "@crossmint/common-sdk-auth";
+import type { UIConfig } from "@crossmint/common-sdk-base";
+import type { LoginMethod } from "../CrossmintAuthProvider";
+
+type AuthStep = "initial" | "walletMethod" | "otp" | "qrCode";
+type OAuthUrlMap = Record<OAuthProvider, string>;
+const initialOAuthUrlMap: OAuthUrlMap = {
+    google: "",
+    // Farcaster is not included here as it uses a different authentication method
+};
+interface AuthFormContextType {
+    step: AuthStep;
+    apiKey: string;
+    baseUrl: string;
+    fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterialWithUser>;
+    appearance?: UIConfig;
+    loginMethods: LoginMethod[];
+    oauthUrlMap: OAuthUrlMap;
+    isLoadingOauthUrlMap: boolean;
+    setStep: (step: AuthStep) => void;
+    setDialogOpen: (open: boolean) => void;
+}
+
+type ContextInitialStateProps = {
+    apiKey: string;
+    baseUrl: string;
+    fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterialWithUser>;
+    appearance?: UIConfig;
+    loginMethods: LoginMethod[];
+    setDialogOpen?: (open: boolean) => void;
+};
+
+const AuthFormContext = createContext<AuthFormContextType | undefined>(undefined);
+
+export const useAuthForm = () => {
+    const context = useContext(AuthFormContext);
+    if (!context) {
+        throw new Error("useAuthForm must be used within an AuthFormProvider");
+    }
+    return context;
+};
+
+export const AuthFormProvider = ({
+    children,
+    initialState,
+}: { children: ReactNode; initialState: ContextInitialStateProps }) => {
+    const [step, setStep] = useState<AuthStep>("initial");
+    const [oauthUrlMap, setOauthUrlMap] = useState<OAuthUrlMap>(initialOAuthUrlMap);
+    const [isLoadingOauthUrlMap, setIsLoadingOauthUrlMap] = useState(true);
+
+    const { loginMethods, apiKey, baseUrl } = initialState;
+
+    useEffect(() => {
+        const preFetchAndSetOauthUrl = async () => {
+            setIsLoadingOauthUrlMap(true);
+            try {
+                const oauthProviders = loginMethods.filter(
+                    (method): method is OAuthProvider => method in initialOAuthUrlMap
+                );
+
+                const oauthPromiseList = oauthProviders.map(async (provider) => {
+                    const url = await getOAuthUrl(provider, { apiKey, baseUrl });
+                    return { [provider]: url };
+                });
+
+                const oauthUrlMap = Object.assign({}, ...(await Promise.all(oauthPromiseList)));
+                setOauthUrlMap(oauthUrlMap);
+            } catch (error) {
+                console.error("Error fetching OAuth URLs:", error);
+            } finally {
+                setIsLoadingOauthUrlMap(false);
+            }
+        };
+        preFetchAndSetOauthUrl();
+    }, [loginMethods, apiKey, baseUrl]);
+
+    const value: AuthFormContextType = {
+        step,
+        apiKey,
+        baseUrl,
+        fetchAuthMaterial: initialState.fetchAuthMaterial,
+        appearance: initialState.appearance,
+        loginMethods,
+        oauthUrlMap,
+        isLoadingOauthUrlMap,
+        setDialogOpen: initialState.setDialogOpen ?? (() => {}),
+        setStep,
+    };
+
+    return <AuthFormContext.Provider value={value}>{children}</AuthFormContext.Provider>;
+};
+
+async function getOAuthUrl(provider: OAuthProvider, options: { baseUrl: string; apiKey: string }) {
+    try {
+        const queryParams = new URLSearchParams({ apiKey: options.apiKey });
+        const response = await fetch(
+            `${options.baseUrl}api/2024-09-26/session/sdk/auth/social/${provider}/start?${queryParams}`,
+            {
+                headers: {
+                    "x-api-key": options.apiKey,
+                },
+            }
+        );
+
+        if (!response.ok) {
+            throw new Error("Failed to get OAuth URL. Please try again or contact support.");
+        }
+
+        const data = (await response.json()) as { oauthUrl: string };
+        return data.oauthUrl;
+    } catch (error) {
+        console.error(`Error fetching OAuth URL for ${provider}:`, error);
+        throw new Error(`Failed to get OAuth URL for ${provider}. Please try again or contact support.`);
+    }
+}

package/src/providers/auth/FarcasterProvider.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { AuthKitProvider } from "@farcaster/auth-kit";
+
+export function FarcasterProvider({ baseUrl, children }: { baseUrl: string; children: ReactNode }) {
+    const config = {
+        rpcUrl: "https://mainnet.optimism.io",
+        domain: new URL(baseUrl).hostname.replace(/^www\./, ""),
+        siweUri: `${baseUrl}api/2024-09-26/session/sdk/auth/authenticate`,
+    };
+
+    return <AuthKitProvider config={config}>{children}</AuthKitProvider>;
+}

package/src/twind.config.ts

@@ -2,6 +2,106 @@ import { defineConfig } from "@twind/core";
 import presetTailwind from "@twind/preset-tailwind";
 
 export default defineConfig({
-    presets: [presetTailwind(/* options */)],
+    presets: [presetTailwind()],
+    theme: {
+        screens: {
+            xs: "480px",
+        },
+        extend: {
+            colors: {
+                // Crossmint colors (cm- prefix)
+                "cm-text-primary": "#00150D",
+                "cm-text-secondary": "#67797F",
+                "cm-background-primary": "#FFFFFF",
+                "cm-muted-primary": "#F0F2F4",
+                "cm-border": "#D9D9D9",
+                "cm-ring": "#1A73E8",
+            },
+            keyframes: {
+                "caret-blink": {
+                    "0%,70%,100%": { opacity: "1" },
+                    "20%,50%": { opacity: "0" },
+                },
+                "fade-in": {
+                    from: { opacity: "0" },
+                    to: { opacity: "1" },
+                },
+                "fade-out": {
+                    from: { opacity: "1" },
+                    to: { opacity: "0" },
+                },
+                "slide-in-from-top": {
+                    "0%": { transform: "translateY(-100%)" },
+                    "100%": { transform: "translateY(0)" },
+                },
+                "slide-out-to-top": {
+                    "0%": { transform: "translateY(0)" },
+                    "100%": { transform: "translateY(-100%)" },
+                },
+                "slide-in-from-bottom": {
+                    "0%": { transform: "translateY(100%)" },
+                    "100%": { transform: "translateY(0)" },
+                },
+                "slide-out-to-bottom": {
+                    "0%": { transform: "translateY(0)" },
+                    "100%": { transform: "translateY(100%)" },
+                },
+                "slide-in-from-left": {
+                    "0%": { transform: "translateX(-100%)" },
+                    "100%": { transform: "translateX(0)" },
+                },
+                "slide-out-to-left": {
+                    "0%": { transform: "translateX(0)" },
+                    "100%": { transform: "translateX(-100%)" },
+                },
+                "slide-in-from-right": {
+                    "0%": { transform: "translateX(100%)" },
+                    "100%": { transform: "translateX(0)" },
+                },
+                "slide-out-to-right": {
+                    "0%": { transform: "translateX(0)" },
+                    "100%": { transform: "translateX(100%)" },
+                },
+                "zoom-in-95": {
+                    "0%": { opacity: "0", transform: "scale(0.95) translate(-50%, -50%)" },
+                    "100%": { opacity: "1", transform: "scale(1) translate(-50%, -50%)" },
+                },
+                "zoom-out-95": {
+                    "0%": { opacity: "1", transform: "scale(1) translate(-50%, -50%)" },
+                    "100%": { opacity: "0", transform: "scale(0.95) translate(-50%, -50%)" },
+                },
+            },
+            animation: {
+                "caret-blink": "caret-blink 1.25s ease-out infinite",
+                "fade-in": "fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "fade-out": "fade-out 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-in-from-top": "slide-in-from-top 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-out-to-top": "slide-out-to-top 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-in-from-bottom": "slide-in-from-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-out-to-bottom": "slide-out-to-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-in-from-left": "slide-in-from-left 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-out-to-left": "slide-out-to-left 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-in-from-right": "slide-in-from-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-out-to-right": "slide-out-to-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "zoom-in-95": "zoom-in-95 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "zoom-out-95": "zoom-out-95 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+            },
+            durations: {
+                "300": "300ms",
+                "500": "500ms",
+            },
+        },
+    },
+    rules: [
+        [
+            "responsive-border-radius-auth-dialog",
+            {
+                "@media (max-width: 479px)": {
+                    "border-bottom-left-radius": "0 !important",
+                    "border-bottom-right-radius": "0 !important",
+                },
+            },
+        ],
+    ],
     /* config */
 });

package/src/types/auth.ts

@@ -0,0 +1,4 @@
+export type OtpEmailPayload = {
+    email: string;
+    emailId: string;
+};

package/src/utils/authCookies.ts

@@ -1,6 +1,3 @@
-export const SESSION_PREFIX = "crossmint-jwt";
-export const REFRESH_TOKEN_PREFIX = "crossmint-refresh-token";
-
 export function getCookie(name: string): string | undefined {
     const crossmintRefreshToken = document.cookie.split("; ").find((row) => row.startsWith(name));
     return crossmintRefreshToken ? crossmintRefreshToken.split("=")[1] : undefined;

package/src/utils/createCrossmintApiClient.ts

@@ -0,0 +1,17 @@
+import { LIB_VERSION } from "@/consts/version";
+import { type Crossmint, CrossmintApiClient, type CrossmintApiClientInternalConfig } from "@crossmint/common-sdk-base";
+
+export function createCrossmintApiClient(
+    crossmint: Crossmint,
+    apiKeyExpectations?: CrossmintApiClientInternalConfig["apiKeyExpectations"]
+) {
+    return new CrossmintApiClient(crossmint, {
+        internalConfig: {
+            sdkMetadata: {
+                name: "@crossmint/client-sdk-react-ui",
+                version: LIB_VERSION,
+            },
+            apiKeyExpectations,
+        },
+    });
+}