+ props.onInputChange({ method: 'passkey', rpID })
+ }
+ disabled={verifying}
+ />
{t(
diff --git a/web/src/features/auth/secure-verification/hooks/use-secure-verification.ts b/web/src/features/auth/secure-verification/hooks/use-secure-verification.ts
index 5015e454d..e45b7a454 100644
--- a/web/src/features/auth/secure-verification/hooks/use-secure-verification.ts
+++ b/web/src/features/auth/secure-verification/hooks/use-secure-verification.ts
@@ -16,11 +16,12 @@ along with this program. If not, see .
For commercial licensing, please contact support@quantumnous.com
*/
-import { useCallback, useEffect, useReducer, useRef } from 'react'
+import { useCallback, useEffect, useReducer, useRef, useState } from 'react'
import { AuthOperationError } from '@/lib/secure-verification'
import type { AuthBundle } from '@/stores/auth-store'
+import type { PasskeyDomains } from '../../passkey/assertion'
import {
checkVerificationMethods,
getLoginVerificationRequirements,
@@ -140,6 +141,9 @@ type PendingVerification = PendingVerificationBase &
export function useSecureVerification() {
const [state, dispatch] = useReducer(verificationReducer, { phase: 'idle' })
const pending = useRef(null)
+ const [passkeyDomains, setPasskeyDomains] = useState(
+ null
+ )
const cancel = useCallback(() => {
const current = pending.current
@@ -147,6 +151,7 @@ export function useSecureVerification() {
current?.controller.abort()
if (current) current.initialPassword = undefined
current?.resolve(null)
+ setPasskeyDomains(null)
dispatch({ type: 'reset' })
}, [])
@@ -242,6 +247,7 @@ export function useSecureVerification() {
submitting: false,
}
pending.current = current
+ setPasskeyDomains(null)
void loadRequirements(current)
})
},
@@ -264,6 +270,7 @@ export function useSecureVerification() {
submitting: false,
}
pending.current = current
+ setPasskeyDomains(null)
void loadRequirements(current)
})
},
@@ -288,7 +295,10 @@ export function useSecureVerification() {
const bundle = await verifyLogin(
input,
current.request.challenge,
- current.controller.signal
+ current.controller.signal,
+ (domains) => {
+ if (pending.current === current) setPasskeyDomains(domains)
+ }
)
if (pending.current !== current) return
current.resolve(bundle)
@@ -297,7 +307,10 @@ export function useSecureVerification() {
input,
current.request,
state.requirements.password_encryption_enabled,
- current.controller.signal
+ current.controller.signal,
+ (domains) => {
+ if (pending.current === current) setPasskeyDomains(domains)
+ }
)
if (pending.current !== current) return
current.resolve(proof)
@@ -334,6 +347,7 @@ export function useSecureVerification() {
isActive: state.phase !== 'idle',
dialogProps: {
state,
+ passkeyDomains,
onCancel: cancel,
onRetry: retry,
onInputChange: setInput,
diff --git a/web/src/features/auth/secure-verification/types.ts b/web/src/features/auth/secure-verification/types.ts
index 50a7eece9..fe3616b42 100644
--- a/web/src/features/auth/secure-verification/types.ts
+++ b/web/src/features/auth/secure-verification/types.ts
@@ -71,7 +71,7 @@ export interface VerificationRequirements {
export type VerificationInput =
| { method: '2fa'; code: string }
| { method: 'password'; password: string }
- | { method: 'passkey' }
+ | { method: 'passkey'; rpID?: string }
| { method: 'oauth'; provider: string }
| { method: 'session' }
diff --git a/web/src/features/auth/sign-in/components/user-auth-form.tsx b/web/src/features/auth/sign-in/components/user-auth-form.tsx
index 5f97a43eb..2a98e43f4 100644
--- a/web/src/features/auth/sign-in/components/user-auth-form.tsx
+++ b/web/src/features/auth/sign-in/components/user-auth-form.tsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
import { zodResolver } from '@hookform/resolvers/zod'
import { Link } from '@tanstack/react-router'
import { Loader2, LogIn, KeyRound } from 'lucide-react'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useRef, useState } from 'react'
import { useForm } from 'react-hook-form'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
@@ -46,14 +46,16 @@ import { loginFormSchema } from '@/features/auth/constants'
import { useAuthRedirect } from '@/features/auth/hooks/use-auth-redirect'
import { useTurnstile } from '@/features/auth/hooks/use-turnstile'
import { beginPasskeyLogin, finishPasskeyLogin } from '@/features/auth/passkey'
+import {
+ requestPasskeyAssertion,
+ rememberPasskeyRPID,
+ type PasskeyDomains,
+} from '@/features/auth/passkey/assertion'
+import { PasskeyDomainSelector } from '@/features/auth/passkey/components/passkey-domain-selector'
import type { AuthFormProps } from '@/features/auth/types'
import { useStatus } from '@/hooks/use-status'
import { handleServerError } from '@/lib/handle-server-error'
-import {
- buildAssertionResult,
- prepareCredentialRequestOptions,
- isPasskeySupported as detectPasskeySupport,
-} from '@/lib/passkey'
+import { isPasskeySupported as detectPasskeySupport } from '@/lib/passkey'
import { AuthOperationError } from '@/lib/secure-verification'
import { createServerError } from '@/lib/server-error-message'
import { cn } from '@/lib/utils'
@@ -69,6 +71,12 @@ export function UserAuthForm({
const [agreedToLegal, setAgreedToLegal] = useState(false)
const [passkeySupported, setPasskeySupported] = useState(false)
const [isPasskeyLoading, setIsPasskeyLoading] = useState(false)
+ const [passkeyDomains, setPasskeyDomains] = useState(
+ null
+ )
+ const [passkeyRPID, setPasskeyRPID] = useState()
+ const passkeyOperation = useRef(null)
+ useEffect(() => () => passkeyOperation.current?.abort(), [])
const [isWeChatDialogOpen, setIsWeChatDialogOpen] = useState(false)
const [isWeChatSubmitting, setIsWeChatSubmitting] = useState(false)
const [turnstileWidgetKey, setTurnstileWidgetKey] = useState(0)
@@ -248,44 +256,32 @@ export function UserAuthForm({
return
}
+ if (passkeyOperation.current) return
+ const controller = new AbortController()
+ passkeyOperation.current = controller
setIsPasskeyLoading(true)
try {
- const begin = await beginPasskeyLogin()
- if (!begin.success) {
- throw createServerError(begin, t('Failed to start Passkey login'))
- }
-
- const publicKey = prepareCredentialRequestOptions(
- begin.data?.options ?? begin.data
+ const passkey = await requestPasskeyAssertion(
+ (rpID) => beginPasskeyLogin(rpID, controller.signal),
+ controller.signal,
+ { rpID: passkeyRPID, onDomains: setPasskeyDomains }
)
- const flowToken = begin.data?.flow_token
- if (!flowToken) {
- throw new Error(t('Login flow expired. Please sign in again.'))
- }
-
- const credential = (await navigator.credentials.get({
- publicKey,
- })) as PublicKeyCredential | null
-
- if (!credential) {
- toast.info(t('Passkey login was cancelled'))
- return
- }
-
- const assertion = buildAssertionResult(credential)
- if (!assertion) {
- throw new Error(t('Invalid Passkey response'))
- }
-
- const finish = await finishPasskeyLogin(flowToken, assertion)
+ const finish = await finishPasskeyLogin(
+ passkey.flowToken,
+ passkey.assertion,
+ controller.signal
+ )
+ controller.signal.throwIfAborted()
if (!finish.success) {
throw createServerError(finish, t('Failed to complete Passkey login'))
}
+ rememberPasskeyRPID(passkey.rpID)
if (await handleLoginResult(finish.data, redirectTo)) {
toast.success(t('Signed in with Passkey'))
}
} catch (error: unknown) {
+ if (controller.signal.aborted) return
if (error instanceof DOMException && error.name === 'NotAllowedError') {
toast.info(t('Passkey login was cancelled or timed out'))
} else if (error instanceof Error) {
@@ -296,6 +292,9 @@ export function UserAuthForm({
)
}
} finally {
+ if (passkeyOperation.current === controller) {
+ passkeyOperation.current = null
+ }
setIsPasskeyLoading(false)
}
}
@@ -318,6 +317,12 @@ export function UserAuthForm({
)}
{t('Sign in with Passkey')}
+
{!passkeySupported && (
{t('Passkey is not supported on this device.')}
diff --git a/web/src/features/system-settings/api.ts b/web/src/features/system-settings/api.ts
index 9e9c9a7f2..dc05ed341 100644
--- a/web/src/features/system-settings/api.ts
+++ b/web/src/features/system-settings/api.ts
@@ -27,6 +27,8 @@ import type {
SystemTaskResponse,
UpdateOptionRequest,
UpdateOptionResponse,
+ UpdatePasskeyDomainsRequest,
+ UpdatePasskeyDomainsResponse,
UpstreamChannelsResponse,
UpstreamRatiosResponse,
} from './types'
@@ -41,6 +43,20 @@ export async function updateSystemOption(request: UpdateOptionRequest) {
return res.data
}
+export async function updatePasskeyDomains(
+ request: UpdatePasskeyDomainsRequest
+) {
+ const res = await api.put(
+ '/api/option/passkey/domains',
+ request,
+ {
+ validateStatus: (status) =>
+ (status >= 200 && status < 300) || status === 409,
+ }
+ )
+ return res.data
+}
+
export async function confirmPaymentCompliance() {
const res = await api.post(
'/api/option/payment_compliance',
diff --git a/web/src/features/system-settings/auth/__tests__/passkey-settings.test.tsx b/web/src/features/system-settings/auth/__tests__/passkey-settings.test.tsx
index c2e16db95..3c86293ca 100644
--- a/web/src/features/system-settings/auth/__tests__/passkey-settings.test.tsx
+++ b/web/src/features/system-settings/auth/__tests__/passkey-settings.test.tsx
@@ -24,14 +24,19 @@ import userEvent from '@testing-library/user-event'
import { createInstance, type i18n } from 'i18next'
import { useState } from 'react'
import { I18nextProvider } from 'react-i18next'
+import { toast } from 'sonner'
import { beforeEach, describe, expect, it, vi } from 'vitest'
import zh from '@/i18n/locales/zh.json'
import { api } from '@/lib/api'
import { SettingsPageProvider } from '../../components/settings-page-context'
+import type { PasskeyDomainChange } from '../../types'
import { PasskeySection } from '../passkey-section'
+const domainHint =
+ 'Enter a domain such as example.com or localhost, without a protocol, port or path. Put addresses with ports in Allowed Passkey websites.'
+
const defaults = {
'passkey.enabled': true,
'passkey.rp_display_name': 'Example',
@@ -42,9 +47,30 @@ const defaults = {
'passkey.attachment_preference': '' as const,
}
+function domainResponse(overrides: Partial = {}) {
+ return {
+ data: {
+ success: true,
+ data: {
+ rp_id: 'example.com',
+ legacy_rp_ids: window.location.hostname,
+ origins: defaults['passkey.origins'],
+ previous_rp_id: window.location.hostname,
+ effective_rp_id: 'example.com',
+ removed_rp_ids: [],
+ affected_credentials: 0,
+ unknown_credentials: 0,
+ confirmation_required: false,
+ removal_confirmation: 'reviewed-domains',
+ ...overrides,
+ },
+ },
+ }
+}
+
let testI18n: i18n
-function Fixture(props: { rpId?: string; origins?: string }) {
+function Fixture(props: { rpId?: string; origins?: string; legacy?: string }) {
const [container, setContainer] = useState(null)
const [client] = useState(
() =>
@@ -64,6 +90,7 @@ function Fixture(props: { rpId?: string; origins?: string }) {
defaultValues={{
...defaults,
'passkey.rp_id': props.rpId ?? '',
+ 'passkey.legacy_rp_ids': props.legacy ?? '',
'passkey.origins': props.origins ?? defaults['passkey.origins'],
}}
/>
@@ -88,30 +115,77 @@ beforeEach(async () => {
})
describe('Passkey website guidance', () => {
+ it('previews server impact and cancels domain removal without saving other settings', async () => {
+ const put = vi.spyOn(api, 'put').mockResolvedValue({
+ data: {
+ success: true,
+ data: {
+ rp_id: 'example.com',
+ legacy_rp_ids: '',
+ origins: defaults['passkey.origins'],
+ previous_rp_id: 'example.com',
+ effective_rp_id: 'example.com',
+ removed_rp_ids: ['www.example.com'],
+ affected_credentials: 2,
+ unknown_credentials: 7,
+ confirmation_required: true,
+ removal_confirmation: 'reviewed-impact',
+ },
+ },
+ })
+ const user = userEvent.setup()
+ render()
+ await user.clear(
+ screen.getByRole('textbox', { name: 'Compatible Passkey domains' })
+ )
+ await user.type(
+ screen.getByRole('textbox', { name: 'Passkey display name' }),
+ ' changed'
+ )
+ await user.click(screen.getByRole('button', { name: 'Save Changes' }))
+ const dialog = await screen.findByRole('alertdialog')
+ expect(
+ await within(dialog).findByText(
+ 'Passkeys known to use removed domains: 2'
+ )
+ ).toBeVisible()
+ expect(
+ within(dialog).getByText(
+ 'Passkeys with an unknown domain that may be affected: 7'
+ )
+ ).toBeVisible()
+ await user.click(within(dialog).getByRole('button', { name: 'Cancel' }))
+ expect(put).toHaveBeenCalledTimes(1)
+ expect(put.mock.calls[0]?.[1]).toMatchObject({ preview: true })
+ })
it('shows the effective domain for a blank field without suggesting a change and restores focus', async () => {
const put = vi.spyOn(api, 'put')
const user = userEvent.setup()
render()
const input = screen.getByRole('textbox', {
- name: 'Passkey website domain',
+ name: 'Primary Passkey domain',
})
expect(input).toHaveValue('')
await waitFor(() => expect(input).not.toHaveClass('border-amber-500'))
expect(input).toHaveAccessibleDescription(
- `The system currently uses: ${window.location.hostname}`
+ `${domainHint} The system currently uses: ${window.location.hostname}`
)
expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
expect(
screen.queryByText(/Passkeys only work on the website/)
).not.toBeInTheDocument()
- const help = screen.getByRole('button', { name: 'Why set this?' })
+ const domains = screen.getByRole('group', { name: 'Passkey domains' })
+ const help = within(within(domains).getByRole('status')).getByRole(
+ 'button',
+ { name: 'Why set this?' }
+ )
help.focus()
await user.keyboard('{Enter}')
const dialog = screen.getByRole('dialog', {
- name: 'Why set a website domain?',
+ name: 'How to set up Passkey domains',
})
expect(dialog).toHaveAccessibleDescription(
- 'Passkeys only work on the website they were created for. This helps prevent other websites from misusing them.'
+ 'New Passkeys use the primary domain. Compatible domains keep existing Passkeys working.'
)
expect(
await within(dialog).findByText(
@@ -135,7 +209,9 @@ describe('Passkey website guidance', () => {
})
const put = vi
.spyOn(api, 'put')
- .mockResolvedValue({ data: { success: true } })
+ .mockResolvedValue(
+ domainResponse({ previous_rp_id: 'example.com', legacy_rp_ids: '' })
+ )
const user = userEvent.setup()
render()
await user.click(screen.getByRole('button', { name: 'Why set this?' }))
@@ -146,7 +222,7 @@ describe('Passkey website guidance', () => {
expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
)
const input = screen.getByRole('textbox', {
- name: 'Passkey website domain',
+ name: 'Primary Passkey domain',
})
expect(input).toHaveValue('example.com')
expect(input).not.toHaveClass('border-amber-500')
@@ -156,12 +232,19 @@ describe('Passkey website guidance', () => {
expect(put).not.toHaveBeenCalled()
await user.click(screen.getByRole('button', { name: 'Save Changes' }))
await waitFor(() =>
- expect(put).toHaveBeenCalledWith('/api/option/', {
- key: 'passkey.rp_id',
- value: 'example.com',
- })
+ expect(put).toHaveBeenCalledWith(
+ '/api/option/passkey/domains',
+ {
+ rp_id: 'example.com',
+ legacy_rp_ids: '',
+ origins: defaults['passkey.origins'],
+ preview: false,
+ removal_confirmation: 'reviewed-domains',
+ },
+ expect.any(Object)
+ )
)
- expect(put).toHaveBeenCalledTimes(1)
+ expect(put).toHaveBeenCalledTimes(2)
await user.click(screen.getByRole('button', { name: 'Why set this?' }))
expect(
await screen.findByText('The system currently uses: example.com')
@@ -174,7 +257,7 @@ describe('Passkey website guidance', () => {
await user.click(screen.getByRole('button', { name: 'Why set this?' }))
expect(
screen.getByText(
- 'If users already have Passkeys, changing this domain may require them to sign in another way and set up their Passkeys again.'
+ 'When the primary domain changes, the previous domain is automatically kept in the compatible domains list.'
)
).toBeVisible()
await user.click(
@@ -198,7 +281,7 @@ describe('Passkey website guidance', () => {
const user = userEvent.setup()
render()
const input = screen.getByRole('textbox', {
- name: 'Passkey website domain',
+ name: 'Primary Passkey domain',
})
expect(input).not.toHaveClass('border-amber-500')
await user.clear(input)
@@ -208,7 +291,7 @@ describe('Passkey website guidance', () => {
'focus-visible:border-amber-500'
)
expect(input).toHaveAccessibleDescription(
- 'This domain does not match the current website. Passkeys may not work here.'
+ `${domainHint} This domain does not match the current website. Passkeys may not work here.`
)
await user.clear(input)
await user.type(input, window.location.hostname)
@@ -224,7 +307,7 @@ describe('Passkey website guidance', () => {
it('keeps a matching parent domain unmarked and explains a missing website beside the website list', async () => {
render()
expect(
- screen.getByRole('textbox', { name: 'Passkey website domain' })
+ screen.getByRole('textbox', { name: 'Primary Passkey domain' })
).not.toHaveClass('border-amber-500')
const websites = screen.getByRole('textbox', {
name: 'Allowed Passkey websites',
@@ -240,24 +323,31 @@ describe('Passkey website guidance', () => {
})
it('disables filling while saving and enables it after the save finishes', async () => {
- let finishSave!: (value: { data: { success: boolean } }) => void
- vi.spyOn(api, 'put').mockImplementation(
- () =>
- new Promise((resolve) => {
- finishSave = resolve
- })
- )
+ const reply = domainResponse({
+ rp_id: window.location.hostname,
+ effective_rp_id: window.location.hostname,
+ legacy_rp_ids: '',
+ })
+ let finishSave!: (value: ReturnType) => void
+ vi.spyOn(api, 'put')
+ .mockResolvedValueOnce(reply)
+ .mockImplementationOnce(
+ () =>
+ new Promise((resolve) => {
+ finishSave = resolve
+ })
+ )
const user = userEvent.setup()
render()
await user.type(
- screen.getByRole('textbox', { name: 'Passkey website domain' }),
+ screen.getByRole('textbox', { name: 'Primary Passkey domain' }),
window.location.hostname
)
await user.click(screen.getByRole('button', { name: 'Save Changes' }))
await user.click(screen.getByRole('button', { name: 'Why set this?' }))
const fill = screen.getByRole('button', { name: 'Keep existing domain' })
expect(fill).toBeDisabled()
- finishSave({ data: { success: true } })
+ finishSave(reply)
await waitFor(() => expect(fill).toBeEnabled())
})
@@ -266,15 +356,19 @@ describe('Passkey website guidance', () => {
const user = userEvent.setup()
render()
await waitFor(() =>
- expect(
- screen.getByRole('textbox', { name: '通行密钥使用的网站域名' })
- ).not.toHaveClass('border-amber-500')
+ expect(screen.getByRole('textbox', { name: '主域名' })).not.toHaveClass(
+ 'border-amber-500'
+ )
)
await user.click(screen.getByRole('button', { name: '为什么需要设置？' }))
const dialog = screen.getByRole('dialog', {
- name: '为什么要填写网站域名？',
+ name: '如何设置通行密钥域名',
})
expect(dialog).not.toHaveTextContent(/RP ID|Origins?|依赖方/)
+ expect(within(dialog).getByText('主域名')).toBeVisible()
+ expect(within(dialog).getByText('兼容的通行密钥域名')).toBeVisible()
+ expect(dialog).toHaveTextContent('每行填写一个已有通行密钥使用的域名')
+ expect(dialog).toHaveTextContent('无法在 example.com 使用')
expect(
within(dialog).getByRole('button', { name: '保留现有域名' })
).toBeVisible()
@@ -296,101 +390,186 @@ describe('Passkey website guidance', () => {
})
it('requires confirmation before replacing an automatically resolved domain and lets users cancel', async () => {
- const put = vi
- .spyOn(api, 'put')
- .mockResolvedValue({ data: { success: true } })
+ const put = vi.spyOn(api, 'put').mockResolvedValue(domainResponse())
const user = userEvent.setup()
render()
- const input = screen.getByRole('textbox', {
- name: 'Passkey website domain',
- })
- await waitFor(() =>
- expect(input).toHaveAccessibleDescription(
- `The system currently uses: ${window.location.hostname}`
- )
+ await user.type(
+ screen.getByRole('textbox', { name: 'Primary Passkey domain' }),
+ 'example.com'
)
- await user.type(input, 'example.com')
await user.click(screen.getByRole('button', { name: 'Save Changes' }))
- const dialog = screen.getByRole('alertdialog', {
+ const dialog = await screen.findByRole('alertdialog', {
name: 'Change the Passkey domain?',
})
expect(dialog).toHaveTextContent(
`Current domain: ${window.location.hostname}`
)
expect(dialog).toHaveTextContent('New domain: example.com')
- expect(put).not.toHaveBeenCalled()
+ expect(put).toHaveBeenCalledTimes(1)
+ expect(put.mock.calls[0]?.[1]).toMatchObject({ preview: true })
await user.click(within(dialog).getByRole('button', { name: 'Cancel' }))
- expect(put).not.toHaveBeenCalled()
+ expect(put).toHaveBeenCalledTimes(1)
await user.click(screen.getByRole('button', { name: 'Save Changes' }))
- await user.click(screen.getByRole('button', { name: 'Change domain' }))
- await waitFor(() =>
- expect(put).toHaveBeenCalledExactlyOnceWith('/api/option/', {
- key: 'passkey.rp_id',
- value: 'example.com',
- })
+ await user.click(
+ await screen.findByRole('button', { name: 'Change domain' })
)
await waitFor(() =>
expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
)
+ expect(put).toHaveBeenCalledTimes(3)
+ expect(put).toHaveBeenLastCalledWith(
+ '/api/option/passkey/domains',
+ {
+ rp_id: 'example.com',
+ legacy_rp_ids: '',
+ origins: defaults['passkey.origins'],
+ preview: false,
+ removal_confirmation: 'reviewed-domains',
+ },
+ expect.any(Object)
+ )
+ expect(
+ screen.getByRole('textbox', { name: 'Compatible Passkey domains' })
+ ).toHaveValue(window.location.hostname)
})
- it('warns before clearing an explicit domain back to automatic configuration', async () => {
- const put = vi.spyOn(api, 'put')
+ it('shows the server resolved default before clearing an explicit domain', async () => {
+ const put = vi.spyOn(api, 'put').mockResolvedValue(
+ domainResponse({
+ rp_id: '',
+ previous_rp_id: 'example.com',
+ effective_rp_id: window.location.hostname,
+ legacy_rp_ids: 'example.com',
+ })
+ )
const user = userEvent.setup()
render()
await user.clear(
- screen.getByRole('textbox', { name: 'Passkey website domain' })
+ screen.getByRole('textbox', { name: 'Primary Passkey domain' })
)
await user.click(screen.getByRole('button', { name: 'Save Changes' }))
- const dialog = screen.getByRole('alertdialog', {
+ const dialog = await screen.findByRole('alertdialog', {
name: 'Change the Passkey domain?',
})
expect(dialog).toHaveTextContent('Current domain: example.com')
- expect(dialog).toHaveTextContent(
- 'New domain: Automatic from system website address'
- )
- expect(put).not.toHaveBeenCalled()
+ expect(dialog).toHaveTextContent(`New domain: ${window.location.hostname}`)
+ expect(put).toHaveBeenCalledTimes(1)
+ expect(put.mock.calls[0]?.[1]).toMatchObject({ preview: true })
})
- it('still requires confirmation if the effective domain cannot be loaded', async () => {
+ it('uses the server preview when the public effective domain could not be loaded', async () => {
vi.mocked(api.get).mockRejectedValue(new Error('Offline'))
- const put = vi.spyOn(api, 'put')
+ const put = vi.spyOn(api, 'put').mockResolvedValue(domainResponse())
const user = userEvent.setup()
render()
await user.type(
- screen.getByRole('textbox', { name: 'Passkey website domain' }),
+ screen.getByRole('textbox', { name: 'Primary Passkey domain' }),
'example.com'
)
await user.click(screen.getByRole('button', { name: 'Save Changes' }))
- expect(
- screen.getByRole('alertdialog', { name: 'Change the Passkey domain?' })
- ).toHaveTextContent('Current domain: Unknown')
- expect(put).not.toHaveBeenCalled()
+ expect(await screen.findByRole('alertdialog')).toHaveTextContent(
+ `Current domain: ${window.location.hostname}`
+ )
+ expect(put).toHaveBeenCalledTimes(1)
+ expect(put.mock.calls[0]?.[1]).toMatchObject({ preview: true })
})
it('keeps a failed domain change available for retry without an unhandled rejection', async () => {
- const put = vi.spyOn(api, 'put').mockRejectedValueOnce(new Error('Offline'))
+ const errorToast = vi.spyOn(toast, 'error')
+ const put = vi
+ .spyOn(api, 'put')
+ .mockResolvedValueOnce(domainResponse())
+ .mockRejectedValueOnce(new Error('Offline'))
+ .mockResolvedValue(domainResponse())
const user = userEvent.setup()
render()
const input = screen.getByRole('textbox', {
- name: 'Passkey website domain',
+ name: 'Primary Passkey domain',
})
await user.clear(input)
await user.type(input, 'example.com')
await user.click(screen.getByRole('button', { name: 'Save Changes' }))
- await user.click(screen.getByRole('button', { name: 'Change domain' }))
- await waitFor(() => expect(put).toHaveBeenCalledTimes(1))
+ await user.click(
+ await screen.findByRole('button', { name: 'Change domain' })
+ )
+ await waitFor(() => expect(put).toHaveBeenCalledTimes(2))
+ await waitFor(() => expect(errorToast).toHaveBeenCalledTimes(1))
expect(screen.getByRole('alertdialog')).toBeInTheDocument()
await waitFor(() =>
expect(
screen.getByRole('button', { name: 'Change domain' })
).toBeEnabled()
)
- put.mockResolvedValue({ data: { success: true } })
await user.click(screen.getByRole('button', { name: 'Change domain' }))
await waitFor(() =>
expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
)
- expect(put).toHaveBeenCalledTimes(2)
+ expect(put).toHaveBeenCalledTimes(3)
+ })
+
+ it('requires a new confirmation when the affected credential count changes', async () => {
+ const errorToast = vi.spyOn(toast, 'error')
+ const first = domainResponse({
+ previous_rp_id: 'example.com',
+ legacy_rp_ids: '',
+ removed_rp_ids: ['www.example.com'],
+ affected_credentials: 1,
+ confirmation_required: true,
+ })
+ const updated = domainResponse({
+ ...first.data.data,
+ affected_credentials: 2,
+ removal_confirmation: 'updated-impact',
+ })
+ const put = vi
+ .spyOn(api, 'put')
+ .mockResolvedValueOnce(first)
+ .mockResolvedValueOnce({
+ data: {
+ ...updated.data,
+ success: false,
+ code: 'PASSKEY_RP_ID_REMOVAL_CONFIRMATION_REQUIRED',
+ message: 'Review the updated impact before confirming again.',
+ },
+ })
+ .mockResolvedValueOnce(updated)
+ const user = userEvent.setup()
+ render()
+ await user.clear(
+ screen.getByRole('textbox', { name: 'Compatible Passkey domains' })
+ )
+ await user.click(screen.getByRole('button', { name: 'Save Changes' }))
+ const dialog = await screen.findByRole('alertdialog', {
+ name: 'Remove compatible Passkey domains?',
+ })
+ expect(dialog).toHaveTextContent('Passkeys known to use removed domains: 1')
+ await user.click(
+ within(dialog).getByRole('button', { name: 'Remove domains' })
+ )
+ expect(
+ await within(dialog).findByText(
+ 'Passkeys known to use removed domains: 2'
+ )
+ ).toBeVisible()
+ expect(within(dialog).getByRole('alert')).toHaveTextContent(
+ 'Review the updated impact before confirming again.'
+ )
+ await waitFor(() =>
+ expect(
+ within(dialog).getByRole('button', { name: 'Remove domains' })
+ ).toBeEnabled()
+ )
+ await user.click(
+ within(dialog).getByRole('button', { name: 'Remove domains' })
+ )
+ await waitFor(() =>
+ expect(screen.queryByRole('alertdialog')).not.toBeInTheDocument()
+ )
+ expect(put).toHaveBeenCalledTimes(3)
+ expect(put.mock.calls[2]?.[1]).toMatchObject({
+ preview: false,
+ removal_confirmation: 'updated-impact',
+ })
+ expect(errorToast).not.toHaveBeenCalled()
})
})
diff --git a/web/src/features/system-settings/auth/index.tsx b/web/src/features/system-settings/auth/index.tsx
index 1144a1d84..eee4f7958 100644
--- a/web/src/features/system-settings/auth/index.tsx
+++ b/web/src/features/system-settings/auth/index.tsx
@@ -66,6 +66,7 @@ const defaultAuthSettings: AuthSettings = {
'passkey.enabled': false,
'passkey.rp_display_name': '',
'passkey.rp_id': '',
+ 'passkey.legacy_rp_ids': '',
'passkey.origins': '',
'passkey.allow_insecure_origin': false,
'passkey.user_verification': 'preferred',
diff --git a/web/src/features/system-settings/auth/passkey-section.tsx b/web/src/features/system-settings/auth/passkey-section.tsx
index 3c14ab9f1..452690037 100644
--- a/web/src/features/system-settings/auth/passkey-section.tsx
+++ b/web/src/features/system-settings/auth/passkey-section.tsx
@@ -18,7 +18,7 @@ For commercial licensing, please contact support@quantumnous.com
*/
import { zodResolver } from '@hookform/resolvers/zod'
import { useQuery } from '@tanstack/react-query'
-import { useEffect, useMemo, useRef, useState } from 'react'
+import { useEffect, useId, useMemo, useRef, useState } from 'react'
import { useForm, useWatch } from 'react-hook-form'
import { useTranslation } from 'react-i18next'
import { toast } from 'sonner'
@@ -26,6 +26,7 @@ import * as z from 'zod'
import { ConfirmDialog } from '@/components/confirm-dialog'
import { Dialog } from '@/components/dialog'
+import { Alert, AlertDescription } from '@/components/ui/alert'
import { Button } from '@/components/ui/button'
import {
Form,
@@ -51,13 +52,24 @@ import { statusQueryOptions } from '@/lib/status-query'
import { cn } from '@/lib/utils'
import {
+ SettingsControlGroup,
SettingsForm,
SettingsSwitchContent,
SettingsSwitchItem,
} from '../components/settings-form-layout'
import { SettingsPageFormActions } from '../components/settings-page-context'
import { SettingsSection } from '../components/settings-section'
-import { useUpdateOption } from '../hooks/use-update-option'
+import {
+ useUpdateOption,
+ useUpdatePasskeyDomains,
+} from '../hooks/use-update-option'
+import type { PasskeyDomainChange } from '../types'
+
+const passkeyDomainKeys = [
+ 'passkey.rp_id',
+ 'passkey.legacy_rp_ids',
+ 'passkey.origins',
+] as const
type AttachmentPreference = '' | 'platform' | 'cross-platform'
type AttachmentSelectValue = 'none' | 'platform' | 'cross-platform'
@@ -72,6 +84,7 @@ const passkeySchema = z.object({
enabled: z.boolean(),
rp_display_name: z.string(),
rp_id: z.string(),
+ legacy_rp_ids: z.string(),
origins: z.string(),
allow_insecure_origin: z.boolean(),
user_verification: z.enum(['required', 'preferred', 'discouraged']),
@@ -86,6 +99,7 @@ type FlatPasskeyDefaults = {
'passkey.enabled': boolean
'passkey.rp_display_name': string
'passkey.rp_id': string
+ 'passkey.legacy_rp_ids'?: string
'passkey.origins': string
'passkey.allow_insecure_origin': boolean
'passkey.user_verification': 'required' | 'preferred' | 'discouraged'
@@ -107,6 +121,11 @@ const buildFormDefaults = (
enabled: defaults['passkey.enabled'],
rp_display_name: defaults['passkey.rp_display_name'] ?? '',
rp_id: defaults['passkey.rp_id'] ?? '',
+ legacy_rp_ids: (defaults['passkey.legacy_rp_ids'] ?? '')
+ .split(',')
+ .map((id) => id.trim())
+ .filter(Boolean)
+ .join('\n'),
origins: (defaults['passkey.origins'] ?? '')
.split(',')
.map((origin) => origin.trim())
@@ -126,6 +145,14 @@ const normalizeFormValues = (
'passkey.enabled': values.passkey.enabled,
'passkey.rp_display_name': values.passkey.rp_display_name,
'passkey.rp_id': values.passkey.rp_id,
+ 'passkey.legacy_rp_ids': [
+ ...new Set(
+ values.passkey.legacy_rp_ids
+ .split(/[,\n]/)
+ .map((id) => id.trim())
+ .filter(Boolean)
+ ),
+ ].join(','),
'passkey.origins': values.passkey.origins
.split('\n')
.map((origin) => origin.trim())
@@ -144,10 +171,16 @@ interface PasskeySectionProps {
export function PasskeySection(props: PasskeySectionProps) {
const { t } = useTranslation()
+ const domainGroupTitleId = useId()
const updateOption = useUpdateOption()
+ const updateDomains = useUpdatePasskeyDomains()
+ const isSaving = updateOption.isPending || updateDomains.isPending
const [domainHelpOpen, setDomainHelpOpen] = useState(false)
- const [pendingDomainChange, setPendingDomainChange] =
- useState(null)
+ const [pendingDomainChange, setPendingDomainChange] = useState<{
+ values: FlatPasskeyDefaults
+ preview: PasskeyDomainChange
+ notice?: string
+ } | null>(null)
const formDefaults = useMemo(
() => buildFormDefaults(props.defaultValues),
@@ -205,54 +238,105 @@ export function PasskeySection(props: PasskeySectionProps) {
form.reset(buildFormDefaults(props.defaultValues))
}, [props.defaultValues, form])
- const saveSettings = async (normalized: FlatPasskeyDefaults) => {
+ const saveSettings = async (
+ normalized: FlatPasskeyDefaults,
+ preview?: PasskeyDomainChange
+ ) => {
const changedKeys = (
Object.keys(normalized) as Array
- ).filter((key) => normalized[key] !== baselineRef.current[key])
-
+ ).filter(
+ (key) => (normalized[key] ?? '') !== (baselineRef.current[key] ?? '')
+ )
if (changedKeys.length === 0) {
toast.info(t('No changes to save'))
return
}
-
+ const saved = { ...normalized }
try {
- for (const key of changedKeys) {
- await updateOption.mutateAsync({
- key,
- value: normalized[key],
+ if (passkeyDomainKeys.some((key) => changedKeys.includes(key))) {
+ const result = await updateDomains.mutateAsync({
+ rp_id: normalized['passkey.rp_id'],
+ legacy_rp_ids: normalized['passkey.legacy_rp_ids'] ?? '',
+ origins: normalized['passkey.origins'],
+ preview: false,
+ removal_confirmation: preview?.removal_confirmation,
})
+ if (!result.success) {
+ setPendingDomainChange({
+ values: normalized,
+ preview: result.data,
+ notice: result.message,
+ })
+ return
+ }
+ saved['passkey.rp_id'] = result.data.rp_id
+ saved['passkey.legacy_rp_ids'] = result.data.legacy_rp_ids
+ saved['passkey.origins'] = result.data.origins
+ baselineRef.current = {
+ ...baselineRef.current,
+ 'passkey.rp_id': saved['passkey.rp_id'],
+ 'passkey.legacy_rp_ids': saved['passkey.legacy_rp_ids'],
+ 'passkey.origins': saved['passkey.origins'],
+ }
+ }
+ for (const key of changedKeys) {
+ if (passkeyDomainKeys.some((domainKey) => domainKey === key)) continue
+ await updateOption.mutateAsync({ key, value: normalized[key] ?? '' })
}
} catch {
- // useUpdateOption reports the error. Keep the form and confirmation for retry.
+ // The mutation reports the error once. Keep the draft available for retry.
return
}
-
- baselineRef.current = normalized
- baselineSerializedRef.current = JSON.stringify(normalized)
- form.reset(buildFormDefaults(normalized))
+ baselineRef.current = saved
+ baselineSerializedRef.current = JSON.stringify(saved)
+ form.reset(buildFormDefaults(saved))
setPendingDomainChange(null)
}
const onSubmit = async (values: PasskeyFormValues) => {
const normalized = normalizeFormValues(values)
- const nextRPID = normalized['passkey.rp_id'].trim()
- const changesDomain =
- nextRPID !== baselineRef.current['passkey.rp_id'].trim() &&
- nextRPID !== existingRPID
- if (changesDomain) {
- setPendingDomainChange(normalized)
+ const changesDomains = passkeyDomainKeys.some(
+ (key) => (normalized[key] ?? '') !== (baselineRef.current[key] ?? '')
+ )
+ if (!changesDomains) {
+ await saveSettings(normalized)
return
}
- await saveSettings(normalized)
+ try {
+ const result = await updateDomains.mutateAsync({
+ rp_id: normalized['passkey.rp_id'],
+ legacy_rp_ids: normalized['passkey.legacy_rp_ids'] ?? '',
+ origins: normalized['passkey.origins'],
+ preview: true,
+ })
+ const preview = result.data
+ const clearsPrimary =
+ baselineRef.current['passkey.rp_id'].trim() !== '' &&
+ normalized['passkey.rp_id'].trim() === ''
+ if (
+ preview.previous_rp_id !== preview.effective_rp_id ||
+ clearsPrimary ||
+ preview.removed_rp_ids.length > 0 ||
+ preview.confirmation_required
+ ) {
+ setPendingDomainChange({ values: normalized, preview })
+ return
+ }
+ await saveSettings(normalized, preview)
+ } catch {
+ // Preview failures are reported by the mutation and never write settings.
+ }
}
+ const removedDomains = pendingDomainChange?.preview.removed_rp_ids ?? []
+
return (