fix(ui-components): ensure the passkey prompt always shows up when qp…

… is present
alchemyplatform · Sep 23, 2024 · 23c6d52 · 23c6d52
1 parent bedbc20
commit 23c6d52
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 18 deletions.
diff --git a/aa-sdk/core/src/version.ts b/aa-sdk/core/src/version.ts
@@ -1,3 +1,3 @@
 // This file is autogenerated by inject-version.ts. Any changes will be
 // overwritten on commit!
-export const VERSION = "4.0.0-beta.5";
+export const VERSION = "4.0.0-beta.6";
diff --git a/account-kit/core/src/version.ts b/account-kit/core/src/version.ts
@@ -1,3 +1,3 @@
 // This file is autogenerated by inject-version.ts. Any changes will be
 // overwritten on commit!
-export const VERSION = "4.0.0-beta.5";
+export const VERSION = "4.0.0-beta.6";
diff --git a/account-kit/infra/src/version.ts b/account-kit/infra/src/version.ts
@@ -1,3 +1,3 @@
 // This file is autogenerated by inject-version.ts. Any changes will be
 // overwritten on commit!
-export const VERSION = "4.0.0-beta.5";
+export const VERSION = "4.0.0-beta.6";
diff --git a/account-kit/plugingen/src/version.ts b/account-kit/plugingen/src/version.ts
@@ -1,3 +1,3 @@
 // This file is autogenerated by inject-version.ts. Any changes will be
 // overwritten on commit!
-export const VERSION = "4.0.0-beta.5";
+export const VERSION = "4.0.0-beta.6";
diff --git a/account-kit/react/src/components/auth/card/passkey-added.tsx b/account-kit/react/src/components/auth/card/passkey-added.tsx
@@ -1,7 +1,14 @@
 import { AddedPasskeyIllustration } from "../../../icons/illustrations/added-passkey.js";
+import { useAuthContext } from "../context.js";
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 export function PasskeyAdded() {
+  const { setAuthStep } = useAuthContext();
+
+  setTimeout(() => {
+    setAuthStep({ type: "complete" });
+  }, 5000);
+
   return (
     <div className="flex flex-col gap-5 items-center">
       <div className="flex flex-col items-center justify-center h-12 w-12">

diff --git a/account-kit/react/src/context.tsx b/account-kit/react/src/context.tsx
@@ -115,17 +115,21 @@ export const AlchemyAccountProvider = (
   const openAuthModal = useCallback(() => setIsModalOpen(true), []);
   const closeAuthModal = useCallback(() => setIsModalOpen(false), []);
 
+  const clearAuthParams = () => {
+    const url = new URL(window.location.href);
+    url.searchParams.delete("orgId");
+    url.searchParams.delete("bundle");
+    url.searchParams.delete(IS_SIGNUP_QP);
+    window.history.replaceState({}, "", url.toString());
+  };
+
   /**
    * Reset the auth step to the initial state. This also clears the email auth query params from the URL.
    */
   const resetAuthStep = useCallback(() => {
     setAuthStep({ type: "initial" });
 
-    const url = new URL(window.location.href);
-    url.searchParams.delete("orgId");
-    url.searchParams.delete("bundle");
-    url.searchParams.delete(IS_SIGNUP_QP);
-    window.history.replaceState({}, "", url.toString());
+    clearAuthParams();
   }, []);
 
   const initialContext = useMemo(
@@ -144,22 +148,27 @@ export const AlchemyAccountProvider = (
     [config, queryClient, openAuthModal, closeAuthModal, isModalOpen]
   );
 
-  const { status, isAuthenticating } = useSignerStatus(initialContext);
+  const { isAuthenticating, isConnected } = useSignerStatus(initialContext);
   const [authStep, setAuthStep] = useState<AuthStep>({
     type: isAuthenticating ? "email_completing" : "initial",
   });
 
   useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
     if (
-      status === "AWAITING_EMAIL_AUTH" &&
-      config.ui?.auth?.addPasskeyOnSignup
+      isConnected &&
+      config.ui?.auth?.addPasskeyOnSignup &&
+      urlParams.get(IS_SIGNUP_QP) === "true"
     ) {
-      const urlParams = new URLSearchParams(window.location.search);
-      if (urlParams.get(IS_SIGNUP_QP) !== "true") return;
-
       openAuthModal();
     }
-  }, [status, config.ui, openAuthModal]);
+  }, [config.ui, isConnected, openAuthModal]);
+
+  useEffect(() => {
+    if (authStep.type === "complete") {
+      clearAuthParams();
+    }
+  }, [authStep]);
 
   return (
     <Hydrate {...props}>

diff --git a/account-kit/react/src/version.ts b/account-kit/react/src/version.ts
@@ -1,3 +1,3 @@
 // This file is autogenerated by inject-version.ts. Any changes will be
 // overwritten on commit!
-export const VERSION = "4.0.0-beta.5";
+export const VERSION = "4.0.0-beta.6";
diff --git a/account-kit/signer/src/version.ts b/account-kit/signer/src/version.ts
@@ -1,3 +1,3 @@
 // This file is autogenerated by inject-version.ts. Any changes will be
 // overwritten on commit!
-export const VERSION = "4.0.0-beta.5";
+export const VERSION = "4.0.0-beta.6";