({
+ resolver: zodResolver(ZUpdatePasskeySchema),
+ defaultValues: {
+ name: passkeyName,
+ },
+ });
+
+ const { mutateAsync: updatePasskey, isLoading: isUpdatingPasskey } =
+ trpc.auth.updatePasskey.useMutation({
+ onSuccess: () => {
+ toast({
+ title: 'Success',
+ description: 'Passkey has been updated',
+ });
+ },
+ onError: () => {
+ toast({
+ title: 'Something went wrong',
+ description:
+ 'We are unable to update this passkey at the moment. Please try again later.',
+ duration: 10000,
+ variant: 'destructive',
+ });
+ },
+ });
+
+ const { mutateAsync: deletePasskey, isLoading: isDeletingPasskey } =
+ trpc.auth.deletePasskey.useMutation({
+ onSuccess: () => {
+ toast({
+ title: 'Success',
+ description: 'Passkey has been removed',
+ });
+ },
+ onError: () => {
+ toast({
+ title: 'Something went wrong',
+ description:
+ 'We are unable to remove this passkey at the moment. Please try again later.',
+ duration: 10000,
+ variant: 'destructive',
+ });
+ },
+ });
+
+ return (
+
+
+
+
+
+ );
+};
diff --git a/apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx b/apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx
new file mode 100644
index 000000000..edc14cb43
--- /dev/null
+++ b/apps/web/src/app/(dashboard)/settings/security/passkeys/user-passkeys-data-table.tsx
@@ -0,0 +1,120 @@
+'use client';
+
+import { usePathname, useRouter, useSearchParams } from 'next/navigation';
+
+import { DateTime } from 'luxon';
+
+import { useUpdateSearchParams } from '@documenso/lib/client-only/hooks/use-update-search-params';
+import { ZBaseTableSearchParamsSchema } from '@documenso/lib/types/search-params';
+import { trpc } from '@documenso/trpc/react';
+import { DataTable } from '@documenso/ui/primitives/data-table';
+import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
+import { Skeleton } from '@documenso/ui/primitives/skeleton';
+import { TableCell } from '@documenso/ui/primitives/table';
+
+import { UserPasskeysDataTableActions } from './user-passkeys-data-table-actions';
+
+export const UserPasskeysDataTable = () => {
+ const pathname = usePathname();
+ const router = useRouter();
+ const searchParams = useSearchParams();
+ const updateSearchParams = useUpdateSearchParams();
+
+ const parsedSearchParams = ZBaseTableSearchParamsSchema.parse(
+ Object.fromEntries(searchParams ?? []),
+ );
+
+ const { data, isLoading, isInitialLoading, isLoadingError } = trpc.auth.findPasskeys.useQuery(
+ {
+ page: parsedSearchParams.page,
+ perPage: parsedSearchParams.perPage,
+ },
+ {
+ keepPreviousData: true,
+ },
+ );
+
+ const onPaginationChange = (page: number, perPage: number) => {
+ updateSearchParams({
+ page,
+ perPage,
+ });
+ };
+
+ const results = data ?? {
+ data: [],
+ perPage: 10,
+ currentPage: 1,
+ totalPages: 1,
+ };
+
+ return (
+ DateTime.fromJSDate(row.original.createdAt).toRelative(),
+ },
+
+ {
+ header: 'Last used',
+ accessorKey: 'updatedAt',
+ cell: ({ row }) =>
+ row.original.lastUsedAt
+ ? DateTime.fromJSDate(row.original.lastUsedAt).toRelative()
+ : 'Never',
+ },
+ {
+ id: 'actions',
+ cell: ({ row }) => (
+
+ ),
+ },
+ ]}
+ data={results.data}
+ perPage={results.perPage}
+ currentPage={results.currentPage}
+ totalPages={results.totalPages}
+ onPaginationChange={onPaginationChange}
+ hasFilters={parsedSearchParams.page !== undefined || parsedSearchParams.perPage !== undefined}
+ onClearFilters={() => router.push(pathname ?? '/')}
+ error={{
+ enable: isLoadingError,
+ }}
+ skeleton={{
+ enable: isLoading && isInitialLoading,
+ rows: 3,
+ component: (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ),
+ }}
+ >
+ {(table) => }
+
+ );
+};
diff --git a/apps/web/src/components/(dashboard)/settings/layout/header.tsx b/apps/web/src/components/(dashboard)/settings/layout/header.tsx
index 5722d1985..6f5ae28bc 100644
--- a/apps/web/src/components/(dashboard)/settings/layout/header.tsx
+++ b/apps/web/src/components/(dashboard)/settings/layout/header.tsx
@@ -5,11 +5,18 @@ import { cn } from '@documenso/ui/lib/utils';
export type SettingsHeaderProps = {
title: string;
subtitle: string;
+ hideDivider?: boolean;
children?: React.ReactNode;
className?: string;
};
-export const SettingsHeader = ({ children, title, subtitle, className }: SettingsHeaderProps) => {
+export const SettingsHeader = ({
+ children,
+ title,
+ subtitle,
+ className,
+ hideDivider,
+}: SettingsHeaderProps) => {
return (
<>
@@ -22,7 +29,7 @@ export const SettingsHeader = ({ children, title, subtitle, className }: Setting
{children}
-
+ {!hideDivider &&
}
);
};
diff --git a/apps/web/src/components/forms/signin.tsx b/apps/web/src/components/forms/signin.tsx
index 1d6d32f1f..6fa5492ac 100644
--- a/apps/web/src/components/forms/signin.tsx
+++ b/apps/web/src/components/forms/signin.tsx
@@ -6,12 +6,18 @@ import Link from 'next/link';
import { useRouter } from 'next/navigation';
import { zodResolver } from '@hookform/resolvers/zod';
+import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
+import { KeyRoundIcon } from 'lucide-react';
import { signIn } from 'next-auth/react';
import { useForm } from 'react-hook-form';
import { FcGoogle } from 'react-icons/fc';
+import { match } from 'ts-pattern';
import { z } from 'zod';
+import { useFeatureFlags } from '@documenso/lib/client-only/providers/feature-flag';
+import { AppError, AppErrorCode } from '@documenso/lib/errors/app-error';
import { ErrorCode, isErrorCode } from '@documenso/lib/next-auth/error-codes';
+import { trpc } from '@documenso/trpc/react';
import { ZCurrentPasswordSchema } from '@documenso/trpc/server/auth-router/schema';
import { cn } from '@documenso/ui/lib/utils';
import { Button } from '@documenso/ui/primitives/button';
@@ -66,14 +72,24 @@ export type SignInFormProps = {
export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: SignInFormProps) => {
const { toast } = useToast();
+ const { getFlag } = useFeatureFlags();
+
+ const router = useRouter();
+
const [isTwoFactorAuthenticationDialogOpen, setIsTwoFactorAuthenticationDialogOpen] =
useState(false);
- const router = useRouter();
const [twoFactorAuthenticationMethod, setTwoFactorAuthenticationMethod] = useState<
'totp' | 'backup'
>('totp');
+ const [isPasskeyLoading, setIsPasskeyLoading] = useState(false);
+
+ const isPasskeyEnabled = getFlag('app_passkey');
+
+ const { mutateAsync: createPasskeySigninOptions } =
+ trpc.auth.createPasskeySigninOptions.useMutation();
+
const form = useForm({
values: {
email: initialEmail ?? '',
@@ -107,6 +123,63 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
setTwoFactorAuthenticationMethod(method);
};
+ const onSignInWithPasskey = async () => {
+ if (!browserSupportsWebAuthn) {
+ toast({
+ title: 'Not supported',
+ description: 'Passkeys are not supported on this browser',
+ duration: 10000,
+ variant: 'destructive',
+ });
+
+ return;
+ }
+
+ try {
+ setIsPasskeyLoading(true);
+
+ const options = await createPasskeySigninOptions();
+
+ const credential = await startAuthentication(options);
+
+ const result = await signIn('webauthn', {
+ credential: JSON.stringify(credential),
+ callbackUrl: LOGIN_REDIRECT_PATH,
+ redirect: false,
+ });
+
+ if (!result?.url || result.error) {
+ throw new AppError(result?.error ?? '');
+ }
+
+ window.location.href = result.url;
+ } catch (err) {
+ setIsPasskeyLoading(false);
+
+ if (err.name === 'NotAllowedError') {
+ return;
+ }
+
+ const error = AppError.parseError(err);
+
+ const errorMessage = match(error.code)
+ .with(
+ AppErrorCode.NOT_SETUP,
+ () =>
+ 'This passkey is not configured for this application. Please login and add one in the user settings.',
+ )
+ .with(AppErrorCode.EXPIRED_CODE, () => 'This session has expired. Please try again.')
+ .otherwise(() => 'Please try again later or login using your normal details');
+
+ toast({
+ title: 'Something went wrong',
+ description: errorMessage,
+ duration: 10000,
+ variant: 'destructive',
+ });
+ }
+ };
+
const onFormSubmit = async ({ email, password, totpCode, backupCode }: TSignInFormSchema) => {
try {
const credentials: Record = {
@@ -189,7 +262,10 @@ export const SignInForm = ({ className, initialEmail, isGoogleSSOEnabled }: Sign
className={cn('flex w-full flex-col gap-y-4', className)}
onSubmit={form.handleSubmit(onFormSubmit)}
>
-