feat: adding delay after OTP code validation

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

@@ -12,8 +12,6 @@ import { AuthStepStatus, useAuthContext } from "../../context.js";
 import { useAuthenticate } from "../../../../hooks/useAuthenticate.js";
 import { useSignerStatus } from "../../../../hooks/useSignerStatus.js";
 
-const AUTH_DELAY = 3000;
-
 export const LoadingOtp = () => {
   const { isConnected } = useSignerStatus();
   const { setAuthStep, authStep } = useAuthContext("otp_verify");
@@ -37,11 +35,6 @@ export const LoadingOtp = () => {
       if (isConnected) {
         setAuthStep({ ...authStep, status: AuthStepStatus.success });
         setTitleText(ls.loadingOtp.verified);
-
-        // Wait 3 seconds before completing the auth step
-        setTimeout(() => {
-          setAuthStep({ type: "complete" });
-        }, AUTH_DELAY);
       }
     },
   });

account-kit/signer/src/base.ts

@@ -571,6 +571,38 @@ export abstract class BaseAlchemySigner<TClient extends BaseSignerClient>
       };
     });
 
+  /**
+   * Gets the current logged in user session type
+   * If a user has an ongoing session, it will use that session and
+   * return the session type
+   *
+   * @example
+   * ```ts
+   * import { AlchemyWebSigner } from "@account-kit/signer";
+   *
+   * const signer = new AlchemyWebSigner({
+   *  client: {
+   *    connection: {
+   *      rpcUrl: "/api/rpc",
+   *    },
+   *    iframeConfig: {
+   *      iframeContainerId: "alchemy-signer-iframe-container",
+   *    },
+   *  },
+   * });
+   *
+   * // throws if not logged in
+   * const sessionType = await signer.getSessionType();
+   * ```
+   *
+   * @returns {Promise<string | null>} the current user session type
+   */
+  getSessionType = async (): Promise<string | null> => {
+    const sessionType = await this.sessionManager.getSessionType();
+
+    return sessionType;
+  };
+
   /**
    * Adds a passkey to the user's account
    *

account-kit/signer/src/session/manager.ts

@@ -198,6 +198,16 @@ export class SessionManager {
     return session;
   };
 
+  public getSessionType = (): string | null => {
+    const session = this.store.getState().session ?? null;
+
+    if (!session) {
+      return null;
+    }
+
+    return session.type;
+  };
+
   private setSession = (
     session_:
       | Omit<

examples/ui-demo/src/components/preview/AuthCardWrapper.tsx

@@ -1,11 +1,14 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 import { useTheme } from "@/state/useTheme";
-import { AuthCard, useUser } from "@account-kit/react";
+import { AuthCard, useUser, useSigner } from "@account-kit/react";
 import { EOAPostLogin } from "../shared/eoa-post-login/EOAPostLogin";
 import { MintCard } from "../shared/mint-card/MintCard";
 
+const OTP_AUTH_DELAY = 3000;
+
 export function AuthCardWrapper({ className }: { className?: string }) {
   const theme = useTheme();
 
@@ -26,9 +29,37 @@ export function AuthCardWrapper({ className }: { className?: string }) {
 
 const RenderContent = () => {
   const user = useUser();
-  const hasUser = !!user;
+  const signer = useSigner();
+  const [showAuthCard, setShowAuthCard] = useState(() => !user);
+
+  useEffect(() => {
+    const hasUser = !!user;
+
+    const getAuthDetails = async () => {
+      const sessionType = await signer?.getSessionType();
+
+      // Delay showing the auth card for OTP authenticated users
+      if (sessionType === "otp") {
+        setTimeout(() => {
+          setShowAuthCard(!hasUser);
+        }, OTP_AUTH_DELAY);
+      } else {
+        // Hide auth card for non-OTP authenticated users
+        setShowAuthCard(!hasUser);
+      }
+    };
+
+    // Show auth card for unauthenticated users
+    if (!hasUser) {
+      setShowAuthCard(true);
+
+      // Get auth details for authenticated users
+    } else if (signer && hasUser) {
+      getAuthDetails();
+    }
+  }, [signer, user]);
 
-  if (!hasUser) {
+  if (showAuthCard) {
     return (
       <div className="flex flex-col gap-2 w-[368px]">
         <div
@@ -44,7 +75,7 @@ const RenderContent = () => {
     );
   }
 
-  const isEOAUser = user.type === "eoa";
+  const isEOAUser = user?.type === "eoa";
 
   if (isEOAUser) {
     return (