mirror of
https://github.com/Portabase/portabase.git
synced 2026-07-14 11:16:13 +02:00
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
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
73179e4d0b
commit
1f3e36ce56
@@ -1,159 +1,225 @@
|
|||||||
"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";
|
||||||
import { z } from "zod";
|
import { z } from "zod";
|
||||||
import {
|
import {
|
||||||
useZodForm,
|
useZodForm,
|
||||||
Form,
|
Form,
|
||||||
FormField,
|
FormField,
|
||||||
FormItem,
|
FormItem,
|
||||||
FormLabel,
|
FormLabel,
|
||||||
FormControl,
|
FormControl,
|
||||||
FormMessage,
|
FormMessage,
|
||||||
} from "@/components/ui/form";
|
} from "@/components/ui/form";
|
||||||
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({
|
||||||
firstName: z.string().min(1, "First name required"),
|
firstName: z.string().min(1, "First name required"),
|
||||||
lastName: z.string().min(1, "Last name required"),
|
lastName: z.string().min(1, "Last name required"),
|
||||||
email: z.string().email("Invalid email"),
|
email: z.string().email("Invalid email"),
|
||||||
});
|
});
|
||||||
|
|
||||||
const WithPasswordSchema = BaseSchema.extend({
|
const WithPasswordSchema = BaseSchema.extend({
|
||||||
password: z.string().min(8, "Min. 8 characters"),
|
password: z.string().min(8, "Min. 8 characters"),
|
||||||
});
|
});
|
||||||
|
|
||||||
export const StepAccountInfo = () => {
|
export const StepAccountInfo = () => {
|
||||||
const { next, updateContext, state } = useOnboarding();
|
const { next, updateContext, state } = useOnboarding();
|
||||||
const meta = state?.context.flowData.meta as OnboardingMeta | undefined;
|
const { data: session, refetch: refetchSession } = useSession();
|
||||||
const existingAccount = state?.context.flowData.account;
|
const meta = state?.context.flowData.meta as OnboardingMeta | undefined;
|
||||||
const isUpdateMode = !!existingAccount;
|
const existingAccount = state?.context.flowData.account;
|
||||||
const passkeyEnabled = meta?.passkeyEnabled ?? false;
|
const isUpdateMode = !!existingAccount;
|
||||||
|
const passkeyEnabled = meta?.passkeyEnabled ?? false;
|
||||||
|
|
||||||
const schema = passkeyEnabled ? BaseSchema : WithPasswordSchema;
|
// Already authenticated (e.g. came from passkey welcome-back login) — skip account creation
|
||||||
const form = useZodForm({ schema }) as unknown as ReturnType<typeof useZodForm<typeof WithPasswordSchema>>;
|
useEffect(() => {
|
||||||
|
if (session?.user && !isUpdateMode) {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
}, [session?.user?.id]);
|
||||||
|
|
||||||
const mutation = useMutation({
|
const schema = passkeyEnabled ? BaseSchema : WithPasswordSchema;
|
||||||
mutationFn: async (values: z.infer<typeof WithPasswordSchema>) => {
|
const form = useZodForm({ schema }) as unknown as ReturnType<
|
||||||
if (isUpdateMode) {
|
typeof useZodForm<typeof WithPasswordSchema>
|
||||||
const result = await updateAccountAction({
|
>;
|
||||||
firstName: values.firstName,
|
|
||||||
lastName: values.lastName,
|
const mutation = useMutation({
|
||||||
});
|
mutationFn: async (values: z.infer<typeof WithPasswordSchema>) => {
|
||||||
if (!result?.data) throw new Error("Failed to update account");
|
if (isUpdateMode) {
|
||||||
await updateContext({
|
const result = await updateAccountAction({
|
||||||
flowData: {
|
firstName: values.firstName,
|
||||||
...state?.context.flowData,
|
lastName: values.lastName,
|
||||||
account: { firstName: values.firstName, lastName: values.lastName, email: values.email },
|
});
|
||||||
},
|
if (!result?.data) throw new Error("Failed to update account");
|
||||||
});
|
await updateContext({
|
||||||
await next();
|
flowData: {
|
||||||
} else {
|
...state?.context.flowData,
|
||||||
await signUp.email(
|
account: {
|
||||||
{
|
firstName: values.firstName,
|
||||||
name: `${values.firstName} ${values.lastName}`,
|
lastName: values.lastName,
|
||||||
email: values.email,
|
email: values.email,
|
||||||
password: values.password ?? "",
|
},
|
||||||
} as any,
|
},
|
||||||
{
|
});
|
||||||
onSuccess: async () => {
|
await next();
|
||||||
await updateContext({
|
return;
|
||||||
flowData: {
|
}
|
||||||
...state?.context.flowData,
|
|
||||||
account: { firstName: values.firstName, lastName: values.lastName, email: values.email },
|
if (passkeyEnabled) {
|
||||||
},
|
const name = `${values.firstName} ${values.lastName}`;
|
||||||
});
|
const context = await generatePasskeyContextAction(name, values.email);
|
||||||
await next();
|
const result = await passkey.addPasskey({
|
||||||
},
|
name: values.email,
|
||||||
onError: (error) => {
|
context,
|
||||||
toast.error(error.error.message);
|
});
|
||||||
},
|
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(
|
||||||
|
{
|
||||||
|
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 (
|
return (
|
||||||
<div className="flex flex-col gap-4">
|
<div className="flex flex-col gap-4">
|
||||||
<div>
|
<div>
|
||||||
<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't be skipped.</p>
|
<p className="text-sm text-muted-foreground mt-1">
|
||||||
</div>
|
This step can't be skipped.
|
||||||
<Form form={form} className="flex flex-col gap-4" onSubmit={async (values) => mutation.mutateAsync(values as any)}>
|
</p>
|
||||||
<div className="grid grid-cols-2 gap-3">
|
</div>
|
||||||
<FormField
|
<Form
|
||||||
control={form.control}
|
form={form}
|
||||||
name="firstName"
|
className="flex flex-col gap-4"
|
||||||
defaultValue={existingAccount?.firstName ?? ""}
|
onSubmit={async (values) => mutation.mutateAsync(values as any)}
|
||||||
render={({ field }) => (
|
>
|
||||||
<FormItem>
|
<div className="grid grid-cols-2 gap-3">
|
||||||
<FormLabel>First name</FormLabel>
|
<FormField
|
||||||
<FormControl>
|
control={form.control}
|
||||||
<Input placeholder="John" {...field} />
|
name="firstName"
|
||||||
</FormControl>
|
defaultValue={existingAccount?.firstName ?? ""}
|
||||||
<FormMessage />
|
render={({ field }) => (
|
||||||
</FormItem>
|
<FormItem>
|
||||||
)}
|
<FormLabel>First name</FormLabel>
|
||||||
/>
|
<FormControl>
|
||||||
<FormField
|
<Input placeholder="John" {...field} />
|
||||||
control={form.control}
|
</FormControl>
|
||||||
name="lastName"
|
<FormMessage />
|
||||||
defaultValue={existingAccount?.lastName ?? ""}
|
</FormItem>
|
||||||
render={({ field }) => (
|
)}
|
||||||
<FormItem>
|
/>
|
||||||
<FormLabel>Last name</FormLabel>
|
<FormField
|
||||||
<FormControl>
|
control={form.control}
|
||||||
<Input placeholder="Doe" {...field} />
|
name="lastName"
|
||||||
</FormControl>
|
defaultValue={existingAccount?.lastName ?? ""}
|
||||||
<FormMessage />
|
render={({ field }) => (
|
||||||
</FormItem>
|
<FormItem>
|
||||||
)}
|
<FormLabel>Last name</FormLabel>
|
||||||
/>
|
<FormControl>
|
||||||
</div>
|
<Input placeholder="Doe" {...field} />
|
||||||
<FormField
|
</FormControl>
|
||||||
control={form.control}
|
<FormMessage />
|
||||||
name="email"
|
</FormItem>
|
||||||
defaultValue={existingAccount?.email ?? ""}
|
)}
|
||||||
render={({ field }) => (
|
/>
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Email</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder="john@example.com" {...field} />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
{!passkeyEnabled && !isUpdateMode && (
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="password"
|
|
||||||
defaultValue=""
|
|
||||||
render={({ field }) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Password</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<PasswordInput placeholder="Min. 8 characters" {...field} />
|
|
||||||
</FormControl>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<Button type="submit" disabled={mutation.isPending}>
|
|
||||||
{isUpdateMode ? "Update account" : "Create account"}
|
|
||||||
</Button>
|
|
||||||
</Form>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="email"
|
||||||
|
defaultValue={existingAccount?.email ?? ""}
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Email</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<Input placeholder="john@example.com" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
{!passkeyEnabled && !isUpdateMode && (
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="password"
|
||||||
|
defaultValue=""
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Password</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<PasswordInput placeholder="Min. 8 characters" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<Button type="submit" disabled={mutation.isPending}>
|
||||||
|
{isUpdateMode
|
||||||
|
? "Update account"
|
||||||
|
: passkeyEnabled
|
||||||
|
? "Create account with passkey"
|
||||||
|
: "Create account"}
|
||||||
|
</Button>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user