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

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 { type 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/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=/;`;
+}