fix(onboarding): verify session after passkey registration, fallback to signIn.passkey()

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Théo LAGACHE
2026-06-18 15:57:26 +02:00
co-authored by Claude Sonnet 4.6
parent 73179e4d0b
commit 1f3e36ce56
@@ -1,5 +1,6 @@
"use client"; "use client";
import { useEffect } from "react";
import { useOnboarding } from "@onboardjs/react"; import { useOnboarding } from "@onboardjs/react";
import { useMutation } from "@tanstack/react-query"; import { useMutation } from "@tanstack/react-query";
import { toast } from "sonner"; import { toast } from "sonner";
@@ -16,8 +17,9 @@ import {
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { PasswordInput } from "@/components/ui/password-input"; import { PasswordInput } from "@/components/ui/password-input";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { signUp } from "@/lib/auth/auth-client"; import { authClient, signUp, passkey, useSession, signIn } from "@/lib/auth/auth-client";
import { updateAccountAction } from "@/features/onboarding/actions/update-account.action"; 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/onboarding.types"; import type { OnboardingMeta } from "@/features/onboarding/onboarding.types";
const BaseSchema = z.object({ const BaseSchema = z.object({
@@ -32,13 +34,23 @@ const WithPasswordSchema = BaseSchema.extend({
export const StepAccountInfo = () => { export const StepAccountInfo = () => {
const { next, updateContext, state } = useOnboarding(); const { next, updateContext, state } = useOnboarding();
const { data: session, refetch: refetchSession } = useSession();
const meta = state?.context.flowData.meta as OnboardingMeta | undefined; const meta = state?.context.flowData.meta as OnboardingMeta | undefined;
const existingAccount = state?.context.flowData.account; const existingAccount = state?.context.flowData.account;
const isUpdateMode = !!existingAccount; const isUpdateMode = !!existingAccount;
const passkeyEnabled = meta?.passkeyEnabled ?? false; const passkeyEnabled = meta?.passkeyEnabled ?? false;
// Already authenticated (e.g. came from passkey welcome-back login) — skip account creation
useEffect(() => {
if (session?.user && !isUpdateMode) {
next();
}
}, [session?.user?.id]);
const schema = passkeyEnabled ? BaseSchema : WithPasswordSchema; const schema = passkeyEnabled ? BaseSchema : WithPasswordSchema;
const form = useZodForm({ schema }) as unknown as ReturnType<typeof useZodForm<typeof WithPasswordSchema>>; const form = useZodForm({ schema }) as unknown as ReturnType<
typeof useZodForm<typeof WithPasswordSchema>
>;
const mutation = useMutation({ const mutation = useMutation({
mutationFn: async (values: z.infer<typeof WithPasswordSchema>) => { mutationFn: async (values: z.infer<typeof WithPasswordSchema>) => {
@@ -51,11 +63,52 @@ export const StepAccountInfo = () => {
await updateContext({ await updateContext({
flowData: { flowData: {
...state?.context.flowData, ...state?.context.flowData,
account: { firstName: values.firstName, lastName: values.lastName, email: values.email }, account: {
firstName: values.firstName,
lastName: values.lastName,
email: values.email,
},
}, },
}); });
await next(); await next();
} else { 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,
},
},
});
await next();
return;
}
await signUp.email( await signUp.email(
{ {
name: `${values.firstName} ${values.lastName}`, name: `${values.firstName} ${values.lastName}`,
@@ -67,7 +120,11 @@ export const StepAccountInfo = () => {
await updateContext({ await updateContext({
flowData: { flowData: {
...state?.context.flowData, ...state?.context.flowData,
account: { firstName: values.firstName, lastName: values.lastName, email: values.email }, account: {
firstName: values.firstName,
lastName: values.lastName,
email: values.email,
},
}, },
}); });
await next(); await next();
@@ -75,9 +132,8 @@ export const StepAccountInfo = () => {
onError: (error) => { onError: (error) => {
toast.error(error.error.message); toast.error(error.error.message);
}, },
} },
); );
}
}, },
}); });
@@ -87,9 +143,15 @@ export const StepAccountInfo = () => {
<h1 className="text-2xl font-semibold"> <h1 className="text-2xl font-semibold">
{isUpdateMode ? "Update your account" : "Create your account"} {isUpdateMode ? "Update your account" : "Create your account"}
</h1> </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> </div>
<Form form={form} className="flex flex-col gap-4" onSubmit={async (values) => mutation.mutateAsync(values as any)}> <Form
form={form}
className="flex flex-col gap-4"
onSubmit={async (values) => mutation.mutateAsync(values as any)}
>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<FormField <FormField
control={form.control} control={form.control}
@@ -151,7 +213,11 @@ export const StepAccountInfo = () => {
/> />
)} )}
<Button type="submit" disabled={mutation.isPending}> <Button type="submit" disabled={mutation.isPending}>
{isUpdateMode ? "Update account" : "Create account"} {isUpdateMode
? "Update account"
: passkeyEnabled
? "Create account with passkey"
: "Create account"}
</Button> </Button>
</Form> </Form>
</div> </div>