fix: pass credential request options as a prop

To prevent a DataCloneError caused by Pinia's reactive Proxy.

Assisted-by: ClaudeCode:claude-sonnet-5
Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>

Author: kesselb

src/components/Challenge.vue

@@ -49,8 +49,6 @@
 import { NcButton } from '@nextcloud/vue'
 import { browserSupportsWebAuthn, startAuthentication } from '@simplewebauthn/browser'
 import logger from '../logger.js'
-import { mapState } from 'pinia'
-import { useMainStore } from '../store.js'
 
 export default {
 	name: 'Challenge',
@@ -59,6 +57,13 @@ export default {
 		NcButton,
 	},
 
+	props: {
+		credentialRequestOptions: {
+			type: Object,
+			required: true,
+		},
+	},
+
 	data() {
 		return {
 			challenge: '',
@@ -67,7 +72,6 @@ export default {
 	},
 
 	computed: {
-		...mapState(useMainStore, ['credentialRequestOptions']),
 		httpWarning() {
 			return document.location.protocol !== 'https:'
 		},

src/main-challenge.js

@@ -4,21 +4,12 @@
  */
 
 import { createApp } from 'vue'
-import { createPinia } from 'pinia'
 import Nextcloud from './mixins/Nextcloud.js'
 import Challenge from './components/Challenge.vue'
 import { loadState } from '@nextcloud/initial-state'
-import { useMainStore } from './store.js'
-
-const pinia = createPinia()
 
 const credentialRequestOptions = loadState('twofactor_webauthn', 'credential-request-options')
-const mainStore = useMainStore(pinia)
-mainStore.$patch({
-	credentialRequestOptions,
-})
 
-const app = createApp(Challenge)
+const app = createApp(Challenge, { credentialRequestOptions })
 app.mixin(Nextcloud)
-app.use(pinia)
 app.mount('#twofactor-webauthn-challenge')

src/store.js

@@ -8,7 +8,6 @@ import * as RegistrationService from './services/RegistrationService.js'
 
 export const useMainStore = defineStore('main', {
 	state: () => ({
-		credentialRequestOptions: {},
 		devices: [],
 	}),
 	actions: {

src/tests/unit/components/Challenge.spec.js

@@ -0,0 +1,27 @@
+/**
+ * SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { shallowMount } from '@vue/test-utils'
+import Nextcloud from '../../../mixins/Nextcloud.js'
+import Challenge from '../../../components/Challenge.vue'
+
+describe('Challenge', () => {
+	it('receives credentialRequestOptions as a prop', () => {
+		const credentialRequestOptions = {
+			allowCredentials: [{ id: 'abc', transports: ['usb'] }],
+		}
+
+		const challenge = shallowMount(Challenge, {
+			global: {
+				mixins: [Nextcloud],
+			},
+			props: {
+				credentialRequestOptions,
+			},
+		})
+
+		expect(challenge.vm.credentialRequestOptions).to.deep.equal(credentialRequestOptions)
+	})
+})