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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-ui",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -31,11 +31,11 @@
     "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-core": "1.4.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-base": "0.2.0"
   },
   "devDependencies": {
     "@types/lodash.isequal": "4.5.6",

package/src/components/auth/AuthModal.tsx

@@ -1,5 +1,5 @@
 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";
@@ -37,27 +37,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 +58,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 (

package/src/hooks/useRefreshToken.ts

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useRef } from "react";
 
-import type { CrossmintAuthService } from "@crossmint/client-sdk-auth-core/client";
+import type { CrossmintAuthService, SDKExternalUser } 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";
 
@@ -15,6 +15,7 @@ export type AuthMaterial = {
         secret: string;
         expiresAt: string;
     };
+    user: SDKExternalUser;
 };
 
 type UseAuthTokenRefreshProps = {

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -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,7 +2,7 @@ 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, type SDKExternalUser } 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";
 
@@ -30,16 +30,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 +56,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 +64,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 +84,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 +109,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 +126,9 @@ export function CrossmintAuthProvider({ embeddedWallets, children, appearance }:
                 logout,
                 jwt: crossmint.jwt,
                 refreshToken: crossmint.refreshToken,
+                user,
                 status: getAuthStatus(),
+                getUser,
             }}
         >
             <CrossmintWalletProvider