feat(onboarding): allow user to choose between passkey and password during registration if both are enabled

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

@@ -12,15 +12,13 @@ import type { OnboardingMeta } from "@/features/onboarding/types";
 
 type AccountInput = z.infer<typeof WithPasswordSchema>;
 
-export const useUpdateAccount = (refetchSession: () => Promise<any>) => {
+export const useUpdateAccount = (refetchSession: () => Promise<any>, selectedMethod: "passkey" | "password" = "password") => {
   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({
@@ -38,7 +36,7 @@ export const useUpdateAccount = (refetchSession: () => Promise<any>) => {
         return;
       }
 
-      if (passkeyEnabled) {
+      if (selectedMethod === "passkey") {
         const name = `${values.firstName} ${values.lastName}`;
         const context = await generatePasskeyContextAction(name, values.email);
         const result = await passkey.addPasskey({ name: values.email, context });

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

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect } from "react";
+import { useEffect, useState } from "react";
 import { useOnboarding } from "@onboardjs/react";
 import { useSession } from "@/lib/auth/auth-client";
 import { z } from "zod";
@@ -16,9 +16,13 @@ import {
 import { Input } from "@/components/ui/input";
 import { PasswordInput } from "@/components/ui/password-input";
 import { Button } from "@/components/ui/button";
-import { BaseSchema, WithPasswordSchema } from "@/features/onboarding/schemas/account.schema";
+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";
+import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export const StepAccountInfo = () => {
   const { next, state } = useOnboarding();
@@ -27,19 +31,24 @@ export const StepAccountInfo = () => {
   const existingAccount = state?.context.flowData.account;
   const isUpdateMode = !!existingAccount;
   const passkeyEnabled = meta?.passkeyEnabled ?? false;
+  const emailPasswordEnabled = meta?.emailPasswordEnabled ?? false;
+
+  const [selectedMethod, setSelectedMethod] = useState<"passkey" | "password">(
+    passkeyEnabled && !emailPasswordEnabled ? "passkey" : "password"
+  );
 
   useEffect(() => {
     if (session?.user && !isUpdateMode) {
       next();
     }
-  }, [session?.user?.id]);
+  }, [session?.user?.id, next, session?.user, isUpdateMode]);
 
-  const schema = passkeyEnabled ? BaseSchema : WithPasswordSchema;
+  const schema = selectedMethod === "password" && !isUpdateMode ? WithPasswordSchema : BaseSchema;
   const form = useZodForm({ schema }) as unknown as ReturnType<
     typeof useZodForm<typeof WithPasswordSchema>
   >;
 
-  const mutation = useUpdateAccount(refetchSession);
+  const mutation = useUpdateAccount(refetchSession, selectedMethod);
 
   return (
     <div className="flex flex-col gap-4">
@@ -47,13 +56,27 @@ 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">This step can&apos;t be skipped.</p>
+        <p className="text-sm text-muted-foreground mt-1">
+          This step can&apos;t be skipped.
+        </p>
       </div>
       <Form
         form={form}
         className="flex flex-col gap-4"
         onSubmit={async (values) => mutation.mutateAsync(values as any)}
       >
+        {!isUpdateMode && passkeyEnabled && emailPasswordEnabled && (
+          <Tabs
+            value={selectedMethod}
+            onValueChange={(v) => setSelectedMethod(v as any)}
+            className="w-full"
+          >
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="password">Password</TabsTrigger>
+              <TabsTrigger value="passkey">Passkey</TabsTrigger>
+            </TabsList>
+          </Tabs>
+        )}
         <div className="grid grid-cols-2 gap-3">
           <FormField
             control={form.control}
@@ -62,7 +85,9 @@ export const StepAccountInfo = () => {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>First name</FormLabel>
-                <FormControl><Input placeholder="John" {...field} /></FormControl>
+                <FormControl>
+                  <Input placeholder="John" {...field} />
+                </FormControl>
                 <FormMessage />
               </FormItem>
             )}
@@ -74,7 +99,9 @@ export const StepAccountInfo = () => {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Last name</FormLabel>
-                <FormControl><Input placeholder="Doe" {...field} /></FormControl>
+                <FormControl>
+                  <Input placeholder="Doe" {...field} />
+                </FormControl>
                 <FormMessage />
               </FormItem>
             )}
@@ -87,12 +114,14 @@ export const StepAccountInfo = () => {
           render={({ field }) => (
             <FormItem>
               <FormLabel>Email</FormLabel>
-              <FormControl><Input placeholder="john@example.com" {...field} /></FormControl>
+              <FormControl>
+                <Input placeholder="john@example.com" {...field} />
+              </FormControl>
               <FormMessage />
             </FormItem>
           )}
         />
-        {!passkeyEnabled && !isUpdateMode && (
+        {!isUpdateMode && selectedMethod === "password" && (
           <FormField
             control={form.control}
             name="password"
@@ -100,7 +129,9 @@ export const StepAccountInfo = () => {
             render={({ field }) => (
               <FormItem>
                 <FormLabel>Password</FormLabel>
-                <FormControl><PasswordInput placeholder="Min. 8 characters" {...field} /></FormControl>
+                <FormControl>
+                  <PasswordInput placeholder="Min. 8 characters" {...field} />
+                </FormControl>
                 <FormMessage />
               </FormItem>
             )}
@@ -109,7 +140,7 @@ export const StepAccountInfo = () => {
         <Button type="submit" disabled={mutation.isPending}>
           {isUpdateMode
             ? "Update account"
-            : passkeyEnabled
+            : selectedMethod === "passkey"
               ? "Create account with passkey"
               : "Create account"}
         </Button>

src/features/onboarding/steps/step-login.tsx

@@ -125,10 +125,10 @@ export const StepLogin = () => {
                         ))}
                     </div>
                 )}
-                {emailPasswordEnabled && (
+                {(emailPasswordEnabled || passkeyEnabled) && (
                     <Button type="button" onClick={() => next()}>
-                        <Mail className="size-4 mr-2" />
+                        {passkeyEnabled && !emailPasswordEnabled ? <KeyRound className="size-4 mr-2" /> : <Mail className="size-4 mr-2" />}
-                        Register with email
+                        {emailPasswordEnabled && passkeyEnabled ? "Register account" : passkeyEnabled ? "Register with passkey" : "Register with email"}
                     </Button>
                 )}
             </div>