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

package/src/hooks/useCrossmint.test.tsx

@@ -18,6 +18,9 @@ class MockSDK {
     somethingThatUpdatesJWT(newJWT: string) {
         this.crossmint.jwt = newJWT;
     }
+    somethingThatUpdatesRefreshToken(newRefreshToken: string) {
+        this.crossmint.refreshToken = newRefreshToken;
+    }
 }
 
 function renderCrossmintProvider({ children }: { children: JSX.Element }) {
@@ -30,16 +33,23 @@ describe("CrossmintProvider", () => {
         vi.mocked(createCrossmint).mockImplementation(() => ({
             apiKey: MOCK_API_KEY,
             jwt: "",
+            refreshToken: "",
         }));
     });
 
-    it("provides initial JWT value", () => {
+    it("provides initial JWT and refreshToken values", () => {
         const TestComponent = () => {
             const { crossmint } = useCrossmint();
-            return <div data-testid="jwt">{crossmint.jwt}</div>;
+            return (
+                <div>
+                    <div data-testid="jwt">{crossmint.jwt}</div>
+                    <div data-testid="refreshToken">{crossmint.refreshToken}</div>
+                </div>
+            );
         };
         const { getByTestId } = renderCrossmintProvider({ children: <TestComponent /> });
         expect(getByTestId("jwt").textContent).toBe("");
+        expect(getByTestId("refreshToken").textContent).toBe("");
     });
 
     it("updates JWT using setJwt", () => {
@@ -57,30 +67,54 @@ describe("CrossmintProvider", () => {
         expect(getByTestId("jwt").textContent).toBe("new_jwt");
     });
 
-    it("updates JWT using WalletSDK", () => {
+    it("updates refreshToken using setRefreshToken", () => {
+        const TestComponent = () => {
+            const { crossmint, setRefreshToken } = useCrossmint();
+            return (
+                <div>
+                    <div data-testid="refreshToken">{crossmint.refreshToken}</div>
+                    <button onClick={() => setRefreshToken("new_refresh_token")}>Update Refresh Token</button>
+                </div>
+            );
+        };
+        const { getByTestId, getByText } = renderCrossmintProvider({ children: <TestComponent /> });
+        fireEvent.click(getByText("Update Refresh Token"));
+        expect(getByTestId("refreshToken").textContent).toBe("new_refresh_token");
+    });
+
+    it("updates JWT and refreshToken using WalletSDK", () => {
         const TestComponent = () => {
             const { crossmint } = useCrossmint();
             useEffect(() => {
                 const wallet = new MockSDK(crossmint);
                 wallet.somethingThatUpdatesJWT("sdk_jwt");
+                wallet.somethingThatUpdatesRefreshToken("sdk_refresh_token");
             }, []);
-            return <div data-testid="jwt">{crossmint.jwt}</div>;
+            return (
+                <div>
+                    <div data-testid="jwt">{crossmint.jwt}</div>
+                    <div data-testid="refreshToken">{crossmint.refreshToken}</div>
+                </div>
+            );
         };
         const { getByTestId } = renderCrossmintProvider({ children: <TestComponent /> });
         expect(getByTestId("jwt").textContent).toBe("sdk_jwt");
+        expect(getByTestId("refreshToken").textContent).toBe("sdk_refresh_token");
     });
 
-    it("triggers re-render on JWT change", () => {
+    it("triggers re-render on JWT and refreshToken change", () => {
         const renderCount = vi.fn();
         const TestComponent = () => {
-            const { crossmint, setJwt } = useCrossmint();
+            const { crossmint, setJwt, setRefreshToken } = useCrossmint();
             useEffect(() => {
                 renderCount();
             });
             return (
                 <div>
                     <div data-testid="jwt">{crossmint.jwt}</div>
+                    <div data-testid="refreshToken">{crossmint.refreshToken}</div>
                     <button onClick={() => setJwt("new_jwt")}>Update JWT</button>
+                    <button onClick={() => setRefreshToken("new_refresh_token")}>Update Refresh Token</button>
                 </div>
             );
         };
@@ -90,7 +124,9 @@ describe("CrossmintProvider", () => {
         expect(renderCount).toHaveBeenCalledTimes(1);
 
         fireEvent.click(getByText("Update JWT"));
-
         expect(renderCount).toHaveBeenCalledTimes(2);
+
+        fireEvent.click(getByText("Update Refresh Token"));
+        expect(renderCount).toHaveBeenCalledTimes(3);
     });
 });

package/src/hooks/useCrossmint.tsx

@@ -5,6 +5,7 @@ import { type Crossmint, createCrossmint } from "@crossmint/common-sdk-base";
 export interface CrossmintContext {
     crossmint: Crossmint;
     setJwt: (jwt: string | undefined) => void;
+    setRefreshToken: (refreshToken: string | undefined) => void;
 }
 
 const CrossmintContext = createContext<CrossmintContext | null>(null);
@@ -24,6 +25,9 @@ export function CrossmintProvider({
                 if (prop === "jwt" && target.jwt !== value) {
                     setVersion((v) => v + 1);
                 }
+                if (prop === "refreshToken" && target.refreshToken !== value) {
+                    setVersion((v) => v + 1);
+                }
                 return Reflect.set(target, prop, value);
             },
         })
@@ -35,14 +39,21 @@ export function CrossmintProvider({
         }
     }, []);
 
+    const setRefreshToken = useCallback((refreshToken: string | undefined) => {
+        if (refreshToken !== crossmintRef.current.refreshToken) {
+            crossmintRef.current.refreshToken = refreshToken;
+        }
+    }, []);
+
     const value = useMemo(
         () => ({
             get crossmint() {
                 return crossmintRef.current;
             },
             setJwt,
+            setRefreshToken,
         }),
-        [setJwt, version]
+        [setJwt, setRefreshToken, version]
     );
 
     return <CrossmintContext.Provider value={value}>{children}</CrossmintContext.Provider>;

package/src/hooks/useRefreshToken.test.ts

@@ -0,0 +1,142 @@
+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 { 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", () => ({
+    CrossmintAuthService: vi.fn(),
+    getJWTExpiration: vi.fn(),
+}));
+
+vi.mock("../utils/authCookies", () => ({
+    getCookie: vi.fn(),
+    REFRESH_TOKEN_PREFIX: "crossmint-refresh-token",
+}));
+
+vi.mock("@crossmint/client-sdk-base", () => ({
+    queueTask: vi.fn(),
+}));
+
+describe("useRefreshToken", () => {
+    const mockCrossmintAuthService = {
+        refreshAuthMaterial: vi.fn(),
+    } as unknown as CrossmintAuthService;
+
+    const mockSetAuthMaterial = vi.fn();
+
+    beforeEach(() => {
+        vi.useFakeTimers();
+        vi.spyOn(console, "error").mockImplementation(() => {});
+    });
+
+    afterEach(() => {
+        vi.restoreAllMocks();
+        vi.useRealTimers();
+    });
+
+    it("should not refresh token if refresh token is not present", async () => {
+        vi.mocked(authCookies.getCookie).mockReturnValue(undefined);
+
+        renderHook(() =>
+            useRefreshToken({
+                crossmintAuthService: mockCrossmintAuthService,
+                setAuthMaterial: mockSetAuthMaterial,
+                logout: vi.fn(),
+            })
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        expect(mockCrossmintAuthService.refreshAuthMaterial).not.toHaveBeenCalled();
+        expect(mockSetAuthMaterial).not.toHaveBeenCalled();
+    });
+
+    it("should refresh token if refresh token is present", async () => {
+        const mockRefreshToken = "mock-refresh-token";
+        const mockAuthMaterial: AuthMaterial = {
+            jwtToken: "mock-jwt-token",
+            refreshToken: {
+                secret: "mock-secret",
+                expiresAt: "2023-04-01T00:00:00Z",
+            },
+        };
+
+        vi.mocked(authCookies.getCookie).mockReturnValue(mockRefreshToken);
+        vi.mocked(mockCrossmintAuthService.refreshAuthMaterial).mockResolvedValue(mockAuthMaterial);
+        vi.mocked(getJWTExpiration).mockReturnValue(Date.now() / 1000 + 3600); // 1 hour from now
+
+        renderHook(() =>
+            useRefreshToken({
+                crossmintAuthService: mockCrossmintAuthService,
+                setAuthMaterial: mockSetAuthMaterial,
+                logout: vi.fn(),
+            })
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        expect(mockCrossmintAuthService.refreshAuthMaterial).toHaveBeenCalledWith(mockRefreshToken);
+        expect(mockSetAuthMaterial).toHaveBeenCalledWith(mockAuthMaterial);
+    });
+
+    it("should schedule next refresh before token expiration", async () => {
+        const mockRefreshToken = "mock-refresh-token";
+        const mockAuthMaterial: AuthMaterial = {
+            jwtToken: "mock-jwt-token",
+            refreshToken: {
+                secret: "mock-secret",
+                expiresAt: "2023-04-01T00:00:00Z",
+            },
+        };
+
+        vi.mocked(authCookies.getCookie).mockReturnValue(mockRefreshToken);
+        vi.mocked(mockCrossmintAuthService.refreshAuthMaterial).mockResolvedValue(mockAuthMaterial);
+        vi.mocked(getJWTExpiration).mockReturnValue(Date.now() / 1000 + 3600); // 1 hour from now
+
+        renderHook(() =>
+            useRefreshToken({
+                crossmintAuthService: mockCrossmintAuthService,
+                setAuthMaterial: mockSetAuthMaterial,
+                logout: vi.fn(),
+            })
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        expect(vi.mocked(queueTask)).toHaveBeenCalledTimes(1);
+        expect(vi.mocked(queueTask)).toHaveBeenCalledWith(expect.any(Function), expect.any(Number));
+    });
+
+    it("should handle errors during token refresh", async () => {
+        const mockRefreshToken = "mock-refresh-token";
+        const mockError = new Error("Refresh failed");
+
+        vi.mocked(authCookies.getCookie).mockReturnValue(mockRefreshToken);
+        vi.mocked(mockCrossmintAuthService.refreshAuthMaterial).mockRejectedValue(mockError);
+
+        renderHook(() =>
+            useRefreshToken({
+                crossmintAuthService: mockCrossmintAuthService,
+                setAuthMaterial: mockSetAuthMaterial,
+                logout: vi.fn(),
+            })
+        );
+
+        await act(async () => {
+            await vi.runAllTimersAsync();
+        });
+
+        expect(console.error).toHaveBeenCalledWith(mockError);
+        expect(mockSetAuthMaterial).not.toHaveBeenCalled();
+    });
+});

package/src/hooks/useRefreshToken.ts

@@ -0,0 +1,74 @@
+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 { queueTask, type CancellableTask } from "@crossmint/client-sdk-base";
+
+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;
+    logout: () => void;
+};
+
+// Makes sure that everything inside the async IIFE has finished running before it can be called again.
+// The actual promise just holds that IIFE until it has finished running and it's then set to null
+let refreshPromise: Promise<void> | null = null;
+
+export function useRefreshToken({ crossmintAuthService, setAuthMaterial, logout }: UseAuthTokenRefreshProps) {
+    const refreshTaskRef = useRef<CancellableTask | null>(null);
+
+    const refreshAuthMaterial = useCallback(() => {
+        if (refreshPromise != null) {
+            return refreshPromise;
+        }
+
+        const refreshToken = getCookie(REFRESH_TOKEN_PREFIX);
+        if (refreshToken != null) {
+            refreshPromise = (async () => {
+                try {
+                    const result = await crossmintAuthService.refreshAuthMaterial(refreshToken);
+                    setAuthMaterial(result);
+                    const jwtExpiration = getJWTExpiration(result.jwtToken);
+
+                    if (jwtExpiration == null) {
+                        throw new Error("Invalid JWT");
+                    }
+
+                    const currentTime = Date.now() / 1000;
+                    const timeToExpire = jwtExpiration - currentTime - TIME_BEFORE_EXPIRING_JWT_IN_SECONDS;
+                    if (timeToExpire > 0) {
+                        const endTime = Date.now() + timeToExpire * 1000;
+                        refreshTaskRef.current = queueTask(refreshAuthMaterial, endTime);
+                    }
+                } catch (error) {
+                    logout();
+                    console.error(error);
+                } finally {
+                    refreshPromise = null;
+                }
+            })();
+        }
+    }, []);
+
+    useEffect(() => {
+        refreshAuthMaterial();
+        return () => {
+            if (refreshTaskRef.current) {
+                refreshTaskRef.current.cancel();
+            }
+        };
+    }, []);
+}

package/src/index.ts

@@ -13,7 +13,6 @@ export * from "./providers";
 export { CrossmintEvents, useCrossmintEvents } from "@crossmint/client-sdk-base";
 export {
     type EVMSmartWallet,
-    type ExternalSigner,
     type PasskeySigner,
     Chain,
     SmartWalletError,

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -1,8 +1,10 @@
+import { deleteCookie, REFRESH_TOKEN_PREFIX, SESSION_PREFIX } from "@/utils/authCookies";
 import { fireEvent, render } from "@testing-library/react";
-import type { ReactNode } from "react";
+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 { type EVMSmartWallet, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
 import { createCrossmint } from "@crossmint/common-sdk-base";
 
@@ -11,8 +13,6 @@ import { CrossmintProvider, useCrossmint } from "../hooks/useCrossmint";
 import { MOCK_API_KEY, waitForSettledState } from "../testUtils";
 import { CrossmintAuthProvider, type CrossmintAuthWalletConfig } from "./CrossmintAuthProvider";
 
-const SESSION_PREFIX = "crossmint-session";
-
 vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
     const actual = await vi.importActual("@crossmint/client-sdk-smart-wallet");
     return {
@@ -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,6 +96,7 @@ describe("CrossmintAuthProvider", () => {
     let mockSDK: SmartWalletSDK;
     let mockWallet: EVMSmartWallet;
     let embeddedWallets: CrossmintAuthWalletConfig;
+    let mockCrossmintAuthService: { refreshAuthMaterial: ReturnType<typeof vi.fn> };
 
     beforeEach(() => {
         vi.resetAllMocks();
@@ -81,6 +106,7 @@ describe("CrossmintAuthProvider", () => {
         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");
+        });
+    });
 });