Jonathan/feat add default email (#944)

* Feat: added default email prop * added changeset
Crossmint · Feb 15, 2025 · 4441c35 · 4441c35
1 parent e4dc971
commit 4441c35
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 7 deletions.
diff --git a/.changeset/hot-turtles-bake.md b/.changeset/hot-turtles-bake.md
@@ -0,0 +1,5 @@
+---
+"@crossmint/client-sdk-react-ui": patch
+---
+
+Added default email value prop
diff --git a/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx b/packages/client/ui/react-ui/src/components/auth/methods/email/EmailSignIn.tsx
@@ -12,9 +12,9 @@ import { ContinueWithGoogle } from "../google/ContinueWithGoogle";
 
 export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEmailPayload) => void }) {
     const { crossmintAuth } = useCrossmintAuth();
-    const { appearance, setStep, setError } = useAuthForm();
+    const { appearance, defaultEmail, setStep, setError } = useAuthForm();
 
-    const [emailInput, setEmailInput] = useState("");
+    const [emailInput, setEmailInput] = useState(defaultEmail ?? "");
     const [emailError, setEmailError] = useState("");
     const [isLoading, setIsLoading] = useState(false);
 

diff --git a/packages/client/ui/react-ui/src/providers/CrossmintAuthProvider.tsx b/packages/client/ui/react-ui/src/providers/CrossmintAuthProvider.tsx
@@ -1,4 +1,4 @@
-import { type ReactNode, createContext, useEffect, useMemo, useRef, useState } from "react";
+import { type ReactNode, type MouseEvent, createContext, useEffect, useMemo, useRef, useState } from "react";
 
 import { CrossmintAuth, getCookie } from "@crossmint/client-sdk-auth";
 import type { EVMSmartWalletChain } from "@crossmint/client-sdk-smart-wallet";
@@ -35,7 +35,7 @@ type AuthStatus = "logged-in" | "logged-out" | "in-progress" | "initializing";
 
 export interface AuthContextType {
     crossmintAuth?: CrossmintAuth;
-    login: () => void;
+    login: (defaultEmail?: string | MouseEvent) => void;
     logout: () => void;
     jwt?: string;
     user?: SDKExternalUser;
@@ -100,6 +100,7 @@ export function CrossmintAuthProvider({
     const crossmintBaseUrl = validateApiKeyAndGetCrossmintBaseUrl(crossmint.apiKey);
     const [dialogOpen, setDialogOpen] = useState(false);
     const [initialized, setInitialized] = useState(false);
+    const [defaultEmail, setdefaultEmail] = useState<string | undefined>(undefined);
 
     useEffect(() => {
         if (crossmint.jwt == null) {
@@ -117,12 +118,17 @@ export function CrossmintAuthProvider({
         setDialogOpen(false);
     }, [crossmint.jwt]);
 
-    const login = () => {
+    const login = (defaultEmail?: string | MouseEvent) => {
         if (crossmint.jwt != null) {
             console.log("User already logged in");
             return;
         }
 
+        // Only set defaultEmail when explicitly passed as a string, ignoring MouseEvent from onClick handlers
+        // PREVENTS BREAKING CHANGE!
+        if (defaultEmail != null && typeof defaultEmail === "string") {
+            setdefaultEmail(defaultEmail);
+        }
         setDialogOpen(true);
     };
 
@@ -182,6 +188,7 @@ export function CrossmintAuthProvider({
                             authModalTitle,
                             embeddedWallets,
                             baseUrl: crossmintBaseUrl,
+                            defaultEmail,
                         }}
                     >
                         <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>

diff --git a/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.tsx b/packages/client/ui/react-ui/src/providers/auth/AuthFormProvider.tsx
@@ -19,6 +19,7 @@ interface AuthFormContextType {
     termsOfServiceText?: string | ReactNode;
     authModalTitle?: string;
     loginMethods: LoginMethod[];
+    defaultEmail?: string;
     oauthUrlMap: OAuthUrlMap;
     isLoadingOauthUrlMap: boolean;
     baseUrl: string;
@@ -32,6 +33,7 @@ type ContextInitialStateProps = {
     termsOfServiceText?: string | ReactNode;
     authModalTitle?: string;
     loginMethods: LoginMethod[];
+    defaultEmail?: string;
     baseUrl: string;
     setDialogOpen?: (open: boolean) => void;
     embeddedWallets: CrossmintAuthWalletConfig;
@@ -60,8 +62,16 @@ export const AuthFormProvider = ({ preFetchOAuthUrls, initialState, children }:
     const [oauthUrlMap, setOauthUrlMap] = useState<OAuthUrlMap>(initialOAuthUrlMap);
     const [isLoadingOauthUrlMap, setIsLoadingOauthUrlMap] = useState(true);
 
-    const { loginMethods, baseUrl, setDialogOpen, appearance, embeddedWallets, termsOfServiceText, authModalTitle } =
-        initialState;
+    const {
+        loginMethods,
+        baseUrl,
+        setDialogOpen,
+        appearance,
+        embeddedWallets,
+        termsOfServiceText,
+        authModalTitle,
+        defaultEmail,
+    } = initialState;
 
     if (loginMethods.includes("web3") && embeddedWallets?.createOnLogin === "all-users") {
         throw new Error("Creating wallets on login is not yet supported for web3 login method");
@@ -115,6 +125,7 @@ export const AuthFormProvider = ({ preFetchOAuthUrls, initialState, children }:
         termsOfServiceText,
         authModalTitle,
         loginMethods,
+        defaultEmail,
         oauthUrlMap,
         isLoadingOauthUrlMap,
         setDialogOpen: handleToggleDialog,