fix: switch to use useAuthenticate to determine stage instead of call…

…back
alchemyplatform · Sep 19, 2024 · 8133c77 · 8133c77
1 parent ceaaa06
commit 8133c77
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 38 deletions.
diff --git a/account-kit/react/src/components/auth/card/index.tsx b/account-kit/react/src/components/auth/card/index.tsx
@@ -14,7 +14,6 @@ import { Footer } from "../sections/Footer.js";
 
 export type AuthCardProps = {
   className?: string;
-  handleAuthSuccess?: () => void;
 };
 
 /**
@@ -47,11 +46,9 @@ export const AuthCard = (props: AuthCardProps) => {
 // eslint-disable-next-line jsdoc/require-jsdoc
 export const AuthCardContent = ({
   className,
-  handleAuthSuccess,
   showClose = false,
 }: {
   className?: string;
-  handleAuthSuccess?: () => void;
   showClose?: boolean;
 }) => {
   const { closeAuthModal } = useAuthModal();
@@ -104,9 +101,7 @@ export const AuthCardContent = ({
   useLayoutEffect(() => {
     if (authStep.type === "complete") {
       didGoBack.current = false;
-
       closeAuthModal();
-      handleAuthSuccess?.();
       onAuthSuccess?.();
     } else if (authStep.type !== "initial") {
       didGoBack.current = false;
@@ -125,7 +120,6 @@ export const AuthCardContent = ({
     isAuthenticating,
     setAuthStep,
     onAuthSuccess,
-    handleAuthSuccess,
     closeAuthModal,
   ]);
 

diff --git a/account-kit/react/src/components/auth/context.ts b/account-kit/react/src/components/auth/context.ts
@@ -3,6 +3,18 @@
 import type { Connector } from "@wagmi/core";
 import { createContext, useContext } from "react";
 
+export type AuthstepType =
+  | "email_verify"
+  | "passkey_verify"
+  | "passkey_create"
+  | "passkey_create_success"
+  | "email_completing"
+  | "complete"
+  | "eoa_connect"
+  | "wallet_connect"
+  | "pick_eoa"
+  | "initial";
+
 export type AuthStep =
   | { type: "email_verify"; email: string }
   | { type: "passkey_verify"; error?: Error }

diff --git a/account-kit/react/src/components/auth/modal.tsx b/account-kit/react/src/components/auth/modal.tsx
@@ -3,17 +3,14 @@ import { useAuthModal } from "../../hooks/useAuthModal.js";
 import { Dialog } from "../dialog/dialog.js";
 import { useUiConfig } from "../../hooks/useUiConfig.js";
 
-type AuthModalProps = {
-  handleAuthSuccess?: () => void;
-};
-export const AuthModal = ({ handleAuthSuccess }: AuthModalProps) => {
+export const AuthModal = () => {
   const { modalBaseClassName } = useUiConfig();
   const { isOpen, closeAuthModal } = useAuthModal();
 
   return (
     <Dialog isOpen={isOpen} onClose={closeAuthModal}>
       <div className={`modal md:w-[368px] ${modalBaseClassName ?? ""}`}>
-        <AuthCardContent handleAuthSuccess={handleAuthSuccess} showClose />
+        <AuthCardContent showClose />
       </div>
     </Dialog>
   );

diff --git a/account-kit/react/src/hooks/useAuthenticate.ts b/account-kit/react/src/hooks/useAuthenticate.ts
@@ -10,6 +10,10 @@ import {
 import { useAlchemyAccountContext } from "../context.js";
 import type { BaseHookMutationArgs } from "../types.js";
 import { useSigner } from "./useSigner.js";
+import {
+  useAuthContext,
+  type AuthstepType,
+} from "../components/auth/context.js";
 
 export type UseAuthenticateMutationArgs = BaseHookMutationArgs<
   User,
@@ -21,6 +25,7 @@ export type UseAuthenticateResult = {
   authenticateAsync: UseMutateAsyncFunction<User, Error, AuthParams, unknown>;
   isPending: boolean;
   error: Error | null;
+  stage: AuthstepType;
 };
 
 /**
@@ -48,6 +53,10 @@ export function useAuthenticate(
   const { queryClient } = useAlchemyAccountContext();
   const signer = useSigner();
 
+  const {
+    authStep: { type: stage },
+  } = useAuthContext();
+
   const {
     mutate: authenticate,
     mutateAsync: authenticateAsync,
@@ -72,5 +81,6 @@ export function useAuthenticate(
     authenticateAsync: authenticateAsync,
     isPending,
     error,
+    stage,
   };
 }
diff --git a/examples/ui-demo/src/app/state.tsx b/examples/ui-demo/src/app/state.tsx
@@ -26,7 +26,6 @@ export type Config = {
     showExternalWallets: boolean;
     showPasskey: boolean;
     addPasskey: boolean;
-    isAuthComplete: boolean;
   };
   ui: {
     theme: "light" | "dark";
@@ -62,7 +61,6 @@ export const DEFAULT_CONFIG: Config = {
     showExternalWallets: false,
     showPasskey: true,
     addPasskey: true,
-    isAuthComplete: false,
   },
   ui: {
     theme: "light",
@@ -91,7 +89,7 @@ export function useConfig(): ConfigContextType {
 export function ConfigContextProvider(props: PropsWithChildren) {
   const [config, setConfig] = useState<Config>(DEFAULT_CONFIG);
   const { updateConfig } = useUiConfig();
-  
+
   // Sync Alchemy auth UI config
   useEffect(() => {
     const sections: AuthType[][] = [[{ type: "email" }]];
@@ -125,7 +123,7 @@ export function ConfigContextProvider(props: PropsWithChildren) {
     };
 
     updateConfig(uiConfig);
-  }, [config]);
+  }, [config, updateConfig]);
 
   // Sync CSS variables
   useEffect(() => {

diff --git a/examples/ui-demo/src/components/preview/AuthCardWrapper.tsx b/examples/ui-demo/src/components/preview/AuthCardWrapper.tsx
@@ -1,18 +1,20 @@
 import { useConfig } from "@/app/state";
 import { cn } from "@/lib/utils";
-import { AuthCard, useLogout, useUser } from "@account-kit/react";
-import { useState } from "react";
+import {
+  AuthCard,
+  useAuthenticate,
+  useLogout,
+  useUser,
+} from "@account-kit/react";
 import { MintDemoWrapper } from "./MintDemoWrapper";
+import { useMemo } from "react";
 
 export function AuthCardWrapper({ className }: { className?: string }) {
   const user = useUser();
-  const {config, setConfig} = useConfig();
+  const { config } = useConfig();
   const { logout } = useLogout();
-
-  const handleAuthSuccess = () => {
-    console.log("Auth Success");
-    setConfig((prev) => ({...prev, auth: {...prev.auth, isAuthComplete: true}}));
-  }
+  const { stage } = useAuthenticate();
+  const isAuthComplete = useMemo(() => stage === "complete", [stage]);
   return (
     <div
       className={cn(
@@ -21,25 +23,28 @@ export function AuthCardWrapper({ className }: { className?: string }) {
         className
       )}
     >
-      {!config.auth.isAuthComplete ? (   <>
-             <div className="flex flex-col gap-2 w-[368px]">
-          <div className="modal bg-surface-default shadow-md overflow-hidden">
-            <AuthCard handleAuthSuccess={handleAuthSuccess} />
+      {!isAuthComplete ? (
+        <>
+          <div className="flex flex-col gap-2 w-[368px]">
+            <div className="modal bg-surface-default shadow-md overflow-hidden">
+              <AuthCard />
+            </div>
           </div>
-        </div>
-        
-          </>):
-          <MintDemoWrapper />
-        }
-        {user && (<button
+        </>
+      ) : (
+        <MintDemoWrapper />
+      )}
+      {user && (
+        <button
           className="text-primary font-semibold text-sm px-3 py-[11px] bg-white border border-gray-300 rounded-lg hover:shadow-md"
           onClick={() => {
-            setConfig((prev) => ({...prev, auth: {...prev.auth, isAuthComplete: false}}));
-            logout()}}
-          >
+            logout();
+          }}
+        >
           Logout
-          {config.auth.isAuthComplete && <span> (Auth Complete)</span>}
-        </button>)} 
+          {isAuthComplete && <span> (Auth Complete)</span>}
+        </button>
+      )}
     </div>
   );
 }