diff --git a/webapp/src/stores/authentication.ts b/webapp/src/stores/authentication.ts
index 677e512..59c7191 100644
--- a/webapp/src/stores/authentication.ts
+++ b/webapp/src/stores/authentication.ts
@@ -13,6 +13,7 @@ export const useAuthenticationStore = defineStore('authentication', () => {
 
   function logout() {
     // TODO: make a request to the server to log out the user
+    localStorage.removeItem('spartan-token'); // special for spartan auth
     isAuthenticated.value = false;
     localStorage.setItem('isAuthenticated', 'false');
   }
diff --git a/webapp/src/views/Password.vue b/webapp/src/views/Password.vue
index bf15818..3e3eeeb 100644
--- a/webapp/src/views/Password.vue
+++ b/webapp/src/views/Password.vue
@@ -3,6 +3,9 @@
     <main>
       Username and password form <br>
       <button class="bg-blue-400 pl-4 pr-4 pt-2 pb-2 cursor-pointer rounded-2xl" @click="login">Login</button>
+
+
+      <spartan-login ref="spartanLoginRef" start-mode="webauthn" domain="http://10.0.0.12:11000" locale="en" redirect="" styles=".login-frame button {background-color: #00f000;}"></spartan-login>
     </main>
   </div>
 </template>
@@ -10,9 +13,24 @@
 <script setup lang="ts">
 import { useAuthenticationStore } from '@/stores/authentication.ts'
 import { useRouter } from 'vue-router'
+import 'spartan-auth-widgets';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
 
+const spartanLoginRef = ref<HTMLElement|null>(null);
 const router = useRouter();
 
+onMounted(() => {
+  spartanLoginRef?.value?.addEventListener('spartan-login', spartanLoginHandler);
+});
+
+onBeforeUnmount(() => {
+  spartanLoginRef?.value?.removeEventListener('spartan-login', spartanLoginHandler);
+});
+
+function spartanLoginHandler() {
+  login();
+}
+
 function login() {
   const authenticationStore = useAuthenticationStore();
   authenticationStore.login();
diff --git a/webapp/vite.config.ts b/webapp/vite.config.ts
index e6e03b1..f666219 100644
--- a/webapp/vite.config.ts
+++ b/webapp/vite.config.ts
@@ -9,7 +9,13 @@ import tailwindcss from '@tailwindcss/vite'
 export default defineConfig({
   plugins: [
     tailwindcss(),
-    vue(),
+    vue({
+      template: {
+        compilerOptions: {
+          isCustomElement: (tag) => tag.startsWith('spartan-'),
+        },
+      },
+    }),
     vueDevTools(),
   ],
   resolve: {