feat: implement logout functionality to clear client-side and HttpOnly cookies, and add API endpoint for server-side cookie management

Author: eduardoformiga

packages/core/src/components/account/MyAccountDrawer/OrganizationDrawer/OrganizationDrawer.tsx

@@ -13,11 +13,128 @@ type OrganizationDrawerProps = {
   isRepresentative: boolean
 }
 
-export const doLogout = () => {
+const clearBrowserStorageForCurrentDomain = async () => {
+  if (typeof window === 'undefined' || !storeConfig) return
+
+  // Clear Faststore-specific sessionStorage keys
+  try {
+    const sessionStorageKeys = [
+      'faststore_session_ready',
+      'faststore_auth_cookie_value',
+      'faststore_cache_bust_last_value',
+    ]
+
+    for (const key of sessionStorageKeys) {
+      try {
+        window.sessionStorage?.removeItem(key)
+      } catch {}
+    }
+
+    // Remove all keys starting with __fs_gallery_page_ (used for PLP pagination)
+    try {
+      const keysToRemove: string[] = []
+      for (let i = 0; i < window.sessionStorage.length; i++) {
+        const key = window.sessionStorage.key(i)
+        if (key && key.startsWith('__fs_gallery_page_')) {
+          keysToRemove.push(key)
+        }
+      }
+      for (const key of keysToRemove) {
+        try {
+          window.sessionStorage.removeItem(key)
+        } catch {}
+      }
+    } catch {}
+  } catch {}
+
+  // Clear all cookies containing 'vtex' in the name (case-insensitive)
+  try {
+    const hostname = window.location.hostname
+    const secure = window.location.protocol === 'https:'
+
+    // Extract all cookie names from document.cookie
+    const allCookieNames = document.cookie
+      .split(';')
+      .map((c) => c.trim())
+      .filter(Boolean)
+      .map((c) => c.split('=')[0])
+      .filter(Boolean)
+
+    // Filter cookies that contain 'vtex' (case-insensitive)
+    const vtexCookieNames = allCookieNames.filter((name) =>
+      name.toLowerCase().includes('vtex')
+    )
+
+    const pathname = window.location.pathname || '/'
+    const pathParts = pathname.split('/').filter(Boolean)
+    const paths: string[] = ['/']
+
+    let current = ''
+    for (const part of pathParts) {
+      current += `/${part}`
+      if (!paths.includes(current)) paths.push(current)
+    }
+
+    const domains: Array<string | undefined> = [
+      undefined, // host-only cookie
+      hostname,
+      hostname.startsWith('.') ? hostname : `.${hostname}`,
+    ]
+
+    const expire = (name: string, path: string, domain?: string) => {
+      const domainAttr = domain ? `; domain=${domain}` : ''
+      const secureAttr = secure ? '; secure' : ''
+      document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; max-age=0; path=${path}${domainAttr}; samesite=lax${secureAttr}`
+    }
+
+    for (const name of vtexCookieNames) {
+      for (const path of paths) {
+        for (const domain of domains) {
+          try {
+            expire(name, path, domain)
+          } catch {}
+        }
+      }
+    }
+  } catch {}
+
+  // Clear IndexedDB (keyval-store)
+  try {
+    if (!('indexedDB' in window)) return
+
+    const idb = window.indexedDB
+    if (!idb) return
+
+    await new Promise<void>((resolve) => {
+      const req = idb.deleteDatabase('keyval-store')
+      req.onsuccess = () => resolve()
+      req.onerror = () => resolve()
+      req.onblocked = () => resolve()
+    })
+  } catch {}
+}
+
+export const doLogout = async (_event?: unknown) => {
   if (!storeConfig) return
-  window.location.assign(
-    `${storeConfig.secureSubdomain}/api/vtexid/pub/logout?scope=${storeConfig.api.storeId}&returnUrl=${storeConfig.storeUrl}`
-  )
+
+  try {
+    // Clear HttpOnly cookies via API endpoint (server-side)
+    try {
+      await fetch('/api/logout', {
+        method: 'POST',
+        credentials: 'include',
+      })
+    } catch {
+      // Continue even if API call fails
+    }
+
+    // Clear client-side storage (sessionStorage, localStorage, IndexedDB, non-HttpOnly cookies)
+    await clearBrowserStorageForCurrentDomain()
+  } finally {
+    window.location.assign(
+      `${storeConfig.secureSubdomain}/api/vtexid/pub/logout?scope=${storeConfig.api.storeId}&returnUrl=${storeConfig.storeUrl}`
+    )
+  }
 }
 
 export const OrganizationDrawer = ({

packages/core/src/pages/api/logout.ts

@@ -0,0 +1,67 @@
+import { parse } from 'cookie'
+import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
+
+import discoveryConfig from 'discovery.config'
+
+const ADDITIONAL_COOKIES = ['CheckoutOrderFormOwnership'] as const
+
+/**
+ * Clears all cookies containing 'vtex' in the name (case-insensitive) + ADDITIONAL_COOKIES
+ * This endpoint handles HttpOnly cookies that cannot be cleared via JavaScript
+ */
+const handler: NextApiHandler = async (
+  request: NextApiRequest,
+  response: NextApiResponse
+) => {
+  if (request.method !== 'POST') {
+    response.status(405).end()
+    return
+  }
+
+  try {
+    const hostname = request.headers.host?.split(':')[0] ?? ''
+    const cookies = parse(request.headers.cookie ?? '')
+    const domains = [undefined, hostname, `.${hostname}`]
+    const clearedCookies: string[] = []
+
+    const vtexCookieNames = Object.keys(cookies).filter((name) =>
+      name.toLowerCase().includes('vtex')
+    )
+
+    // Clear vid_rt cookie with specific path (only if refreshToken is enabled)
+    if (discoveryConfig.experimental?.refreshToken && cookies.vid_rt) {
+      for (const domain of domains) {
+        const domainAttr = domain ? `; domain=${domain}` : ''
+        const clearedCookie = `vid_rt=; expires=Thu, 01 Jan 1970 00:00:00 GMT; max-age=0; path=/api/vtexid/refreshtoken/webstore${domainAttr}; samesite=lax; httponly`
+        clearedCookies.push(clearedCookie)
+      }
+    }
+
+    // Clear other cookies with path /
+    const otherCookieNames = [
+      ...vtexCookieNames,
+      ...ADDITIONAL_COOKIES.filter((name) => cookies[name]),
+    ]
+
+    for (const cookieName of otherCookieNames) {
+      for (const domain of domains) {
+        const domainAttr = domain ? `; domain=${domain}` : ''
+        const clearedCookie = `${cookieName}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; max-age=0; path=/${domainAttr}; samesite=lax; httponly`
+        clearedCookies.push(clearedCookie)
+      }
+    }
+
+    if (clearedCookies.length > 0) {
+      response.setHeader('set-cookie', clearedCookies)
+    }
+
+    response.status(200).json({ success: true })
+  } catch (error) {
+    console.error('Error clearing cookies:', error)
+    response
+      .status(500)
+      .json({ success: false, error: 'Failed to clear cookies' })
+  }
+}
+
+export default handler