feat: using useAuthContext to validate authenticated user and use otp…

… delay

account-kit/react/src/components/auth/context.ts

@@ -56,7 +56,20 @@ export function useAuthContext<
   TType extends AuthStep["type"] | undefined = AuthStep["type"] | undefined
 >(type?: TType): AuthContextType<TType>;
 
-export function useAuthContext(
+/**
+ * A custom hook that provides the authentication context based on the specified authentication step type. It ensures that the hook is used within an `AuthModalProvider` and throws an error if the context is not available or if the current auth step type does not match the expected type.
+ *
+ * @example
+ * ```tsx
+ * import { useAuthContext } from "@account-kit/react";
+ *
+ * const { authStep } = useAuthContext();
+ * ```
+ *
+ * @param {AuthStep["type"]} [type] Optional type of authentication step to validate against the current context
+ * @returns {AuthContextType} The authentication context for the current component
+ * @throws Will throw an error if the hook is not used within an `AuthModalProvider` or if the current auth step type does not match the expected type
+ */ export function useAuthContext(
   type?: AuthStep["type"] | undefined
 ): AuthContextType {
   const context = useOptionalAuthContext();

account-kit/react/src/index.ts

@@ -59,3 +59,4 @@ export { Dialog } from "./components/dialog/dialog.js";
 export { AuthCard } from "./components/auth/card/index.js";
 export type * from "./components/auth/types.js";
 export { useAuthModal } from "./hooks/useAuthModal.js";
+export { useAuthContext } from "./components/auth/context.js";

account-kit/signer/src/base.ts

@@ -571,38 +571,6 @@ 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,16 +198,6 @@ 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

@@ -3,12 +3,10 @@
 import { useEffect, useState } from "react";
 import { cn } from "@/lib/utils";
 import { useTheme } from "@/state/useTheme";
-import { AuthCard, useUser, useSigner } from "@account-kit/react";
+import { AuthCard, useUser, useAuthContext } 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();
 
@@ -28,36 +26,20 @@ export function AuthCardWrapper({ className }: { className?: string }) {
 }
 
 const RenderContent = () => {
+  const { authStep } = useAuthContext();
   const user = useUser();
-  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) {
+    if (!user) {
       setShowAuthCard(true);
 
       // Get auth details for authenticated users
-    } else if (signer && hasUser) {
-      getAuthDetails();
+    } else if (!!user && ["complete", "initial"].includes(authStep.type)) {
+      setShowAuthCard(false);
     }
-  }, [signer, user]);
+  }, [authStep.type, user]);
 
   if (showAuthCard) {
     return (