fix: add no passkey flow

apps/web/src/app/(dashboard)/settings/security/passkeys/create-passkey-dialog.tsx

@@ -38,6 +38,7 @@ import { useToast } from '@documenso/ui/primitives/use-toast';
 
 export type CreatePasskeyDialogProps = {
   trigger?: React.ReactNode;
+  onSuccess?: () => void;
 } & Omit<DialogPrimitive.DialogProps, 'children'>;
 
 const ZCreatePasskeyFormSchema = z.object({
@@ -48,7 +49,7 @@ type TCreatePasskeyFormSchema = z.infer<typeof ZCreatePasskeyFormSchema>;
 
 const parser = new UAParser();
 
-export const CreatePasskeyDialog = ({ trigger, ...props }: CreatePasskeyDialogProps) => {
+export const CreatePasskeyDialog = ({ trigger, onSuccess, ...props }: CreatePasskeyDialogProps) => {
   const [open, setOpen] = useState(false);
   const [formError, setFormError] = useState<string | null>(null);
 
@@ -84,6 +85,7 @@ export const CreatePasskeyDialog = ({ trigger, ...props }: CreatePasskeyDialogPr
         duration: 5000,
       });
 
+      onSuccess?.();
       setOpen(false);
     } catch (err) {
       if (err.name === 'NotAllowedError') {

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

@@ -2,11 +2,13 @@ import { useEffect, useState } from 'react';
 
 import { zodResolver } from '@hookform/resolvers/zod';
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser';
+import { Loader } from 'lucide-react';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 
 import { AppError } from '@documenso/lib/errors/app-error';
 import { DocumentAuth, type TRecipientActionAuth } from '@documenso/lib/types/document-auth';
+import { RecipientRole } from '@documenso/prisma/client';
 import { trpc } from '@documenso/trpc/react';
 import { Alert, AlertDescription, AlertTitle } from '@documenso/ui/primitives/alert';
 import { Button } from '@documenso/ui/primitives/button';
@@ -27,6 +29,8 @@ import {
   SelectValue,
 } from '@documenso/ui/primitives/select';
 
+import { CreatePasskeyDialog } from '~/app/(dashboard)/settings/security/passkeys/create-passkey-dialog';
+
 import { useRequiredDocumentAuthContext } from './document-auth-provider';
 
 export type DocumentActionAuthPasskeyProps = {
@@ -38,7 +42,7 @@ export type DocumentActionAuthPasskeyProps = {
 };
 
 const ZPasskeyAuthFormSchema = z.object({
-  preferredPasskeyId: z.string(),
+  passkeyId: z.string(),
 });
 
 type TPasskeyAuthFormSchema = z.infer<typeof ZPasskeyAuthFormSchema>;
@@ -51,17 +55,19 @@ export const DocumentActionAuthPasskey = ({
   onOpenChange,
 }: DocumentActionAuthPasskeyProps) => {
   const {
+    recipient,
     passkeyData,
     preferredPasskeyId,
     setPreferredPasskeyId,
     isCurrentlyAuthenticating,
     setIsCurrentlyAuthenticating,
+    refetchPasskeys,
   } = useRequiredDocumentAuthContext();
 
-  const form = useForm({
+  const form = useForm<TPasskeyAuthFormSchema>({
     resolver: zodResolver(ZPasskeyAuthFormSchema),
     defaultValues: {
-      preferredPasskeyId: preferredPasskeyId ?? '',
+      passkeyId: preferredPasskeyId || '',
     },
   });
 
@@ -70,13 +76,13 @@ export const DocumentActionAuthPasskey = ({
 
   const [formErrorCode, setFormErrorCode] = useState<string | null>(null);
 
-  const onFormSubmit = async (values: TPasskeyAuthFormSchema) => {
+  const onFormSubmit = async ({ passkeyId }: TPasskeyAuthFormSchema) => {
     try {
-      setPreferredPasskeyId(values.preferredPasskeyId);
+      setPreferredPasskeyId(passkeyId);
       setIsCurrentlyAuthenticating(true);
 
       const { options, tokenReference } = await createPasskeyAuthenticationOptions({
-        preferredPasskeyId: values.preferredPasskeyId,
+        preferredPasskeyId: passkeyId,
       });
 
       const authenticationResponse = await startAuthentication(options);
@@ -106,7 +112,7 @@ export const DocumentActionAuthPasskey = ({
 
   useEffect(() => {
     form.reset({
-      preferredPasskeyId: preferredPasskeyId ?? '',
+      passkeyId: preferredPasskeyId || '',
     });
 
     setFormErrorCode(null);
@@ -131,16 +137,45 @@ export const DocumentActionAuthPasskey = ({
     );
   }
 
+  if (
+    passkeyData.isInitialLoading ||
+    (passkeyData.isRefetching && passkeyData.passkeys.length === 0)
+  ) {
+    return (
+      <div className="flex h-28 items-center justify-center">
+        <Loader className="text-muted-foreground h-6 w-6 animate-spin" />
+      </div>
+    );
+  }
+
+  if (passkeyData.isError) {
+    return (
+      <div className="h-28 space-y-4">
+        <Alert variant="destructive">
+          <AlertDescription>Something went wrong while loading your passkeys.</AlertDescription>
+        </Alert>
+
+        <DialogFooter>
+          <Button type="button" variant="secondary" onClick={() => onOpenChange(false)}>
+            Cancel
+          </Button>
+
+          <Button type="button" onClick={() => void refetchPasskeys()}>
+            Retry
+          </Button>
+        </DialogFooter>
+      </div>
+    );
+  }
+
+  if (passkeyData.passkeys.length === 0) {
     return (
-    <Form {...form}>
-      <form onSubmit={form.handleSubmit(onFormSubmit)}>
-        <fieldset disabled={isCurrentlyAuthenticating}>
-          {passkeyData.passkeys.length === 0 && (
       <div className="space-y-4">
         <Alert>
           <AlertDescription>
-                  You need to setup a passkey to {actionVerb.toLowerCase()} this{' '}
+            {recipient.role === RecipientRole.VIEWER && actionTarget === 'DOCUMENT'
-                  {actionTarget.toLowerCase()}.
+              ? 'You need to setup a passkey to mark this document as viewed.'
+              : `You need to setup a passkey to ${actionVerb.toLowerCase()} this ${actionTarget.toLowerCase()}.`}
           </AlertDescription>
         </Alert>
 
@@ -149,17 +184,23 @@ export const DocumentActionAuthPasskey = ({
             Cancel
           </Button>
 
-                {/* Todo */}
+          <CreatePasskeyDialog
-                <Button asChild>Setup</Button>
+            onSuccess={async () => refetchPasskeys()}
+            trigger={<Button>Setup</Button>}
+          />
         </DialogFooter>
       </div>
-          )}
+    );
+  }
 
-          {passkeyData.passkeys.length > 0 && (
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onFormSubmit)}>
+        <fieldset disabled={isCurrentlyAuthenticating}>
           <div className="space-y-4">
             <FormField
               control={form.control}
-                name="preferredPasskeyId"
+              name="passkeyId"
               render={({ field }) => (
                 <FormItem>
                   <FormLabel required>Passkey</FormLabel>
@@ -167,7 +208,10 @@ export const DocumentActionAuthPasskey = ({
                   <FormControl>
                     <Select {...field} onValueChange={field.onChange}>
                       <SelectTrigger className="bg-background text-muted-foreground">
-                          <SelectValue data-testid="documentAccessSelectValue" />
+                        <SelectValue
+                          data-testid="documentAccessSelectValue"
+                          placeholder="Select passkey"
+                        />
                       </SelectTrigger>
 
                       <SelectContent position="popper">
@@ -204,7 +248,6 @@ export const DocumentActionAuthPasskey = ({
               </Button>
             </DialogFooter>
           </div>
-          )}
         </fieldset>
       </form>
     </Form>

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

@@ -1,6 +1,6 @@
 'use client';
 
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 
 import { match } from 'ts-pattern';
 
@@ -22,9 +22,9 @@ import { DocumentActionAuthDialog } from './document-action-auth-dialog';
 
 type PasskeyData = {
   passkeys: Omit<Passkey, 'credentialId' | 'credentialPublicKey'>[];
-  isLoading: boolean;
   isInitialLoading: boolean;
-  isLoadingError: boolean;
+  isRefetching: boolean;
+  isError: boolean;
 };
 
 export type DocumentAuthContextValue = {
@@ -44,6 +44,7 @@ export type DocumentAuthContextValue = {
   preferredPasskeyId: string | null;
   setPreferredPasskeyId: (_value: string | null) => void;
   user?: User | null;
+  refetchPasskeys: () => Promise<void>;
 };
 
 const DocumentAuthContext = createContext<DocumentAuthContextValue | null>(null);
@@ -81,23 +82,6 @@ export const DocumentAuthProvider = ({
   const [isCurrentlyAuthenticating, setIsCurrentlyAuthenticating] = useState(false);
   const [preferredPasskeyId, setPreferredPasskeyId] = useState<string | null>(null);
 
-  const passkeyQuery = trpc.auth.findPasskeys.useQuery(
-    {
-      perPage: MAXIMUM_PASSKEYS,
-    },
-    {
-      keepPreviousData: true,
-      enabled: false,
-    },
-  );
-
-  const passkeyData: PasskeyData = {
-    passkeys: passkeyQuery.data?.data || [],
-    isLoading: passkeyQuery.isLoading,
-    isInitialLoading: passkeyQuery.isInitialLoading,
-    isLoadingError: passkeyQuery.isLoadingError,
-  };
-
   const {
     documentAuthOption,
     recipientAuthOption,
@@ -112,23 +96,31 @@ export const DocumentAuthProvider = ({
     [document, recipient],
   );
 
-  /**
+  const passkeyQuery = trpc.auth.findPasskeys.useQuery(
-   * By default, select the first passkey since it's pre sorted by most recently used.
+    {
-   */
+      perPage: MAXIMUM_PASSKEYS,
-  useEffect(() => {
+    },
-    if (!preferredPasskeyId && passkeyQuery.data && passkeyQuery.data.data.length > 0) {
+    {
-      setPreferredPasskeyId(passkeyQuery.data.data[0].id);
+      keepPreviousData: true,
-    }
+      enabled: derivedRecipientActionAuth === DocumentAuth.PASSKEY,
-  }, [passkeyQuery.data, preferredPasskeyId]);
+    },
+  );
 
-  /**
+  const passkeyData: PasskeyData = {
-   * Only fetch passkeys if required.
+    passkeys: passkeyQuery.data?.data || [],
-   */
+    isInitialLoading: passkeyQuery.isInitialLoading,
-  useEffect(() => {
+    isRefetching: passkeyQuery.isRefetching,
-    if (derivedRecipientActionAuth === DocumentAuth.PASSKEY) {
+    isError: passkeyQuery.isError,
-      void passkeyQuery.refetch();
+  };
+
+  const refetchPasskeys = useCallback(async () => {
+    const { data } = await passkeyQuery.refetch();
+
+    if (!preferredPasskeyId && data && data.data.length > 0) {
+      setPreferredPasskeyId(data.data[0].id);
     }
-  }, [derivedRecipientActionAuth, passkeyQuery]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [preferredPasskeyId]);
 
   const [documentAuthDialogPayload, setDocumentAuthDialogPayload] =
     useState<ExecuteActionAuthProcedureOptions | null>(null);
@@ -200,6 +192,7 @@ export const DocumentAuthProvider = ({
         passkeyData,
         preferredPasskeyId,
         setPreferredPasskeyId,
+        refetchPasskeys,
       }}
     >
       {children}