Cleaner error message on aborted Passkey operations.

frontend/src/components/LoginView.vue

@@ -37,7 +37,7 @@ const handleLogin = async () => {
       location.reload()
     }
   } catch (error) {
-    authStore.showMessage(`Authentication failed: ${error.message}`, 'error')
+    authStore.showMessage(error.message, 'error')
   }
 }
 </script>

frontend/src/components/ProfileView.vue

@@ -124,7 +124,7 @@ const addNewCredential = async () => {
     authStore.showMessage('New passkey added successfully!', 'success', 3000)
   } catch (error) {
     console.error('Failed to add new passkey:', error)
-    authStore.showMessage(`Failed to add passkey: ${error.message}`, 'error')
+    authStore.showMessage(error.message, 'error')
   } finally {
     authStore.isLoading = false
   }

frontend/src/components/ResetView.vue

@@ -32,14 +32,9 @@ async function register() {
     await authStore.setSessionCookie(result.session_token)
 
     authStore.showMessage('Passkey registered successfully!', 'success', 2000)
-    authStore.currentView = 'profile'
+    authStore.loadUserInfo().then(authStore.selectView)
   } catch (error) {
-    console.error('Registration error:', error)
-    if (error.name === "NotAllowedError") {
-      authStore.showMessage('Registration cancelled', 'error')
-    } else {
-      authStore.showMessage(`Registration failed: ${error.message}`, 'error')
-    }
+    authStore.showMessage(`Registration failed: ${error.message}`, 'error')
   } finally {
     authStore.isLoading = false
   }

frontend/src/stores/auth.js

@@ -75,8 +75,8 @@ export const useAuthStore = defineStore('auth', {
       }
     },
     selectView() {
-      if (!store.userInfo) this.currentView = 'login'
-      else if (store.userInfo?.authenticated) this.currentView = 'profile'
+      if (!this.userInfo) this.currentView = 'login'
+      else if (this.userInfo.authenticated) this.currentView = 'profile'
       else this.currentView = 'reset'
     },
     async loadUserInfo() {

frontend/src/utils/passkey.js

@@ -4,13 +4,18 @@ import aWebSocket from '@/utils/awaitable-websocket'
 export async function register(url, options) {
   if (options) url += `?${new URLSearchParams(options).toString()}`
   const ws = await aWebSocket(url)
-
-  const optionsJSON = await ws.receive_json()
-  const registrationResponse = await startRegistration({ optionsJSON })
-  ws.send_json(registrationResponse)
-  const result = await ws.receive_json()
-  ws.close()
-  return result;
+  try {
+    const optionsJSON = await ws.receive_json()
+    const registrationResponse = await startRegistration({ optionsJSON })
+    ws.send_json(registrationResponse)
+    const result = await ws.receive_json()
+  } catch (error) {
+    console.error('Registration error:', error)
+     // Replace useless and ugly error message from startRegistration
+    throw Error(error.name === "NotAllowedError" ? 'Passkey registration cancelled' : error.message)
+  } finally {
+    ws.close()
+  }
 }
 
 export async function registerUser(user_name) {
@@ -26,11 +31,16 @@ export async function registerWithToken(token) {
 
 export async function authenticateUser() {
   const ws = await aWebSocket('/auth/ws/authenticate')
-
-  const optionsJSON = await ws.receive_json()
-  const authResponse = await startAuthentication({ optionsJSON })
-  ws.send_json(authResponse)
-  const result = await ws.receive_json()
-  ws.close()
-  return result
+  try {
+    const optionsJSON = await ws.receive_json()
+    const authResponse = await startAuthentication({ optionsJSON })
+    ws.send_json(authResponse)
+    const result = await ws.receive_json()
+    return result
+  } catch (error) {
+    console.error('Authentication error:', error)
+    throw Error(error.name === "NotAllowedError" ? 'Passkey authentication cancelled' : error.message)
+  } finally {
+    ws.close()
+  }
 }