fix(clerk-js): Correctly call authenticatePasskey for the appropriate…

… flow
clerk · Mar 19, 2024 · 78ee4fd · 78ee4fd
1 parent b9f8bf3
commit 78ee4fd
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 10 deletions.
diff --git a/packages/clerk-js/src/core/resources/SignIn.ts b/packages/clerk-js/src/core/resources/SignIn.ts
@@ -262,10 +262,9 @@ export class SignIn extends BaseResource implements SignInResource {
   };
 
   public __experimental_authenticateWithPasskey = async (params?: {
-    triggerAutofill?: boolean;
+    flow?: 'autofill' | 'discoverable';
   }): Promise<SignInResource> => {
-    const defaultParams = { triggerAutofill: false };
-    const { triggerAutofill } = { ...defaultParams, ...params };
+    const { flow } = params || {};
 
     /**
      * The UI should always prevent from this method being called if WebAuthn is not supported.
@@ -277,7 +276,7 @@ export class SignIn extends BaseResource implements SignInResource {
       });
     }
 
-    if (!this.firstFactorVerification.nonce && !this.id) {
+    if (flow === 'autofill' || flow === 'discoverable') {
       // @ts-ignore As this is experimental we want to support it at runtime, but not at the type level
       await this.create({ strategy: 'passkey' });
     } else {
@@ -304,7 +303,7 @@ export class SignIn extends BaseResource implements SignInResource {
 
     let canUseConditionalUI = false;
 
-    if (triggerAutofill) {
+    if (flow === 'autofill') {
       /**
        * If autofill is not supported gracefully handle the result, we don't need to throw.
        * The caller should always check this before calling this method.

diff --git a/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx b/packages/clerk-js/src/ui/components/SignIn/SignInStart.tsx
@@ -5,7 +5,7 @@ import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ERROR_CODES } from '../../../core/constants';
 import { clerkInvalidFAPIResponse } from '../../../core/errors';
 import { getClerkQueryParam, removeClerkQueryParam } from '../../../utils';
-import { isWebAuthnAutofillSupported } from '../../../utils/passkeys';
+import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '../../../utils/passkeys';
 import type { SignInStartIdentifier } from '../../common';
 import { getIdentifierControlDisplayValues, groupIdentifiers, withRedirectToAfterSignIn } from '../../common';
 import { buildSSOCallbackURL } from '../../common/redirects';
@@ -42,7 +42,7 @@ const useAutoFillPasskey = () => {
         return;
       }
 
-      await authenticateWithPasskey({ triggerAutofill: true });
+      await authenticateWithPasskey({ flow: 'autofill' });
     }
 
     if (passkeySettings.allow_autofill) {
@@ -69,8 +69,13 @@ export function _SignInStart(): JSX.Element {
     () => groupIdentifiers(userSettings.enabledFirstFactorIdentifiers),
     [userSettings.enabledFirstFactorIdentifiers],
   );
+
+  /**
+   * Passkeys
+   */
   const { isWebAuthnAutofillSupported } = useAutoFillPasskey();
   const authenticateWithPasskey = useHandleAuthenticateWithPasskey();
+  const isWebSupported = isWebAuthnSupported();
 
   const onlyPhoneNumberInitialValueExists =
     !!ctx.initialValues?.phoneNumber && !(ctx.initialValues.emailAddress || ctx.initialValues.username);
@@ -358,11 +363,11 @@ export function _SignInStart(): JSX.Element {
                 </Form.Root>
               ) : null}
             </SocialButtonsReversibleContainerWithDivider>
-            {userSettings.passkeySettings.show_sign_in_button && (
+            {userSettings.passkeySettings.show_sign_in_button && isWebSupported && (
               <Card.Action elementId={'usePasskey'}>
                 <Card.ActionLink
                   localizationKey={localizationKeys('signIn.start.actionLink__use_passkey')}
-                  onClick={() => authenticateWithPasskey()}
+                  onClick={() => authenticateWithPasskey({ flow: 'discoverable' })}
                 />
               </Card.Action>
             )}

diff --git a/packages/types/src/signIn.ts b/packages/types/src/signIn.ts
@@ -90,7 +90,7 @@ export interface SignInResource extends ClerkResource {
 
   authenticateWithMetamask: () => Promise<SignInResource>;
 
-  __experimental_authenticateWithPasskey: (params?: { triggerAutofill?: boolean }) => Promise<SignInResource>;
+  __experimental_authenticateWithPasskey: (params?: { flow?: 'autofill' | 'discoverable' }) => Promise<SignInResource>;
 
   createEmailLinkFlow: () => CreateEmailLinkFlowReturn<SignInStartEmailLinkFlowParams, SignInResource>;