@crossmint/client-sdk-react-ui 1.4.1 → 1.6.0

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -44,6 +44,10 @@ vi.mock("@crossmint/client-sdk-auth-core/client", async () => {
                     secret: "new-mock-refresh-token",
                     expiresAt: new Date(Date.now() + 1000 * 60 * 60).toISOString(),
                 },
+                user: {
+                    id: "123",
+                    email: "test@test.com",
+                },
             }),
         })),
     };

package/src/providers/CrossmintAuthProvider.tsx

@@ -2,7 +2,7 @@ import { REFRESH_TOKEN_PREFIX, SESSION_PREFIX, deleteCookie, getCookie, setCooki
 import { type ReactNode, createContext, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
-import { CrossmintAuthService } from "@crossmint/client-sdk-auth-core/client";
+import { CrossmintAuthService, type SDKExternalUser } from "@crossmint/client-sdk-auth-core/client";
 import type { EVMSmartWalletChain } from "@crossmint/client-sdk-smart-wallet";
 import { type UIConfig, validateApiKeyAndGetCrossmintBaseUrl } from "@crossmint/common-sdk-base";
 
@@ -14,6 +14,7 @@ export type CrossmintAuthWalletConfig = {
     defaultChain: EVMSmartWalletChain;
     createOnLogin: "all-users" | "off";
     type: "evm-smart-wallet";
+    showWalletModals?: boolean;
 };
 
 export type CrossmintAuthProviderProps = {
@@ -29,16 +30,20 @@ type AuthContextType = {
     logout: () => void;
     jwt?: string;
     refreshToken?: string;
+    user?: SDKExternalUser;
     status: AuthStatus;
+    getUser: () => void;
 };
 
 export const AuthContext = createContext<AuthContextType>({
     login: () => {},
     logout: () => {},
     status: "logged-out",
+    getUser: () => {},
 });
 
 export function CrossmintAuthProvider({ embeddedWallets, children, appearance }: CrossmintAuthProviderProps) {
+    const [user, setUser] = useState<SDKExternalUser | undefined>(undefined);
     const { crossmint, setJwt, setRefreshToken } = useCrossmint(
         "CrossmintAuthProvider must be used within CrossmintProvider"
     );
@@ -51,6 +56,7 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
         setCookie(REFRESH_TOKEN_PREFIX, authMaterial.refreshToken.secret, authMaterial.refreshToken.expiresAt);
         setJwt(authMaterial.jwtToken);
         setRefreshToken(authMaterial.refreshToken.secret);
+        setUser(authMaterial.user);
     };
 
     const logout = () => {
@@ -58,19 +64,11 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
         deleteCookie(REFRESH_TOKEN_PREFIX);
         setJwt(undefined);
         setRefreshToken(undefined);
+        setUser(undefined);
     };
 
     useRefreshToken({ crossmintAuthService, setAuthMaterial, logout });
 
-    const login = () => {
-        if (crossmint.jwt != null) {
-            console.log("User already logged in");
-            return;
-        }
-
-        setModalOpen(true);
-    };
-
     useEffect(() => {
         if (crossmint.jwt == null) {
             const jwt = getCookie(SESSION_PREFIX);
@@ -86,6 +84,15 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
         setModalOpen(false);
     }, [crossmint.jwt]);
 
+    const login = () => {
+        if (crossmint.jwt != null) {
+            console.log("User already logged in");
+            return;
+        }
+
+        setModalOpen(true);
+    };
+
     const getAuthStatus = (): AuthStatus => {
         if (crossmint.jwt != null) {
             return "logged-in";
@@ -96,6 +103,22 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
         return "logged-out";
     };
 
+    const fetchAuthMaterial = async (refreshToken: string): Promise<AuthMaterial> => {
+        const authMaterial = await crossmintAuthService.refreshAuthMaterial(refreshToken);
+        setAuthMaterial(authMaterial);
+        return authMaterial;
+    };
+
+    const getUser = async () => {
+        if (crossmint.jwt == null) {
+            console.log("User not logged in");
+            return;
+        }
+
+        const user = await crossmintAuthService.getUserFromClient(crossmint.jwt);
+        setUser(user);
+    };
+
     return (
         <AuthContext.Provider
             value={{
@@ -103,10 +126,16 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
                 logout,
                 jwt: crossmint.jwt,
                 refreshToken: crossmint.refreshToken,
+                user,
                 status: getAuthStatus(),
+                getUser,
             }}
         >
-            <CrossmintWalletProvider defaultChain={embeddedWallets.defaultChain}>
+            <CrossmintWalletProvider
+                defaultChain={embeddedWallets.defaultChain}
+                showWalletModals={embeddedWallets.showWalletModals}
+                appearance={appearance}
+            >
                 <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
                     {children}
                 </WalletManager>
@@ -115,7 +144,7 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
                           <AuthModal
                               baseUrl={crossmintBaseUrl}
                               setModalOpen={setModalOpen}
-                              setAuthMaterial={setAuthMaterial}
+                              fetchAuthMaterial={fetchAuthMaterial}
                               apiKey={crossmint.apiKey}
                               appearance={appearance}
                           />,

package/src/providers/CrossmintWalletProvider.tsx

@@ -1,4 +1,5 @@
 import { type ReactNode, createContext, useMemo, useState } from "react";
+import { createPortal } from "react-dom";
 
 import {
     type EVMSmartWallet,
@@ -6,11 +7,30 @@ import {
     SmartWalletError,
     SmartWalletSDK,
     type WalletParams,
+    type PasskeySigner,
 } from "@crossmint/client-sdk-smart-wallet";
 
 import { useCrossmint } from "../hooks";
+import type { UIConfig } from "@crossmint/common-sdk-base";
+import { PasskeyPrompt } from "@/components/auth/PasskeyPrompt";
 
 type WalletStatus = "not-loaded" | "in-progress" | "loaded" | "loading-error";
+
+type ValidPasskeyPromptType =
+    | "create-wallet"
+    | "transaction"
+    | "not-supported"
+    | "create-wallet-error"
+    | "transaction-error";
+type PasskeyPromptState =
+    | {
+          type: ValidPasskeyPromptType;
+          open: true;
+          primaryActionOnClick: () => void;
+          secondaryActionOnClick?: () => void;
+      }
+    | { open: false };
+
 type ValidWalletState =
     | { status: "not-loaded" | "in-progress" }
     | { status: "loaded"; wallet: EVMSmartWallet }
@@ -20,13 +40,15 @@ type WalletContext = {
     status: WalletStatus;
     wallet?: EVMSmartWallet;
     error?: SmartWalletError;
-    getOrCreateWallet: (config?: WalletConfig) => { startedCreation: boolean; reason?: string };
+    getOrCreateWallet: (
+        config?: Pick<WalletConfig, "signer" | "type">
+    ) => Promise<{ startedCreation: boolean; reason?: string }>;
     clearWallet: () => void;
 };
 
 export const WalletContext = createContext<WalletContext>({
     status: "not-loaded",
-    getOrCreateWallet: () => ({ startedCreation: false }),
+    getOrCreateWallet: () => Promise.resolve({ startedCreation: false }),
     clearWallet: () => {},
 });
 
@@ -35,17 +57,24 @@ export type WalletConfig = WalletParams & { type: "evm-smart-wallet" };
 export function CrossmintWalletProvider({
     children,
     defaultChain,
+    showWalletModals = true, // enabled by default
+    appearance,
 }: {
     children: ReactNode;
     defaultChain: EVMSmartWalletChain;
+    showWalletModals?: boolean;
+    appearance?: UIConfig;
 }) {
     const { crossmint } = useCrossmint("CrossmintWalletProvider must be used within CrossmintProvider");
     const smartWalletSDK = useMemo(() => SmartWalletSDK.init({ clientApiKey: crossmint.apiKey }), [crossmint.apiKey]);
 
-    const [state, setState] = useState<ValidWalletState>({ status: "not-loaded" });
+    const [walletState, setWalletState] = useState<ValidWalletState>({ status: "not-loaded" });
+    const [passkeyPromptState, setPasskeyPromptState] = useState<PasskeyPromptState>({ open: false });
 
-    const getOrCreateWallet = (config: WalletConfig = { type: "evm-smart-wallet", signer: { type: "PASSKEY" } }) => {
-        if (state.status == "in-progress") {
+    const getOrCreateWallet = async (
+        config: WalletConfig = { type: "evm-smart-wallet", signer: { type: "PASSKEY" } }
+    ) => {
+        if (walletState.status == "in-progress") {
             console.log("Wallet already loading");
             return { startedCreation: false, reason: "Wallet is already loading." };
         }
@@ -54,31 +83,64 @@ export function CrossmintWalletProvider({
             return { startedCreation: false, reason: `Jwt not set in "CrossmintProvider".` };
         }
 
-        const internalCall = async () => {
-            try {
-                setState({ status: "in-progress" });
-                const wallet = await smartWalletSDK.getOrCreateWallet(
-                    { jwt: crossmint.jwt as string },
-                    defaultChain,
-                    config
-                );
-                setState({ status: "loaded", wallet });
-            } catch (error: unknown) {
-                console.error("There was an error creating a wallet ", error);
-                setState(deriveErrorState(error));
-            }
-        };
-
-        internalCall();
+        try {
+            setWalletState({ status: "in-progress" });
+            const wallet = await smartWalletSDK.getOrCreateWallet(
+                { jwt: crossmint.jwt as string },
+                defaultChain,
+                enhanceConfigWithPasskeyPrompts(config)
+            );
+            setWalletState({ status: "loaded", wallet });
+        } catch (error: unknown) {
+            console.error("There was an error creating a wallet ", error);
+            setWalletState(deriveErrorState(error));
+        }
         return { startedCreation: true };
     };
 
+    const enhanceConfigWithPasskeyPrompts = (config: WalletConfig) => {
+        if (showWalletModals && (config.signer as PasskeySigner).type === "PASSKEY") {
+            return {
+                ...config,
+                signer: {
+                    ...config.signer,
+                    onPrePasskeyRegistration: createPasskeyPrompt("create-wallet"),
+                    onPasskeyRegistrationError: createPasskeyPrompt("create-wallet-error"),
+                    onFirstTimePasskeySigning: createPasskeyPrompt("transaction"),
+                    onFirstTimePasskeySigningError: createPasskeyPrompt("transaction-error"),
+                },
+            };
+        }
+        return config;
+    };
+
+    const createPasskeyPrompt = (type: ValidPasskeyPromptType) => () =>
+        new Promise<void>((resolve) => {
+            setPasskeyPromptState({
+                type,
+                open: true,
+                primaryActionOnClick: () => {
+                    setPasskeyPromptState({ open: false });
+                    resolve();
+                },
+                secondaryActionOnClick: () => {
+                    setPasskeyPromptState({ open: false });
+                    resolve();
+                },
+            });
+        });
+
     const clearWallet = () => {
-        setState({ status: "not-loaded" });
+        setWalletState({ status: "not-loaded" });
     };
 
     return (
-        <WalletContext.Provider value={{ ...state, getOrCreateWallet, clearWallet }}>{children}</WalletContext.Provider>
+        <WalletContext.Provider value={{ ...walletState, getOrCreateWallet, clearWallet }}>
+            {children}
+            {passkeyPromptState.open
+                ? createPortal(<PasskeyPrompt state={passkeyPromptState} appearance={appearance} />, document.body)
+                : null}
+        </WalletContext.Provider>
     );
 }