fix: using enum instead of strings for auth step types

account-kit/react/src/components/auth/card/add-passkey.tsx

@@ -7,7 +7,7 @@ import {
 import { ReactLogger } from "../../../metrics.js";
 import { ls } from "../../../strings.js";
 import { Button } from "../../button.js";
-import { useAuthContext } from "../context.js";
+import { AuthStepType, useAuthContext } from "../context.js";
 import { ConnectionError } from "./error/connection-error.js";
 import { ConnectionFailed as PasskeyConnectionFailed } from "../../../icons/connectionFailed.js";
 
@@ -25,18 +25,18 @@ const BENEFITS = [
 ];
 
 export const AddPasskey = () => {
-  const { setAuthStep, authStep } = useAuthContext("passkey_create");
+  const { setAuthStep, authStep } = useAuthContext(AuthStepType.passkey_create);
   const { addPasskey, isAddingPasskey } = useAddPasskey({
     onSuccess: () => {
       ReactLogger.trackEvent({
         name: "add_passkey_on_signup_success",
       });
 
-      setAuthStep({ type: "passkey_create_success" });
+      setAuthStep({ type: AuthStepType.passkey_create_success });
     },
     onError: () => {
       setAuthStep({
-        type: "passkey_create",
+        type: AuthStepType.passkey_create,
         error: new Error("Failed to add passkey"),
       });
     },
@@ -50,7 +50,7 @@ export const AddPasskey = () => {
         icon={<PasskeyConnectionFailed />}
         shouldDisconnect={false}
         handleTryAgain={addPasskey}
-        handleSkip={() => setAuthStep({ type: "complete" })}
+        handleSkip={() => setAuthStep({ type: AuthStepType.complete })}
       />
     );
   }
@@ -91,7 +91,7 @@ export const AddPasskey = () => {
             ReactLogger.trackEvent({
               name: "add_passkey_on_signup_skip",
             });
-            setAuthStep({ type: "complete" });
+            setAuthStep({ type: AuthStepType.complete });
           }}
           disabled={isAddingPasskey}
         >

account-kit/react/src/components/auth/card/eoa.tsx

@@ -4,7 +4,7 @@ import { Spinner } from "../../../icons/spinner.js";
 import { WalletConnectIcon } from "../../../icons/walletConnectIcon.js";
 import { ls } from "../../../strings.js";
 import { Button } from "../../button.js";
-import { useAuthContext } from "../context.js";
+import { AuthStepType, useAuthContext } from "../context.js";
 import { useConnectEOA } from "../hooks/useConnectEOA.js";
 import { useWalletConnectAuthConfig } from "../hooks/useWalletConnectAuthConfig.js";
 import { CardContent } from "./content.js";
@@ -14,7 +14,7 @@ import { WalletIcon } from "./error/icons/wallet-icon.js";
 export const WALLET_CONNECT = "walletConnect";
 
 export const EoaConnectCard = () => {
-  const { setAuthStep, authStep } = useAuthContext("eoa_connect");
+  const { setAuthStep, authStep } = useAuthContext(AuthStepType.eoa_connect);
   const { connect } = useConnectEOA();
   const { chain } = useChain();
 
@@ -31,7 +31,7 @@ export const EoaConnectCard = () => {
         tryAgainCTA={errorMessage.tryAgainCTA}
         handleTryAgain={() => {
           setAuthStep({
-            type: "eoa_connect",
+            type: AuthStepType.eoa_connect,
             connector: authStep.connector,
           });
 
@@ -41,7 +41,9 @@ export const EoaConnectCard = () => {
             chainId: chain.id,
           });
         }}
-        handleUseAnotherMethod={() => setAuthStep({ type: "pick_eoa" })}
+        handleUseAnotherMethod={() =>
+          setAuthStep({ type: AuthStepType.pick_eoa })
+        }
       />
     );
   }
@@ -69,15 +71,15 @@ export const EoaConnectCard = () => {
       secondaryButton={{
         title: "Cancel",
         onClick: async () => {
-          setAuthStep({ type: "initial" });
+          setAuthStep({ type: AuthStepType.initial });
         },
       }}
     />
   );
 };
 
 export const WalletConnectCard = () => {
-  const { setAuthStep, authStep } = useAuthContext("wallet_connect");
+  const { setAuthStep, authStep } = useAuthContext(AuthStepType.wallet_connect);
   const { walletConnectParams } = useWalletConnectAuthConfig();
   const { chain } = useChain();
 
@@ -89,7 +91,7 @@ export const WalletConnectCard = () => {
 
   if (!walletConnectConnector) {
     setAuthStep({
-      type: "wallet_connect",
+      type: AuthStepType.wallet_connect,
       error: new Error("WalletConnect params not found"),
     });
 
@@ -106,14 +108,16 @@ export const WalletConnectCard = () => {
         tryAgainCTA={errorMessage.tryAgainCTA}
         icon={<WalletIcon connector={WALLET_CONNECT} />}
         handleTryAgain={() => {
-          setAuthStep({ type: "wallet_connect" });
+          setAuthStep({ type: AuthStepType.wallet_connect });
           // Re-try wallet connect's connection...
           connect({
             connector: walletConnectConnector,
             chainId: chain.id,
           });
         }}
-        handleUseAnotherMethod={() => setAuthStep({ type: "pick_eoa" })}
+        handleUseAnotherMethod={() =>
+          setAuthStep({ type: AuthStepType.pick_eoa })
+        }
       />
     );
   }
@@ -141,7 +145,7 @@ export const WalletConnectCard = () => {
         title: "Cancel",
         onClick: async () => {
           // Ensure to stop all inflight requests
-          setAuthStep({ type: "initial" });
+          setAuthStep({ type: AuthStepType.initial });
         },
       }}
     />
@@ -151,7 +155,7 @@ export const WalletConnectCard = () => {
 export const EoaPickCard = () => {
   const { chain } = useChain();
   const { connectors, connect } = useConnectEOA();
-  const { setAuthStep } = useAuthContext("pick_eoa");
+  const { setAuthStep } = useAuthContext(AuthStepType.pick_eoa);
 
   const { walletConnectParams } = useWalletConnectAuthConfig();
 
@@ -203,7 +207,7 @@ export const EoaPickCard = () => {
                   // If walletConnectConnector is not found, set the error and return
                   if (!walletConnectConnector) {
                     return setAuthStep({
-                      type: "wallet_connect",
+                      type: AuthStepType.wallet_connect,
                       error: new Error("WalletConnect params not found"),
                     });
                   }

account-kit/react/src/components/auth/card/footer/email-not-reveived.tsx

@@ -3,13 +3,17 @@ import { useAuthenticate } from "../../../../hooks/useAuthenticate.js";
 import { ls } from "../../../../strings.js";
 import {
   AuthStepStatus,
+  AuthStepType,
   useAuthContext,
   type AuthStep,
 } from "../../context.js";
 import { Button } from "../../../button.js";
 
 type EmailNotReceivedDisclaimerProps = {
-  authStep: Extract<AuthStep, { type: "email_verify" | "otp_verify" }>;
+  authStep: Extract<
+    AuthStep,
+    { type: AuthStepType.email_verify | AuthStepType.otp_verify }
+  >;
 };
 export const EmailNotReceivedDisclaimer = ({
   authStep,
@@ -18,13 +22,13 @@ export const EmailNotReceivedDisclaimer = ({
   const [emailResent, setEmailResent] = useState(false);
   const { authenticate } = useAuthenticate({
     onSuccess: () => {
-      setAuthStep({ type: "complete" });
+      setAuthStep({ type: AuthStepType.complete });
     },
   });
 
   const isOTPVerifying = useMemo(() => {
     return (
-      authStep.type === "otp_verify" &&
+      authStep.type === AuthStepType.otp_verify &&
       (authStep.status === AuthStepStatus.verifying ||
         authStep.status === AuthStepStatus.success)
     );

account-kit/react/src/components/auth/card/index.tsx

@@ -14,7 +14,7 @@ import { useAuthModal } from "../../../hooks/useAuthModal.js";
 import { useElementHeight } from "../../../hooks/useElementHeight.js";
 import { useSignerStatus } from "../../../hooks/useSignerStatus.js";
 import { Navigation } from "../../navigation.js";
-import { useAuthContext } from "../context.js";
+import { AuthStepType, useAuthContext } from "../context.js";
 import { Footer } from "../sections/Footer.js";
 import { Step } from "./steps.js";
 export type AuthCardProps = {
@@ -72,34 +72,34 @@ export const AuthCardContent = ({
 
   const canGoBack = useMemo(() => {
     return [
-      "email_verify",
-      "otp_verify",
-      "passkey_verify",
-      "passkey_create",
-      "pick_eoa",
-      "wallet_connect",
-      "eoa_connect",
-      "oauth_completing",
+      AuthStepType.email_verify,
+      AuthStepType.otp_verify,
+      AuthStepType.passkey_verify,
+      AuthStepType.passkey_create,
+      AuthStepType.pick_eoa,
+      AuthStepType.wallet_connect,
+      AuthStepType.eoa_connect,
+      AuthStepType.oauth_completing,
     ].includes(authStep.type);
   }, [authStep]);
 
   const onBack = useCallback(() => {
     switch (authStep.type) {
-      case "email_verify":
-      case "otp_verify":
-      case "passkey_verify":
-      case "passkey_create":
-      case "oauth_completing":
+      case AuthStepType.email_verify:
+      case AuthStepType.otp_verify:
+      case AuthStepType.passkey_verify:
+      case AuthStepType.passkey_create:
+      case AuthStepType.oauth_completing:
         disconnect(config); // Terminate any inflight authentication
         didGoBack.current = true;
-        setAuthStep({ type: "initial" });
+        setAuthStep({ type: AuthStepType.initial });
         break;
-      case "wallet_connect":
-      case "eoa_connect":
-        setAuthStep({ type: "pick_eoa" });
+      case AuthStepType.wallet_connect:
+      case AuthStepType.eoa_connect:
+        setAuthStep({ type: AuthStepType.pick_eoa });
         break;
-      case "pick_eoa":
-        setAuthStep({ type: "initial" });
+      case AuthStepType.pick_eoa:
+        setAuthStep({ type: AuthStepType.initial });
         break;
       default:
         console.warn("Unhandled back action for auth step", authStep);
@@ -112,20 +112,20 @@ export const AuthCardContent = ({
       disconnect(config);
     }
 
-    if (authStep.type === "passkey_create") {
-      setAuthStep({ type: "complete" });
+    if (authStep.type === AuthStepType.passkey_create) {
+      setAuthStep({ type: AuthStepType.complete });
     } else {
-      setAuthStep({ type: "initial" });
+      setAuthStep({ type: AuthStepType.initial });
     }
     closeAuthModal();
   }, [isConnected, authStep.type, closeAuthModal, config, setAuthStep]);
 
   useEffect(() => {
-    if (authStep.type === "complete") {
+    if (authStep.type === AuthStepType.complete) {
       didGoBack.current = false;
       closeAuthModal();
       onAuthSuccess?.();
-    } else if (authStep.type !== "initial") {
+    } else if (authStep.type !== AuthStepType.initial) {
       didGoBack.current = false;
     }
   }, [

account-kit/react/src/components/auth/card/loading/email.tsx

@@ -3,11 +3,11 @@ import { useSignerStatus } from "../../../../hooks/useSignerStatus.js";
 import { EmailIllustration } from "../../../../icons/illustrations/email.js";
 import { Spinner } from "../../../../icons/spinner.js";
 import { ls } from "../../../../strings.js";
-import { useAuthContext } from "../../context.js";
+import { AuthStepType, useAuthContext } from "../../context.js";
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 export const LoadingEmail = () => {
-  const { authStep } = useAuthContext("email_verify");
+  const { authStep } = useAuthContext(AuthStepType.email_verify);
   // yup, re-sent and resent. I'm not fixing it
   const [emailResent, setEmailResent] = useState(false);
 
@@ -39,11 +39,11 @@ export const LoadingEmail = () => {
 // eslint-disable-next-line jsdoc/require-jsdoc
 export const CompletingEmailAuth = () => {
   const { isConnected } = useSignerStatus();
-  const { setAuthStep } = useAuthContext("email_completing");
+  const { setAuthStep } = useAuthContext(AuthStepType.email_completing);
 
   useEffect(() => {
     if (isConnected) {
-      setAuthStep({ type: "complete" });
+      setAuthStep({ type: AuthStepType.complete });
     }
   }, [isConnected, setAuthStep]);
 

account-kit/react/src/components/auth/card/loading/oauth.tsx

@@ -6,22 +6,24 @@ import {
   OAuthConnectionFailed,
 } from "../../../../icons/oauth.js";
 import { capitalize } from "../../../../utils.js";
-import { useAuthContext } from "../../context.js";
+import { AuthStepType, useAuthContext } from "../../context.js";
 import { useOAuthVerify } from "../../hooks/useOAuthVerify.js";
 import { ConnectionError } from "../error/connection-error.js";
 import { ls } from "../../../../strings.js";
 
 export const CompletingOAuth = () => {
   const { isConnected } = useSignerStatus();
-  const { setAuthStep, authStep } = useAuthContext("oauth_completing");
+  const { setAuthStep, authStep } = useAuthContext(
+    AuthStepType.oauth_completing
+  );
   const { authenticate } = useOAuthVerify({ config: authStep.config });
   const oauthWasCancelled = authStep.error instanceof OauthCancelledError;
 
   useEffect(() => {
     if (isConnected) {
-      setAuthStep({ type: "complete" });
+      setAuthStep({ type: AuthStepType.complete });
     } else if (oauthWasCancelled) {
-      setAuthStep({ type: "initial" });
+      setAuthStep({ type: AuthStepType.initial });
     }
   }, [isConnected, oauthWasCancelled, setAuthStep]);
 
@@ -33,7 +35,9 @@ export const CompletingOAuth = () => {
         )}`}
         bodyText={ls.error.connection.oauthBody}
         handleTryAgain={authenticate}
-        handleUseAnotherMethod={() => setAuthStep({ type: "initial" })}
+        handleUseAnotherMethod={() =>
+          setAuthStep({ type: AuthStepType.initial })
+        }
         icon={
           <OAuthConnectionFailed provider={authStep.config.authProviderId} />
         }

account-kit/react/src/components/auth/card/loading/otp.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react-hooks/rules-of-hooks */
 import { useEffect } from "react";
-import { useAuthContext } from "../../context.js";
+import { AuthStepType, useAuthContext } from "../../context.js";
 
 import { LoadingOtp } from "./otp.js";
 import type { Meta, StoryObj } from "@storybook/react";
@@ -12,9 +12,9 @@ const meta: Meta<typeof LoadingOtp> = {
   render: () => {
     const { authStep, setAuthStep } = useAuthContext();
     useEffect(() => {
-      setAuthStep({ type: "otp_verify", email: "test@alchemy.com" });
+      setAuthStep({ type: AuthStepType.otp_verify, email: "test@alchemy.com" });
     }, [setAuthStep]);
-    if (authStep.type === "otp_verify") {
+    if (authStep.type === AuthStepType.otp_verify) {
       return <LoadingOtp />;
     }
 

account-kit/react/src/components/auth/card/loading/otp.tsx

@@ -8,13 +8,13 @@ import {
   isOTPCodeType,
 } from "../../../otp-input/otp-input.js";
 import { Spinner } from "../../../../icons/spinner.js";
-import { AuthStepStatus, useAuthContext } from "../../context.js";
+import { AuthStepStatus, AuthStepType, useAuthContext } from "../../context.js";
 import { useAuthenticate } from "../../../../hooks/useAuthenticate.js";
 import { useSignerStatus } from "../../../../hooks/useSignerStatus.js";
 
 export const LoadingOtp = () => {
   const { isConnected } = useSignerStatus();
-  const { authStep } = useAuthContext("otp_verify");
+  const { authStep } = useAuthContext(AuthStepType.otp_verify);
   const [otpCode, setOtpCode] = useState<OTPCodeType>(initialOTPValue);
   const [errorText, setErrorText] = useState(authStep.error?.message || "");
   const [titleText, setTitleText] = useState(ls.loadingOtp.title);
@@ -39,7 +39,7 @@ export const LoadingOtp = () => {
         setAuthStep({ ...authStep, status: AuthStepStatus.success });
         setTitleText(ls.loadingOtp.verified);
         setTimeout(() => {
-          setAuthStep({ type: "complete" });
+          setAuthStep({ type: AuthStepType.complete });
         }, 3000);
       }
     },