feat: oauth add passkey after signup (popup flow)

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

@@ -1,11 +1,11 @@
+import { OauthCancelledError } from "@account-kit/signer";
 import { useEffect } from "react";
 import { useSignerStatus } from "../../../../hooks/useSignerStatus.js";
 import { ContinueWithOAuth } from "../../../../icons/oauth.js";
 import { capitalize } from "../../../../utils.js";
 import { useAuthContext } from "../../context.js";
 import { useOAuthVerify } from "../../hooks/useOAuthVerify.js";
 import { ConnectionError } from "../error/connection-error.js";
-import { OauthCancelledError } from "@account-kit/signer";
 
 export const CompletingOAuth = () => {
   const { isConnected } = useSignerStatus();
@@ -15,11 +15,7 @@ export const CompletingOAuth = () => {
 
   useEffect(() => {
     if (isConnected) {
-      if (authStep.createPasskeyAfter) {
-        setAuthStep({ type: "passkey_create" });
-      } else {
-        setAuthStep({ type: "complete" });
-      }
+      setAuthStep({ type: "complete" });
     } else if (oauthWasCancelled) {
       setAuthStep({ type: "initial" });
     }

account-kit/react/src/components/auth/modal.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from "react";
 import { useNewUserSignup } from "../../hooks/internal/useNewUserSignup.js";
 import { useAuthModal } from "../../hooks/useAuthModal.js";
-import { useSignerStatus } from "../../hooks/useSignerStatus.js";
 import { useUiConfig } from "../../hooks/useUiConfig.js";
+import { useSignerStatus } from "../../index.js";
 import { Dialog } from "../dialog/dialog.js";
 import { AuthCardContent } from "./card/index.js";
 import { useAuthContext } from "./context.js";
@@ -16,19 +16,20 @@ export const AuthModal = () => {
     })
   );
 
-  const { setAuthStep } = useAuthContext();
+  const { setAuthStep, authStep } = useAuthContext();
   const { isOpen, closeAuthModal, openAuthModal } = useAuthModal();
 
   const handleSignup = useCallback(() => {
-    if (addPasskeyOnSignup && !isOpen) {
+    if (addPasskeyOnSignup) {
       openAuthModal();
+
       setAuthStep({
         type: "passkey_create",
       });
     }
-  }, [addPasskeyOnSignup, isOpen, openAuthModal, setAuthStep]);
+  }, [addPasskeyOnSignup, openAuthModal, setAuthStep]);
 
-  useNewUserSignup(handleSignup, isConnected);
+  useNewUserSignup(handleSignup, isConnected && authStep.type === "complete");
 
   return (
     <Dialog isOpen={isOpen} onClose={closeAuthModal}>

account-kit/react/src/hooks/useAuthModal.ts

@@ -33,7 +33,10 @@ export const useAuthModal = () => {
   );
 
   const openAuthModal = useCallback(() => setModalOpen(true), [setModalOpen]);
-  const closeAuthModal = useCallback(() => setModalOpen(false), [setModalOpen]);
+  const closeAuthModal = useCallback(() => {
+    console.trace("closing modal");
+    setModalOpen(false);
+  }, [setModalOpen]);
 
   return {
     isOpen,

account-kit/signer/src/base.ts

@@ -843,6 +843,11 @@ export abstract class BaseAlchemySigner<TClient extends BaseSignerClient>
         }
       })();
 
+      // trigger new user event on signer from client
+      this.inner.on("newUserSignupClient", () => {
+        this.emitNewUserEvent(true);
+      });
+
       this.store.setState({
         status,
         error: null,

account-kit/signer/src/client/index.ts

@@ -3,6 +3,7 @@ import { getWebAuthnAttestation } from "@turnkey/http";
 import { IframeStamper } from "@turnkey/iframe-stamper";
 import { WebauthnStamper } from "@turnkey/webauthn-stamper";
 import { z } from "zod";
+import { OAuthProvidersError } from "../errors.js";
 import { getDefaultScopeAndClaims, getOauthNonce } from "../oauth.js";
 import type { AuthParams, OauthMode } from "../signer.js";
 import { base64UrlEncode } from "../utils/base64UrlEncode.js";
@@ -19,7 +20,6 @@ import type {
   OauthParams,
   User,
 } from "./types.js";
-import { OAuthProvidersError } from "../errors.js";
 
 const CHECK_CLOSE_INTERVAL = 500;
 
@@ -462,6 +462,7 @@ export class AlchemySignerWebClient extends BaseSignerClient<ExportWalletParams>
       "_blank",
       "popup,width=500,height=600"
     );
+    const eventEmitter = this.eventEmitter;
     return new Promise((resolve, reject) => {
       const handleMessage = (event: MessageEvent) => {
         if (!event.data) {
@@ -471,6 +472,7 @@ export class AlchemySignerWebClient extends BaseSignerClient<ExportWalletParams>
           alchemyBundle: bundle,
           alchemyOrgId: orgId,
           alchemyIdToken: idToken,
+          alchemyIsSignup: isSignup,
           alchemyError,
         } = event.data;
         if (bundle && orgId && idToken) {
@@ -482,7 +484,13 @@ export class AlchemySignerWebClient extends BaseSignerClient<ExportWalletParams>
             connectedEventName: "connectedOauth",
             idToken,
             authenticatingType: "oauth",
-          }).then(resolve, reject);
+          }).then((user) => {
+            if (isSignup) {
+              eventEmitter.emit("newUserSignupClient");
+            }
+
+            resolve(user);
+          }, reject);
         } else if (alchemyError) {
           cleanup();
           popup?.close();

account-kit/signer/src/client/types.ts

@@ -142,6 +142,7 @@ export type AuthenticatingEventMetadata = {
 
 export type AlchemySignerClientEvents = {
   connected(user: User): void;
+  newUserSignupClient(): void;
   authenticating(data: AuthenticatingEventMetadata): void;
   connectedEmail(user: User, bundle: string): void;
   connectedPasskey(user: User): void;