refactor(onboarding): extract useUpdateAccount hook

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/features/onboarding/hooks/use-update-account.ts

@@ -0,0 +1,91 @@
+"use client";
+
+import { useMutation } from "@tanstack/react-query";
+import { useOnboarding } from "@onboardjs/react";
+import { toast } from "sonner";
+import { z } from "zod";
+import { authClient, signUp, passkey, signIn } from "@/lib/auth/auth-client";
+import { updateAccountAction } from "@/features/onboarding/actions/update-account.action";
+import { generatePasskeyContextAction } from "@/features/onboarding/actions/generate-passkey-context.action";
+import { WithPasswordSchema } from "@/features/onboarding/schemas/account.schema";
+import type { OnboardingMeta } from "@/features/onboarding/types";
+
+type AccountInput = z.infer<typeof WithPasswordSchema>;
+
+export const useUpdateAccount = (refetchSession: () => Promise<any>) => {
+  const { state, updateContext, next } = useOnboarding();
+
+  return useMutation({
+    mutationFn: async (values: AccountInput) => {
+      const meta = state?.context.flowData.meta as OnboardingMeta | undefined;
+      const existingAccount = state?.context.flowData.account;
+      const isUpdateMode = !!existingAccount;
+      const passkeyEnabled = meta?.passkeyEnabled ?? false;
+
+      if (isUpdateMode) {
+        const result = await updateAccountAction({
+          firstName: values.firstName,
+          lastName: values.lastName,
+        });
+        if (!result?.data) throw new Error("Failed to update account");
+        await updateContext({
+          flowData: {
+            ...state?.context.flowData,
+            account: { firstName: values.firstName, lastName: values.lastName, email: values.email },
+          },
+        });
+        await next();
+        return;
+      }
+
+      if (passkeyEnabled) {
+        const name = `${values.firstName} ${values.lastName}`;
+        const context = await generatePasskeyContextAction(name, values.email);
+        const result = await passkey.addPasskey({ name: values.email, context });
+        if (result?.error) {
+          throw new Error(result.error.message ?? "Passkey registration failed");
+        }
+        await refetchSession();
+        const { data: freshSession } = await authClient.getSession();
+        if (!freshSession?.user) {
+          const signInResult = await (signIn as any).passkey();
+          if (signInResult?.error) {
+            throw new Error("Registration succeeded but sign-in failed. Please reload and sign in.");
+          }
+        }
+        await updateContext({
+          flowData: {
+            ...state?.context.flowData,
+            account: { firstName: values.firstName, lastName: values.lastName, email: values.email },
+            security: { method: "passkey" },
+          },
+        });
+        await next();
+        return;
+      }
+
+      await signUp.email(
+        {
+          name: `${values.firstName} ${values.lastName}`,
+          email: values.email,
+          password: values.password ?? "",
+        } as any,
+        {
+          onSuccess: async () => {
+            await updateContext({
+              flowData: {
+                ...state?.context.flowData,
+                account: { firstName: values.firstName, lastName: values.lastName, email: values.email },
+              },
+            });
+            await next();
+          },
+          onError: (error) => {
+            toast.error(error.error.message);
+          },
+        },
+      );
+    },
+    onError: (err: Error) => toast.error(err.message),
+  });
+};

src/features/onboarding/steps/step-account-info.tsx

@@ -2,8 +2,7 @@
 
 import { useEffect } from "react";
 import { useOnboarding } from "@onboardjs/react";
-import { useMutation } from "@tanstack/react-query";
+import { useSession } from "@/lib/auth/auth-client";
-import { toast } from "sonner";
 import { z } from "zod";
 import {
   useZodForm,
@@ -17,21 +16,18 @@ import {
 import { Input } from "@/components/ui/input";
 import { PasswordInput } from "@/components/ui/password-input";
 import { Button } from "@/components/ui/button";
-import { authClient, signUp, passkey, useSession, signIn } from "@/lib/auth/auth-client";
-import { updateAccountAction } from "@/features/onboarding/actions/update-account.action";
-import { generatePasskeyContextAction } from "@/features/onboarding/actions/generate-passkey-context.action";
-import type { OnboardingMeta } from "@/features/onboarding/types";
 import { BaseSchema, WithPasswordSchema } from "@/features/onboarding/schemas/account.schema";
+import { useUpdateAccount } from "@/features/onboarding/hooks/use-update-account";
+import type { OnboardingMeta } from "@/features/onboarding/types";
 
 export const StepAccountInfo = () => {
-  const { next, updateContext, state } = useOnboarding();
+  const { next, state } = useOnboarding();
   const { data: session, refetch: refetchSession } = useSession();
   const meta = state?.context.flowData.meta as OnboardingMeta | undefined;
   const existingAccount = state?.context.flowData.account;
   const isUpdateMode = !!existingAccount;
   const passkeyEnabled = meta?.passkeyEnabled ?? false;
 
-  // Already authenticated (e.g. came from passkey welcome-back login) — skip account creation
   useEffect(() => {
     if (session?.user && !isUpdateMode) {
       next();
@@ -43,91 +39,7 @@ export const StepAccountInfo = () => {
     typeof useZodForm<typeof WithPasswordSchema>
   >;
 
-  const mutation = useMutation({
+  const mutation = useUpdateAccount(refetchSession);
-    mutationFn: async (values: z.infer<typeof WithPasswordSchema>) => {
-      if (isUpdateMode) {
-        const result = await updateAccountAction({
-          firstName: values.firstName,
-          lastName: values.lastName,
-        });
-        if (!result?.data) throw new Error("Failed to update account");
-        await updateContext({
-          flowData: {
-            ...state?.context.flowData,
-            account: {
-              firstName: values.firstName,
-              lastName: values.lastName,
-              email: values.email,
-            },
-          },
-        });
-        await next();
-        return;
-      }
-
-      if (passkeyEnabled) {
-        const name = `${values.firstName} ${values.lastName}`;
-        const context = await generatePasskeyContextAction(name, values.email);
-        const result = await passkey.addPasskey({
-          name: values.email,
-          context,
-        });
-        if (result?.error) {
-          toast.error(result.error.message ?? "Passkey registration failed");
-          return;
-        }
-        // Verify session is set; if not, trigger explicit sign-in
-        await refetchSession();
-        const { data: freshSession } = await authClient.getSession();
-        if (!freshSession?.user) {
-          const signInResult = await (signIn as any).passkey();
-          if (signInResult?.error) {
-            toast.error("Registration succeeded but sign-in failed. Please reload and sign in.");
-            return;
-          }
-        }
-        await updateContext({
-          flowData: {
-            ...state?.context.flowData,
-            account: {
-              firstName: values.firstName,
-              lastName: values.lastName,
-              email: values.email,
-            },
-            security: { method: "passkey" },
-          },
-        });
-        await next();
-        return;
-      }
-
-      await signUp.email(
-        {
-          name: `${values.firstName} ${values.lastName}`,
-          email: values.email,
-          password: values.password ?? "",
-        } as any,
-        {
-          onSuccess: async () => {
-            await updateContext({
-              flowData: {
-                ...state?.context.flowData,
-                account: {
-                  firstName: values.firstName,
-                  lastName: values.lastName,
-                  email: values.email,
-                },
-              },
-            });
-            await next();
-          },
-          onError: (error) => {
-            toast.error(error.error.message);
-          },
-        },
-      );
-    },
-  });
 
   return (
     <div className="flex flex-col gap-4">
@@ -135,9 +47,7 @@ export const StepAccountInfo = () => {
         <h1 className="text-2xl font-semibold">
           {isUpdateMode ? "Update your account" : "Create your account"}
         </h1>
-        <p className="text-sm text-muted-foreground mt-1">
+        <p className="text-sm text-muted-foreground mt-1">This step can&apos;t be skipped.</p>
-          This step can&apos;t be skipped.
-        </p>
       </div>
       <Form
         form={form}
@@ -152,9 +62,7 @@ export const StepAccountInfo = () => {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>First name</FormLabel>
-                <FormControl>
+                <FormControl><Input placeholder="John" {...field} /></FormControl>
-                  <Input placeholder="John" {...field} />
-                </FormControl>
                 <FormMessage />
               </FormItem>
             )}
@@ -166,9 +74,7 @@ export const StepAccountInfo = () => {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Last name</FormLabel>
-                <FormControl>
+                <FormControl><Input placeholder="Doe" {...field} /></FormControl>
-                  <Input placeholder="Doe" {...field} />
-                </FormControl>
                 <FormMessage />
               </FormItem>
             )}
@@ -181,9 +87,7 @@ export const StepAccountInfo = () => {
           render={({ field }) => (
             <FormItem>
               <FormLabel>Email</FormLabel>
-              <FormControl>
+              <FormControl><Input placeholder="john@example.com" {...field} /></FormControl>
-                <Input placeholder="john@example.com" {...field} />
-              </FormControl>
               <FormMessage />
             </FormItem>
           )}
@@ -196,9 +100,7 @@ export const StepAccountInfo = () => {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Password</FormLabel>
-                <FormControl>
+                <FormControl><PasswordInput placeholder="Min. 8 characters" {...field} /></FormControl>
-                  <PasswordInput placeholder="Min. 8 characters" {...field} />
-                </FormControl>
                 <FormMessage />
               </FormItem>
             )}