@crossmint/client-sdk-react-ui 1.5.0 → 1.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-ui",
-  "version": "1.5.0",
+  "version": "1.6.1",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -31,11 +31,12 @@
     "tailwind-merge": "2.4.0",
     "tailwindcss": "3.4.10",
     "zod": "3.22.4",
-    "@crossmint/client-sdk-auth-core": "1.3.0",
+    "@crossmint/client-sdk-auth": "0.2.0",
+    "@crossmint/client-sdk-base": "1.2.8",
     "@crossmint/client-sdk-smart-wallet": "0.1.19",
     "@crossmint/client-sdk-window": "0.0.10",
     "@crossmint/common-sdk-base": "0.2.0",
-    "@crossmint/client-sdk-base": "1.2.8"
+    "@crossmint/common-sdk-auth": "0.2.0"
   },
   "devDependencies": {
     "@types/lodash.isequal": "4.5.6",

package/src/components/auth/AuthModal.tsx

@@ -1,13 +1,12 @@
 import { Dialog, Transition } from "@headlessui/react";
-import { type CSSProperties, Fragment, useEffect, useRef, useState } from "react";
+import { type CSSProperties, Fragment, useRef } from "react";
 import { z } from "zod";
 
 import { IFrameWindow } from "@crossmint/client-sdk-window";
 import type { UIConfig } from "@crossmint/common-sdk-base";
+import type { AuthMaterial } from "@crossmint/common-sdk-auth";
 
 import X from "../../icons/x";
-import { classNames } from "../../utils/classNames";
-import type { AuthMaterial } from "@/hooks/useRefreshToken";
 
 const authMaterialSchema = z.object({
     oneTimeSecret: z.string(),
@@ -37,27 +36,19 @@ export default function AuthModal({ setModalOpen, apiKey, fetchAuthMaterial, bas
     }
 
     const iframeRef = useRef<HTMLIFrameElement | null>(null);
-    const [iframe, setIframe] = useState<IFrameWindow<IncomingModalIframeEventsType, Record<string, never>> | null>(
-        null
-    );
+    const iframeWindowRef = useRef<IFrameWindow<IncomingModalIframeEventsType, Record<string, never>> | null>(null);
 
-    useEffect(() => {
-        if (iframe == null) {
+    const setupIframeWindowListener = () => {
+        if (iframeWindowRef.current == null) {
             return;
         }
 
-        iframe.on("authMaterialFromAuthFrame", (data) => {
+        iframeWindowRef.current.on("authMaterialFromAuthFrame", (data) => {
             fetchAuthMaterial(data.oneTimeSecret);
-            iframe.off("authMaterialFromAuthFrame");
+            iframeWindowRef.current?.off("authMaterialFromAuthFrame");
             setModalOpen(false);
         });
-
-        return () => {
-            if (iframe) {
-                iframe.off("authMaterialFromAuthFrame");
-            }
-        };
-    }, [iframe, fetchAuthMaterial, setModalOpen]);
+    };
 
     const handleIframeLoaded = async () => {
         if (iframeRef.current == null) {
@@ -66,11 +57,15 @@ export default function AuthModal({ setModalOpen, apiKey, fetchAuthMaterial, bas
             return;
         }
 
-        const initIframe = await IFrameWindow.init(iframeRef.current, {
-            incomingEvents: incomingModalIframeEvents,
-            outgoingEvents: {},
-        });
-        setIframe(initIframe);
+        if (iframeWindowRef.current == null) {
+            const initIframe = await IFrameWindow.init(iframeRef.current, {
+                incomingEvents: incomingModalIframeEvents,
+                outgoingEvents: {},
+            });
+
+            iframeWindowRef.current = initIframe;
+            setupIframeWindowListener();
+        }
     };
 
     return (
@@ -121,14 +116,16 @@ export default function AuthModal({ setModalOpen, apiKey, fetchAuthMaterial, bas
                             src={iframeSrc}
                             onLoad={handleIframeLoaded}
                             title="Authentication Modal"
-                            className={classNames(
-                                "w-full h-[500px] border pt-12 pb-8",
-                                appearance?.colors?.border
-                                    ? `border-[${appearance.colors.border}]`
-                                    : "border-[#D0D5DD]",
-                                appearance?.borderRadius ? `rounded-[${appearance.borderRadius}]` : "rounded-2xl",
-                                appearance?.colors?.background ? `bg-[${appearance.colors.background}]` : "bg-white"
-                            )}
+                            style={{
+                                width: "100%",
+                                height: "500px",
+                                border: "1px solid",
+                                borderColor: appearance?.colors?.border ?? "#D0D5DD",
+                                borderRadius: appearance?.borderRadius ?? "1rem",
+                                backgroundColor: appearance?.colors?.background ?? "white",
+                                paddingTop: "3rem",
+                                paddingBottom: "2rem",
+                            }}
                         />
                     </div>
                 </Transition.Child>

package/src/components/auth/PasskeyPrompt.tsx

@@ -39,11 +39,19 @@ function PasskeyPromptCore({ title, content, primaryButton, secondaryAction, app
                 />
             </Transition.Child>
             <div
-                className={classNames(
-                    "flex flex-col items-center w-full max-w-[28rem] rounded-2xl shadow-sm z-30 border",
-                    appearance?.colors?.background != null ? `bg-[${appearance.colors.background}]` : "bg-white",
-                    appearance?.colors?.border != null ? `border-[${appearance.colors.border}]` : "border-[#D0D5DD]"
-                )}
+                style={{
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    width: "100%",
+                    maxWidth: "28rem",
+                    borderRadius: "1rem",
+                    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+                    zIndex: 30,
+                    border: "1px solid",
+                    backgroundColor: appearance?.colors?.background || "white",
+                    borderColor: appearance?.colors?.border || "#D0D5DD",
+                }}
                 onClick={(e) => e.stopPropagation()}
             >
                 <div className="pt-12 pb-10 px-8">
@@ -52,24 +60,22 @@ function PasskeyPromptCore({ title, content, primaryButton, secondaryAction, app
                     </div>
                     <div className="flex justify-center">
                         <p
-                            className={classNames(
-                                "text-lg font-bold",
-                                appearance?.colors?.textPrimary != null
-                                    ? `text-[${appearance.colors.textPrimary}]`
-                                    : "text-[#20343E]"
-                            )}
+                            style={{
+                                fontSize: "1.125rem",
+                                lineHeight: "1.75rem",
+                                fontWeight: "bold",
+                                color: appearance?.colors?.textPrimary || "#20343E",
+                            }}
                         >
                             {title}
                         </p>
                     </div>
                     <div className="mt-4 mb-9">
                         <div
-                            className={classNames(
-                                "font-normal",
-                                appearance?.colors?.textSecondary != null
-                                    ? `text-[${appearance.colors.textSecondary}]`
-                                    : "text-[#67797F]"
-                            )}
+                            style={{
+                                fontWeight: "normal",
+                                color: appearance?.colors?.textSecondary || "#67797F",
+                            }}
                         >
                             {content}
                         </div>
@@ -199,15 +205,16 @@ export function PasskeyPrompt({ state, appearance }: PasskeyPromptProps) {
                             href="https://docs.crossmint.com/wallets/smart-wallets/users/troubleshoot"
                             rel="noopener noreferrer"
                             target="_blank"
-                            className={classNames(
-                                "p-3.5 w-full text-center no-underline rounded-lg font-bold",
-                                appearance?.colors?.inputBackground != null
-                                    ? `bg-[${appearance.colors.inputBackground}]`
-                                    : "bg-[#F0F2F4]",
-                                appearance?.colors?.textSecondary != null
-                                    ? `text-[${appearance.colors.textSecondary}]`
-                                    : "text-[#00150D]"
-                            )}
+                            style={{
+                                padding: "0.875rem",
+                                width: "100%",
+                                textAlign: "center",
+                                textDecoration: "none",
+                                borderRadius: "0.5rem",
+                                fontWeight: "bold",
+                                backgroundColor: appearance?.colors?.inputBackground || "#F0F2F4",
+                                color: appearance?.colors?.textSecondary || "#00150D",
+                            }}
                         >
                             Troubleshoot
                         </a>

package/src/components/common/PoweredByCrossmint.tsx

@@ -1,13 +1,16 @@
 import { PoweredByLeaf } from "@/icons/poweredByLeaf";
-import { classNames } from "@/utils/classNames";
 
 export function PoweredByCrossmint({ color }: { color?: string }) {
     return (
         <p
-            className={classNames(
-                "flex text-xs font-normal -tracking-[0.2px] p-2",
-                color ? `text-[${color}]` : "text-[#67797F]"
-            )}
+            style={{
+                display: "flex",
+                fontSize: "0.75rem",
+                fontWeight: "400",
+                letterSpacing: "-0.2px",
+                padding: "0.5rem",
+                color: color || "#67797F",
+            }}
         >
             Powered by
             <span className="flex self-center pl-1 gap-1 items-center font-semibold">

package/src/hooks/useRefreshToken.test.ts

@@ -1,13 +1,13 @@
 import { act, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-import { type CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth-core/client";
+import { type CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth";
 import { queueTask } from "@crossmint/client-sdk-base";
 
 import * as authCookies from "../utils/authCookies";
 import { type AuthMaterial, useRefreshToken } from "./useRefreshToken";
 
-vi.mock("@crossmint/client-sdk-auth-core", () => ({
+vi.mock("@crossmint/client-sdk-auth", () => ({
     CrossmintAuthService: vi.fn(),
     getJWTExpiration: vi.fn(),
 }));

package/src/hooks/useRefreshToken.ts

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useRef } from "react";
 
-import type { CrossmintAuthService } from "@crossmint/client-sdk-auth-core/client";
-import { getJWTExpiration } from "@crossmint/client-sdk-auth-core/client";
+import type { AuthMaterial } from "@crossmint/common-sdk-auth";
+import type { CrossmintAuthService } from "@crossmint/client-sdk-auth";
+import { getJWTExpiration } from "@crossmint/client-sdk-auth";
 import { queueTask, type CancellableTask } from "@crossmint/client-sdk-base";
 
 import { REFRESH_TOKEN_PREFIX, getCookie } from "../utils/authCookies";
@@ -9,14 +10,6 @@ import { REFRESH_TOKEN_PREFIX, getCookie } from "../utils/authCookies";
 // 2 minutes before jwt expiration
 const TIME_BEFORE_EXPIRING_JWT_IN_SECONDS = 120;
 
-export type AuthMaterial = {
-    jwtToken: string;
-    refreshToken: {
-        secret: string;
-        expiresAt: string;
-    };
-};
-
 type UseAuthTokenRefreshProps = {
     crossmintAuthService: CrossmintAuthService;
     setAuthMaterial: (authMaterial: AuthMaterial) => void;

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -4,7 +4,7 @@ import { type ReactNode, act } from "react";
 import { beforeEach, describe, expect, vi } from "vitest";
 import { mock } from "vitest-mock-extended";
 
-import { CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth-core/client";
+import { CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth";
 import { type EVMSmartWallet, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
 import { createCrossmint } from "@crossmint/common-sdk-base";
 
@@ -32,8 +32,8 @@ vi.mock("@crossmint/common-sdk-base", async () => {
     };
 });
 
-vi.mock("@crossmint/client-sdk-auth-core/client", async () => {
-    const actual = await vi.importActual("@crossmint/client-sdk-auth-core/client");
+vi.mock("@crossmint/client-sdk-auth", async () => {
+    const actual = await vi.importActual("@crossmint/client-sdk-auth");
     return {
         ...actual,
         getJWTExpiration: vi.fn(),
@@ -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,13 +2,14 @@ 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 } 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 { type AuthMaterial, useCrossmint, useRefreshToken, useWallet } from "../hooks";
+import { useCrossmint, useRefreshToken, useWallet } from "../hooks";
 import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
+import type { AuthMaterial, SDKExternalUser } from "@crossmint/common-sdk-auth";
 
 export type CrossmintAuthWalletConfig = {
     defaultChain: EVMSmartWalletChain;
@@ -30,16 +31,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"
     );
@@ -52,6 +57,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 = () => {
@@ -59,19 +65,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);
@@ -87,6 +85,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";
@@ -103,6 +110,16 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
         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={{
@@ -110,7 +127,9 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
                 logout,
                 jwt: crossmint.jwt,
                 refreshToken: crossmint.refreshToken,
+                user,
                 status: getAuthStatus(),
+                getUser,
             }}
         >
             <CrossmintWalletProvider