feat: add passkeys (#989)

## Description

Add support to login with passkeys.

Passkeys can be added via the user security settings page.

Note: Currently left out adding the type of authentication method for
the 'user security audit logs' because we're using the `signIn`
next-auth event which doesn't appear to provide the context. Will look
into it at another time.

## Changes Made

- Add passkeys to login
- Add passkeys feature flag
- Add page to manage passkeys
- Add audit logs relating to passkeys
- Updated prisma schema to support passkeys & anonymous verification
tokens

## Testing Performed

To be done.

MacOS:
- Safari ✅ 
- Chrome ✅ 
- Firefox ✅

Windows:
- Chrome [Untested] 
- Firefox [Untested]

Linux:
- Chrome [Untested]
- Firefox [Untested]

iOS:
- Safari ✅

## Checklist

<!--- Please check the boxes that apply to this pull request. -->
<!--- You can add or remove items as needed. -->

- [X] I have tested these changes locally and they work as expected.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

- **New Features**
- Introduced Passkey authentication, including creation, sign-in, and
management of passkeys.
- Added a Passkeys section in Security Settings for managing user
passkeys.
- Implemented UI updates for Passkey authentication, including a new
dialog for creating passkeys and a data table for managing them.
- Enhanced security settings with server-side feature flags to
conditionally display new security features.
- **Bug Fixes**
	- Improved UI consistency in the Settings Security Activity Page.
- Updated button styling in the 2FA Recovery Codes component for better
visibility.
- **Refactor**
- Streamlined authentication options to include WebAuthn credentials
provider.
- **Chores**
- Updated database schema to support passkeys and related functionality.
	- Added new audit log types for passkey-related activities.
- Enhanced server-only authentication utilities for passkey registration
and management.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

packages/lib/constants/auth.ts

@@ -16,10 +16,24 @@ export const USER_SECURITY_AUDIT_LOG_MAP: { [key in UserSecurityAuditLogType]: s
   [UserSecurityAuditLogType.ACCOUNT_PROFILE_UPDATE]: 'Profile updated',
   [UserSecurityAuditLogType.AUTH_2FA_DISABLE]: '2FA Disabled',
   [UserSecurityAuditLogType.AUTH_2FA_ENABLE]: '2FA Enabled',
+  [UserSecurityAuditLogType.PASSKEY_CREATED]: 'Passkey created',
+  [UserSecurityAuditLogType.PASSKEY_DELETED]: 'Passkey deleted',
+  [UserSecurityAuditLogType.PASSKEY_UPDATED]: 'Passkey updated',
   [UserSecurityAuditLogType.PASSWORD_RESET]: 'Password reset',
   [UserSecurityAuditLogType.PASSWORD_UPDATE]: 'Password updated',
   [UserSecurityAuditLogType.SIGN_OUT]: 'Signed Out',
   [UserSecurityAuditLogType.SIGN_IN]: 'Signed In',
   [UserSecurityAuditLogType.SIGN_IN_FAIL]: 'Sign in attempt failed',
+  [UserSecurityAuditLogType.SIGN_IN_PASSKEY_FAIL]: 'Passkey sign in failed',
   [UserSecurityAuditLogType.SIGN_IN_2FA_FAIL]: 'Sign in 2FA attempt failed',
 };
+
+/**
+ * The duration to wait for a passkey to be verified in MS.
+ */
+export const PASSKEY_TIMEOUT = 60000;
+
+/**
+ * The maximum number of passkeys are user can have.
+ */
+export const MAXIMUM_PASSKEYS = 50;

packages/lib/constants/feature-flags.ts

@@ -1,6 +1,6 @@
 import { env } from 'next-runtime-env';
 
-import { APP_BASE_URL } from './app';
+import { APP_BASE_URL, WEBAPP_BASE_URL } from './app';
 
 const NEXT_PUBLIC_FEATURE_BILLING_ENABLED = () => env('NEXT_PUBLIC_FEATURE_BILLING_ENABLED');
 const NEXT_PUBLIC_POSTHOG_KEY = () => env('NEXT_PUBLIC_POSTHOG_KEY');
@@ -23,6 +23,7 @@ export const FEATURE_FLAG_POLL_INTERVAL = 30000;
 export const LOCAL_FEATURE_FLAGS: Record<string, boolean> = {
   app_billing: NEXT_PUBLIC_FEATURE_BILLING_ENABLED() === 'true',
   app_document_page_view_history_sheet: false,
+  app_passkey: WEBAPP_BASE_URL === 'http://localhost:3000', // Temp feature flag.
   marketing_header_single_player_mode: false,
   marketing_profiles_announcement_bar: true,
 } as const;

packages/lib/next-auth/auth-options.ts

@@ -1,6 +1,7 @@
 /// <reference types="../types/next-auth.d.ts" />
 import { PrismaAdapter } from '@next-auth/prisma-adapter';
 import { compare } from '@node-rs/bcrypt';
+import { verifyAuthenticationResponse } from '@simplewebauthn/server';
 import { DateTime } from 'luxon';
 import type { AuthOptions, Session, User } from 'next-auth';
 import type { JWT } from 'next-auth/jwt';
@@ -12,12 +13,16 @@ import { env } from 'next-runtime-env';
 import { prisma } from '@documenso/prisma';
 import { IdentityProvider, UserSecurityAuditLogType } from '@documenso/prisma/client';
 
+import { AppError, AppErrorCode } from '../errors/app-error';
 import { isTwoFactorAuthenticationEnabled } from '../server-only/2fa/is-2fa-availble';
 import { validateTwoFactorAuthentication } from '../server-only/2fa/validate-2fa';
 import { getMostRecentVerificationTokenByUserId } from '../server-only/user/get-most-recent-verification-token-by-user-id';
 import { getUserByEmail } from '../server-only/user/get-user-by-email';
 import { sendConfirmationToken } from '../server-only/user/send-confirmation-token';
+import type { TAuthenticationResponseJSONSchema } from '../types/webauthn';
+import { ZAuthenticationResponseJSONSchema } from '../types/webauthn';
 import { extractNextAuthRequestMetadata } from '../universal/extract-request-metadata';
+import { getAuthenticatorRegistrationOptions } from '../utils/authenticator';
 import { ErrorCode } from './error-codes';
 
 export const NEXT_AUTH_OPTIONS: AuthOptions = {
@@ -131,6 +136,113 @@ export const NEXT_AUTH_OPTIONS: AuthOptions = {
         };
       },
     }),
+    CredentialsProvider({
+      id: 'webauthn',
+      name: 'Keypass',
+      credentials: {
+        csrfToken: { label: 'csrfToken', type: 'csrfToken' },
+      },
+      async authorize(credentials, req) {
+        const csrfToken = credentials?.csrfToken;
+
+        if (typeof csrfToken !== 'string' || csrfToken.length === 0) {
+          throw new AppError(AppErrorCode.INVALID_REQUEST);
+        }
+
+        let requestBodyCrediential: TAuthenticationResponseJSONSchema | null = null;
+
+        try {
+          const parsedBodyCredential = JSON.parse(req.body?.credential);
+          requestBodyCrediential = ZAuthenticationResponseJSONSchema.parse(parsedBodyCredential);
+        } catch {
+          throw new AppError(AppErrorCode.INVALID_REQUEST);
+        }
+
+        const challengeToken = await prisma.anonymousVerificationToken
+          .delete({
+            where: {
+              id: csrfToken,
+            },
+          })
+          .catch(() => null);
+
+        if (!challengeToken) {
+          return null;
+        }
+
+        if (challengeToken.expiresAt < new Date()) {
+          throw new AppError(AppErrorCode.EXPIRED_CODE);
+        }
+
+        const passkey = await prisma.passkey.findFirst({
+          where: {
+            credentialId: Buffer.from(requestBodyCrediential.id, 'base64'),
+          },
+          include: {
+            User: {
+              select: {
+                id: true,
+                email: true,
+                name: true,
+                emailVerified: true,
+              },
+            },
+          },
+        });
+
+        if (!passkey) {
+          throw new AppError(AppErrorCode.NOT_SETUP);
+        }
+
+        const user = passkey.User;
+
+        const { rpId, origin } = getAuthenticatorRegistrationOptions();
+
+        const verification = await verifyAuthenticationResponse({
+          response: requestBodyCrediential,
+          expectedChallenge: challengeToken.token,
+          expectedOrigin: origin,
+          expectedRPID: rpId,
+          authenticator: {
+            credentialID: new Uint8Array(Array.from(passkey.credentialId)),
+            credentialPublicKey: new Uint8Array(passkey.credentialPublicKey),
+            counter: Number(passkey.counter),
+          },
+        }).catch(() => null);
+
+        const requestMetadata = extractNextAuthRequestMetadata(req);
+
+        if (!verification?.verified) {
+          await prisma.userSecurityAuditLog.create({
+            data: {
+              userId: user.id,
+              ipAddress: requestMetadata.ipAddress,
+              userAgent: requestMetadata.userAgent,
+              type: UserSecurityAuditLogType.SIGN_IN_PASSKEY_FAIL,
+            },
+          });
+
+          return null;
+        }
+
+        await prisma.passkey.update({
+          where: {
+            id: passkey.id,
+          },
+          data: {
+            lastUsedAt: new Date(),
+            counter: verification.authenticationInfo.newCounter,
+          },
+        });
+
+        return {
+          id: Number(user.id),
+          email: user.email,
+          name: user.name,
+          emailVerified: user.emailVerified?.toISOString() ?? null,
+        } satisfies User;
+      },
+    }),
   ],
   callbacks: {
     async jwt({ token, user, trigger, account }) {

packages/lib/server-only/auth/create-passkey-registration-options.ts

@@ -0,0 +1,58 @@
+import { generateRegistrationOptions } from '@simplewebauthn/server';
+import type { AuthenticatorTransportFuture } from '@simplewebauthn/types';
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+
+import { PASSKEY_TIMEOUT } from '../../constants/auth';
+import { getAuthenticatorRegistrationOptions } from '../../utils/authenticator';
+
+type CreatePasskeyRegistrationOptions = {
+  userId: number;
+};
+
+export const createPasskeyRegistrationOptions = async ({
+  userId,
+}: CreatePasskeyRegistrationOptions) => {
+  const user = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    select: {
+      name: true,
+      email: true,
+      passkeys: true,
+    },
+  });
+
+  const { passkeys } = user;
+
+  const { rpName, rpId: rpID } = getAuthenticatorRegistrationOptions();
+
+  const options = await generateRegistrationOptions({
+    rpName,
+    rpID,
+    userID: userId.toString(),
+    userName: user.email,
+    userDisplayName: user.name ?? undefined,
+    timeout: PASSKEY_TIMEOUT,
+    attestationType: 'none',
+    excludeCredentials: passkeys.map((passkey) => ({
+      id: passkey.credentialId,
+      type: 'public-key',
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      transports: passkey.transports as AuthenticatorTransportFuture[],
+    })),
+  });
+
+  await prisma.verificationToken.create({
+    data: {
+      userId,
+      token: options.challenge,
+      expires: DateTime.now().plus({ minutes: 2 }).toJSDate(),
+      identifier: 'PASSKEY_CHALLENGE',
+    },
+  });
+
+  return options;
+};

packages/lib/server-only/auth/create-passkey-signin-options.ts

@@ -0,0 +1,41 @@
+import { generateAuthenticationOptions } from '@simplewebauthn/server';
+import { DateTime } from 'luxon';
+
+import { prisma } from '@documenso/prisma';
+
+import { getAuthenticatorRegistrationOptions } from '../../utils/authenticator';
+
+type CreatePasskeySigninOptions = {
+  sessionId: string;
+};
+
+export const createPasskeySigninOptions = async ({ sessionId }: CreatePasskeySigninOptions) => {
+  const { rpId, timeout } = getAuthenticatorRegistrationOptions();
+
+  const options = await generateAuthenticationOptions({
+    rpID: rpId,
+    userVerification: 'preferred',
+    timeout,
+  });
+
+  const { challenge } = options;
+
+  await prisma.anonymousVerificationToken.upsert({
+    where: {
+      id: sessionId,
+    },
+    update: {
+      token: challenge,
+      expiresAt: DateTime.now().plus({ minutes: 2 }).toJSDate(),
+      createdAt: new Date(),
+    },
+    create: {
+      id: sessionId,
+      token: challenge,
+      expiresAt: DateTime.now().plus({ minutes: 2 }).toJSDate(),
+      createdAt: new Date(),
+    },
+  });
+
+  return options;
+};

packages/lib/server-only/auth/create-passkey.ts

@@ -0,0 +1,106 @@
+import { verifyRegistrationResponse } from '@simplewebauthn/server';
+import type { RegistrationResponseJSON } from '@simplewebauthn/types';
+
+import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
+
+import { MAXIMUM_PASSKEYS } from '../../constants/auth';
+import { AppError, AppErrorCode } from '../../errors/app-error';
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+import { getAuthenticatorRegistrationOptions } from '../../utils/authenticator';
+
+type CreatePasskeyOptions = {
+  userId: number;
+  passkeyName: string;
+  verificationResponse: RegistrationResponseJSON;
+  requestMetadata?: RequestMetadata;
+};
+
+export const createPasskey = async ({
+  userId,
+  passkeyName,
+  verificationResponse,
+  requestMetadata,
+}: CreatePasskeyOptions) => {
+  const { _count } = await prisma.user.findFirstOrThrow({
+    where: {
+      id: userId,
+    },
+    include: {
+      _count: {
+        select: {
+          passkeys: true,
+        },
+      },
+    },
+  });
+
+  if (_count.passkeys >= MAXIMUM_PASSKEYS) {
+    throw new AppError('TOO_MANY_PASSKEYS');
+  }
+
+  const verificationToken = await prisma.verificationToken.findFirst({
+    where: {
+      userId,
+      identifier: 'PASSKEY_CHALLENGE',
+    },
+    orderBy: {
+      createdAt: 'desc',
+    },
+  });
+
+  if (!verificationToken) {
+    throw new AppError(AppErrorCode.NOT_FOUND, 'Challenge token not found');
+  }
+
+  await prisma.verificationToken.deleteMany({
+    where: {
+      userId,
+      identifier: 'PASSKEY_CHALLENGE',
+    },
+  });
+
+  if (verificationToken.expires < new Date()) {
+    throw new AppError(AppErrorCode.EXPIRED_CODE, 'Challenge token expired');
+  }
+
+  const { rpId: expectedRPID, origin: expectedOrigin } = getAuthenticatorRegistrationOptions();
+
+  const verification = await verifyRegistrationResponse({
+    response: verificationResponse,
+    expectedChallenge: verificationToken.token,
+    expectedOrigin,
+    expectedRPID,
+  });
+
+  if (!verification.verified || !verification.registrationInfo) {
+    throw new AppError(AppErrorCode.UNAUTHORIZED, 'Verification failed');
+  }
+
+  const { credentialPublicKey, credentialID, counter, credentialDeviceType, credentialBackedUp } =
+    verification.registrationInfo;
+
+  await prisma.$transaction(async (tx) => {
+    await tx.passkey.create({
+      data: {
+        userId,
+        name: passkeyName,
+        credentialId: Buffer.from(credentialID),
+        credentialPublicKey: Buffer.from(credentialPublicKey),
+        counter,
+        credentialDeviceType,
+        credentialBackedUp,
+        transports: verificationResponse.response.transports,
+      },
+    });
+
+    await tx.userSecurityAuditLog.create({
+      data: {
+        userId,
+        type: UserSecurityAuditLogType.PASSKEY_CREATED,
+        userAgent: requestMetadata?.userAgent,
+        ipAddress: requestMetadata?.ipAddress,
+      },
+    });
+  });
+};

packages/lib/server-only/auth/delete-passkey.ts

@@ -0,0 +1,41 @@
+import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
+
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+
+export interface DeletePasskeyOptions {
+  userId: number;
+  passkeyId: string;
+  requestMetadata?: RequestMetadata;
+}
+
+export const deletePasskey = async ({
+  userId,
+  passkeyId,
+  requestMetadata,
+}: DeletePasskeyOptions) => {
+  await prisma.passkey.findFirstOrThrow({
+    where: {
+      id: passkeyId,
+      userId,
+    },
+  });
+
+  await prisma.$transaction(async (tx) => {
+    await tx.passkey.delete({
+      where: {
+        id: passkeyId,
+        userId,
+      },
+    });
+
+    await tx.userSecurityAuditLog.create({
+      data: {
+        userId,
+        type: UserSecurityAuditLogType.PASSKEY_DELETED,
+        userAgent: requestMetadata?.userAgent,
+        ipAddress: requestMetadata?.ipAddress,
+      },
+    });
+  });
+};

packages/lib/server-only/auth/find-passkeys.ts

@@ -0,0 +1,71 @@
+import type { FindResultSet } from '@documenso/lib/types/find-result-set';
+import { prisma } from '@documenso/prisma';
+import type { Passkey } from '@documenso/prisma/client';
+import { Prisma } from '@documenso/prisma/client';
+
+export interface FindPasskeysOptions {
+  userId: number;
+  term?: string;
+  page?: number;
+  perPage?: number;
+  orderBy?: {
+    column: keyof Passkey;
+    direction: 'asc' | 'desc';
+  };
+}
+
+export const findPasskeys = async ({
+  userId,
+  term = '',
+  page = 1,
+  perPage = 10,
+  orderBy,
+}: FindPasskeysOptions) => {
+  const orderByColumn = orderBy?.column ?? 'name';
+  const orderByDirection = orderBy?.direction ?? 'desc';
+
+  const whereClause: Prisma.PasskeyWhereInput = {
+    userId,
+  };
+
+  if (term.length > 0) {
+    whereClause.name = {
+      contains: term,
+      mode: Prisma.QueryMode.insensitive,
+    };
+  }
+
+  const [data, count] = await Promise.all([
+    prisma.passkey.findMany({
+      where: whereClause,
+      skip: Math.max(page - 1, 0) * perPage,
+      take: perPage,
+      orderBy: {
+        [orderByColumn]: orderByDirection,
+      },
+      select: {
+        id: true,
+        userId: true,
+        name: true,
+        createdAt: true,
+        updatedAt: true,
+        lastUsedAt: true,
+        counter: true,
+        credentialDeviceType: true,
+        credentialBackedUp: true,
+        transports: true,
+      },
+    }),
+    prisma.passkey.count({
+      where: whereClause,
+    }),
+  ]);
+
+  return {
+    data,
+    count,
+    currentPage: Math.max(page, 1),
+    perPage,
+    totalPages: Math.ceil(count / perPage),
+  } satisfies FindResultSet<typeof data>;
+};

packages/lib/server-only/auth/update-passkey.ts

@@ -0,0 +1,51 @@
+import { prisma } from '@documenso/prisma';
+import { UserSecurityAuditLogType } from '@documenso/prisma/client';
+
+import type { RequestMetadata } from '../../universal/extract-request-metadata';
+
+export interface UpdateAuthenticatorsOptions {
+  userId: number;
+  passkeyId: string;
+  name: string;
+  requestMetadata?: RequestMetadata;
+}
+
+export const updatePasskey = async ({
+  userId,
+  passkeyId,
+  name,
+  requestMetadata,
+}: UpdateAuthenticatorsOptions) => {
+  const passkey = await prisma.passkey.findFirstOrThrow({
+    where: {
+      id: passkeyId,
+      userId,
+    },
+  });
+
+  if (passkey.name === name) {
+    return;
+  }
+
+  await prisma.$transaction(async (tx) => {
+    await tx.passkey.update({
+      where: {
+        id: passkeyId,
+        userId,
+      },
+      data: {
+        name,
+        updatedAt: new Date(),
+      },
+    });
+
+    await tx.userSecurityAuditLog.create({
+      data: {
+        userId,
+        type: UserSecurityAuditLogType.PASSKEY_UPDATED,
+        userAgent: requestMetadata?.userAgent,
+        ipAddress: requestMetadata?.ipAddress,
+      },
+    });
+  });
+};

packages/lib/types/webauthn.ts

@@ -0,0 +1,44 @@
+import { z } from 'zod';
+
+const ZClientExtensionResults = z.object({
+  appid: z.boolean().optional(),
+  credProps: z
+    .object({
+      rk: z.boolean().optional(),
+    })
+    .optional(),
+  hmacCreateSecret: z.boolean().optional(),
+});
+
+export const ZAuthenticationResponseJSONSchema = z.object({
+  id: z.string(),
+  rawId: z.string(),
+  response: z.object({
+    clientDataJSON: z.string(),
+    authenticatorData: z.string(),
+    signature: z.string(),
+    userHandle: z.string().optional(),
+  }),
+  authenticatorAttachment: z.union([z.literal('cross-platform'), z.literal('platform')]).optional(),
+  clientExtensionResults: ZClientExtensionResults,
+  type: z.literal('public-key'),
+});
+
+export const ZRegistrationResponseJSONSchema = z.object({
+  id: z.string(),
+  rawId: z.string(),
+  response: z.object({
+    clientDataJSON: z.string(),
+    attestationObject: z.string(),
+    authenticatorData: z.string().optional(),
+    transports: z.array(z.string()).optional(),
+    publicKeyAlgorithm: z.number().optional(),
+    publicKey: z.string().optional(),
+  }),
+  authenticatorAttachment: z.string().optional(),
+  clientExtensionResults: ZClientExtensionResults.optional(),
+  type: z.string(),
+});
+
+export type TAuthenticationResponseJSONSchema = z.infer<typeof ZAuthenticationResponseJSONSchema>;
+export type TRegistrationResponseJSONSchema = z.infer<typeof ZRegistrationResponseJSONSchema>;

packages/lib/utils/authenticator.ts

@@ -0,0 +1,17 @@
+import { WEBAPP_BASE_URL } from '../constants/app';
+import { PASSKEY_TIMEOUT } from '../constants/auth';
+
+/**
+ * Extracts common fields to identify the RP (relying party)
+ */
+export const getAuthenticatorRegistrationOptions = () => {
+  const webAppBaseUrl = new URL(WEBAPP_BASE_URL);
+  const rpId = webAppBaseUrl.hostname;
+
+  return {
+    rpName: 'Documenso',
+    rpId,
+    origin: WEBAPP_BASE_URL,
+    timeout: PASSKEY_TIMEOUT,
+  };
+};