@crossmint/client-sdk-react-ui 1.3.23 → 1.4.0

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -1,17 +1,17 @@
+import { deleteCookie, REFRESH_TOKEN_PREFIX, SESSION_PREFIX } from "@/utils/authCookies";
 import { fireEvent, render } from "@testing-library/react";
-import { ReactNode } from "react";
+import { type ReactNode, act } from "react";
 import { beforeEach, describe, expect, vi } from "vitest";
 import { mock } from "vitest-mock-extended";
 
-import { EVMSmartWallet, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
+import { CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth-core/client";
+import { type EVMSmartWallet, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
 import { createCrossmint } from "@crossmint/common-sdk-base";
 
 import { useAuth, useWallet } from "../hooks";
 import { CrossmintProvider, useCrossmint } from "../hooks/useCrossmint";
 import { MOCK_API_KEY, waitForSettledState } from "../testUtils";
-import { CrossmintAuthProvider, CrossmintAuthWalletConfig } from "./CrossmintAuthProvider";
-
-const SESSION_PREFIX = "crossmint-session";
+import { CrossmintAuthProvider, type CrossmintAuthWalletConfig } from "./CrossmintAuthProvider";
 
 vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
     const actual = await vi.importActual("@crossmint/client-sdk-smart-wallet");
@@ -32,6 +32,23 @@ 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");
+    return {
+        ...actual,
+        getJWTExpiration: vi.fn(),
+        CrossmintAuthService: vi.fn().mockImplementation(() => ({
+            refreshAuthMaterial: vi.fn().mockResolvedValue({
+                jwtToken: "new-mock-jwt",
+                refreshToken: {
+                    secret: "new-mock-refresh-token",
+                    expiresAt: new Date(Date.now() + 1000 * 60 * 60).toISOString(),
+                },
+            }),
+        })),
+    };
+});
+
 function renderAuthProvider({
     children,
     embeddedWallets,
@@ -47,23 +64,30 @@ function renderAuthProvider({
 }
 
 function TestComponent() {
-    const { setJwt } = useCrossmint();
+    const { setJwt, setRefreshToken } = useCrossmint();
     const { wallet, status: walletStatus, error } = useWallet();
-    const { status: authStatus } = useAuth();
-
+    const { status: authStatus, refreshToken } = useAuth();
     return (
         <div>
             <div data-testid="error">{error?.message ?? "No Error"}</div>
             <div data-testid="wallet-status">{walletStatus}</div>
             <div data-testid="auth-status">{authStatus}</div>
             <div data-testid="wallet">{wallet ? "Wallet Loaded" : "No Wallet"}</div>
+
             <button data-testid="jwt-input" onClick={() => setJwt("mock-jwt")}>
                 Set JWT
             </button>
-
             <button data-testid="clear-jwt-button" onClick={() => setJwt(undefined)}>
                 Clear JWT
             </button>
+
+            <div data-testid="refresh-token">{refreshToken ?? "No Refresh Token"}</div>
+            <button data-testid="set-refresh-token" onClick={() => setRefreshToken("mock-refresh-token")}>
+                Set Refresh Token
+            </button>
+            <button data-testid="clear-refresh-token-button" onClick={() => setRefreshToken(undefined)}>
+                Clear Refresh Token
+            </button>
         </div>
     );
 }
@@ -72,15 +96,17 @@ describe("CrossmintAuthProvider", () => {
     let mockSDK: SmartWalletSDK;
     let mockWallet: EVMSmartWallet;
     let embeddedWallets: CrossmintAuthWalletConfig;
+    let mockCrossmintAuthService: { refreshAuthMaterial: ReturnType<typeof vi.fn> };
 
     beforeEach(() => {
         vi.resetAllMocks();
-        vi.mocked(createCrossmint).mockImplementation(() => ({} as any));
+        vi.mocked(createCrossmint).mockImplementation(() => ({}) as any);
 
         mockSDK = mock<SmartWalletSDK>();
         mockWallet = mock<EVMSmartWallet>();
         vi.mocked(SmartWalletSDK.init).mockReturnValue(mockSDK);
         vi.mocked(mockSDK.getOrCreateWallet).mockResolvedValue(mockWallet);
+        vi.mocked(getJWTExpiration).mockReturnValue(1000);
 
         embeddedWallets = {
             defaultChain: "polygon",
@@ -88,14 +114,27 @@ describe("CrossmintAuthProvider", () => {
             type: "evm-smart-wallet",
         };
 
-        Object.defineProperty(document, "cookie", {
-            writable: true,
-            value: "",
-        });
+        deleteCookie(REFRESH_TOKEN_PREFIX);
+        deleteCookie(SESSION_PREFIX);
+
+        mockCrossmintAuthService = {
+            refreshAuthMaterial: vi.fn().mockResolvedValue({
+                jwtToken: "new-mock-jwt",
+                refreshToken: {
+                    secret: "new-mock-refresh-token",
+                    expiresAt: new Date(Date.now() + 1000 * 60 * 60).toISOString(),
+                },
+            }),
+        };
+        vi.mocked(CrossmintAuthService).mockImplementation(() => mockCrossmintAuthService as any);
     });
 
     test("Happy path", async () => {
-        document.cookie = `${SESSION_PREFIX}=mock-jwt; path=/;SameSite=Lax;`;
+        await act(() => {
+            document.cookie = `${REFRESH_TOKEN_PREFIX}=mock-refresh-token; path=/; SameSite=Lax;`;
+            document.cookie = `${SESSION_PREFIX}=mock-jwt; path=/; SameSite=Lax;`;
+        });
+
         const { getByTestId } = renderAuthProvider({
             children: <TestComponent />,
             embeddedWallets,
@@ -103,16 +142,19 @@ describe("CrossmintAuthProvider", () => {
 
         expect(getByTestId("wallet-status").textContent).toBe("in-progress");
         expect(getByTestId("auth-status").textContent).toBe("logged-in");
+        expect(getByTestId("refresh-token").textContent).toBe("No Refresh Token");
         expect(getByTestId("wallet").textContent).toBe("No Wallet");
         expect(getByTestId("error").textContent).toBe("No Error");
 
         await waitForSettledState(() => {
             expect(getByTestId("wallet-status").textContent).toBe("loaded");
             expect(getByTestId("auth-status").textContent).toBe("logged-in");
+            expect(getByTestId("refresh-token").textContent).toBe("new-mock-refresh-token");
             expect(getByTestId("wallet").textContent).toBe("Wallet Loaded");
             expect(getByTestId("error").textContent).toBe("No Error");
         });
 
+        expect(mockCrossmintAuthService.refreshAuthMaterial).toHaveBeenCalledOnce();
         expect(vi.mocked(mockSDK.getOrCreateWallet)).toHaveBeenCalledOnce();
     });
 
@@ -190,4 +232,52 @@ describe("CrossmintAuthProvider", () => {
             expect(getByTestId("auth-status").textContent).toBe("logged-in");
         });
     });
+
+    test("Setting and clearing refresh token", async () => {
+        const { getByTestId } = renderAuthProvider({
+            children: <TestComponent />,
+            embeddedWallets,
+        });
+
+        expect(getByTestId("refresh-token").textContent).toBe("No Refresh Token");
+
+        fireEvent.click(getByTestId("set-refresh-token"));
+
+        await waitForSettledState(() => {
+            expect(getByTestId("refresh-token").textContent).toBe("mock-refresh-token");
+        });
+
+        fireEvent.click(getByTestId("clear-refresh-token-button"));
+
+        await waitForSettledState(() => {
+            expect(getByTestId("refresh-token").textContent).toBe("No Refresh Token");
+        });
+    });
+
+    test("Logout clears both JWT and refresh token", async () => {
+        await act(() => {
+            document.cookie = `${REFRESH_TOKEN_PREFIX}=mock-refresh-token; path=/; SameSite=Lax;`;
+            document.cookie = `${SESSION_PREFIX}=mock-jwt; path=/; SameSite=Lax;`;
+        });
+
+        const { getByTestId } = renderAuthProvider({
+            children: <TestComponent />,
+            embeddedWallets,
+        });
+
+        await waitForSettledState(() => {
+            expect(getByTestId("auth-status").textContent).toBe("logged-in");
+            expect(getByTestId("refresh-token").textContent).toBe("new-mock-refresh-token");
+        });
+
+        await act(() => {
+            fireEvent.click(getByTestId("clear-jwt-button"));
+            fireEvent.click(getByTestId("clear-refresh-token-button"));
+        });
+
+        await waitForSettledState(() => {
+            expect(getByTestId("auth-status").textContent).toBe("logged-out");
+            expect(getByTestId("refresh-token").textContent).toBe("No Refresh Token");
+        });
+    });
 });

package/src/providers/CrossmintAuthProvider.tsx

@@ -1,15 +1,15 @@
+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-core/client";
 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 { useCrossmint, useWallet } from "../hooks";
+import { AuthMaterial, useCrossmint, useRefreshToken, useWallet } from "../hooks";
 import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
 
-const SESSION_PREFIX = "crossmint-session";
-
 export type CrossmintAuthWalletConfig = {
     defaultChain: EVMSmartWalletChain;
     createOnLogin: "all-users" | "off";
@@ -28,6 +28,7 @@ type AuthContextType = {
     login: () => void;
     logout: () => void;
     jwt?: string;
+    refreshToken?: string;
     status: AuthStatus;
 };
 
@@ -38,16 +39,28 @@ export const AuthContext = createContext<AuthContextType>({
 });
 
 export function CrossmintAuthProvider({ embeddedWallets, children, appearance }: CrossmintAuthProviderProps) {
-    const { crossmint, setJwt } = useCrossmint("CrossmintAuthProvider must be used within CrossmintProvider");
+    const { crossmint, setJwt, setRefreshToken } = useCrossmint(
+        "CrossmintAuthProvider must be used within CrossmintProvider"
+    );
+    const crossmintAuthService = new CrossmintAuthService(crossmint.apiKey);
     const crossmintBaseUrl = validateApiKeyAndGetCrossmintBaseUrl(crossmint.apiKey);
     const [modalOpen, setModalOpen] = useState(false);
 
-    useEffect(() => {
-        const session = sessionFromClient();
-        if (session != null) {
-            setJwt(session);
-        }
-    }, []);
+    const setAuthMaterial = (authMaterial: AuthMaterial) => {
+        setCookie(SESSION_PREFIX, authMaterial.jwtToken);
+        setCookie(REFRESH_TOKEN_PREFIX, authMaterial.refreshToken.secret, authMaterial.refreshToken.expiresAt);
+        setJwt(authMaterial.jwtToken);
+        setRefreshToken(authMaterial.refreshToken.secret);
+    };
+
+    const logout = () => {
+        deleteCookie(SESSION_PREFIX);
+        deleteCookie(REFRESH_TOKEN_PREFIX);
+        setJwt(undefined);
+        setRefreshToken(undefined);
+    };
+
+    useRefreshToken({ crossmintAuthService, setAuthMaterial, logout });
 
     const login = () => {
         if (crossmint.jwt != null) {
@@ -58,10 +71,12 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
         setModalOpen(true);
     };
 
-    const logout = () => {
-        document.cookie = `${SESSION_PREFIX}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
-        setJwt(undefined);
-    };
+    useEffect(() => {
+        if (crossmint.jwt == null) {
+            const jwt = getCookie(SESSION_PREFIX);
+            setJwt(jwt);
+        }
+    }, []);
 
     useEffect(() => {
         if (crossmint.jwt == null) {
@@ -71,12 +86,6 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
         setModalOpen(false);
     }, [crossmint.jwt]);
 
-    useEffect(() => {
-        if (crossmint.jwt) {
-            document.cookie = `${SESSION_PREFIX}=${crossmint.jwt}; path=/;SameSite=Lax;`;
-        }
-    }, [crossmint.jwt]);
-
     const getAuthStatus = (): AuthStatus => {
         if (crossmint.jwt != null) {
             return "logged-in";
@@ -93,6 +102,7 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
                 login,
                 logout,
                 jwt: crossmint.jwt,
+                refreshToken: crossmint.refreshToken,
                 status: getAuthStatus(),
             }}
         >
@@ -105,7 +115,7 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
                           <AuthModal
                               baseUrl={crossmintBaseUrl}
                               setModalOpen={setModalOpen}
-                              setJwtToken={setJwt}
+                              setAuthMaterial={setAuthMaterial}
                               apiKey={crossmint.apiKey}
                               appearance={appearance}
                           />,
@@ -144,8 +154,3 @@ function WalletManager({
 
     return <>{children}</>;
 }
-
-function sessionFromClient(): string | undefined {
-    const crossmintSession = document.cookie.split("; ").find((row) => row.startsWith(SESSION_PREFIX));
-    return crossmintSession ? crossmintSession.split("=")[1] : undefined;
-}

package/src/providers/CrossmintWalletProvider.test.tsx

@@ -1,9 +1,9 @@
 import { fireEvent, render, waitFor } from "@testing-library/react";
-import { ReactNode } from "react";
+import type { ReactNode } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { mock } from "vitest-mock-extended";
 
-import { EVMSmartWallet, SmartWalletError, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
+import { type EVMSmartWallet, SmartWalletError, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
 import { createCrossmint } from "@crossmint/common-sdk-base";
 
 import { CrossmintProvider, useCrossmint } from "../hooks/useCrossmint";
@@ -69,7 +69,7 @@ describe("CrossmintWalletProvider", () => {
 
     beforeEach(() => {
         vi.resetAllMocks();
-        vi.mocked(createCrossmint).mockImplementation(() => ({} as any));
+        vi.mocked(createCrossmint).mockImplementation(() => ({}) as any);
         vi.mocked(useCrossmint).mockReturnValue({
             crossmint: {
                 apiKey: MOCK_API_KEY,

package/src/providers/CrossmintWalletProvider.tsx

@@ -1,11 +1,11 @@
-import { ReactNode, createContext, useMemo, useState } from "react";
+import { type ReactNode, createContext, useMemo, useState } from "react";
 
 import {
-    EVMSmartWallet,
-    EVMSmartWalletChain,
+    type EVMSmartWallet,
+    type EVMSmartWalletChain,
     SmartWalletError,
     SmartWalletSDK,
-    WalletParams,
+    type WalletParams,
 } from "@crossmint/client-sdk-smart-wallet";
 
 import { useCrossmint } from "../hooks";

package/src/utils/authCookies.test.ts

@@ -0,0 +1,41 @@
+import { beforeEach, describe, expect, test } from "vitest";
+
+import { waitForSettledState } from "../testUtils";
+import { deleteCookie, getCookie, setCookie } from "./authCookies";
+
+describe("authCookies", () => {
+    beforeEach(() => {
+        // Clear all cookies before each test
+        document.cookie.split(";").forEach((cookie) => {
+            document.cookie = cookie
+                .replace(/^ +/, "")
+                .replace(/=.*/, "=;expires=" + new Date().toUTCString() + ";path=/");
+        });
+    });
+
+    test("should return undefined for non-existent cookie", () => {
+        expect(getCookie("non-existent")).toBeUndefined();
+    });
+
+    test("should return the correct value for an existing cookie", async () => {
+        document.cookie = "test-cookie=test-value";
+        await waitForSettledState(() => {
+            expect(getCookie("test-cookie")).toBe("test-value");
+        });
+    });
+
+    test("should set a cookie without expiration", async () => {
+        setCookie("test-cookie", "test-value");
+        await waitForSettledState(() => {
+            expect(document.cookie).toContain("test-cookie=test-value");
+        });
+    });
+
+    test("should delete an existing cookie", async () => {
+        document.cookie = "test-cookie=test-value";
+        deleteCookie("test-cookie");
+        await waitForSettledState(() => {
+            expect(document.cookie).not.toContain("test-cookie");
+        });
+    });
+});

package/src/utils/authCookies.ts

@@ -0,0 +1,16 @@
+export const SESSION_PREFIX = "crossmint-session";
+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;
+}
+
+export function setCookie(name: string, value: string, expiresAt?: string) {
+    const expiresInUtc = expiresAt ? new Date(expiresAt).toUTCString() : "";
+    document.cookie = `${name}=${value}; ${expiresAt ? `expires=${expiresInUtc};` : ""} path=/; SameSite=Lax;`;
+}
+
+export function deleteCookie(name: string) {
+    document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+}