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

package/src/components/embed/crypto/CryptoEmbeddedCheckoutIFrame.tsx

@@ -1,16 +1,16 @@
 import bs58 from "bs58";
 
 import {
-    CryptoEmbeddedCheckoutPropsWithSigner,
-    ETHEmbeddedCheckoutSigner,
-    IncomingInternalEvent,
+    type CryptoEmbeddedCheckoutPropsWithSigner,
+    type ETHEmbeddedCheckoutSigner,
+    type IncomingInternalEvent,
     IncomingInternalEvents,
     OutgoingInternalEvents,
-    SOLEmbeddedCheckoutSigner,
+    type SOLEmbeddedCheckoutSigner,
     crossmintIFrameService,
     embeddedCheckoutPropsToUpdatableParamsPayload,
 } from "@crossmint/client-sdk-base";
-import { EVMBlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
+import type { EVMBlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
 
 import useDeepEffect from "../../../hooks/useDeepEffect";
 import CrossmintEmbeddedCheckoutIFrame from "../EmbeddedCheckoutIFrame";

package/src/components/embed/fiat/FiatEmbeddedCheckout.tsx

@@ -1,4 +1,4 @@
-import { FiatEmbeddedCheckoutProps } from "@crossmint/client-sdk-base";
+import type { FiatEmbeddedCheckoutProps } from "@crossmint/client-sdk-base";
 
 import FiatEmbeddedCheckoutIFrame from "../../../components/embed/fiat/FiatEmbeddedCheckoutIFrame";
 

package/src/components/embed/fiat/FiatEmbeddedCheckoutIFrame.tsx

@@ -1,5 +1,5 @@
 import {
-    FiatEmbeddedCheckoutProps,
+    type FiatEmbeddedCheckoutProps,
     crossmintIFrameService,
     embeddedCheckoutPropsToUpdatableParamsPayload,
 } from "@crossmint/client-sdk-base";

package/src/components/embed/index.tsx

@@ -1,5 +1,5 @@
 import {
-    CrossmintEmbeddedCheckoutProps,
+    type CrossmintEmbeddedCheckoutProps,
     isCryptoEmbeddedCheckoutProps,
     isFiatEmbeddedCheckoutProps,
 } from "@crossmint/client-sdk-base";

package/src/components/hosted/CrossmintPayButton.tsx

@@ -1,9 +1,9 @@
-import { CSSProperties, MouseEvent, useMemo } from "react";
+import { type CSSProperties, type MouseEvent, useMemo } from "react";
 import { useState } from "react";
 
 import {
-    CheckoutProps,
-    CrossmintPayButtonProps,
+    type CheckoutProps,
+    type CrossmintPayButtonProps,
     clientNames,
     crossmintModalService,
     crossmintPayButtonService,

package/src/components/hosted/styles.ts

@@ -1,4 +1,4 @@
-import { Styles, createUseStyles } from "react-jss";
+import { type Styles, createUseStyles } from "react-jss";
 
 const DARK_BG = "#1e1e1e";
 
@@ -52,8 +52,7 @@ const styles: Styles<"crossmintButton" | "crossmintImg" | "crossmintParagraph" |
 };
 
 export const useStyles: (
-    data?:
-        | CustomStylingProps & {
-              theme?: any;
-          }
+    data?: CustomStylingProps & {
+        theme?: any;
+    }
 ) => Classes<"crossmintButton" | "crossmintImg" | "crossmintParagraph" | "@global"> = createUseStyles(styles);

package/src/consts/version.ts

@@ -1 +1,3 @@
-export const LIB_VERSION = "1.3.23";
+import { version } from "../../package.json";
+
+export const LIB_VERSION = version;

package/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from "./useCrossmint";
 export * from "./useWallet";
 export * from "./useAuth";
+export * from "./useRefreshToken";

package/src/hooks/useCrossmint.test.tsx

@@ -2,7 +2,7 @@ import { fireEvent, render } from "@testing-library/react";
 import { useEffect } from "react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { Crossmint, createCrossmint } from "@crossmint/common-sdk-base";
+import { type Crossmint, createCrossmint } from "@crossmint/common-sdk-base";
 
 import { CrossmintProvider, useCrossmint } from "./useCrossmint";
 
@@ -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

@@ -1,10 +1,11 @@
-import { ReactNode, createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
+import { type ReactNode, createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 
-import { Crossmint, createCrossmint } from "@crossmint/common-sdk-base";
+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/useDeepEffect.ts

@@ -1,5 +1,5 @@
 import isEqual from "lodash.isequal";
-import { DependencyList, EffectCallback, useEffect, useRef } from "react";
+import { type DependencyList, type EffectCallback, useEffect, useRef } from "react";
 
 export default function useDeepEffect(callback: EffectCallback, dependencies: DependencyList): void {
     const dependenciesRef = useRef(dependencies);

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,62 @@
+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;
+};
+
+export function useRefreshToken({ crossmintAuthService, setAuthMaterial, logout }: UseAuthTokenRefreshProps) {
+    const refreshTaskRef = useRef<CancellableTask | null>(null);
+
+    const refreshAuthMaterial = useCallback(async () => {
+        const refreshToken = getCookie(REFRESH_TOKEN_PREFIX);
+        if (refreshToken != null) {
+            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);
+            }
+        }
+    }, []);
+
+    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,