feat: adding delay after OTP code validation (#1288)

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

@@ -12,15 +12,15 @@ import { AuthStepStatus, useAuthContext } from "../../context.js";
 import { useAuthenticate } from "../../../../hooks/useAuthenticate.js";
 import { useSignerStatus } from "../../../../hooks/useSignerStatus.js";
 
-const AUTH_DELAY = 3000;
+const AUTH_DELAY = 1000;
 
 export const LoadingOtp = () => {
   const { isConnected } = useSignerStatus();
   const { setAuthStep, authStep } = useAuthContext("otp_verify");
   const [otpCode, setOtpCode] = useState<OTPCodeType>(initialOTPValue);
   const [errorText, setErrorText] = useState(authStep.error?.message || "");
   const [titleText, setTitleText] = useState(ls.loadingOtp.title);
-  // const { setAuthStep } = useAuthContext();
+
   const resetOTP = (errorText = "") => {
     setOtpCode(initialOTPValue);
     setErrorText(errorText);

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 twoslash
+ * 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";

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

@@ -1,8 +1,9 @@
 "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, useAuthContext } from "@account-kit/react";
 import { EOAPostLogin } from "../shared/eoa-post-login/EOAPostLogin";
 import { MintCard } from "../shared/mint-card/MintCard";
 
@@ -25,10 +26,22 @@ export function AuthCardWrapper({ className }: { className?: string }) {
 }
 
 const RenderContent = () => {
+  const { authStep } = useAuthContext();
   const user = useUser();
-  const hasUser = !!user;
+  const [showAuthCard, setShowAuthCard] = useState(() => !user);
 
-  if (!hasUser) {
+  useEffect(() => {
+    // Show auth card for unauthenticated users
+    if (!user) {
+      setShowAuthCard(true);
+
+      // Get auth details for authenticated users
+    } else if (!!user && ["complete", "initial"].includes(authStep.type)) {
+      setShowAuthCard(false);
+    }
+  }, [authStep.type, user]);
+
+  if (showAuthCard) {
     return (
       <div className="flex flex-col gap-2 w-[368px]">
         <div
@@ -44,7 +57,7 @@ const RenderContent = () => {
     );
   }
 
-  const isEOAUser = user.type === "eoa";
+  const isEOAUser = user?.type === "eoa";
 
   if (isEOAUser) {
     return (