feat: add passkey and 2FA document action auth options (#1065)

## Description

Add the following document action auth options:
- 2FA
- Passkey

If the user does not have the required auth setup, we onboard them
directly.

## Changes made

Note: Added secondaryId to the VerificationToken schema

## Testing Performed

Tested locally, pending preview tests

## Checklist

- [X] I have tested these changes locally and they work as expected.
- [X] I have added/updated tests that prove the effectiveness of these
changes.
- [X] I have followed the project's coding style guidelines.

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

## Summary by CodeRabbit

- **New Features**
- Introduced components for 2FA, account, and passkey authentication
during document signing.
- Added "Require passkey" option to document settings and signer
authentication settings.
- Enhanced form submission and loading states for improved user
experience.
- **Refactor**
- Optimized authentication components to efficiently support multiple
authentication methods.
- **Chores**
- Updated and renamed functions and components for clarity and
consistency across the authentication system.
- Refined sorting options and database schema to support new
authentication features.
- **Bug Fixes**
- Adjusted SignInForm to verify browser support for WebAuthn before
proceeding.

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

apps/web/src/app/(signing)/sign/[token]/document-action-auth-dialog.tsx

@@ -1,13 +1,4 @@
-/**
- * Note: This file has some commented out stuff for password auth which is no longer possible.
- *
- * Leaving it here until after we add passkeys and 2FA since it can be reused.
- */
-import { useState } from 'react';
-
-import { DateTime } from 'luxon';
-import { signOut } from 'next-auth/react';
-import { match } from 'ts-pattern';
+import { P, match } from 'ts-pattern';
 
 import {
   DocumentAuth,
@@ -15,18 +6,17 @@ import {
   type TRecipientActionAuthTypes,
 } from '@documenso/lib/types/document-auth';
 import type { FieldType } from '@documenso/prisma/client';
-import { trpc } from '@documenso/trpc/react';
-import { Alert, AlertDescription } from '@documenso/ui/primitives/alert';
-import { Button } from '@documenso/ui/primitives/button';
 import {
   Dialog,
   DialogContent,
   DialogDescription,
-  DialogFooter,
   DialogHeader,
   DialogTitle,
 } from '@documenso/ui/primitives/dialog';
 
+import { DocumentActionAuth2FA } from './document-action-auth-2fa';
+import { DocumentActionAuthAccount } from './document-action-auth-account';
+import { DocumentActionAuthPasskey } from './document-action-auth-passkey';
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
 
 export type DocumentActionAuthDialogProps = {
@@ -34,7 +24,6 @@ export type DocumentActionAuthDialogProps = {
   documentAuthType: TRecipientActionAuthTypes;
   description?: string;
   actionTarget: FieldType | 'DOCUMENT';
-  isSubmitting?: boolean;
   open: boolean;
   onOpenChange: (value: boolean) => void;
 
@@ -44,96 +33,24 @@ export type DocumentActionAuthDialogProps = {
   onReauthFormSubmit: (values?: TRecipientActionAuth) => Promise<void> | void;
 };
 
-// const ZReauthFormSchema = z.object({
-//   password: ZCurrentPasswordSchema,
-// });
-// type TReauthFormSchema = z.infer<typeof ZReauthFormSchema>;
-
 export const DocumentActionAuthDialog = ({
   title,
   description,
   documentAuthType,
-  // onReauthFormSubmit,
-  isSubmitting,
   open,
   onOpenChange,
+  onReauthFormSubmit,
 }: DocumentActionAuthDialogProps) => {
-  const { recipient } = useRequiredDocumentAuthContext();
-
-  // const form = useForm({
-  //   resolver: zodResolver(ZReauthFormSchema),
-  //   defaultValues: {
-  //     password: '',
-  //   },
-  // });
-
-  const [isSigningOut, setIsSigningOut] = useState(false);
-
-  const isLoading = isSigningOut || isSubmitting; // || form.formState.isSubmitting;
-
-  const { mutateAsync: encryptSecondaryData } = trpc.crypto.encryptSecondaryData.useMutation();
-
-  // const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
-  // const onFormSubmit = async (_values: TReauthFormSchema) => {
-  //   const documentAuthValue: TRecipientActionAuth = match(documentAuthType)
-  //     // Todo: Add passkey.
-  //     // .with(DocumentAuthType.PASSKEY, (type) => ({
-  //     //   type,
-  //     //   value,
-  //     // }))
-  //     .otherwise((type) => ({
-  //       type,
-  //     }));
-
-  //   try {
-  //     await onReauthFormSubmit(documentAuthValue);
-
-  //     onOpenChange(false);
-  //   } catch (e) {
-  //     const error = AppError.parseError(e);
-  //     setFormErrorCode(error.code);
-
-  //     // Suppress unauthorized errors since it's handled in this component.
-  //     if (error.code === AppErrorCode.UNAUTHORIZED) {
-  //       return;
-  //     }
-
-  //     throw error;
-  //   }
-  // };
-
-  const handleChangeAccount = async (email: string) => {
-    try {
-      setIsSigningOut(true);
-
-      const encryptedEmail = await encryptSecondaryData({
-        data: email,
-        expiresAt: DateTime.now().plus({ days: 1 }).toMillis(),
-      });
-
-      await signOut({
-        callbackUrl: `/signin?email=${encodeURIComponent(encryptedEmail)}`,
-      });
-    } catch {
-      setIsSigningOut(false);
-
-      // Todo: Alert.
-    }
-  };
+  const { recipient, user, isCurrentlyAuthenticating } = useRequiredDocumentAuthContext();
 
   const handleOnOpenChange = (value: boolean) => {
-    if (isLoading) {
+    if (isCurrentlyAuthenticating) {
       return;
     }
 
     onOpenChange(value);
   };
 
-  // useEffect(() => {
-  //   form.reset();
-  //   setFormErrorCode(null);
-  // }, [open, form]);
-
   return (
     <Dialog open={open} onOpenChange={handleOnOpenChange}>
       <DialogContent>
@@ -141,100 +58,32 @@ export const DocumentActionAuthDialog = ({
           <DialogTitle>{title || 'Sign field'}</DialogTitle>
 
           <DialogDescription>
-            {description || `Reauthentication is required to sign the field`}
+            {description || 'Reauthentication is required to sign this field'}
           </DialogDescription>
         </DialogHeader>
 
-        {match(documentAuthType)
-          .with(DocumentAuth.ACCOUNT, () => (
-            <fieldset disabled={isSigningOut} className="space-y-4">
-              <Alert>
-                <AlertDescription>
-                  To sign this field, you need to be logged in as <strong>{recipient.email}</strong>
-                </AlertDescription>
-              </Alert>
-
-              <DialogFooter>
-                <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                  Cancel
-                </Button>
-
-                <Button
-                  type="submit"
-                  onClick={async () => handleChangeAccount(recipient.email)}
-                  loading={isSigningOut}
-                >
-                  Login
-                </Button>
-              </DialogFooter>
-            </fieldset>
+        {match({ documentAuthType, user })
+          .with(
+            { documentAuthType: DocumentAuth.ACCOUNT },
+            { user: P.when((user) => !user || user.email !== recipient.email) }, // Assume all current auth methods requires them to be logged in.
+            () => <DocumentActionAuthAccount onOpenChange={onOpenChange} />,
+          )
+          .with({ documentAuthType: DocumentAuth.PASSKEY }, () => (
+            <DocumentActionAuthPasskey
+              open={open}
+              onOpenChange={onOpenChange}
+              onReauthFormSubmit={onReauthFormSubmit}
+            />
           ))
-          .with(DocumentAuth.EXPLICIT_NONE, () => null)
+          .with({ documentAuthType: DocumentAuth.TWO_FACTOR_AUTH }, () => (
+            <DocumentActionAuth2FA
+              open={open}
+              onOpenChange={onOpenChange}
+              onReauthFormSubmit={onReauthFormSubmit}
+            />
+          ))
+          .with({ documentAuthType: DocumentAuth.EXPLICIT_NONE }, () => null)
           .exhaustive()}
-
-        {/* <Form {...form}>
-            <form onSubmit={form.handleSubmit(onFormSubmit)}>
-              <fieldset className="flex h-full flex-col space-y-4" disabled={isLoading}>
-                <FormItem>
-                  <FormLabel required>Email</FormLabel>
-
-                  <FormControl>
-                    <Input className="bg-background" value={recipient.email} disabled />
-                  </FormControl>
-                </FormItem>
-
-                <FormField
-                  control={form.control}
-                  name="password"
-                  render={({ field }) => (
-                    <FormItem>
-                      <FormLabel required>Password</FormLabel>
-
-                      <FormControl>
-                        <PasswordInput className="bg-background" {...field} />
-                      </FormControl>
-
-                      <FormMessage />
-                    </FormItem>
-                  )}
-                />
-
-                {formErrorCode && (
-                  <Alert variant="destructive">
-                    {match(formErrorCode)
-                      .with(AppErrorCode.UNAUTHORIZED, () => (
-                        <>
-                          <AlertTitle>Unauthorized</AlertTitle>
-                          <AlertDescription>
-                            We were unable to verify your details. Please ensure the details are
-                            correct
-                          </AlertDescription>
-                        </>
-                      ))
-                      .otherwise(() => (
-                        <>
-                          <AlertTitle>Something went wrong</AlertTitle>
-                          <AlertDescription>
-                            We were unable to sign this field at this time. Please try again or
-                            contact support.
-                          </AlertDescription>
-                        </>
-                      ))}
-                  </Alert>
-                )}
-
-                <DialogFooter>
-                  <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
-                    Cancel
-                  </Button>
-
-                  <Button type="submit" loading={isLoading}>
-                    Sign field
-                  </Button>
-                </DialogFooter>
-              </fieldset>
-            </form>
-          </Form> */}
       </DialogContent>
     </Dialog>
   );