Handle Login state properly

Author: spotta85

features/audit-scraping/audit-history-sync.ts

@@ -5,26 +5,27 @@ import {
 } from "@/lib/storage/audit-storage";
 import { sendRuntimeMessage } from "@/lib/browser/messages";
 import { parseAuditHistory } from "./audit-history-parser";
+import { checkLoginRequired } from "./audit-page-parser";
 
 const AUDIT_HISTORY_URL =
   "https://utdirect.utexas.edu/apps/degree/audits/submissions/history/";
 
-export async function isLoggedIn(): Promise<boolean> {
-  try {
-    const response = await fetch(AUDIT_HISTORY_URL, { credentials: "include" });
-    return response.ok && !response.redirected;
-  } catch {
-    return false;
-  }
-}
-
 export async function fetchAuditHistory(): Promise<AuditHistoryEntry[]> {
   const response = await fetch(AUDIT_HISTORY_URL, { credentials: "include" });
   if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
+  if (response.redirected) throw new Error("Not logged in to UT Direct");
 
-  return parseAuditHistory(
-    new DOMParser().parseFromString(await response.text(), "text/html"),
+  const document = new DOMParser().parseFromString(
+    await response.text(),
+    "text/html",
   );
+  if (checkLoginRequired(document)) {
+    throw new Error("Not logged in to UT Direct");
+  }
+  // A logged-in student who has never requested an audit gets a history page
+  if (!document.querySelector("table")) return [];
+
+  return parseAuditHistory(document);
 }
 
 async function fetchAndSaveAuditHistory(): Promise<AuditHistoryEntry[]> {

features/audit-scraping/background-controller.ts

@@ -11,6 +11,11 @@ import {
   closeScraperWindow,
   createScraperTab,
 } from "./scraper-window";
+import {
+  openLoginTab,
+  refreshLoginState,
+  registerSessionCookieWatcher,
+} from "./login-state";
 
 type ScrapeFailure = Extract<
   ExtensionMessage,
@@ -283,6 +288,13 @@ function registerAuditNavigationHandlers(): void {
 }
 
 async function runNewAudit(): Promise<boolean> {
+  if (!(await refreshLoginState())) {
+    // Session is gone — send the user to log in instead of clicking into a
+    // dead page from a hidden tab.
+    await openLoginTab();
+    throw new Error("Not logged in to UT Direct");
+  }
+
   const tabs = await browser.tabs.query({ url: "*://utdirect.utexas.edu/*" });
   const existingTab = tabs.find((tab) => tab.url?.startsWith(NEW_AUDIT_URL));
   if (existingTab?.id !== undefined) {
@@ -317,4 +329,5 @@ async function runNewAudit(): Promise<boolean> {
 export function registerAuditBackgroundController(): void {
   registerAuditNavigationHandlers();
   registerAuditScrapingHandlers();
+  registerSessionCookieWatcher();
 }

features/audit-scraping/content-controller.ts

@@ -4,8 +4,11 @@ import {
 } from "@/lib/browser/messages";
 import { checkLoginRequired, parseAuditPage } from "./audit-page-parser";
 import { startAuditHistorySync } from "./audit-history-sync";
+import { recordLoginStateFromPage } from "./login-state";
 
 export function startAuditContentController(document: Document): void {
+  recordLoginStateFromPage(document);
+
   if (/^\/apps\/degree\/audits\/?$/.test(document.location.pathname)) {
     void startAuditHistorySync(document);
   }

features/audit-scraping/login-state.ts

@@ -0,0 +1,95 @@
+import { storage } from "wxt/utils/storage";
+import { checkLoginRequired } from "./audit-page-parser";
+
+// Single owner of UT Direct login state: a cached value for instant UI, a
+// live probe for truth, and event-driven writers that keep the cache fresh.
+// Callers never touch the storage key, probe URL, or cookie details directly.
+
+const AUDIT_HOME_URL = "https://utdirect.utexas.edu/apps/degree/audits/";
+
+// Any authenticated UT Direct endpoint works as a probe; the history page is
+// lightweight and already part of the audit flow.
+const LOGIN_PROBE_URL =
+  "https://utdirect.utexas.edu/apps/degree/audits/submissions/history/";
+
+// UT Direct's degree-audit session cookie. Its removal is a definitive
+// logged-out signal; its appearance is only a hint (server-side expiry can
+// leave a dead cookie behind), so a set event triggers a verify instead.
+const SESSION_COOKIE = "sessionid-degree-audits-production";
+
+// Last-known login state. null = never determined (fresh install).
+// Kept in local: storage — login state is per-browser and must not sync.
+const createLoginStateItem = () =>
+  storage.defineItem<boolean | null>("local:utdLoggedIn", {
+    defaultValue: null,
+  });
+let loginStateItem: ReturnType<typeof createLoginStateItem> | undefined;
+
+function getLoginStateItem() {
+  // Avoid touching extension storage when consumers only import this module.
+  return (loginStateItem ??= createLoginStateItem());
+}
+
+function saveLoginState(loggedIn: boolean): Promise<void> {
+  return getLoginStateItem().setValue(loggedIn);
+}
+
+// Live network check. Logged out → UT SSO redirects the request to the login
+// page, so a followed redirect (or any failure) means no valid session.
+async function isLoggedIn(): Promise<boolean> {
+  try {
+    const response = await fetch(LOGIN_PROBE_URL, { credentials: "include" });
+    return response.ok && !response.redirected;
+  } catch {
+    return false;
+  }
+}
+
+// Instant, possibly-stale read for painting UI. Verify with
+// refreshLoginState() before actions that depend on being logged in.
+export function getCachedLoginState(): Promise<boolean | null> {
+  return getLoginStateItem().getValue();
+}
+
+export function watchLoginState(
+  listener: (loggedIn: boolean | null) => void,
+): () => void {
+  return getLoginStateItem().watch(listener);
+}
+
+// Definitive check that also updates the cache.
+export async function refreshLoginState(): Promise<boolean> {
+  const loggedIn = await isLoggedIn();
+  await saveLoginState(loggedIn);
+  return loggedIn;
+}
+
+// Content-script writer. A real UT Direct page is a definitive signal:
+// a login form in the DOM means the session is gone.
+export function recordLoginStateFromPage(document: Document): void {
+  void saveLoginState(!checkLoginRequired(document));
+}
+
+// Event-driven cache updates from the background service worker: react the
+// moment the session cookie is removed or (re)created, instead of waiting for
+// the next popup open. Requires the "cookies" permission.
+export function registerSessionCookieWatcher(): void {
+  if (!browser.cookies?.onChanged) return;
+
+  browser.cookies.onChanged.addListener(({ cookie, removed, cause }) => {
+    if (cookie.name !== SESSION_COOKIE) return;
+    if (removed) {
+      // "overwrite" removals are immediately followed by a set event for the
+      // replacement cookie — not a logout.
+      if (cause !== "overwrite") void saveLoginState(false);
+    } else {
+      void refreshLoginState();
+    }
+  });
+}
+
+// The one way to send a user to log in. The audit home doubles as the SSO
+// entry point and, after the redirect back, triggers the first history sync.
+export async function openLoginTab(): Promise<void> {
+  await browser.tabs.create({ url: AUDIT_HOME_URL, active: true });
+}

features/popup/popup-app.tsx

@@ -12,11 +12,14 @@ import React, { useCallback, useEffect, useState } from "react";
 import { browser } from "wxt/browser";
 import Button from "@/components/ui/button";
 import logo from "@/public/logo.png";
-import { isLoggedIn } from "@/features/audit-scraping/audit-history-sync";
+import {
+  getCachedLoginState,
+  openLoginTab,
+  refreshLoginState,
+  watchLoginState,
+} from "@/features/audit-scraping/login-state";
 import PopupAuditCard from "./popup-audit-card";
 
-const AUDIT_HOME_URL = "https://utdirect.utexas.edu/apps/degree/audits/";
-
 export default function App() {
   const [audits, setAudits] = useState<AuditHistoryEntry[]>([]);
   const [loading, setLoading] = useState(true);
@@ -46,8 +49,12 @@ export default function App() {
       .finally(() => setLoading(false));
   }, [applyAuditHistory]);
 
+  // chache login state.
   useEffect(() => {
-    void isLoggedIn().then(setLoggedIn);
+    void getCachedLoginState().then((cached) => {
+      setLoggedIn((current) => current ?? cached ?? false);
+    });
+    void refreshLoginState().then(setLoggedIn);
   }, []);
 
   useEffect(() => {
@@ -74,10 +81,16 @@ export default function App() {
       applyAuditHistory(data);
     });
 
+    // Follow login-state writes from other contexts (content script, background)
+    const unwatchLoginState = watchLoginState((value) => {
+      if (value !== null) setLoggedIn(value);
+    });
+
     browser.runtime.onMessage.addListener(listener);
     return () => {
       browser.runtime.onMessage.removeListener(listener);
       unwatchAuditHistory();
+      unwatchLoginState();
     };
   }, [applyAuditHistory]);
 
@@ -91,22 +104,29 @@ export default function App() {
   // Send message to background script to run audit (background has access to tabs/scripting APIs)
   const handleRerunAudit = async () => {
     setRunningAudit(true);
-    sendRuntimeMessage({ type: "RUN_NEW_AUDIT" });
+    const stillLoggedIn = await refreshLoginState();
+    setLoggedIn(stillLoggedIn);
+    if (!stillLoggedIn) {
+      setRunningAudit(false);
+      handleLogin();
+      return;
+    }
+    const response = await sendRuntimeMessage({ type: "RUN_NEW_AUDIT" });
+    // Background refuses when the session is dead (it opens the login page
+    // instead) — don't leave the spinner running.
+    if (response && !response.success) setRunningAudit(false);
   };
 
   const handleLogin = () => {
-    void browser.tabs.create({ url: AUDIT_HOME_URL, active: true });
+    void openLoginTab();
   };
 
   // Determine which audits to display
   const displayedAudits = showAll ? audits : audits.slice(0, 3);
   const hasMoreAudits = audits.length > 3;
-  const needsLogin = loggedIn === false && audits.length === 0;
-  // An authenticated empty history is a valid state, even if an older sync cached an error.
-  const hasAuthenticatedEmptyHistory = loggedIn === true && audits.length === 0;
-  // Only the empty state depends on auth (Login vs. empty); with cached audits we
-  // can render immediately. So wait for auth ONLY when there's nothing to show yet.
-  const resolvingLogin = loggedIn === null && audits.length === 0;
+  // Login button shows whenever we're not logged in, even with cached audits.
+  // null only lasts until the cache read resolves (milliseconds).
+  const needsLogin = loggedIn === false;
 
   return (
     <div className="w-[438px] h-full min-h-[300px] max-h-[600px] bg-background font-sans overflow-hidden flex flex-col border border-gray-100">
@@ -129,7 +149,7 @@ export default function App() {
             className="rounded-md"
             onClick={needsLogin ? handleLogin : handleRerunAudit}
           >
-            {resolvingLogin ? (
+            {loggedIn === null ? (
               <div className="flex items-center space-x-2">
                 <SpinnerIcon size={24} className="animate-spin-slow" />
               </div>
@@ -176,7 +196,7 @@ export default function App() {
           <div className="flex flex-col gap-2 items-center justify-center text-center mb-6 py-8">
             <p className="text-base text-dap-gray-light">Syncing...</p>
           </div>
-        ) : needsLogin ? (
+        ) : needsLogin && audits.length === 0 ? (
           <div className="flex flex-col gap-2 items-center justify-center text-center mb-6 py-8">
             <p className="text-base text-dap-gray-light tracking-[0.32px] max-w-[300px]">
               Log in to UT Direct, then visit the Degree Audit page to load your

tests/audit-scraping/content-controller.test.ts

@@ -6,12 +6,18 @@ let listener: ((message: ExtensionMessage) => void) | undefined;
 let parseShouldThrow = false;
 let syncCalls = 0;
 let sentMessages: ExtensionMessage[] = [];
+let recordedLoginPages = 0;
 
 mock.module("../../features/audit-scraping/audit-history-sync", () => ({
   startAuditHistorySync: async () => {
     syncCalls++;
   },
 }));
+mock.module("../../features/audit-scraping/login-state", () => ({
+  recordLoginStateFromPage: () => {
+    recordedLoginPages++;
+  },
+}));
 mock.module("../../features/audit-scraping/audit-page-parser", () => ({
   checkLoginRequired: () => false,
   parseAuditPage: () => {
@@ -47,6 +53,7 @@ beforeEach(() => {
   parseShouldThrow = false;
   sentMessages = [];
   syncCalls = 0;
+  recordedLoginPages = 0;
 });
 
 function createDocument(pathname: string, body = ""): Document {
@@ -58,6 +65,8 @@ function createDocument(pathname: string, body = ""): Document {
 test("only syncs audit history on the audit landing page", () => {
   startAuditContentController(createDocument("/apps/degree/audits/"));
   expect(syncCalls).toBe(1);
+  // every page load records the login state it sees in the DOM
+  expect(recordedLoginPages).toBe(1);
 
   startAuditContentController(
     createDocument("/apps/degree/audits/results/12345/"),

wxt.config.ts

@@ -52,7 +52,7 @@ export default defineConfig({
       "256": "icon/LHD Logo.png",
     },
 
-    permissions: ["storage", "tabs", "scripting", "windows"],
+    permissions: ["storage", "tabs", "scripting", "windows", "cookies"],
     host_permissions: ["https://utdirect.utexas.edu/*"],
     optional_host_permissions: [],
     optional_permissions: [],