diff --git a/.changeset/passkey-second-factor.md b/.changeset/passkey-second-factor.md new file mode 100644 index 00000000000..8471792a591 --- /dev/null +++ b/.changeset/passkey-second-factor.md @@ -0,0 +1,9 @@ +--- +'@clerk/shared': minor +'@clerk/clerk-js': minor +'@clerk/ui': minor +'@clerk/localizations': minor +'@clerk/react': minor +--- + +Support passkeys as a second factor during sign-in and session reverification. When the instance allows passkeys to satisfy the second factor and the user has a registered passkey, FAPI advertises a `passkey` entry in `supported_second_factors`; `signIn.authenticateWithPasskey()` now completes the second factor of an in-progress sign-in that offers it (and falls back to the first-factor flow when it doesn't, as on older clients), `session.verifyWithPasskey({ level: 'second_factor' })` completes a multi-factor reverification (any other `level` value is rejected), the `signIn.mfa.passkey()` future API is exposed through `@clerk/react`, and the prebuilt `` and `` flows preselect the passkey ahead of the enrolled code-based second factors, which stay reachable under "Use another method". diff --git a/integration/tests/passkeys.test.ts b/integration/tests/passkeys.test.ts index 7aa117220e3..4913daa3c11 100644 --- a/integration/tests/passkeys.test.ts +++ b/integration/tests/passkeys.test.ts @@ -1,4 +1,4 @@ -import type { BrowserContext } from '@playwright/test'; +import type { BrowserContext, Page } from '@playwright/test'; import { expect, test } from '@playwright/test'; import type { Application } from '../models/application'; @@ -14,6 +14,9 @@ type SavedCredential = { publicKey: string; }; +// Any valid base32 secret works — no test ever generates a code from it. +const TOTP_SECRET = 'JBSWY3DPEHPK3PXP'; + // clerk-js gates WebAuthn behind isValidBrowser(), which bails when // navigator.webdriver is true, so mask it before installing the virtual authenticator. const installVirtualAuthenticator = async (context: BrowserContext) => { @@ -23,18 +26,26 @@ const installVirtualAuthenticator = async (context: BrowserContext) => { await context.credentials.install(); }; +let app: Application; + +test.beforeAll(async () => { + app = await appConfigs.next.appRouter.commit(); + await app.setup(); + await app.withEnv(appConfigs.envs.withPasskeys); + await app.dev(); +}); + +test.afterAll(async () => { + await app.teardown(); +}); + test.describe('passkeys @generic', () => { test.describe.configure({ mode: 'serial' }); - let app: Application; let fakeUser: FakeUser; let savedCredential: SavedCredential; test.beforeAll(async () => { - app = await appConfigs.next.appRouter.commit(); - await app.setup(); - await app.withEnv(appConfigs.envs.withPasskeys); - await app.dev(); const u = createTestUtils({ app }); fakeUser = u.services.users.createFakeUser(test, { fictionalEmail: true, withPassword: true }); await u.services.users.createBapiUser(fakeUser); @@ -42,7 +53,6 @@ test.describe('passkeys @generic', () => { test.afterAll(async () => { await fakeUser.deleteIfExists(); - await app.teardown(); }); test('registers a passkey through UserProfile', async ({ page, context }) => { @@ -108,3 +118,91 @@ test.describe('passkeys @generic', () => { await u.po.expect.toBeSignedIn(); }); }); + +test.describe('passkeys as a second factor @generic', () => { + test.describe.configure({ mode: 'serial' }); + + let fakeUser: FakeUser; + let userId: string; + let savedCredential: SavedCredential; + + test.beforeAll(async () => { + const u = createTestUtils({ app }); + fakeUser = u.services.users.createFakeUser(test, { fictionalEmail: true, withPassword: true }); + const user = await u.services.users.createBapiUser(fakeUser); + userId = user.id; + }); + + test.afterAll(async () => { + await fakeUser.deleteIfExists(); + }); + + const signInToSecondFactor = async (page: Page, context: BrowserContext) => { + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo(); + await u.po.signIn.signInWithEmailAndInstantPassword({ + email: fakeUser.email!, + password: fakeUser.password, + waitForSession: false, + }); + await u.page.waitForURL(/\/sign-in\/factor-two/); + return u; + }; + + test('registers a passkey, then enrolls the user in two-factor', async ({ page, context }) => { + await installVirtualAuthenticator(context); + + const u = createTestUtils({ app, page, context }); + await u.po.signIn.goTo(); + await u.po.signIn.signInWithEmailAndInstantPassword({ email: fakeUser.email!, password: fakeUser.password }); + await u.po.expect.toBeSignedIn(); + + await u.po.userProfile.goTo(); + await u.po.userProfile.switchToSecurityTab(); + await u.page.getByRole('button', { name: /add a passkey/i }).click(); + + await expect(u.page.locator('.cl-profileSectionItem__passkeys')).toBeVisible(); + + const credentials = await context.credentials.get(); + expect(credentials).toHaveLength(1); + savedCredential = credentials[0]; + + // A passkey on its own never creates a 2FA requirement, so enroll TOTP to park + // later sign-ins at needs_second_factor. It has to happen after the passkey is + // registered, since the remaining tests never enter a TOTP code. + await u.services.clerk.users.updateUser(userId, { totpSecret: TOTP_SECRET }); + }); + + test('offers the passkey as the starting second factor', async ({ page, context }) => { + await installVirtualAuthenticator(context); + + const u = await signInToSecondFactor(page, context); + + // Passkey outranks the enrolled authenticator app once the backend advertises it. + await expect(u.page.getByText('Use your passkey')).toBeVisible(); + // Seed only now: the start page's conditional-UI autofill would otherwise + // answer with this credential and verify it as the first factor instead. + await context.credentials.create(savedCredential.rpId, savedCredential); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); + + test('lists the passkey under "Use another method"', async ({ page, context }) => { + await installVirtualAuthenticator(context); + + const u = await signInToSecondFactor(page, context); + + await u.po.signIn.getUseAnotherMethodLink().click(); + + const passkeyButton = u.page.getByRole('button', { name: /sign in with your passkey/i }); + await expect(passkeyButton).toBeVisible(); + await expect(u.page.getByRole('button', { name: /use your authenticator app/i })).toBeVisible(); + + await context.credentials.create(savedCredential.rpId, savedCredential); + await passkeyButton.click(); + await u.po.signIn.continue(); + + await u.po.expect.toBeSignedIn(); + }); +}); diff --git a/packages/clerk-js/src/core/resources/Session.ts b/packages/clerk-js/src/core/resources/Session.ts index 981a30a6f6c..f81450549e8 100644 --- a/packages/clerk-js/src/core/resources/Session.ts +++ b/packages/clerk-js/src/core/resources/Session.ts @@ -37,6 +37,7 @@ import type { SessionVerifyCreateParams, SessionVerifyPrepareFirstFactorParams, SessionVerifyPrepareSecondFactorParams, + SessionVerifyWithPasskeyParams, TokenResource, UserResource, } from '@clerk/shared/types'; @@ -47,7 +48,7 @@ import { debugLogger } from '@/utils/debug'; import { getTabState, isTabFocused } from '@/utils/isTabFocused'; import { TokenId } from '@/utils/tokenId'; -import { clerkInvalidStrategy, clerkMissingWebAuthnPublicKeyOptions } from '../errors'; +import { clerkInvalidStrategy, clerkInvalidVerificationLevel, clerkMissingWebAuthnPublicKeyOptions } from '../errors'; import { eventBus, events } from '../events'; import type { FapiResponseJSON } from '../fapiClient'; import { SessionTokenCache } from '../tokenCache'; @@ -321,10 +322,29 @@ export class Session extends BaseResource implements SessionResource { return new SessionVerification(json); }; - verifyWithPasskey = async (): Promise => { - const prepareResponse = await this.prepareFirstFactorVerification({ strategy: 'passkey' }); + /** + * Initiates a reverification flow using passkeys. + * + * By default the passkey verifies the first factor. Pass `{ level: 'second_factor' }` to satisfy + * the second factor of an in-progress multi-factor reverification instead. Any other `level` + * value is rejected. + * + * Throws a `ClerkWebAuthnError` when WebAuthn is unsupported or the passkey ceremony fails. + * @returns A `SessionVerification` instance with its status and supported factors. + */ + verifyWithPasskey = async (params?: SessionVerifyWithPasskeyParams): Promise => { + const level = params?.level ?? 'first_factor'; + if (level !== 'first_factor' && level !== 'second_factor') { + clerkInvalidVerificationLevel('Session.verifyWithPasskey', level); + } + + const prepareResponse = + level === 'second_factor' + ? await this.prepareSecondFactorVerification({ strategy: 'passkey' }) + : await this.prepareFirstFactorVerification({ strategy: 'passkey' }); - const { nonce = null } = prepareResponse.firstFactorVerification; + const { nonce = null } = + level === 'second_factor' ? prepareResponse.secondFactorVerification : prepareResponse.firstFactorVerification; /** * The UI should always prevent from this method being called if WebAuthn is not supported. @@ -354,6 +374,13 @@ export class Session extends BaseResource implements SessionResource { throw error; } + if (level === 'second_factor') { + return this.attemptSecondFactorVerification({ + strategy: 'passkey', + publicKeyCredential, + }); + } + return this.attemptFirstFactorVerification({ strategy: 'passkey', publicKeyCredential, @@ -377,11 +404,23 @@ export class Session extends BaseResource implements SessionResource { attemptSecondFactorVerification = async ( attemptFactor: SessionVerifyAttemptSecondFactorParams, ): Promise => { + let config; + switch (attemptFactor.strategy) { + case 'passkey': { + config = { + publicKeyCredential: JSON.stringify(serializePublicKeyCredentialAssertion(attemptFactor.publicKeyCredential)), + }; + break; + } + default: + config = { ...attemptFactor }; + } + const json = ( await BaseResource._fetch({ method: 'POST', path: `/client/sessions/${this.id}/verify/attempt_second_factor`, - body: attemptFactor as any, + body: { ...config, strategy: attemptFactor.strategy } as any, }) )?.response as unknown as SessionVerificationJSON; diff --git a/packages/clerk-js/src/core/resources/SignIn.ts b/packages/clerk-js/src/core/resources/SignIn.ts index c2de93a5030..4ba09516aff 100644 --- a/packages/clerk-js/src/core/resources/SignIn.ts +++ b/packages/clerk-js/src/core/resources/SignIn.ts @@ -372,8 +372,19 @@ export class SignIn extends BaseResource implements SignInResource { attemptSecondFactor = (params: AttemptSecondFactorParams): Promise => { debugLogger.debug('SignIn.attemptSecondFactor', { id: this.id, strategy: params.strategy }); + let config; + switch (params.strategy) { + case 'passkey': + config = { + publicKeyCredential: JSON.stringify(serializePublicKeyCredentialAssertion(params.publicKeyCredential)), + }; + break; + default: + config = { ...params }; + } + return this._basePost({ - body: params, + body: { ...config, strategy: params.strategy }, action: 'attempt_second_factor', }); }; @@ -553,6 +564,26 @@ export class SignIn extends BaseResource implements SignInResource { }); }; + /** + * Authenticates the sign-in with a passkey. + * + * When the sign-in status is `needs_second_factor` (or `needs_client_trust`) and the sign-in + * offers `passkey` among its `supportedSecondFactors`, the passkey acts as the second factor: + * the in-progress sign-in is reused via the discrete prepare/attempt second-factor flow, and + * `params.flow` is ignored — `'autofill'` and `'discoverable'` are identifier-first concepts + * whose `create()` call would discard the in-progress sign-in. + * + * Otherwise the passkey verifies the first factor, with `params.flow` selecting how the ceremony + * starts: `'autofill'`/`'discoverable'` create a new sign-in and identify the user from the + * passkey itself, while the default requires a sign-in created beforehand. A sign-in parked at a + * second-factor status that does NOT offer passkey (the backend advertises it only when the + * instance allows passkeys to satisfy the second factor, the user has one registered, and the + * client version supports it) also takes this path, matching clients that predate passkey second + * factors: the ceremony starts over instead of failing. + * + * Throws a `ClerkWebAuthnError` when WebAuthn is unsupported or the passkey ceremony fails. + * @returns The updated `SignIn` resource. + */ public authenticateWithPasskey = async (params?: AuthenticateWithPasskeyParams): Promise => { const { flow } = params || {}; @@ -572,6 +603,33 @@ export class SignIn extends BaseResource implements SignInResource { }); } + const isSecondFactor = this.status === 'needs_second_factor' || this.status === 'needs_client_trust'; + const hasPasskeySecondFactor = (this.supportedSecondFactors || []).some(f => f.strategy === 'passkey'); + if (isSecondFactor && hasPasskeySecondFactor) { + await this.prepareSecondFactor({ strategy: 'passkey' }); + + const { nonce: secondFactorNonce } = this.secondFactorVerification; + const secondFactorPublicKeyOptions = secondFactorNonce + ? convertJSONToPublicKeyRequestOptions(JSON.parse(secondFactorNonce)) + : null; + if (!secondFactorPublicKeyOptions) { + clerkMissingWebAuthnPublicKeyOptions('get'); + } + + const { publicKeyCredential, error } = await webAuthnGetCredential({ + publicKeyOptions: secondFactorPublicKeyOptions, + conditionalUI: false, + }); + if (!publicKeyCredential) { + throw error; + } + + return this.attemptSecondFactor({ + publicKeyCredential, + strategy: 'passkey', + }); + } + 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' }); @@ -789,6 +847,7 @@ class SignInFuture implements SignInFutureResource { verifyEmailCode: this.verifyMFAEmailCode.bind(this), verifyTOTP: this.verifyTOTP.bind(this), verifyBackupCode: this.verifyBackupCode.bind(this), + passkey: this.verifyMFAPasskey.bind(this), }; #canBeDiscarded = false; @@ -1522,6 +1581,55 @@ class SignInFuture implements SignInFutureResource { }); } + async verifyMFAPasskey(): Promise<{ error: ClerkError | null }> { + /** + * The UI should always prevent from this method being called if WebAuthn is not supported. + * As a precaution we need to check if WebAuthn is supported. + */ + const isWebAuthnSupported = SignIn.clerk.__internal_isWebAuthnSupported || isWebAuthnSupportedOnWindow; + const webAuthnGetCredential = SignIn.clerk.__internal_getPublicCredentials || webAuthnGetCredentialOnWindow; + + if (!isWebAuthnSupported()) { + throw new ClerkWebAuthnError('Passkeys are not supported', { + code: 'passkey_not_supported', + }); + } + + return runAsyncResourceTask(this.#resource, async () => { + const passkeyFactor = this.#resource.supportedSecondFactors?.find(f => f.strategy === 'passkey'); + if (!passkeyFactor) { + throw new ClerkRuntimeError('Passkey factor not found', { code: 'factor_not_found' }); + } + + await this.#resource.__internal_basePost({ + body: { strategy: 'passkey' }, + action: 'prepare_second_factor', + }); + + const { nonce } = this.#resource.secondFactorVerification; + const publicKeyOptions = nonce ? convertJSONToPublicKeyRequestOptions(JSON.parse(nonce)) : null; + if (!publicKeyOptions) { + throw new ClerkRuntimeError('Missing public key options', { code: 'missing_public_key_options' }); + } + + const { publicKeyCredential, error } = await webAuthnGetCredential({ + publicKeyOptions, + conditionalUI: false, + }); + if (!publicKeyCredential) { + throw new ClerkWebAuthnError(error.message, { code: 'passkey_retrieval_failed' }); + } + + await this.#resource.__internal_basePost({ + body: { + publicKeyCredential: JSON.stringify(serializePublicKeyCredentialAssertion(publicKeyCredential)), + strategy: 'passkey', + }, + action: 'attempt_second_factor', + }); + }); + } + async ticket(params?: SignInFutureTicketParams): Promise<{ error: ClerkError | null }> { const ticket = params?.ticket ?? getClerkQueryParam('__clerk_ticket'); return this.create({ strategy: 'ticket', ticket: ticket ?? undefined }); diff --git a/packages/clerk-js/src/core/resources/__tests__/Session.test.ts b/packages/clerk-js/src/core/resources/__tests__/Session.test.ts index 33ce91597e1..e1759b8fc01 100644 --- a/packages/clerk-js/src/core/resources/__tests__/Session.test.ts +++ b/packages/clerk-js/src/core/resources/__tests__/Session.test.ts @@ -896,6 +896,137 @@ describe('Session', () => { }); }); + describe('verifyWithPasskey()', () => { + const mockPublicKeyCredential = { + id: 'credential_123', + rawId: new ArrayBuffer(32), + response: { + authenticatorData: new ArrayBuffer(37), + clientDataJSON: new ArrayBuffer(121), + signature: new ArrayBuffer(64), + userHandle: null, + }, + type: 'public-key', + }; + + const sessionJSON = { + status: 'active', + id: 'session_1', + object: 'session', + user: createUser({}), + last_active_organization_id: null, + actor: null, + created_at: new Date().getTime(), + updated_at: new Date().getTime(), + } as SessionJSON; + + let originalFetch: typeof BaseResource._fetch; + + beforeEach(() => { + originalFetch = BaseResource._fetch; + BaseResource.clerk = clerkMock({ + __internal_isWebAuthnSupported: vi.fn().mockReturnValue(true), + __internal_getPublicCredentials: vi.fn().mockResolvedValue({ + publicKeyCredential: mockPublicKeyCredential, + error: null, + }), + } as any); + }); + + afterEach(() => { + BaseResource._fetch = originalFetch; + BaseResource.clerk = null as any; + }); + + it('runs the first-factor verification flow by default', async () => { + const mockFetch = vi + .fn() + .mockResolvedValueOnce({ + response: { + id: 'sv_123', + first_factor_verification: { nonce: JSON.stringify({ challenge: 'Y2hhbGxlbmdl' }) }, + }, + }) + .mockResolvedValueOnce({ + response: { id: 'sv_123', status: 'complete' }, + }); + BaseResource._fetch = mockFetch; + + const session = new Session(sessionJSON); + await session.verifyWithPasskey(); + + expect(mockFetch).toHaveBeenNthCalledWith( + 1, + expect.objectContaining({ + method: 'POST', + path: '/client/sessions/session_1/verify/prepare_first_factor', + body: expect.objectContaining({ strategy: 'passkey' }), + }), + ); + expect(mockFetch).toHaveBeenNthCalledWith( + 2, + expect.objectContaining({ + method: 'POST', + path: '/client/sessions/session_1/verify/attempt_first_factor', + body: expect.objectContaining({ + strategy: 'passkey', + publicKeyCredential: expect.any(String), + }), + }), + ); + }); + + it('runs the second-factor verification flow when level is second_factor', async () => { + const mockFetch = vi + .fn() + .mockResolvedValueOnce({ + response: { + id: 'sv_123', + second_factor_verification: { nonce: JSON.stringify({ challenge: 'Y2hhbGxlbmdl' }) }, + }, + }) + .mockResolvedValueOnce({ + response: { id: 'sv_123', status: 'complete' }, + }); + BaseResource._fetch = mockFetch; + + const session = new Session(sessionJSON); + await session.verifyWithPasskey({ level: 'second_factor' }); + + expect(mockFetch).toHaveBeenNthCalledWith( + 1, + expect.objectContaining({ + method: 'POST', + path: '/client/sessions/session_1/verify/prepare_second_factor', + body: expect.objectContaining({ strategy: 'passkey' }), + }), + ); + expect(mockFetch).toHaveBeenNthCalledWith( + 2, + expect.objectContaining({ + method: 'POST', + path: '/client/sessions/session_1/verify/attempt_second_factor', + body: expect.objectContaining({ + strategy: 'passkey', + publicKeyCredential: expect.any(String), + }), + }), + ); + }); + + it('rejects invalid verification levels without calling the API', async () => { + const mockFetch = vi.fn(); + BaseResource._fetch = mockFetch; + + const session = new Session(sessionJSON); + await expect(session.verifyWithPasskey({ level: 'third_factor' as any })).rejects.toThrow( + 'not a valid verification level', + ); + + expect(mockFetch).not.toHaveBeenCalled(); + }); + }); + describe('touch()', () => { let dispatchSpy: ReturnType; diff --git a/packages/clerk-js/src/core/resources/__tests__/SignIn.test.ts b/packages/clerk-js/src/core/resources/__tests__/SignIn.test.ts index df1d5a34891..239b58223e4 100644 --- a/packages/clerk-js/src/core/resources/__tests__/SignIn.test.ts +++ b/packages/clerk-js/src/core/resources/__tests__/SignIn.test.ts @@ -479,6 +479,200 @@ describe('SignIn', () => { }); }); + describe('authenticateWithPasskey', () => { + const mockPublicKeyCredential = { + id: 'credential_123', + rawId: new ArrayBuffer(32), + response: { + authenticatorData: new ArrayBuffer(37), + clientDataJSON: new ArrayBuffer(121), + signature: new ArrayBuffer(64), + userHandle: null, + }, + type: 'public-key', + }; + + const originalFetch = BaseResource._fetch; + const originalClerk = SignIn.clerk; + + afterEach(() => { + vi.clearAllMocks(); + vi.unstubAllGlobals(); + BaseResource._fetch = originalFetch; + SignIn.clerk = originalClerk; + }); + + it('prepares and attempts the second factor when the sign-in needs a second factor', async () => { + const mockIsWebAuthnSupported = vi.fn().mockReturnValue(true); + const mockWebAuthnGetCredential = vi.fn().mockResolvedValue({ + publicKeyCredential: mockPublicKeyCredential, + error: null, + }); + + SignIn.clerk = { + __internal_isWebAuthnSupported: mockIsWebAuthnSupported, + __internal_getPublicCredentials: mockWebAuthnGetCredential, + } as any; + + const mockFetch = vi + .fn() + .mockResolvedValueOnce({ + client: null, + response: { + id: 'signin_123', + status: 'needs_second_factor', + supported_second_factors: [{ strategy: 'passkey' }], + second_factor_verification: { + nonce: JSON.stringify({ challenge: 'Y2hhbGxlbmdl' }), + }, + }, + }) + .mockResolvedValueOnce({ + client: null, + response: { id: 'signin_123', status: 'complete' }, + }); + BaseResource._fetch = mockFetch; + + const signIn = new SignIn({ + id: 'signin_123', + status: 'needs_second_factor', + supported_second_factors: [{ strategy: 'passkey' }, { strategy: 'totp' }], + } as any); + await signIn.authenticateWithPasskey(); + + expect(mockFetch).toHaveBeenNthCalledWith( + 1, + expect.objectContaining({ + method: 'POST', + path: '/client/sign_ins/signin_123/prepare_second_factor', + body: expect.objectContaining({ strategy: 'passkey' }), + }), + ); + expect(mockFetch).toHaveBeenNthCalledWith( + 2, + expect.objectContaining({ + method: 'POST', + path: '/client/sign_ins/signin_123/attempt_second_factor', + body: expect.objectContaining({ + strategy: 'passkey', + publicKeyCredential: expect.any(String), + }), + }), + ); + }); + + it('ignores the flow param and never calls create when the sign-in needs a second factor', async () => { + const mockIsWebAuthnSupported = vi.fn().mockReturnValue(true); + const mockWebAuthnGetCredential = vi.fn().mockResolvedValue({ + publicKeyCredential: mockPublicKeyCredential, + error: null, + }); + + SignIn.clerk = { + __internal_isWebAuthnSupported: mockIsWebAuthnSupported, + __internal_getPublicCredentials: mockWebAuthnGetCredential, + } as any; + + const mockFetch = vi + .fn() + .mockResolvedValueOnce({ + client: null, + response: { + id: 'signin_123', + status: 'needs_second_factor', + supported_second_factors: [{ strategy: 'passkey' }], + second_factor_verification: { + nonce: JSON.stringify({ challenge: 'Y2hhbGxlbmdl' }), + }, + }, + }) + .mockResolvedValueOnce({ + client: null, + response: { id: 'signin_123', status: 'complete' }, + }); + BaseResource._fetch = mockFetch; + + const signIn = new SignIn({ + id: 'signin_123', + status: 'needs_second_factor', + supported_second_factors: [{ strategy: 'passkey' }], + } as any); + await signIn.authenticateWithPasskey({ flow: 'autofill' }); + + expect(mockFetch).toHaveBeenNthCalledWith( + 1, + expect.objectContaining({ + path: '/client/sign_ins/signin_123/prepare_second_factor', + }), + ); + }); + + it('falls through to the first-factor flow when the sign-in needs a second factor but does not offer passkey', async () => { + const mockIsWebAuthnSupported = vi.fn().mockReturnValue(true); + const mockWebAuthnGetCredential = vi.fn().mockResolvedValue({ + publicKeyCredential: mockPublicKeyCredential, + error: null, + }); + + SignIn.clerk = { + __internal_isWebAuthnSupported: mockIsWebAuthnSupported, + __internal_getPublicCredentials: mockWebAuthnGetCredential, + } as any; + + const mockFetch = vi + .fn() + .mockResolvedValueOnce({ + client: null, + response: { + id: 'signin_456', + status: 'needs_first_factor', + first_factor_verification: { + nonce: JSON.stringify({ challenge: 'Y2hhbGxlbmdl' }), + }, + }, + }) + .mockResolvedValueOnce({ + client: null, + response: { id: 'signin_456', status: 'complete' }, + }); + BaseResource._fetch = mockFetch; + + // A stale in-progress sign-in parked at needs_second_factor: e.g. the + // backend didn't advertise passkey (instance toggle off, no registered + // passkey, or an older-client version gate) while the start page still + // offers browser-side passkey discovery. + const signIn = new SignIn({ + id: 'signin_123', + status: 'needs_second_factor', + supported_second_factors: [{ strategy: 'totp' }], + } as any); + await signIn.authenticateWithPasskey({ flow: 'discoverable' }); + + // The in-progress sign-in is discarded: a fresh sign-in is created and + // the passkey verifies its first factor, as on clients that predate + // passkey second factors. + expect(mockFetch).toHaveBeenNthCalledWith( + 1, + expect.objectContaining({ + method: 'POST', + path: '/client/sign_ins', + body: expect.objectContaining({ strategy: 'passkey' }), + }), + ); + expect(mockFetch).toHaveBeenNthCalledWith( + 2, + expect.objectContaining({ + method: 'POST', + path: '/client/sign_ins/signin_456/attempt_first_factor', + body: expect.objectContaining({ + strategy: 'passkey', + publicKeyCredential: expect.any(String), + }), + }), + ); + }); + }); + describe('SignInFuture', () => { it('can be serialized with JSON.stringify', () => { const signIn = new SignIn(); @@ -2038,6 +2232,106 @@ describe('SignIn', () => { }); }); + describe('mfa.passkey', () => { + const originalFetch = BaseResource._fetch; + const originalClerk = SignIn.clerk; + + afterEach(() => { + vi.clearAllMocks(); + vi.unstubAllGlobals(); + BaseResource._fetch = originalFetch; + SignIn.clerk = originalClerk; + }); + + it('prepares and attempts the passkey second factor', async () => { + const mockIsWebAuthnSupported = vi.fn().mockReturnValue(true); + const mockWebAuthnGetCredential = vi.fn().mockResolvedValue({ + publicKeyCredential: { + id: 'credential_123', + rawId: new ArrayBuffer(32), + response: { + authenticatorData: new ArrayBuffer(37), + clientDataJSON: new ArrayBuffer(121), + signature: new ArrayBuffer(64), + userHandle: null, + }, + type: 'public-key', + }, + error: null, + }); + + SignIn.clerk = { + __internal_isWebAuthnSupported: mockIsWebAuthnSupported, + __internal_getPublicCredentials: mockWebAuthnGetCredential, + } as any; + + const mockFetch = vi + .fn() + .mockResolvedValueOnce({ + client: null, + response: { + id: 'signin_123', + status: 'needs_second_factor', + supported_second_factors: [{ strategy: 'passkey' }], + second_factor_verification: { + nonce: JSON.stringify({ challenge: 'Y2hhbGxlbmdl' }), + }, + }, + }) + .mockResolvedValueOnce({ + client: null, + response: { id: 'signin_123', status: 'complete' }, + }); + BaseResource._fetch = mockFetch; + + const signIn = new SignIn({ + id: 'signin_123', + status: 'needs_second_factor', + supported_second_factors: [{ strategy: 'passkey' }], + } as any); + await signIn.__internal_future.mfa.passkey(); + + expect(mockFetch).toHaveBeenNthCalledWith( + 1, + expect.objectContaining({ + method: 'POST', + path: '/client/sign_ins/signin_123/prepare_second_factor', + body: { strategy: 'passkey' }, + }), + ); + expect(mockFetch).toHaveBeenNthCalledWith( + 2, + expect.objectContaining({ + method: 'POST', + path: '/client/sign_ins/signin_123/attempt_second_factor', + body: expect.objectContaining({ + strategy: 'passkey', + publicKeyCredential: expect.any(String), + }), + }), + ); + }); + + it('returns error when passkey second factor is not available', async () => { + const mockIsWebAuthnSupported = vi.fn().mockReturnValue(true); + + SignIn.clerk = { + __internal_isWebAuthnSupported: mockIsWebAuthnSupported, + } as any; + + const signIn = new SignIn({ + id: 'signin_123', + status: 'needs_second_factor', + supported_second_factors: [{ strategy: 'totp' }], + } as any); + + const result = await signIn.__internal_future.mfa.passkey(); + + expect(result.error).toBeTruthy(); + expect(result.error?.code).toBe('factor_not_found'); + }); + }); + describe('web3', () => { afterEach(() => { vi.clearAllMocks(); diff --git a/packages/localizations/src/ar-SA.ts b/packages/localizations/src/ar-SA.ts index 1a0e9542bce..6dd21baabd7 100644 --- a/packages/localizations/src/ar-SA.ts +++ b/packages/localizations/src/ar-SA.ts @@ -1286,6 +1286,11 @@ export const arSA: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: undefined, subtitle: undefined, @@ -1433,6 +1438,10 @@ export const arSA: LocalizationResource = { 'يؤدي استخدام مفتاح المرور الخاص بك إلى تأكيد هويتك. جهازك الخاص قد يقوم بسؤالك عن بصمة الإصبع, او معرف الوجة او كلمة مرور قفل الشاشة', title: 'إستخدم مفتاح المرور', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'أستعمل طريقة أخرى', subtitle: 'للمتابعة إلى {{applicationName}}', diff --git a/packages/localizations/src/be-BY.ts b/packages/localizations/src/be-BY.ts index 87edd1c7956..72de64946c6 100644 --- a/packages/localizations/src/be-BY.ts +++ b/packages/localizations/src/be-BY.ts @@ -1293,6 +1293,11 @@ export const beBY: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Вярнуцца да ўводу пароля', subtitle: 'Калі вы памятаеце свой пароль, вы можаце ўвесці яго для завершэння верыфікацыі.', @@ -1441,6 +1446,10 @@ export const beBY: LocalizationResource = { subtitle: 'Выкарыстоўвайце паскей для бяспечнага ўваходу.', title: 'Увядзіце паскей', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Выкарыстаць іншы метад', subtitle: 'каб працягнуць працу ў "{{applicationName}}"', diff --git a/packages/localizations/src/bg-BG.ts b/packages/localizations/src/bg-BG.ts index d7c80b74640..c0b77eb3561 100644 --- a/packages/localizations/src/bg-BG.ts +++ b/packages/localizations/src/bg-BG.ts @@ -1290,6 +1290,11 @@ export const bgBG: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Use another method', subtitle: 'Enter your current password to continue using "{{applicationName}}"', @@ -1437,6 +1442,10 @@ export const bgBG: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Използвайте друг метод', subtitle: 'Въведете паролата, свързана с вашия акаунт', diff --git a/packages/localizations/src/bn-IN.ts b/packages/localizations/src/bn-IN.ts index cdf78289cad..7bac5d9829c 100644 --- a/packages/localizations/src/bn-IN.ts +++ b/packages/localizations/src/bn-IN.ts @@ -1298,6 +1298,11 @@ export const bnIN: LocalizationResource = { 'আপনার পাসকি ব্যবহার করে আপনার পরিচয় নিশ্চিত করা হয়। আপনার ডিভাইস আপনার আঙ্গুলের ছাপ, মুখ বা স্ক্রিন লক চাইতে পারে।', title: 'আপনার পাসকি ব্যবহার করুন', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'অন্য পদ্ধতি ব্যবহার করুন', subtitle: 'চালিয়ে যেতে আপনার বর্তমান পাসওয়ার্ড লিখুন', @@ -1446,6 +1451,10 @@ export const bnIN: LocalizationResource = { 'আপনার পাসকি ব্যবহার করলে নিশ্চিত হয় যে এটি আপনি। আপনার ডিভাইস আপনার আঙ্গুলের ছাপ, মুখ বা স্ক্রিন লক চাইতে পারে।', title: 'আপনার পাসকি ব্যবহার করুন', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'অন্য পদ্ধতি ব্যবহার করুন', subtitle: 'আপনার অ্যাকাউন্টের সাথে যুক্ত পাসওয়ার্ড লিখুন', diff --git a/packages/localizations/src/ca-ES.ts b/packages/localizations/src/ca-ES.ts index d761a145fb1..bf0225ac3fc 100644 --- a/packages/localizations/src/ca-ES.ts +++ b/packages/localizations/src/ca-ES.ts @@ -1298,6 +1298,11 @@ export const caES: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Has oblidat la contrasenya? Recupera-la aquí.', subtitle: 'Utilitza la teva contrasenya per verificar la teva identitat.', @@ -1445,6 +1450,10 @@ export const caES: LocalizationResource = { subtitle: "Utilitza la teva clau d'accés per continuar amb l'autenticació.", title: "Clau d'accés", }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Utilitza un altre mètode', subtitle: 'Introdueix la contrasenya associada al teu compte', diff --git a/packages/localizations/src/cs-CZ.ts b/packages/localizations/src/cs-CZ.ts index 3c3b8dc5443..a84780e2a00 100644 --- a/packages/localizations/src/cs-CZ.ts +++ b/packages/localizations/src/cs-CZ.ts @@ -1296,6 +1296,11 @@ export const csCZ: LocalizationResource = { 'Použití vašeho přístupového klíče potvrzuje vaši identitu. Vaše zařízení může požádat o otisk prstu, obličej nebo zámek obrazovky.', title: 'Použít váš přístupový klíč', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Použít jinou metodu', subtitle: 'Zadejte své aktuální heslo pro pokračování', @@ -1445,6 +1450,10 @@ export const csCZ: LocalizationResource = { 'Použití vašeho přístupového klíče potvrzuje, že jste to vy. Vaše zařízení může požádat o otisk prstu, obličej nebo zámek obrazovky.', title: 'Použít váš přístupový klíč', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Použít jinou metodu', subtitle: 'Zadejte heslo spojené s vaším účtem', diff --git a/packages/localizations/src/da-DK.ts b/packages/localizations/src/da-DK.ts index 92936019d80..dcd1029e9b5 100644 --- a/packages/localizations/src/da-DK.ts +++ b/packages/localizations/src/da-DK.ts @@ -1288,6 +1288,11 @@ export const daDK: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: undefined, subtitle: undefined, @@ -1435,6 +1440,10 @@ export const daDK: LocalizationResource = { subtitle: 'Brug adgangsnøgle til at logge ind.', title: 'Adgangsnøgle', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Brug en anden metode', subtitle: 'Fortsæt til {{applicationName}}', diff --git a/packages/localizations/src/de-DE.ts b/packages/localizations/src/de-DE.ts index 07f932898cf..56d69329bdf 100644 --- a/packages/localizations/src/de-DE.ts +++ b/packages/localizations/src/de-DE.ts @@ -1305,6 +1305,11 @@ export const deDE: LocalizationResource = { 'Die Verwendung Ihres Passkeys bestätigt Ihre Identität. Ihr Gerät kann nach Ihrem Fingerabdruck, Gesicht oder Bildschirmsperre fragen.', title: 'Verwenden Sie Ihren Passkey', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Passwort zurücksetzen', subtitle: 'Geben Sie Ihr Passwort ein, um fortzufahren.', @@ -1453,6 +1458,10 @@ export const deDE: LocalizationResource = { 'Die Verwendung Ihres Passkeys bestätigt, dass Sie es sind. Ihr Gerät kann nach Ihrem Fingerabdruck, Ihrem Gesicht oder der Bildschirmsperre fragen.', title: 'Verwenden Sie Ihren Passkey', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Verwenden Sie eine andere Methode', subtitle: 'weiter zu {{applicationName}}', diff --git a/packages/localizations/src/el-GR.ts b/packages/localizations/src/el-GR.ts index 02c1d49ec2e..1f8c7532da7 100644 --- a/packages/localizations/src/el-GR.ts +++ b/packages/localizations/src/el-GR.ts @@ -1296,6 +1296,11 @@ export const elGR: LocalizationResource = { 'Η χρήση του passkey σας επαληθεύει ότι είστε εσείς. Η συσκευή σας μπορεί να ζητήσει το δακτυλικό σας αποτύπωμα, την αναγνώριση προσώπου ή το PIN οθόνης.', title: 'Χρησιμοποιήστε το passkey σας', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Χρησιμοποιήστε άλλη μέθοδο', subtitle: 'για να συνεχίσετε', @@ -1446,6 +1451,10 @@ export const elGR: LocalizationResource = { 'Η χρήση του passkey σας επιβεβαιώνει την ταυτότητά σας. Η συσκευή σας μπορεί να ζητήσει δακτυλικό αποτύπωμα, αναγνώριση προσώπου ή κλείδωμα οθόνης.', title: 'Χρησιμοποιήστε το passkey σας', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Χρήση άλλης μεθόδου', subtitle: 'για να συνεχίσετε στο {{applicationName}}', diff --git a/packages/localizations/src/en-GB.ts b/packages/localizations/src/en-GB.ts index 33071fdb142..c509c7d01b5 100644 --- a/packages/localizations/src/en-GB.ts +++ b/packages/localizations/src/en-GB.ts @@ -1289,6 +1289,11 @@ export const enGB: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Use another method', subtitle: 'Enter your current password to continue', @@ -1437,6 +1442,10 @@ export const enGB: LocalizationResource = { subtitle: "Using your passkey confirms it's you. Your device may ask for your fingerprint, face or screen lock.", title: 'Use your passkey', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Use another method', subtitle: 'Enter the password associated with your account', diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index aa0385251de..b20bfdd96a5 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -1320,6 +1320,12 @@ export const enUS: LocalizationResource = { 'Using your passkey confirms your identity. Your device may ask for your fingerprint, face, or screen lock.', title: 'Use your passkey', }, + passkeyMfa: { + blockButton__passkey: 'Use your passkey', + subtitle: + 'Using your passkey confirms your identity. Your device may ask for your fingerprint, face, or screen lock.', + title: 'Verification required', + }, password: { actionLink: 'Use another method', subtitle: 'Enter your current password to continue', @@ -1468,6 +1474,10 @@ export const enUS: LocalizationResource = { subtitle: "Using your passkey confirms it's you. Your device may ask for your fingerprint, face or screen lock.", title: 'Use your passkey', }, + passkeyMfa: { + subtitle: "Using your passkey confirms it's you. Your device may ask for your fingerprint, face or screen lock.", + title: 'Use your passkey', + }, password: { actionLink: 'Use another method', subtitle: 'Enter the password associated with your account', diff --git a/packages/localizations/src/es-CR.ts b/packages/localizations/src/es-CR.ts index baeb439a0ac..8380d76b178 100644 --- a/packages/localizations/src/es-CR.ts +++ b/packages/localizations/src/es-CR.ts @@ -1294,6 +1294,11 @@ export const esCR: LocalizationResource = { 'Utilizar tu llave de acceso confirma que eres tú. Tu dispositivo puede solicitar tu huella dactilar, rostro o pantalla de bloqueo.', title: 'Utiliza tu llave de acceso', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Utiliza otro método', subtitle: 'Ingresa tu contraseña actual para continuar', @@ -1443,6 +1448,10 @@ export const esCR: LocalizationResource = { 'Usando tu llave de acceso confirmas que eres tú. Tu dispositivo puede pedirte la huella dactilar, el rostro o el bloqueo de pantalla.', title: 'Usa tu llave de acceso', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Utiliza otro método', subtitle: 'para continuar con {{applicationName}}', diff --git a/packages/localizations/src/es-ES.ts b/packages/localizations/src/es-ES.ts index e4ecf17e7ee..49c8f07efd0 100644 --- a/packages/localizations/src/es-ES.ts +++ b/packages/localizations/src/es-ES.ts @@ -1299,6 +1299,11 @@ export const esES: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: '¿Olvidaste tu contraseña? Recupérala aquí.', subtitle: 'Usa tu contraseña para verificar tu identidad.', @@ -1446,6 +1451,10 @@ export const esES: LocalizationResource = { subtitle: 'Use su clave de acceso para continuar con la autenticación.', title: 'Clave de acceso', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Usa otro método', subtitle: 'para continuar a {{applicationName}}', diff --git a/packages/localizations/src/es-MX.ts b/packages/localizations/src/es-MX.ts index 09d0fc1e04e..69b61fbba0f 100644 --- a/packages/localizations/src/es-MX.ts +++ b/packages/localizations/src/es-MX.ts @@ -1295,6 +1295,11 @@ export const esMX: LocalizationResource = { 'Utilizar tu llave de acceso confirma que eres tú. Tu dispositivo puede solicitar tu huella dactilar, rostro o pantalla de bloqueo.', title: 'Utiliza tu llave de acceso', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Utiliza otro método', subtitle: 'Ingresa tu contraseña actual para continuar', @@ -1444,6 +1449,10 @@ export const esMX: LocalizationResource = { 'Usando tu llave de acceso confirmas que eres tú. Tu dispositivo puede pedirte la huella dactilar, el rostro o el bloqueo de pantalla.', title: 'Usa tu llave de acceso', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Utiliza otro método', subtitle: 'para continuar con {{applicationName}}', diff --git a/packages/localizations/src/es-UY.ts b/packages/localizations/src/es-UY.ts index 6a799bdf3c5..d261dd95161 100644 --- a/packages/localizations/src/es-UY.ts +++ b/packages/localizations/src/es-UY.ts @@ -1293,6 +1293,11 @@ export const esUY: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Usar otro método', subtitle: 'Ingresá tu contraseña para continuar', @@ -1442,6 +1447,10 @@ export const esUY: LocalizationResource = { 'Usar tu clave de acceso confirma que sos vos. Tu dispositivo puede solicitar tu huella, rostro o bloqueo de pantalla.', title: 'Usar tu clave de acceso', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Usar otro método', subtitle: 'Ingresá la contraseña asociada a tu cuenta', diff --git a/packages/localizations/src/fa-IR.ts b/packages/localizations/src/fa-IR.ts index 86beba5c4c9..042258235b6 100644 --- a/packages/localizations/src/fa-IR.ts +++ b/packages/localizations/src/fa-IR.ts @@ -1298,6 +1298,11 @@ export const faIR: LocalizationResource = { 'استفاده از کلید عبور، هویت شما را تأیید می‌کند. ممکن است دستگاه شما از شما اثر انگشت، چهره یا قفل صفحه را درخواست کند.', title: 'از کلید عبور خود استفاده کنید', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'استفاده از روش دیگر', subtitle: 'برای ادامه، رمز عبور فعلی خود را وارد کنید', @@ -1447,6 +1452,10 @@ export const faIR: LocalizationResource = { 'ستفاده از کلید عبور، هویت شما را تأیید می‌کند. ممکن است دستگاه از شما اثر انگشت، چهره یا قفل صفحه را درخواست کند.', title: 'از کلید عبور خود استفاده کنید', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'استفاده از روش دیگر', subtitle: 'رمز عبور مرتبط با حساب کاربری خود را وارد کنید', diff --git a/packages/localizations/src/fi-FI.ts b/packages/localizations/src/fi-FI.ts index b1a1b5094d2..5ccf7a8136f 100644 --- a/packages/localizations/src/fi-FI.ts +++ b/packages/localizations/src/fi-FI.ts @@ -1300,6 +1300,11 @@ export const fiFI: LocalizationResource = { 'Pääsyavaimen käyttö vahvistaa henkilöllisyytesi. Laitteesi saattaa pyytää sormenjälkeä, kasvoja tai näytön lukitusta.', title: 'Käytä pääsyavaintasi', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Käytä toista menetelmää', subtitle: 'Syötä nykyinen salasanasi jatkaaksesi', @@ -1448,6 +1453,10 @@ export const fiFI: LocalizationResource = { 'Käyttämällä pääsyavaintasi vahvistat, että olet se joka väität olevasi. Laite voi pyytää sormenjälkeäsi, kasvojasi tai näytön lukitusta.', title: 'Käytä pääsyavaintasi', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Käytä toista tapaa', subtitle: 'Syötä tilisi salasana', diff --git a/packages/localizations/src/fr-FR.ts b/packages/localizations/src/fr-FR.ts index 583b57611f8..58500df4a9d 100644 --- a/packages/localizations/src/fr-FR.ts +++ b/packages/localizations/src/fr-FR.ts @@ -1306,6 +1306,11 @@ export const frFR: LocalizationResource = { "L'utilisation de votre clé de sécurité confirme votre identité. Votre appareil peut vous demander votre empreinte digitale, votre visage ou votre code de sécurité.", title: 'Utiliser votre clé de sécurité', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Réinitialiser le mot de passe', subtitle: 'Entrez votre mot de passe pour continuer.', @@ -1453,6 +1458,10 @@ export const frFR: LocalizationResource = { subtitle: 'Utilisez une clé de sécurité pour continuer.', title: 'Clé de sécurité', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Utiliser une autre méthode', subtitle: 'pour continuer vers {{applicationName}}', diff --git a/packages/localizations/src/he-IL.ts b/packages/localizations/src/he-IL.ts index ae7a88af420..c4878b9b11e 100644 --- a/packages/localizations/src/he-IL.ts +++ b/packages/localizations/src/he-IL.ts @@ -1283,6 +1283,11 @@ export const heIL: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'השתמש בשיטה אחרת', subtitle: 'הכנס את הסיסמה המקושרת עם חשבונך', @@ -1428,6 +1433,10 @@ export const heIL: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'השתמש בשיטה אחרת', subtitle: 'להמשיך אל {{applicationName}}', diff --git a/packages/localizations/src/hi-IN.ts b/packages/localizations/src/hi-IN.ts index 9d04a365a23..9ad01222751 100644 --- a/packages/localizations/src/hi-IN.ts +++ b/packages/localizations/src/hi-IN.ts @@ -1298,6 +1298,11 @@ export const hiIN: LocalizationResource = { 'अपनी पासकी का उपयोग करके आपकी पहचान की पुष्टि होती है। आपका डिवाइस आपके फिंगरप्रिंट, चेहरे या स्क्रीन लॉक के लिए पूछ सकता है।', title: 'अपनी पासकी का उपयोग करें', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'दूसरी विधि का उपयोग करें', subtitle: 'जारी रखने के लिए अपना वर्तमान पासवर्ड दर्ज करें', @@ -1446,6 +1451,10 @@ export const hiIN: LocalizationResource = { 'अपनी पासकी का उपयोग करके पुष्टि होती है कि यह आप ही हैं। आपका डिवाइस आपके फिंगरप्रिंट, चेहरे या स्क्रीन लॉक के लिए पूछ सकता है।', title: 'अपनी पासकी का उपयोग करें', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'दूसरी विधि का उपयोग करें', subtitle: 'अपने खाते से जुड़ा पासवर्ड दर्ज करें', diff --git a/packages/localizations/src/hr-HR.ts b/packages/localizations/src/hr-HR.ts index 34b0d179df7..a5bbed9682e 100644 --- a/packages/localizations/src/hr-HR.ts +++ b/packages/localizations/src/hr-HR.ts @@ -1299,6 +1299,11 @@ export const hrHR: LocalizationResource = { 'Korištenje vašeg pristupnog ključa potvrđuje vaš identitet. Vaš uređaj može tražiti otisak prsta, prepoznavanje lica ili zaključavanje zaslona.', title: 'Koristite svoj pristupni ključ', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Koristite drugu metodu', subtitle: 'Unesite svoju trenutnu lozinku za nastavak', @@ -1448,6 +1453,10 @@ export const hrHR: LocalizationResource = { 'Korištenje vašeg pristupnog ključa potvrđuje da ste to vi. Vaš uređaj može tražiti otisak prsta, prepoznavanje lica ili zaključavanje zaslona.', title: 'Koristite svoj pristupni ključ', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Koristite drugu metodu', subtitle: 'Unesite lozinku povezanu s vašim računom', diff --git a/packages/localizations/src/hu-HU.ts b/packages/localizations/src/hu-HU.ts index 56540481844..a8c238f0627 100644 --- a/packages/localizations/src/hu-HU.ts +++ b/packages/localizations/src/hu-HU.ts @@ -1301,6 +1301,11 @@ export const huHU: LocalizationResource = { 'A passkey használata megerősíti a személyazonosságodat. Az eszközöd kérheti az ujjlenyomatodat, arcodat vagy a képernyőzáradat.', title: 'Passkey használata', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Másik módszer használata', subtitle: 'Add meg a jelenlegi jelszavadat a folytatáshoz', @@ -1450,6 +1455,10 @@ export const huHU: LocalizationResource = { 'A Passkey-d használata megerősíti, hogy te vagy az. Az eszközöd kérheti az ujjlenyomatod, arcod vagy a képernyőzárad.', title: 'Használd a passkeydet', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Másik mód használata', subtitle: 'Írd be a fiókhoz tartozó jelszavad', diff --git a/packages/localizations/src/id-ID.ts b/packages/localizations/src/id-ID.ts index a66d1a4b145..fa848147db6 100644 --- a/packages/localizations/src/id-ID.ts +++ b/packages/localizations/src/id-ID.ts @@ -1292,6 +1292,11 @@ export const idID: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Gunakan metode lain', subtitle: 'Masukkan kata sandi Anda untuk melanjutkan', @@ -1441,6 +1446,10 @@ export const idID: LocalizationResource = { 'Menggunakan passkey mengonfirmasi bahwa ini adalah Anda. Perangkat Anda mungkin meminta sidik jari, wajah, atau kunci layar.', title: 'Gunakan passkey Anda', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Gunakan metode lain', subtitle: 'Masukkan kata sandi yang terkait dengan akun Anda', diff --git a/packages/localizations/src/is-IS.ts b/packages/localizations/src/is-IS.ts index 1fc6b0994ea..ac60957aff0 100644 --- a/packages/localizations/src/is-IS.ts +++ b/packages/localizations/src/is-IS.ts @@ -1300,6 +1300,11 @@ export const isIS: LocalizationResource = { 'Að nota lykilinn þinn staðfestir auðkenni þitt. Tækið þitt gæti beðið um fingrafar, andlit eða skjálás.', title: 'Nota lykilinn þinn', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Nota aðra aðferð', subtitle: 'Sláðu inn núverandi lykilorð til að halda áfram', @@ -1449,6 +1454,10 @@ export const isIS: LocalizationResource = { 'Að nota lykilinn þinn staðfestir að þú ert það. Tækið þitt gæti beðið um fingrafar, andlit eða skjálás.', title: 'Nota lykilinn þinn', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Nota aðra aðferð', subtitle: 'Sláðu inn lykilorðið sem tengist reikningnum þínum', diff --git a/packages/localizations/src/it-IT.ts b/packages/localizations/src/it-IT.ts index 4c20d26e3c1..d922b567c20 100644 --- a/packages/localizations/src/it-IT.ts +++ b/packages/localizations/src/it-IT.ts @@ -1298,6 +1298,11 @@ export const itIT: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Reimposta la password', subtitle: 'Inserisci la tua password per continuare.', @@ -1445,6 +1450,10 @@ export const itIT: LocalizationResource = { subtitle: 'Usa una passkey per un accesso più sicuro e rapido.', title: 'Autenticazione tramite passkey', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Usa un altro metodo', subtitle: 'per continuare su {{applicationName}}', diff --git a/packages/localizations/src/ja-JP.ts b/packages/localizations/src/ja-JP.ts index 81068f420aa..1835873f7a5 100644 --- a/packages/localizations/src/ja-JP.ts +++ b/packages/localizations/src/ja-JP.ts @@ -1299,6 +1299,11 @@ export const jaJP: LocalizationResource = { 'パスキーを使用すると、ご本人であることを確認できます。デバイスから指紋認証、顔認証、または画面ロックの解除を求められる場合があります。', title: 'パスキーを使用する', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: '別の方法を使用', subtitle: '続行するには現在のパスワードを入力してください', @@ -1447,6 +1452,10 @@ export const jaJP: LocalizationResource = { 'パスキーを使用すると、ご本人であることを確認できます。デバイスから指紋認証、顔認証、または画面ロックの解除を求められる場合があります。', title: 'パスキーを使用する', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: '別の方法を使用', subtitle: 'アカウントに関連付けられたパスワードを入力してください', diff --git a/packages/localizations/src/kk-KZ.ts b/packages/localizations/src/kk-KZ.ts index ba47ffd33de..da8e8141152 100644 --- a/packages/localizations/src/kk-KZ.ts +++ b/packages/localizations/src/kk-KZ.ts @@ -1282,6 +1282,11 @@ export const kkKZ: LocalizationResource = { 'Құпия кілт арқылы сіздің тұлғаңыз расталады. Құрылғыңыз саусақ ізі, бет бейнесі немесе экран құлыптамасын сұрауы мүмкін.', title: 'Құпия кілт қолдану', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Басқа әдісті қолдану', subtitle: 'Жалғастыру үшін құпия сөзді енгізіңіз', @@ -1429,6 +1434,10 @@ export const kkKZ: LocalizationResource = { 'Құпия кілт арқылы тұлғаңыз расталады. Құрылғыңыз саусақ ізі, бет бейнесі немесе экран құлыптамасын сұрауы мүмкін.', title: 'Құпия кілт қолдану', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Басқа әдісті қолдану', subtitle: 'Есептік жазбаңыздың құпия сөзін енгізіңіз', diff --git a/packages/localizations/src/ko-KR.ts b/packages/localizations/src/ko-KR.ts index 6fc94c87f5f..c3281d163bc 100644 --- a/packages/localizations/src/ko-KR.ts +++ b/packages/localizations/src/ko-KR.ts @@ -1287,6 +1287,11 @@ export const koKR: LocalizationResource = { subtitle: '패스키로 신원을 확인해요. 기기에서 지문, 얼굴 또는 화면 잠금을 요청할 수 있어요.', title: '패스키 사용', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: '다른 방법 사용하기', subtitle: '계속하려면 현재 비밀번호를 입력하세요', @@ -1432,6 +1437,10 @@ export const koKR: LocalizationResource = { subtitle: '패스키로 로그인하면 본인 확인이 돼요. 기기에서 지문, 얼굴 또는 화면 잠금을 요청할 수 있어요.', title: '패스키 사용', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: '다른 방법 사용하기', subtitle: '계정에 등록된 비밀번호를 입력해 주세요', diff --git a/packages/localizations/src/mn-MN.ts b/packages/localizations/src/mn-MN.ts index ad8fcf996f1..1aff3a7a4f2 100644 --- a/packages/localizations/src/mn-MN.ts +++ b/packages/localizations/src/mn-MN.ts @@ -1291,6 +1291,11 @@ export const mnMN: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: undefined, subtitle: undefined, @@ -1439,6 +1444,10 @@ export const mnMN: LocalizationResource = { 'Passkey-ээ ашигласнаар таныг мөн болохыг баталгаажуулна. Таны төхөөрөмж хурууны хээ, нүүр эсвэл дэлгэцийн түгжээг асууж магадгүй.', title: 'Passkey ашиглана уу', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Өөр аргыг ашигла', subtitle: 'Бүртгэлтэй холбоотой нууц үгээ оруулна уу', diff --git a/packages/localizations/src/ms-MY.ts b/packages/localizations/src/ms-MY.ts index 092c1db2245..ea0c76aaa26 100644 --- a/packages/localizations/src/ms-MY.ts +++ b/packages/localizations/src/ms-MY.ts @@ -1302,6 +1302,11 @@ export const msMY: LocalizationResource = { 'Menggunakan kunci pas anda mengesahkan identiti anda. Peranti anda mungkin meminta cap jari, wajah, atau kunci skrin anda.', title: 'Gunakan kunci pas anda', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Gunakan kaedah lain', subtitle: 'Masukkan kata laluan semasa anda untuk meneruskan', @@ -1451,6 +1456,10 @@ export const msMY: LocalizationResource = { 'Menggunakan kunci pas anda mengesahkan bahawa itu adalah anda. Peranti anda mungkin meminta cap jari, wajah atau kunci skrin anda.', title: 'Gunakan kunci pas anda', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Gunakan kaedah lain', subtitle: 'Masukkan kata laluan yang berkaitan dengan akaun anda', diff --git a/packages/localizations/src/nb-NO.ts b/packages/localizations/src/nb-NO.ts index 475ca454fd7..ca10b99801c 100644 --- a/packages/localizations/src/nb-NO.ts +++ b/packages/localizations/src/nb-NO.ts @@ -1301,6 +1301,11 @@ export const nbNO: LocalizationResource = { 'Bruk av passnøkkelen bekrefter identiteten din. Enheten din kan be om fingeravtrykk, ansiktsgjenkjenning eller skjermlås.', title: 'Bruk passnøkkelen din', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Bruk en annen metode', subtitle: 'Skriv inn ditt nåværende passord for å fortsette', @@ -1449,6 +1454,10 @@ export const nbNO: LocalizationResource = { 'Bruk av passnøkkelen bekrefter at det er deg. Enheten din kan be om fingeravtrykk, ansiktsgjenkjenning eller skjermlås.', title: 'Bruk passnøkkelen din', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Bruk en annen metode', subtitle: 'for å fortsette til {{applicationName}}', diff --git a/packages/localizations/src/nl-BE.ts b/packages/localizations/src/nl-BE.ts index 1f2f19eacea..25a503a6f08 100644 --- a/packages/localizations/src/nl-BE.ts +++ b/packages/localizations/src/nl-BE.ts @@ -1292,6 +1292,11 @@ export const nlBE: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Gebruik een andere methode', subtitle: 'Voer het wachtwoord in dat bij je account hoort', @@ -1438,6 +1443,10 @@ export const nlBE: LocalizationResource = { subtitle: 'Gebruik je toegangssleutel voor authenticatie.', title: 'Authenticatie met toegangssleutel', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Gebruik een andere methode', subtitle: 'om door te gaan naar {{applicationName}}', diff --git a/packages/localizations/src/nl-NL.ts b/packages/localizations/src/nl-NL.ts index 00c4e01265b..64fff88f968 100644 --- a/packages/localizations/src/nl-NL.ts +++ b/packages/localizations/src/nl-NL.ts @@ -1292,6 +1292,11 @@ export const nlNL: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Gebruik een andere methode', subtitle: 'Voer het wachtwoord in dat bij je account hoort', @@ -1438,6 +1443,10 @@ export const nlNL: LocalizationResource = { subtitle: 'Gebruik je toegangssleutel voor authenticatie.', title: 'Authenticatie met toegangssleutel', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Gebruik een andere methode', subtitle: 'om door te gaan naar {{applicationName}}', diff --git a/packages/localizations/src/pl-PL.ts b/packages/localizations/src/pl-PL.ts index 9a0741b215a..37e762f0241 100644 --- a/packages/localizations/src/pl-PL.ts +++ b/packages/localizations/src/pl-PL.ts @@ -1290,6 +1290,11 @@ export const plPL: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Użyj innej metody', subtitle: 'Wprowadź hasło, aby kontynuować', @@ -1439,6 +1444,10 @@ export const plPL: LocalizationResource = { 'Użycie klucza dostępu potwierdza, że to Ty. Urządzenie może poprosić o twój odcisk palca, twarz lub blokadę ekranu.', title: 'Użyj swojego klucza dostępowego', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Użyj innego sposobu', subtitle: 'aby kontynuować w {{applicationName}}', diff --git a/packages/localizations/src/pt-BR.ts b/packages/localizations/src/pt-BR.ts index 9ae09c0eabd..3eedde0665b 100644 --- a/packages/localizations/src/pt-BR.ts +++ b/packages/localizations/src/pt-BR.ts @@ -1300,6 +1300,11 @@ export const ptBR: LocalizationResource = { 'Usar sua chave de acesso confirma a sua identidade. Seu dispositivo pode solicitar sua impressão digital, reconhecimento facial ou PIN.', title: 'Use sua chave de acesso.', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Usar outro método', subtitle: 'Digite sua senha para continuar.', @@ -1448,6 +1453,10 @@ export const ptBR: LocalizationResource = { 'Usar sua chave de acesso confirma a sua identidade. Seu dispositivo pode solicitar sua impressão digital, reconhecimento facial ou PIN.', title: 'Use sua chave de acesso.', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Utilize outro método', subtitle: 'para continuar em {{applicationName}}', diff --git a/packages/localizations/src/pt-PT.ts b/packages/localizations/src/pt-PT.ts index 8e370687ade..0b2d4793253 100644 --- a/packages/localizations/src/pt-PT.ts +++ b/packages/localizations/src/pt-PT.ts @@ -1301,6 +1301,11 @@ export const ptPT: LocalizationResource = { 'A utilização da sua chave de acesso confirma a sua identidade. O dispositivo pode pedir a sua impressão digital, rosto ou bloqueio de ecrã.', title: 'Utilizar a sua chave de acesso', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Utilizar outro método', subtitle: 'Introduza a sua palavra-passe atual para continuar', @@ -1448,6 +1453,10 @@ export const ptPT: LocalizationResource = { subtitle: 'Utilize a sua chave de acesso para autenticação.', title: 'Autenticação com Chave de Acesso', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Utilize outro método', subtitle: 'para continuar em {{applicationName}}', diff --git a/packages/localizations/src/ro-RO.ts b/packages/localizations/src/ro-RO.ts index f8cccc3e9f8..71618dd0358 100644 --- a/packages/localizations/src/ro-RO.ts +++ b/packages/localizations/src/ro-RO.ts @@ -1301,6 +1301,11 @@ export const roRO: LocalizationResource = { 'Folosirea cheii de acces confirmă identitatea ta. Dispozitivul îți poate cere amprenta, fața sau codul de ecran.', title: 'Folosește cheia de acces', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Folosește altă metodă', subtitle: 'Introdu parola curentă pentru a continua', @@ -1450,6 +1455,10 @@ export const roRO: LocalizationResource = { 'Folosirea cheii de acces confirmă că ești tu. Dispozitivul îți poate cere amprenta, fața sau blocarea ecranului.', title: 'Folosește cheia de acces', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Folosește altă metodă', subtitle: 'Introdu parola asociată contului tău', diff --git a/packages/localizations/src/ru-RU.ts b/packages/localizations/src/ru-RU.ts index 32b4035047c..4e780a63835 100644 --- a/packages/localizations/src/ru-RU.ts +++ b/packages/localizations/src/ru-RU.ts @@ -1297,6 +1297,11 @@ export const ruRU: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Используйте другой метод', subtitle: 'Введите пароль, связанный с вашей учетной записью', @@ -1446,6 +1451,10 @@ export const ruRU: LocalizationResource = { 'Использование вашего ключа доступа подтверждает вашу личность. Ваше устройство может запросить ваш отпечаток пальца, лицо или блокировку экрана.', title: 'Используйте ваш ключ доступа', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Использовать другой метод', subtitle: 'чтобы продолжить работу в "{{applicationName}}"', diff --git a/packages/localizations/src/sk-SK.ts b/packages/localizations/src/sk-SK.ts index dc36b79e866..634ed046951 100644 --- a/packages/localizations/src/sk-SK.ts +++ b/packages/localizations/src/sk-SK.ts @@ -1291,6 +1291,11 @@ export const skSK: LocalizationResource = { 'Použitie passkey potvrdí vašu identitu. Vaše zariadenie vás môže vyzvať na potvrdenie odtlačkom, tvárou alebo kódom.', title: 'Použiť Passkey', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Použiť inú metódu', subtitle: 'Pre pokračovanie vložte svoje aktuálne heslo', @@ -1439,6 +1444,10 @@ export const skSK: LocalizationResource = { 'Použitie passkey potvrdí vašu identitu. Vaše zariadenie vás môže vyzvať na potvrdenie odtlačkom, tvárou alebo kódom.', title: 'Prihlásiť sa pomocou Passkey', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Použiť inú metódu', subtitle: 'pre pokračovanie do {{applicationName}}', diff --git a/packages/localizations/src/sr-RS.ts b/packages/localizations/src/sr-RS.ts index 157efee229b..8e83f32e5b6 100644 --- a/packages/localizations/src/sr-RS.ts +++ b/packages/localizations/src/sr-RS.ts @@ -1288,6 +1288,11 @@ export const srRS: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: undefined, subtitle: undefined, @@ -1436,6 +1441,10 @@ export const srRS: LocalizationResource = { 'Korišćenje tvojeg ključa za prolaz potvrđuje da si to ti. Tvoj uređaj može zatražiti otisak prsta, lice ili ekran zaključavanja.', title: 'Koristi svoj ključ za prolaz', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Koristi drugu metodu', subtitle: 'Unesi lozinku koja je povezana sa tvojim nalogom', diff --git a/packages/localizations/src/sv-SE.ts b/packages/localizations/src/sv-SE.ts index 747357f7ef7..2d0263d0ec4 100644 --- a/packages/localizations/src/sv-SE.ts +++ b/packages/localizations/src/sv-SE.ts @@ -1290,6 +1290,11 @@ export const svSE: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Använd en annan metod', subtitle: 'Ange lösenordet som är kopplat till ditt konto', @@ -1439,6 +1444,10 @@ export const svSE: LocalizationResource = { 'Att använda din passkey bekräftar att det är du. Din enhet kan be om ditt fingeravtryck, ansikte eller skärmlås.', title: 'Använd din passkey', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Använd en annan metod', subtitle: 'för att fortsätta till {{applicationName}}', diff --git a/packages/localizations/src/ta-IN.ts b/packages/localizations/src/ta-IN.ts index 58024742b32..806a014f9da 100644 --- a/packages/localizations/src/ta-IN.ts +++ b/packages/localizations/src/ta-IN.ts @@ -1304,6 +1304,11 @@ export const taIN: LocalizationResource = { 'உங்கள் பாஸ்கீயைப் பயன்படுத்துவது உங்கள் அடையாளத்தை உறுதிப்படுத்துகிறது. உங்கள் சாதனம் உங்கள் கைரேகை, முகம் அல்லது திரை பூட்டைக் கேட்கலாம்.', title: 'உங்கள் பாஸ்கீயைப் பயன்படுத்தவும்', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'வேறு முறையைப் பயன்படுத்துங்கள்', subtitle: 'தொடர உங்கள் தற்போதைய கடவுச்சொல்லை உள்ளிடவும்', @@ -1452,6 +1457,10 @@ export const taIN: LocalizationResource = { 'உங்கள் பாஸ்கீயைப் பயன்படுத்துவது நீங்கள் தான் என்பதை உறுதிப்படுத்துகிறது. உங்கள் சாதனம் உங்கள் கைரேகை, முகம் அல்லது திரை பூட்டைக் கேட்கலாம்.', title: 'உங்கள் பாஸ்கீயைப் பயன்படுத்தவும்', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'வேறு முறையைப் பயன்படுத்துங்கள்', subtitle: 'உங்கள் கணக்குடன் தொடர்புடைய கடவுச்சொல்லை உள்ளிடவும்', diff --git a/packages/localizations/src/te-IN.ts b/packages/localizations/src/te-IN.ts index 1dcefe67386..7da49f02a8f 100644 --- a/packages/localizations/src/te-IN.ts +++ b/packages/localizations/src/te-IN.ts @@ -1301,6 +1301,11 @@ export const teIN: LocalizationResource = { 'మీ పాస్‌కీని ఉపయోగించడం మీ గుర్తింపును నిర్ధారిస్తుంది. మీ పరికరం మీ వేలిముద్ర, ముఖం లేదా స్క్రీన్ లాక్ కోసం అడగవచ్చు.', title: 'మీ పాస్‌కీని ఉపయోగించండి', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'మరొక పద్ధతిని ఉపయోగించండి', subtitle: 'కొనసాగించడానికి మీ ప్రస్తుత పాస్‌వర్డ్‌ను నమోదు చేయండి', @@ -1449,6 +1454,10 @@ export const teIN: LocalizationResource = { 'మీ పాస్‌కీని ఉపయోగించడం అది మీరని నిర్ధారిస్తుంది. మీ పరికరం మీ వేలిముద్ర, ముఖం లేదా స్క్రీన్ లాక్ కోసం అడగవచ్చు.', title: 'మీ పాస్‌కీని ఉపయోగించండి', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'మరొక పద్ధతిని ఉపయోగించండి', subtitle: 'మీ ఖాతాతో సంబంధం ఉన్న పాస్‌వర్డ్‌ను నమోదు చేయండి', diff --git a/packages/localizations/src/th-TH.ts b/packages/localizations/src/th-TH.ts index e67007a7c1e..261ac2d3eff 100644 --- a/packages/localizations/src/th-TH.ts +++ b/packages/localizations/src/th-TH.ts @@ -1290,6 +1290,11 @@ export const thTH: LocalizationResource = { subtitle: 'การใช้พาสคีย์ของคุณยืนยันตัวตนของคุณ อุปกรณ์ของคุณอาจขอลายนิ้วมือ ใบหน้า หรือการล็อคหน้าจอ', title: 'ใช้พาสคีย์ของคุณ', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'ใช้วิธีอื่น', subtitle: 'ใส่รหัสผ่านปัจจุบันของคุณเพื่อดำเนินการต่อ', @@ -1437,6 +1442,10 @@ export const thTH: LocalizationResource = { subtitle: 'การใช้พาสคีย์ของคุณยืนยันว่าเป็นคุณ อุปกรณ์ของคุณอาจขอลายนิ้วมือ ใบหน้า หรือการล็อคหน้าจอ', title: 'ใช้พาสคีย์ของคุณ', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'ใช้วิธีอื่น', subtitle: 'ใส่รหัสผ่านที่เชื่อมโยงกับบัญชีของคุณ', diff --git a/packages/localizations/src/tr-TR.ts b/packages/localizations/src/tr-TR.ts index b95612c1e19..1e1c01433f6 100644 --- a/packages/localizations/src/tr-TR.ts +++ b/packages/localizations/src/tr-TR.ts @@ -1289,6 +1289,11 @@ export const trTR: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Şifremi unuttum', subtitle: 'Şifrenizi girerek devam edebilirsiniz.', @@ -1438,6 +1443,10 @@ export const trTR: LocalizationResource = { 'Geçiş anahtarınızı kullanarak siz olduğunuzu onaylayın. Cihazınız parmak izinizi, yüzünüzü veya ekran kilidinizi isteyebilir.', title: 'Geçiş anahtarınızı kullanın', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Başka bir yöntem kullan', subtitle: '{{applicationName}} ile devam etmek için', diff --git a/packages/localizations/src/uk-UA.ts b/packages/localizations/src/uk-UA.ts index 3f982bc72b8..6ed3ec56549 100644 --- a/packages/localizations/src/uk-UA.ts +++ b/packages/localizations/src/uk-UA.ts @@ -1288,6 +1288,11 @@ export const ukUA: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: undefined, subtitle: undefined, @@ -1435,6 +1440,10 @@ export const ukUA: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Використати інший метод', subtitle: 'щоб продовжити роботу в "{{applicationName}}"', diff --git a/packages/localizations/src/vi-VN.ts b/packages/localizations/src/vi-VN.ts index d848ef3838f..9be42b60336 100644 --- a/packages/localizations/src/vi-VN.ts +++ b/packages/localizations/src/vi-VN.ts @@ -1298,6 +1298,11 @@ export const viVN: LocalizationResource = { 'Sử dụng mã passkey xác minh danh tính của bạn. Thiết bị của bạn có thể yêu cầu vân tay, khuôn mặt hoặc khóa màn hình.', title: 'Sử dụng mã passkey', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Sử dụng phương thức khác', subtitle: 'Nhập mật khẩu hiện tại để tiếp tục', @@ -1446,6 +1451,10 @@ export const viVN: LocalizationResource = { 'Sử dụng mã passkey xác minh danh tính của bạn. Thiết bị của bạn có thể yêu cầu vân tay, khuôn mặt hoặc khóa màn hình.', title: 'Sử dụng mã passkey', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: 'Sử dụng phương thức khác', subtitle: 'Nhập mật khẩu được liên kết với tài khoản của bạn', diff --git a/packages/localizations/src/zh-CN.ts b/packages/localizations/src/zh-CN.ts index dfbf68c8f6b..e9132d11f72 100644 --- a/packages/localizations/src/zh-CN.ts +++ b/packages/localizations/src/zh-CN.ts @@ -1279,6 +1279,11 @@ export const zhCN: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: undefined, subtitle: undefined, @@ -1424,6 +1429,10 @@ export const zhCN: LocalizationResource = { subtitle: undefined, title: undefined, }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: '使用其他方法', subtitle: '继续使用 {{applicationName}}', diff --git a/packages/localizations/src/zh-TW.ts b/packages/localizations/src/zh-TW.ts index 6ca3ead8138..612bb73bb26 100644 --- a/packages/localizations/src/zh-TW.ts +++ b/packages/localizations/src/zh-TW.ts @@ -1282,6 +1282,11 @@ export const zhTW: LocalizationResource = { subtitle: '使用您的金鑰確認您的身分。您的裝置可能會要求您的指紋、臉部或螢幕鎖。', title: '使用您的金鑰', }, + passkeyMfa: { + blockButton__passkey: undefined, + subtitle: undefined, + title: undefined, + }, password: { actionLink: '使用其他方式', subtitle: '請輸入您的密碼以繼續', @@ -1427,6 +1432,10 @@ export const zhTW: LocalizationResource = { subtitle: '使用您的金鑰確認您的身分。您的裝置可能會要求您的指紋、臉部或螢幕鎖。', title: '使用您的金鑰', }, + passkeyMfa: { + subtitle: undefined, + title: undefined, + }, password: { actionLink: '使用其他方式', subtitle: '以繼續前往 {{applicationName}}', diff --git a/packages/react/src/stateProxy.ts b/packages/react/src/stateProxy.ts index 3066d4e1583..157293f2f8b 100644 --- a/packages/react/src/stateProxy.ts +++ b/packages/react/src/stateProxy.ts @@ -244,6 +244,7 @@ export class StateProxy implements State { 'verifyEmailCode', 'verifyTOTP', 'verifyBackupCode', + 'passkey', ] as const), ticket: this.gateMethod(target, 'ticket'), passkey: this.gateMethod(target, 'passkey'), diff --git a/packages/shared/src/internal/clerk-js/constants.ts b/packages/shared/src/internal/clerk-js/constants.ts index c11db68f590..799a0a2118e 100644 --- a/packages/shared/src/internal/clerk-js/constants.ts +++ b/packages/shared/src/internal/clerk-js/constants.ts @@ -66,7 +66,7 @@ export const SIGN_UP_MODES = { } satisfies Record; // This is the currently supported version of the Frontend API -export const SUPPORTED_FAPI_VERSION = '2026-05-12'; +export const SUPPORTED_FAPI_VERSION = '2026-08-20'; export const CAPTCHA_ELEMENT_ID = 'clerk-captcha'; export const CAPTCHA_INVISIBLE_CLASSNAME = 'clerk-invisible-captcha'; diff --git a/packages/shared/src/internal/clerk-js/errors.ts b/packages/shared/src/internal/clerk-js/errors.ts index 77345b56d3e..8242f06d8bb 100644 --- a/packages/shared/src/internal/clerk-js/errors.ts +++ b/packages/shared/src/internal/clerk-js/errors.ts @@ -102,6 +102,15 @@ export function clerkInvalidStrategy(functionaName: string, strategy: string): n throw new Error(`${errorPrefix} Strategy "${strategy}" is not a valid strategy for ${functionaName}.`); } +/** + * + */ +export function clerkInvalidVerificationLevel(functionName: string, level: string): never { + throw new Error( + `${errorPrefix} "${level}" is not a valid verification level for ${functionName}. Use 'first_factor' or 'second_factor'.`, + ); +} + /** * */ diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts index 26b9452fc15..b83bb85bbf2 100644 --- a/packages/shared/src/types/localization.ts +++ b/packages/shared/src/types/localization.ts @@ -586,6 +586,10 @@ export type __internal_LocalizationResource = { title: LocalizationValue; subtitle: LocalizationValue; }; + passkeyMfa: { + title: LocalizationValue; + subtitle: LocalizationValue; + }; alternativeMethods: { title: LocalizationValue; subtitle: LocalizationValue; @@ -668,6 +672,11 @@ export type __internal_LocalizationResource = { subtitle: LocalizationValue; blockButton__passkey: LocalizationValue; }; + passkeyMfa: { + title: LocalizationValue; + subtitle: LocalizationValue; + blockButton__passkey: LocalizationValue; + }; alternativeMethods: { title: LocalizationValue; subtitle: LocalizationValue; diff --git a/packages/shared/src/types/session.ts b/packages/shared/src/types/session.ts index 878fd6e8ecb..b1dcac89793 100644 --- a/packages/shared/src/types/session.ts +++ b/packages/shared/src/types/session.ts @@ -343,9 +343,15 @@ export interface SessionResource extends ClerkResource { ) => Promise; /** * Initiates a verification flow using passkeys. + * + * By default the passkey verifies the first factor. Pass + * `{ level: 'second_factor' }` to satisfy the second factor of an + * in-progress multi-factor reverification instead. Any other `level` + * value is rejected. Throws a `ClerkWebAuthnError` when WebAuthn is + * unsupported or the passkey ceremony fails. * @returns A [`SessionVerification`](https://clerk.com/docs/reference/types/session-verification) instance with its status and supported factors. */ - verifyWithPasskey: () => Promise; + verifyWithPasskey: (params?: SessionVerifyWithPasskeyParams) => Promise; __internal_toSnapshot: () => SessionJSONSnapshot; __internal_touch: (params?: SessionTouchParams) => Promise; } @@ -540,5 +546,18 @@ export type SessionVerifyAttemptFirstFactorParams = | PasswordAttempt | PasskeyAttempt; -export type SessionVerifyPrepareSecondFactorParams = PhoneCodeSecondFactorConfig; -export type SessionVerifyAttemptSecondFactorParams = PhoneCodeAttempt | TOTPAttempt | BackupCodeAttempt; +export type SessionVerifyPrepareSecondFactorParams = PhoneCodeSecondFactorConfig | PassKeyConfig; +export type SessionVerifyAttemptSecondFactorParams = + | PhoneCodeAttempt + | TOTPAttempt + | BackupCodeAttempt + | PasskeyAttempt; + +export type SessionVerifyWithPasskeyParams = { + /** + * Which factor of the reverification the passkey should verify. Defaults + * to `'first_factor'`; pass `'second_factor'` to satisfy the second + * factor of an in-progress multi-factor reverification. + */ + level?: 'first_factor' | 'second_factor'; +}; diff --git a/packages/shared/src/types/sessionVerification.ts b/packages/shared/src/types/sessionVerification.ts index 61af637ce2b..bcbd347d5fd 100644 --- a/packages/shared/src/types/sessionVerification.ts +++ b/packages/shared/src/types/sessionVerification.ts @@ -59,4 +59,4 @@ export type SessionVerificationFirstFactor = * @experimental */ | EnterpriseSSOFactor; -export type SessionVerificationSecondFactor = PhoneCodeFactor | TOTPFactor | BackupCodeFactor; +export type SessionVerificationSecondFactor = PhoneCodeFactor | TOTPFactor | BackupCodeFactor | PasskeyFactor; diff --git a/packages/shared/src/types/signInCommon.ts b/packages/shared/src/types/signInCommon.ts index 8e1fb480c29..f7ded6b05b3 100644 --- a/packages/shared/src/types/signInCommon.ts +++ b/packages/shared/src/types/signInCommon.ts @@ -84,7 +84,13 @@ export type SignInFirstFactor = | OauthFactor | EnterpriseSSOFactor; -export type SignInSecondFactor = PhoneCodeFactor | TOTPFactor | BackupCodeFactor | EmailCodeFactor | EmailLinkFactor; +export type SignInSecondFactor = + | PhoneCodeFactor + | TOTPFactor + | BackupCodeFactor + | EmailCodeFactor + | EmailLinkFactor + | PasskeyFactor; export interface UserData { firstName?: string; @@ -115,9 +121,18 @@ export type AttemptFirstFactorParams = | ResetPasswordPhoneCodeAttempt | ResetPasswordEmailCodeAttempt; -export type PrepareSecondFactorParams = PhoneCodeSecondFactorConfig | EmailCodeSecondFactorConfig | EmailLinkConfig; +export type PrepareSecondFactorParams = + | PhoneCodeSecondFactorConfig + | EmailCodeSecondFactorConfig + | EmailLinkConfig + | PassKeyConfig; -export type AttemptSecondFactorParams = PhoneCodeAttempt | TOTPAttempt | BackupCodeAttempt | EmailCodeAttempt; +export type AttemptSecondFactorParams = + | PhoneCodeAttempt + | TOTPAttempt + | BackupCodeAttempt + | EmailCodeAttempt + | PasskeyAttempt; export type SignInCreateParams = ( | { @@ -177,6 +192,16 @@ export type ResetPasswordParams = { }; export type AuthenticateWithPasskeyParams = { + /** + * The passkey flow to use when the passkey is the FIRST factor: + * `'autofill'` (conditional UI) or `'discoverable'` both create a new + * sign-in and identify the user from the passkey itself. + * + * Ignored when the sign-in is already in the `needs_second_factor` (or + * `needs_client_trust`) status — autofill/discoverable are + * identifier-first concepts, so the method always runs the discrete + * prepare/attempt second-factor flow against the in-progress sign-in. + */ flow?: 'autofill' | 'discoverable'; }; diff --git a/packages/shared/src/types/signInFuture.ts b/packages/shared/src/types/signInFuture.ts index 59941ee856a..3cff99284fb 100644 --- a/packages/shared/src/types/signInFuture.ts +++ b/packages/shared/src/types/signInFuture.ts @@ -345,7 +345,7 @@ export interface SignInFutureResource { *
  • `'needs_client_trust'` - The user is signing in from a new device and must complete a [second factor verification](!second-factor-verification) to establish [Device Trust](https://clerk.com/docs/guides/secure/device-trust). See the [Device Trust custom flow guide](https://clerk.com/docs/guides/development/custom-flows/authentication/device-trust) for more information.
    • *
  • `'needs_identifier'` - The user's identifier (e.g., email address, phone number, username) hasn't been provided.
    • *
  • `'needs_first_factor'` - One of the following [first factor verification](!first-factor-verification) strategies is missing: `'email_link'`, `'email_code'`, `passkey`, `password`, `'phone_code'`, `'web3_base_signature'`, `'web3_metamask_signature'`, `'web3_coinbase_wallet_signature'`, `'web3_okx_wallet_signature'`, `'web3_solana_signature'`, [`OAuthStrategy`](https://clerk.com/docs/reference/types/sso#o-auth-strategy), or `'enterprise_sso'`.
    • - *
  • `'needs_second_factor'` - One of the following [second factor verification](!second-factor-verification) strategies is missing: `'phone_code'`, `'totp'`, `'backup_code'`, `'email_code'`, or `'email_link'`.
    • + *
  • `'needs_second_factor'` - One of the following [second factor verification](!second-factor-verification) strategies is missing: `'phone_code'`, `'totp'`, `'backup_code'`, `'email_code'`, `'email_link'`, or `'passkey'`.
    • *
  • `'needs_new_password'` - The user needs to set a new password. See the [dedicated custom flow](/docs/guides/development/custom-flows/authentication/forgot-password) guide for more information.
    • *
  • `'needs_protect_check'` - A Clerk Protect challenge must be resolved before the sign-in can continue. This status is only returned when Protect mid-flow challenges are explicitly enabled for the instance; upgrading the SDK alone does not enable it. Run the challenge described by `protectCheck` and resolve it via `submitProtectCheck()`. The pre-built components handle this automatically.
    • * @@ -559,6 +559,14 @@ export interface SignInFutureResource { * Verifies a backup code to sign in with as a second factor. */ verifyBackupCode: (params: SignInFutureBackupCodeVerifyParams) => Promise<{ error: ClerkError | null }>; + + /** + * Uses a passkey to sign in with as a second factor. Only available when + * the instance allows passkeys to satisfy the second factor and the user + * has a registered passkey (`passkey` appears in + * `supportedSecondFactors`). + */ + passkey: () => Promise<{ error: ClerkError | null }>; }; /** diff --git a/packages/ui/bundlewatch.config.json b/packages/ui/bundlewatch.config.json index f40753d60b1..06083331324 100644 --- a/packages/ui/bundlewatch.config.json +++ b/packages/ui/bundlewatch.config.json @@ -6,7 +6,7 @@ { "path": "./dist/framework*.js", "maxSize": "44KB" }, { "path": "./dist/vendors*.js", "maxSize": "73KB" }, { "path": "./dist/ui-common*.js", "maxSize": "133KB" }, - { "path": "./dist/signin*.js", "maxSize": "17KB" }, + { "path": "./dist/signin*.js", "maxSize": "18KB" }, { "path": "./dist/signup*.js", "maxSize": "13KB" }, { "path": "./dist/userprofile*.js", "maxSize": "16KB" }, { "path": "./dist/organizationprofile*.js", "maxSize": "13KB" }, diff --git a/packages/ui/src/components/SignIn/SignInClientTrust.tsx b/packages/ui/src/components/SignIn/SignInClientTrust.tsx index aa14fd77fb1..84e4416aff2 100644 --- a/packages/ui/src/components/SignIn/SignInClientTrust.tsx +++ b/packages/ui/src/components/SignIn/SignInClientTrust.tsx @@ -6,8 +6,10 @@ import { useCoreSignIn } from '../../contexts'; import { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeMethods'; import { SignInFactorTwoEmailCodeCard } from './SignInFactorTwoEmailCodeCard'; import { SignInFactorTwoEmailLinkCard } from './SignInFactorTwoEmailLinkCard'; +import { SignInFactorTwoPasskeyCard } from './SignInFactorTwoPasskeyCard'; import { SignInFactorTwoPhoneCodeCard } from './SignInFactorTwoPhoneCodeCard'; import { useSecondFactorSelection } from './useSecondFactorSelection'; +import { isOfferableSecondFactor } from './utils'; function SignInClientTrustInternal(): JSX.Element { const signIn = useCoreSignIn(); @@ -20,7 +22,7 @@ function SignInClientTrustInternal(): JSX.Element { toggleAllStrategies, } = useSecondFactorSelection(signIn.supportedSecondFactors); const onShowAlternativeMethodsClicked = - signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined; + (signIn.supportedSecondFactors?.filter(isOfferableSecondFactor).length ?? 0) > 1 ? toggleAllStrategies : undefined; if (!currentFactor) { return ; @@ -66,6 +68,8 @@ function SignInClientTrustInternal(): JSX.Element { onShowAlternativeMethodsClicked={onShowAlternativeMethodsClicked} /> ); + case 'passkey': + return ; default: return ; } diff --git a/packages/ui/src/components/SignIn/SignInFactorTwo.tsx b/packages/ui/src/components/SignIn/SignInFactorTwo.tsx index 1af218d771c..fa4acb371f5 100644 --- a/packages/ui/src/components/SignIn/SignInFactorTwo.tsx +++ b/packages/ui/src/components/SignIn/SignInFactorTwo.tsx @@ -11,9 +11,11 @@ import { SignInFactorTwoAlternativeMethods } from './SignInFactorTwoAlternativeM import { SignInFactorTwoBackupCodeCard } from './SignInFactorTwoBackupCodeCard'; import { SignInFactorTwoEmailCodeCard } from './SignInFactorTwoEmailCodeCard'; import { SignInFactorTwoEmailLinkCard } from './SignInFactorTwoEmailLinkCard'; +import { SignInFactorTwoPasskeyCard } from './SignInFactorTwoPasskeyCard'; import { SignInFactorTwoPhoneCodeCard } from './SignInFactorTwoPhoneCodeCard'; import { SignInFactorTwoTOTPCard } from './SignInFactorTwoTOTPCard'; import { useSecondFactorSelection } from './useSecondFactorSelection'; +import { isOfferableSecondFactor } from './utils'; function SignInFactorTwoInternal(): JSX.Element { const clerk = useClerk(); @@ -29,7 +31,7 @@ function SignInFactorTwoInternal(): JSX.Element { toggleAllStrategies, } = useSecondFactorSelection(signIn.supportedSecondFactors); const onShowAlternativeMethodsClicked = - signIn.supportedSecondFactors && signIn.supportedSecondFactors.length > 1 ? toggleAllStrategies : undefined; + (signIn.supportedSecondFactors?.filter(isOfferableSecondFactor).length ?? 0) > 1 ? toggleAllStrategies : undefined; React.useEffect(() => { if (clerk.__internal_setActiveInProgress) { @@ -85,6 +87,8 @@ function SignInFactorTwoInternal(): JSX.Element { ); case 'backup_code': return ; + case 'passkey': + return ; case 'email_code': return ( {supportedSecondFactors && - supportedSecondFactors.sort(backupCodePrefFactorComparator).map((factor, i) => ( - onFactorSelected(factor)} - /> - ))} + supportedSecondFactors + .filter(isOfferableSecondFactor) + .sort(backupCodePrefFactorComparator) + .map((factor, i) => ( + onFactorSelected(factor)} + /> + ))} {onBackLinkClick && ( @@ -111,6 +115,8 @@ export function getButtonLabel(factor: SignInSecondFactor): LocalizationKey { return localizationKeys('signIn.alternativeMethods.blockButton__emailLink', { identifier: formatSafeIdentifier(factor.safeIdentifier) || '', }); + case 'passkey': + return localizationKeys('signIn.alternativeMethods.blockButton__passkey'); default: ((_: never) => _)(factor); throw new Error('Invalid sign in strategy'); diff --git a/packages/ui/src/components/SignIn/SignInFactorTwoPasskeyCard.tsx b/packages/ui/src/components/SignIn/SignInFactorTwoPasskeyCard.tsx new file mode 100644 index 00000000000..11d2d223422 --- /dev/null +++ b/packages/ui/src/components/SignIn/SignInFactorTwoPasskeyCard.tsx @@ -0,0 +1,59 @@ +import React from 'react'; + +import { Card } from '@/ui/elements/Card'; +import { useCardState } from '@/ui/elements/contexts'; +import { Form } from '@/ui/elements/Form'; +import { Header } from '@/ui/elements/Header'; + +import { descriptors, Flex, localizationKeys } from '../../customizables'; +import { useHandleAuthenticateWithPasskey } from './shared'; + +type SignInFactorTwoPasskeyCardProps = { + onShowAlternativeMethodsClicked?: React.MouseEventHandler; +}; + +export const SignInFactorTwoPasskeyCard = (props: SignInFactorTwoPasskeyCardProps) => { + const { onShowAlternativeMethodsClicked } = props; + const card = useCardState(); + // A successful attempt completes the sign-in, which the hook handles via + // setActive; the sign-in can't come back as needs_second_factor. + const authenticateWithPasskey = useHandleAuthenticateWithPasskey(() => Promise.resolve()); + + const handleSubmit: React.FormEventHandler = e => { + e.preventDefault(); + return authenticateWithPasskey(); + }; + + return ( + + + + + + + {card.error} + + + + + + {onShowAlternativeMethodsClicked && ( + + )} + + + + + + ); +}; diff --git a/packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx b/packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx index 287e934288c..f5b04763a77 100644 --- a/packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx +++ b/packages/ui/src/components/SignIn/__tests__/SignInFactorTwo.test.tsx @@ -3,7 +3,7 @@ import type { SignInResource } from '@clerk/shared/types'; import { describe, expect, it, vi } from 'vitest'; import { bindCreateFixtures } from '@/test/create-fixtures'; -import { render, screen, waitFor } from '@/test/utils'; +import { mockWebAuthn, render, screen, waitFor } from '@/test/utils'; import { SignInFactorTwo } from '../SignInFactorTwo'; @@ -404,6 +404,78 @@ describe('SignInFactorTwo', () => { }); }); }); + + describe('Passkey', () => { + it('falls back to the enrolled code factors when webauthn is not supported', async () => { + const { wrapper, fixtures } = await createFixtures(f => { + f.withEmailAddress(); + f.withPassword(); + f.startSignInFactorTwo({ + supportPhoneCode: false, + supportTotp: true, + supportPasskey: true, + }); + }); + fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource)); + render(, { wrapper }); + + expect(screen.getAllByTestId('otp-input-segment').length).toBe(6); + expect(screen.queryByText('Use your passkey')).not.toBeInTheDocument(); + }); + + mockWebAuthn(() => { + it('is the starting factor ahead of the enrolled code factors', async () => { + const { wrapper, fixtures } = await createFixtures(f => { + f.withEmailAddress(); + f.withPassword(); + f.startSignInFactorTwo({ + supportPhoneCode: true, + supportTotp: true, + supportPasskey: true, + }); + }); + fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource)); + render(, { wrapper }); + + await screen.findByText('Use your passkey'); + expect(screen.queryAllByTestId('otp-input-segment').length).toBe(0); + }); + + it('renders the passkey card when passkey is the only second factor', async () => { + const { wrapper } = await createFixtures(f => { + f.withEmailAddress(); + f.withPassword(); + f.startSignInFactorTwo({ + supportPhoneCode: false, + supportPasskey: true, + }); + }); + render(, { wrapper }); + + await screen.findByText('Use your passkey'); + await screen.findByText( + "Using your passkey confirms it's you. Your device may ask for your fingerprint, face or screen lock.", + ); + }); + + it('calls authenticateWithPasskey when clicking continue', async () => { + const { wrapper, fixtures } = await createFixtures(f => { + f.withEmailAddress(); + f.withPassword(); + f.startSignInFactorTwo({ + supportPhoneCode: false, + supportPasskey: true, + }); + }); + fixtures.signIn.authenticateWithPasskey.mockResolvedValue({ status: 'complete' } as SignInResource); + const { userEvent } = render(, { wrapper }); + + await userEvent.click(screen.getByText('Continue')); + + expect(fixtures.signIn.authenticateWithPasskey).toHaveBeenCalled(); + }); + }); + }); }); describe('Use another method', () => { @@ -485,6 +557,44 @@ describe('SignInFactorTwo', () => { expect(await screen.findByText(/Authenticator/i)).toBeInTheDocument(); }); + it('skips the passkey method when webauthn is not supported', async () => { + const { wrapper, fixtures } = await createFixtures(f => { + f.withEmailAddress(); + f.withPassword(); + f.startSignInFactorTwo({ + supportPhoneCode: true, + supportTotp: true, + supportPasskey: true, + }); + }); + + fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource)); + const { userEvent } = render(, { wrapper }); + await userEvent.click(screen.getByText('Use another method')); + expect(await screen.findByText(/Send SMS code to \+/i)).toBeInTheDocument(); + expect(screen.queryByText('Sign in with your passkey')).not.toBeInTheDocument(); + }); + + mockWebAuthn(() => { + it('lists the passkey method and shows the passkey card when clicking it', async () => { + const { wrapper, fixtures } = await createFixtures(f => { + f.withEmailAddress(); + f.withPassword(); + f.startSignInFactorTwo({ + supportPhoneCode: true, + supportTotp: true, + supportPasskey: true, + }); + }); + + fixtures.signIn.prepareSecondFactor.mockReturnValueOnce(Promise.resolve({} as SignInResource)); + const { userEvent } = render(, { wrapper }); + await userEvent.click(screen.getByText('Use another method')); + await userEvent.click(await screen.findByText('Sign in with your passkey')); + expect(await screen.findByText('Use your passkey')).toBeInTheDocument(); + }); + }); + it('shows the SMS code input when clicking the Phone code method', async () => { const { wrapper, fixtures } = await createFixtures(f => { f.withEmailAddress(); diff --git a/packages/ui/src/components/SignIn/shared.ts b/packages/ui/src/components/SignIn/shared.ts index 33cb2026be8..2a7176a16cf 100644 --- a/packages/ui/src/components/SignIn/shared.ts +++ b/packages/ui/src/components/SignIn/shared.ts @@ -12,6 +12,7 @@ import { useCoreSignIn, useSignInContext } from '../../contexts'; import { useSupportEmail } from '../../hooks/useSupportEmail'; import { useRouter } from '../../router'; import { navigateOnSignInProtectGate } from './handleProtectCheck'; +import { isResetPasswordStrategy } from './utils'; /** Search param set when navigating from the start page "Forgot password?" action. */ export const SIGN_IN_RESET_PASSWORD_INTENT_PARAM = '__clerk_reset_password'; @@ -51,6 +52,20 @@ function useHandleAuthenticateWithPasskey( } switch (res.status) { case 'complete': + // A passkey can complete the SECOND factor of a reset-password + // sign-in (reset password -> needs_second_factor -> passkey); that + // flow ends on the reset-password success screen, mirroring the + // other factor-two cards. Unreachable from factor-one usages of + // this hook, where the first-factor strategy is the passkey itself. + if ( + isResetPasswordStrategy(res.firstFactorVerification?.strategy) && + res.firstFactorVerification?.status === 'verified' && + res.createdSessionId + ) { + const queryParams = new URLSearchParams(); + queryParams.set('createdSessionId', res.createdSessionId); + return navigate(`../reset-password-success?${queryParams.toString()}`); + } return setActive({ session: res.createdSessionId, navigate: async ({ session, decorateUrl }) => { diff --git a/packages/ui/src/components/SignIn/utils.ts b/packages/ui/src/components/SignIn/utils.ts index 0f8873d0094..d67f4586207 100644 --- a/packages/ui/src/components/SignIn/utils.ts +++ b/packages/ui/src/components/SignIn/utils.ts @@ -18,6 +18,10 @@ const factorForIdentifier = (i: string | null) => (f: SignInFactor) => { return 'safeIdentifier' in f && f.safeIdentifier === i; }; +export function isOfferableSecondFactor(factor: { strategy: SignInStrategy }): boolean { + return factor.strategy !== 'passkey' || isWebAuthnSupported(); +} + function findPasskeyStrategy(factors: SignInFactor[]): SignInFactor | null { if (isWebAuthnSupported()) { // @ts-ignore @@ -95,12 +99,19 @@ export function factorHasLocalStrategy(factor: SignInFactor | undefined | null): return localStrategies.includes(factor.strategy); } -// The priority of second factors is: TOTP -> Phone code -> any other factor +// The priority of second factors is: Passkey -> TOTP -> Phone code -> any other factor. +// Passkey is only offered on browsers with WebAuthn support — without it the passkey +// card is a dead end, so fall through to the enrolled code-based factors instead. export function determineStartingSignInSecondFactor(secondFactors: SignInFactor[] | null): SignInFactor | null { if (!secondFactors || secondFactors.length === 0) { return null; } + const passkeyFactor = findPasskeyStrategy(secondFactors); + if (passkeyFactor) { + return passkeyFactor; + } + const totpFactor = secondFactors.find(f => f.strategy === 'totp'); if (totpFactor) { return totpFactor; @@ -111,7 +122,7 @@ export function determineStartingSignInSecondFactor(secondFactors: SignInFactor[ return phoneCodeFactor; } - return secondFactors[0]; + return secondFactors.find(f => f.strategy !== 'passkey') || null; } const resetPasswordStrategies: SignInStrategy[] = ['reset_password_phone_code', 'reset_password_email_code']; diff --git a/packages/ui/src/components/UserVerification/UVFactorTwoAlternativeMethods.tsx b/packages/ui/src/components/UserVerification/UVFactorTwoAlternativeMethods.tsx index c3041271e07..99869ca51e6 100644 --- a/packages/ui/src/components/UserVerification/UVFactorTwoAlternativeMethods.tsx +++ b/packages/ui/src/components/UserVerification/UVFactorTwoAlternativeMethods.tsx @@ -102,6 +102,8 @@ export function getButtonLabel(factor: SessionVerificationSecondFactor): Localiz return localizationKeys('reverification.alternativeMethods.blockButton__totp'); case 'backup_code': return localizationKeys('reverification.alternativeMethods.blockButton__backupCode'); + case 'passkey': + return localizationKeys('reverification.alternativeMethods.blockButton__passkey'); default: throw new Error(`Invalid verification strategy: "${(factor as any).strategy}"`); } diff --git a/packages/ui/src/components/UserVerification/UVFactorTwoPasskeyCard.tsx b/packages/ui/src/components/UserVerification/UVFactorTwoPasskeyCard.tsx new file mode 100644 index 00000000000..668ecaa52f9 --- /dev/null +++ b/packages/ui/src/components/UserVerification/UVFactorTwoPasskeyCard.tsx @@ -0,0 +1,91 @@ +import { __internal_WebAuthnAbortService } from '@clerk/shared/internal/clerk-js/passkeys'; +import { useSession } from '@clerk/shared/react'; +import React from 'react'; + +import { Card } from '@/ui/elements/Card'; +import { useCardState } from '@/ui/elements/contexts'; +import { Form } from '@/ui/elements/Form'; +import { Header } from '@/ui/elements/Header'; +import { handleError } from '@/ui/utils/errorHandler'; + +import { Button, Col, descriptors, localizationKeys } from '../../customizables'; +import { useAfterVerification } from './use-after-verification'; + +type UVFactorTwoPasskeyCardProps = { + onShowAlternativeMethodsClicked?: React.MouseEventHandler; + showAlternativeMethods?: boolean; +}; + +export const UVFactorTwoPasskeyCard = (props: UVFactorTwoPasskeyCardProps) => { + const { onShowAlternativeMethodsClicked, showAlternativeMethods } = props; + const { session } = useSession(); + const { handleVerificationResponse } = useAfterVerification(); + + const card = useCardState(); + + React.useEffect(() => { + return () => { + __internal_WebAuthnAbortService.abort(); + }; + }, []); + + const handlePasskeysAttempt = () => { + // A second click while the WebAuthn ceremony is in flight would abort it + // and surface a passkey_operation_aborted error. + if (card.isLoading) { + return; + } + + card.setLoading(); + session + ?.verifyWithPasskey({ level: 'second_factor' }) + .then(response => { + return handleVerificationResponse(response); + }) + .catch(err => handleError(err, [], card.setError)) + .finally(() => card.setIdle()); + + return; + }; + + return ( + + + + + + + {card.error} + + + +