fix reauthentication + modal closing with clerk

Author: PedroMiolaSilva

templates/vue/vue3-ai-chatbot-widget/src/App.vue

@@ -16,7 +16,8 @@
     isMaximizedByDefault: Boolean,
     previewText: String,
     footerDisclaimer: String,
-    authMode: String
+    authMode: String,
+    clerkPublicKey: String
   })
 
   const chatWidget = reactive({
@@ -29,7 +30,8 @@
     isMaximizedChat: props.isMaximizedByDefault,
     previewText: props.previewText,
     footerDisclaimer: props.footerDisclaimer,
-    authMode: props.authMode
+    authMode: props.authMode,
+    clerkPublicKey: props.clerkPublicKey
   })
 
   provide('chatWidget', chatWidget)

templates/vue/vue3-ai-chatbot-widget/src/components/layout-chat/index.vue

@@ -45,9 +45,9 @@
     leave-from-class="opacity-100"
     leave-to-class="opacity-0"
   >
-    <div v-if="showAuthOverlay && chatWidget.authMode === 'basic'" 
+    <div v-if="showAuthOverlay" 
          class="fixed inset-0 z-[60] bg-black/50 flex items-center justify-center">
-      <BasicAuthWindow :onSubmit="handleAuthSubmit" />
+      <BasicAuthWindow :onSubmit="handleBasicAuthSubmit" />
     </div>
   </Transition>
 </template>
@@ -68,16 +68,18 @@
   defineOptions({ name: 'layout-chat' })
 
   const { messages, sendMessage, cancelMessage, resetChat, isProcessingRequest, sendFeedback, copilot } =
-    useAzionCopilot({ server: chatWidget.serverUrl })
+    useAzionCopilot({ server: chatWidget.serverUrl, authMode: chatWidget.authMode })
 
-  copilot.on(CONSTANTS.EVENTS.AUTH_REQUIRED, () => {
-    console.log(chatWidget)
+  copilot.on(CONSTANTS.EVENTS.AUTH_REQUIRED, async () => {
     if (chatWidget.authMode === 'basic') {
       showAuthOverlay.value = true
+    } else if (chatWidget.authMode === 'clerk') {
+      await handleClerkAuth()
     }
   })
 
-  const handleAuthSubmit = async (password) => {
+  const handleBasicAuthSubmit = async (password) => {
+
     const authService = new AuthService({
       authMode: 'basic',
       copilotBackend: chatWidget.serverUrl.url
@@ -90,6 +92,19 @@
     }
   }
 
+  const handleClerkAuth = async () => {
+    const authService = new AuthService({
+      authMode: 'clerk',
+      copilotBackend: chatWidget.serverUrl.url,
+      clerkPublicKey: chatWidget.clerkPublicKey
+    })
+    
+    const user = await authService.clerkSignIn()
+    if (user) {
+      showAuthOverlay.value = false
+    }
+  }
+
   const closeChat = () => {
     chatWidget.isClosing = true
   }
@@ -108,4 +123,4 @@
       : 'w-[500px] h-[700px] bottom-[80px] rounded-lg shadow-lg right-5',
     chatWidget.isClosing ? 'translate-x-full opacity-0 scale-95' : ''
   ])
-</script>
+</script>

templates/vue/vue3-ai-chatbot-widget/src/core/azion-copilot.js

@@ -7,6 +7,7 @@ export class AzionCopilot {
     this.sessionId = crypto.randomUUID()
     this.events = new EventEmitter()
     this.authToken = null
+    this.authMode = config.authMode
 
     this.serverConfig = {
       ...CONSTANTS.SERVER.DEFAULT,
@@ -168,13 +169,15 @@ export class AzionCopilot {
         'Content-Type': 'application/json',
       }
 
-      if (this.authToken) {
+      const shouldIncludeCredentials = this.authMode === 'clerk' || this.authMode === 'basic'
+
+      if (this.authToken && this.authMode === 'basic') {
         headers['Authorization'] = `Bearer ${this.authToken}`
       }
 
       const response = await fetch(`${this.serverConfig.url}${this.serverConfig.conversation}`, {
         method: 'POST',
-        credentials: this.authToken ? 'include' : 'omit',
+        credentials: shouldIncludeCredentials ? 'include' : 'omit',
         headers,
         body: JSON.stringify({
           messages: messageQueue,
@@ -276,13 +279,15 @@ export class AzionCopilot {
         'Content-Type': 'application/json',
       }
 
-      if (this.authToken) {
+      const shouldIncludeCredentials = this.authMode === 'clerk' || this.authMode === 'basic'
+
+      if (this.authToken && this.authMode === 'basic') {
         headers['Authorization'] = `Bearer ${this.authToken}`
       }
 
       const response = await fetch(`${this.serverConfig.url}${this.serverConfig.feedback}`, {
         method: 'POST',
-        credentials: this.authToken ? 'include' : 'omit',        
+        credentials: shouldIncludeCredentials ? 'include' : 'omit',
         headers,
         body: JSON.stringify(feedbackData)
       })
@@ -365,4 +370,4 @@ export class AzionCopilot {
   setAuthToken(token) {
     this.authToken = token
   }
-}
+}

templates/vue/vue3-ai-chatbot-widget/src/services/auth.js

@@ -28,34 +28,42 @@ export class AuthService {
     }
 
     async clerkSignIn() {
-        
         const clerk = new Clerk(this.clerkPublicKey)
         await clerk.load()
 
         if (!clerk.user) {
-          clerk.openSignIn({
-            appearance: {
-              socialButtonsVariant: "iconButton",
-              elements: {
-                card: {
-                  boxShadow: 'none',
-                },
-                modalCloseButton: {
-                  display: 'none'
-                },
-                footerAction: {
-                  display: 'none'
-                },
-              }
-            },
-          })
-        
-          await new Promise(resolve => {
-            clerk.addListener(({ user }) => {
-              if (user) resolve()
+            return new Promise((resolve) => {
+                const openSignIn = () => clerk.openSignIn()
+                openSignIn()
+                
+                // Create mutation observer to watch for modal removal
+                const observer = new MutationObserver((mutations) => {
+                    for (const mutation of mutations) {
+                        if (mutation.removedNodes.length > 0) {
+                            const modalRemoved = Array.from(mutation.removedNodes)
+                                .some(node => node.classList?.contains('cl-modalBackdrop'))
+                        
+                            if (modalRemoved && !clerk.user) {
+                                setTimeout(() => {openSignIn()}, 1)
+                            }
+                        }
+                    }
+                })
+
+                observer.observe(document.body, { 
+                    childList: true,
+                    subtree: true 
+                })
+
+                clerk.addListener(({ user }) => {
+                    if (user) {
+                        observer.disconnect()
+                        resolve(user)
+                    }
+                })
             })
-          })
         }
+
         return clerk.user
     }