feat(extension): Auto Logout when token is invalidated, Account Section (#438)

## Changes:

- Added token validation logic that checks if the current auth token is still valid
- Implemented automatic logout when token is invalidated with appropriate user feedback
- Added an Account section in the popup that displays the user's email
- Improved error toast messages with clearer formatting and helper text

![image.png](https://app.graphite.dev/user-attachments/assets/b751f6a4-1a33-42d1-88dd-61aff55dd1c7.png)![image.png](https://app.graphite.dev/user-attachments/assets/202f69f9-c853-4801-850e-ee6d115e300c.png)

3 files changed, 84 insertions, 9 deletions

diff --git a/apps/browser-extension/utils/api.ts b/apps/browser-extension/utils/api.ts
index 2a4c838b..d98b39f5 100644
--- a/apps/browser-extension/utils/api.ts
+++ b/apps/browser-extension/utils/api.ts
@@ -100,6 +100,35 @@ export async function setDefaultProject(project: Project): Promise<void> {
 }
 
 /**
+ * Validate if current bearer token is still valid
+ */
+export async function validateAuthToken(): Promise<boolean> {
+	try {
+		await makeAuthenticatedRequest<ProjectsResponse>("/v3/projects")
+		return true
+	} catch (error) {
+		if (error instanceof AuthenticationError) {
+			return false
+		}
+		console.error("Failed to validate auth token:", error)
+		return true
+	}
+}
+
+/**
+ * Get user data from storage
+ */
+export async function getUserData(): Promise<{ email?: string } | null> {
+	try {
+		const result = await chrome.storage.local.get([STORAGE_KEYS.USER_DATA])
+		return result[STORAGE_KEYS.USER_DATA] || null
+	} catch (error) {
+		console.error("Failed to get user data:", error)
+		return null
+	}
+}
+
+/**
  * Save memory to Supermemory API
  */
 export async function saveMemory(payload: MemoryPayload): Promise<unknown> {
diff --git a/apps/browser-extension/utils/query-hooks.ts b/apps/browser-extension/utils/query-hooks.ts
index 721a68ad..5c7cfc21 100644
--- a/apps/browser-extension/utils/query-hooks.ts
+++ b/apps/browser-extension/utils/query-hooks.ts
@@ -5,6 +5,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query"
 import {
 	fetchProjects,
 	getDefaultProject,
+	getUserData,
 	saveMemory,
 	searchMemories,
 	setDefaultProject,
@@ -15,6 +16,7 @@ import type { MemoryPayload } from "./types"
 export const queryKeys = {
 	projects: ["projects"] as const,
 	defaultProject: ["defaultProject"] as const,
+	userData: ["userData"] as const,
 }
 
 // Projects Query
@@ -37,6 +39,16 @@ export function useDefaultProject(options?: { enabled?: boolean }) {
 	})
 }
 
+// User Data Query
+export function useUserData(options?: { enabled?: boolean }) {
+	return useQuery({
+		queryKey: queryKeys.userData,
+		queryFn: getUserData,
+		staleTime: 5 * 60 * 1000, // 5 minutes
+		enabled: options?.enabled ?? true,
+	})
+}
+
 // Set Default Project Mutation
 export function useSetDefaultProject() {
 	const queryClient = useQueryClient()
diff --git a/apps/browser-extension/utils/ui-components.ts b/apps/browser-extension/utils/ui-components.ts
index 8a56ea5a..dabe4974 100644
--- a/apps/browser-extension/utils/ui-components.ts
+++ b/apps/browser-extension/utils/ui-components.ts
@@ -94,8 +94,8 @@ export function createToast(state: ToastState): HTMLElement {
 	const icon = document.createElement("div")
 	icon.style.cssText = "width: 20px; height: 20px; flex-shrink: 0;"
 
-	const text = document.createElement("span")
-	text.style.fontWeight = "500"
+	let textElement: HTMLElement = document.createElement("span")
+	textElement.style.fontWeight = "500"
 
 	// Configure toast based on state
 	switch (state) {
@@ -113,17 +113,17 @@ export function createToast(state: ToastState): HTMLElement {
         </svg>
       `
 			icon.style.animation = "spin 1s linear infinite"
-			text.textContent = "Adding to Memory..."
+			textElement.textContent = "Adding to Memory..."
 			break
 
 		case "success": {
 			const iconUrl = browser.runtime.getURL("/icon-16.png")
 			icon.innerHTML = `<img src="${iconUrl}" width="20" height="20" alt="Success" style="border-radius: 2px;" />`
-			text.textContent = "Added to Memory"
+			textElement.textContent = "Added to Memory"
 			break
 		}
 
-		case "error":
+		case "error": {
 			icon.innerHTML = `
         <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
           <circle cx="12" cy="12" r="10" fill="#ef4444"/>
@@ -131,12 +131,29 @@ export function createToast(state: ToastState): HTMLElement {
           <path d="M9 9L15 15" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
         </svg>
       `
-			text.textContent = "Failed to save memory / Make sure you are logged in"
+			const textContainer = document.createElement("div")
+			textContainer.style.cssText =
+				"display: flex; flex-direction: column; gap: 2px;"
+
+			const mainText = document.createElement("span")
+			mainText.style.cssText = "font-weight: 500; line-height: 1.2;"
+			mainText.textContent = "Failed to save memory"
+
+			const helperText = document.createElement("span")
+			helperText.style.cssText =
+				"font-size: 12px; color: #6b7280; font-weight: 400; line-height: 1.2;"
+			helperText.textContent = "Make sure you are logged in"
+
+			textContainer.appendChild(mainText)
+			textContainer.appendChild(helperText)
+
+			textElement = textContainer
 			break
+		}
 	}
 
 	toast.appendChild(icon)
-	toast.appendChild(text)
+	toast.appendChild(textElement)
 
 	return toast
 }
@@ -433,8 +450,25 @@ export const DOMUtils = {
 						</svg>
 					`
 					icon.style.animation = ""
-					text.textContent =
-						"Failed to save memory / Make sure you are logged in"
+
+					const textContainer = document.createElement("div")
+					textContainer.style.cssText =
+						"display: flex; flex-direction: column; gap: 2px;"
+
+					const mainText = document.createElement("span")
+					mainText.style.cssText = "font-weight: 500; line-height: 1.2;"
+					mainText.textContent = "Failed to save memory"
+
+					const helperText = document.createElement("span")
+					helperText.style.cssText =
+						"font-size: 12px; color: #6b7280; font-weight: 400; line-height: 1.2;"
+					helperText.textContent = "Make sure you are logged in"
+
+					textContainer.appendChild(mainText)
+					textContainer.appendChild(helperText)
+
+					text.innerHTML = ""
+					text.appendChild(textContainer)
 				}
 
 				// Auto-dismiss