feat(auth): add passkey support via better-auth

apps/dokploy/components/dashboard/settings/profile/manage-passkeys.tsx

@@ -0,0 +1,163 @@
+import { Fingerprint, Loader2, Plus, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import { DateTooltip } from "@/components/shared/date-tooltip";
+import { DialogAction } from "@/components/shared/dialog-action";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogHeader,
+	DialogTitle,
+	DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { authClient } from "@/lib/auth-client";
+
+export const ManagePasskeys = () => {
+	const [isDialogOpen, setIsDialogOpen] = useState(false);
+	const { data: passkeys, isPending, refetch } = authClient.useListPasskeys();
+	const [name, setName] = useState("");
+	const [isAdding, setIsAdding] = useState(false);
+	const [deletingId, setDeletingId] = useState<string | null>(null);
+
+	const handleAddPasskey = async (e: React.FormEvent) => {
+		e.preventDefault();
+		setIsAdding(true);
+		try {
+			const result = await authClient.passkey.addPasskey({
+				name: name.trim() || undefined,
+			});
+
+			if (result?.error) {
+				toast.error(result.error.message);
+				return;
+			}
+
+			toast.success("Passkey added successfully");
+			setName("");
+			refetch();
+		} catch {
+			toast.error("Failed to add passkey");
+		} finally {
+			setIsAdding(false);
+		}
+	};
+
+	const handleDeletePasskey = async (id: string) => {
+		setDeletingId(id);
+		try {
+			const result = await authClient.passkey.deletePasskey({ id });
+
+			if (result?.error) {
+				toast.error(result.error.message);
+				return;
+			}
+
+			toast.success("Passkey removed");
+			refetch();
+		} catch {
+			toast.error("Failed to remove passkey");
+		} finally {
+			setDeletingId(null);
+		}
+	};
+
+	return (
+		<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+			<DialogTrigger asChild>
+				<Button variant="secondary">
+					<Fingerprint className="size-4 text-muted-foreground" />
+					Passkeys
+				</Button>
+			</DialogTrigger>
+			<DialogContent className="sm:max-w-xl">
+				<DialogHeader>
+					<DialogTitle>Passkeys</DialogTitle>
+					<DialogDescription>
+						Sign in without a password using your device's biometrics, security
+						key, or password manager.
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="space-y-4">
+					{isPending ? (
+						<div className="flex flex-row gap-2 items-center justify-center text-sm text-muted-foreground min-h-[10vh]">
+							<span>Loading...</span>
+							<Loader2 className="animate-spin size-4" />
+						</div>
+					) : passkeys && passkeys.length > 0 ? (
+						<div className="grid gap-3">
+							{passkeys.map((passkey) => (
+								<div
+									key={passkey.id}
+									className="flex items-center justify-between gap-2 p-4 border rounded-lg"
+								>
+									<div className="flex flex-col gap-1 min-w-0">
+										<span className="font-medium flex items-center gap-2">
+											<Fingerprint className="size-4 text-muted-foreground shrink-0" />
+											<span className="truncate">
+												{passkey.name || "Unnamed passkey"}
+											</span>
+											<Badge variant="outline">
+												{passkey.deviceType === "singleDevice"
+													? "Device"
+													: "Synced"}
+											</Badge>
+										</span>
+										{passkey.createdAt && (
+											<DateTooltip
+												date={passkey.createdAt.toString()}
+												className="text-sm"
+											>
+												Added
+											</DateTooltip>
+										)}
+									</div>
+									<DialogAction
+										title="Remove this passkey?"
+										description="You will no longer be able to sign in with it. This action cannot be undone."
+										onClick={() => handleDeletePasskey(passkey.id)}
+									>
+										<Button
+											variant="ghost"
+											size="icon"
+											isLoading={deletingId === passkey.id}
+											className="text-muted-foreground hover:text-destructive"
+										>
+											<Trash2 className="size-4" />
+										</Button>
+									</DialogAction>
+								</div>
+							))}
+						</div>
+					) : (
+						<div className="flex flex-col items-center gap-2 py-6 text-sm text-muted-foreground border rounded-lg">
+							<Fingerprint className="size-6" />
+							<span>No passkeys registered yet</span>
+						</div>
+					)}
+
+					<form onSubmit={handleAddPasskey} className="flex flex-col gap-2">
+						<Label htmlFor="passkey-name">Passkey Name</Label>
+						<div className="flex gap-2">
+							<Input
+								id="passkey-name"
+								placeholder="e.g. MacBook Touch ID"
+								value={name}
+								onChange={(e) => setName(e.target.value)}
+							/>
+							<Button type="submit" isLoading={isAdding}>
+								<Plus className="size-4" />
+								Add Passkey
+							</Button>
+						</div>
+					</form>
+				</div>
+			</DialogContent>
+		</Dialog>
+	);
+};

apps/dokploy/components/dashboard/settings/profile/profile-form.tsx

@@ -31,6 +31,7 @@ import { generateSHA256Hash, getFallbackAvatarInitials } from "@/lib/utils";
 import { api } from "@/utils/api";
 import { Configure2FA } from "./configure-2fa";
 import { Enable2FA } from "./enable-2fa";
+import { ManagePasskeys } from "./manage-passkeys";
 
 const profileSchema = z.object({
 	email: z
@@ -162,7 +163,10 @@ export const ProfileForm = () => {
 							</CardDescription>
 						</div>
 
-						{!data?.user.twoFactorEnabled ? <Enable2FA /> : <Configure2FA />}
+						<div className="flex flex-row gap-2 flex-wrap">
+							<ManagePasskeys />
+							{!data?.user.twoFactorEnabled ? <Enable2FA /> : <Configure2FA />}
+						</div>
 					</CardHeader>
 
 					<CardContent className="space-y-2 py-8 border-t">

apps/dokploy/drizzle/0177_glossy_brother_voodoo.sql

@@ -0,0 +1,17 @@
+CREATE TABLE "passkey" (
+	"id" text PRIMARY KEY NOT NULL,
+	"name" text,
+	"public_key" text NOT NULL,
+	"user_id" text NOT NULL,
+	"credential_id" text NOT NULL,
+	"counter" integer NOT NULL,
+	"device_type" text NOT NULL,
+	"backed_up" boolean NOT NULL,
+	"transports" text,
+	"created_at" timestamp,
+	"aaguid" text
+);
+--> statement-breakpoint
+ALTER TABLE "passkey" ADD CONSTRAINT "passkey_user_id_user_id_fk" FOREIGN KEY ("user_id") REFERENCES "public"."user"("id") ON DELETE cascade ON UPDATE no action;--> statement-breakpoint
+CREATE INDEX "passkey_userId_idx" ON "passkey" USING btree ("user_id");--> statement-breakpoint
+CREATE INDEX "passkey_credentialID_idx" ON "passkey" USING btree ("credential_id");

apps/dokploy/drizzle/meta/_journal.json

@@ -1240,6 +1240,13 @@
       "when": 1785274179336,
       "tag": "0176_slimy_marten_broadcloak",
       "breakpoints": true
+    },
+    {
+      "idx": 177,
+      "version": "7",
+      "when": 1785709848209,
+      "tag": "0177_glossy_brother_voodoo",
+      "breakpoints": true
     }
   ]
 }

apps/dokploy/lib/auth-client.ts

@@ -1,4 +1,5 @@
 import { apiKeyClient } from "@better-auth/api-key/client";
+import { passkeyClient } from "@better-auth/passkey/client";
 import { ssoClient } from "@better-auth/sso/client";
 import {
 	adminClient,
@@ -13,6 +14,7 @@ export const authClient = createAuthClient({
 	plugins: [
 		organizationClient(),
 		twoFactorClient(),
+		passkeyClient(),
 		apiKeyClient(),
 		ssoClient(),
 		adminClient(),

apps/dokploy/package.json

@@ -48,6 +48,7 @@
 		"@ai-sdk/openai": "^3.0.29",
 		"@ai-sdk/openai-compatible": "^2.0.30",
 		"@better-auth/api-key": "1.6.23",
+		"@better-auth/passkey": "1.6.23",
 		"@better-auth/scim": "1.6.23",
 		"@better-auth/sso": "1.6.23",
 		"@codemirror/autocomplete": "^6.18.6",

apps/dokploy/pages/index.tsx

@@ -6,6 +6,7 @@ import {
 import { validateRequest } from "@dokploy/server/lib/auth";
 import { standardSchemaResolver as zodResolver } from "@hookform/resolvers/standard-schema";
 import { REGEXP_ONLY_DIGITS } from "input-otp";
+import { Fingerprint } from "lucide-react";
 import type { GetServerSidePropsContext } from "next";
 import Link from "next/link";
 import { useRouter } from "next/router";
@@ -68,6 +69,7 @@ export default function Home({ IS_CLOUD, enforceSSO }: Props) {
 	const { config: whitelabeling } = useWhitelabelingPublic();
 	const { data: showSignInWithSSO } = api.sso.showSignInWithSSO.useQuery();
 	const [isLoginLoading, setIsLoginLoading] = useState(false);
+	const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
 	const [isTwoFactorLoading, setIsTwoFactorLoading] = useState(false);
 	const [isBackupCodeLoading, setIsBackupCodeLoading] = useState(false);
 	const [isTwoFactor, setIsTwoFactor] = useState(false);
@@ -123,6 +125,34 @@ export default function Home({ IS_CLOUD, enforceSSO }: Props) {
 			setIsLoginLoading(false);
 		}
 	};
+	const onPasskeySignIn = async () => {
+		setIsPasskeyLoading(true);
+		try {
+			const { data, error } = await authClient.signIn.passkey();
+
+			if (error) {
+				const errorCode = "code" in error ? error.code : undefined;
+				if (
+					errorCode !== "AUTH_CANCELLED" &&
+					errorCode !== "ERROR_CEREMONY_ABORTED"
+				) {
+					toast.error(error.message || "Failed to sign in with passkey");
+					setError(error.message || "Failed to sign in with passkey");
+				}
+				return;
+			}
+
+			if (data) {
+				toast.success("Logged in successfully");
+				router.push("/dashboard/home");
+			}
+		} catch {
+			toast.error("An error occurred while signing in with passkey");
+		} finally {
+			setIsPasskeyLoading(false);
+		}
+	};
+
 	const onTwoFactorSubmit = async (e: React.FormEvent) => {
 		e.preventDefault();
 		if (twoFactorCode.length !== 6) {
@@ -227,6 +257,16 @@ export default function Home({ IS_CLOUD, enforceSSO }: Props) {
 					</Button>
 				</form>
 			</Form>
+			<Button
+				variant="outline"
+				className="w-full mt-4"
+				type="button"
+				onClick={onPasskeySignIn}
+				isLoading={isPasskeyLoading}
+			>
+				<Fingerprint className="size-4" />
+				Sign in with Passkey
+			</Button>
 		</>
 	);