Fix potential issue where users' access token gets expired and they lose ability to push their files. Also fix issue where some organization users might run into issues if they don't have the right permissions set.

Author: EzraBerendsen

apps/adr-manager/src/App.vue

@@ -1,5 +1,8 @@
 <template>
     <router-view />
+    <DialogReconnect />
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import DialogReconnect from "@/components/DialogReconnect.vue";
+</script>

apps/adr-manager/src/components/DialogCommit.vue

@@ -1,5 +1,5 @@
 <template>
-    <BaseDialog v-model="show" title="Commit &amp; Push" icon="publish" :width="700">
+    <BaseDialog v-model="show" title="Commit & Push" icon="publish" :width="700">
         <div class="step-head">
             <span class="mdi mdi-file" aria-hidden="true"></span>
             <span class="step-title">Select files</span>
@@ -73,7 +73,7 @@
                 :disabled="commitMessage === '' || !anyFileSelected"
                 @click="onCommit"
             >
-                Commit &amp; Push
+                Commit & Push
             </button>
             <button type="button" class="btn btn-text-error" @click="show = false">Cancel</button>
         </template>
@@ -88,7 +88,7 @@ import AutoGrowTextarea from "./AutoGrowTextarea.vue";
 import BaseDialog from "./BaseDialog.vue";
 import LoadingOverlay from "./LoadingOverlay.vue";
 import { pushSelectedFiles } from "@/composables/useCommitPush";
-import { getActiveProvider } from "@/plugins/git";
+import { describeGitError, getActiveProvider } from "@/plugins/git";
 import { store } from "@/plugins/store";
 import { useAlert } from "@/composables/useAlert";
 import { useToast } from "@/composables/useToast";
@@ -218,12 +218,7 @@ async function push(): Promise<void> {
         alert("Successfully pushed", "Success", "success");
     } catch (error) {
         console.error(error);
-        alert(
-            "Error during pushing. Your changes were not pushed. Please try again later. \nError code: " +
-                String(error),
-            "Error",
-            "error"
-        );
+        alert(`Your changes were not pushed. ${describeGitError(error)}`, "Error", "error");
     } finally {
         loading.value = false;
     }

apps/adr-manager/src/components/DialogReconnect.vue

@@ -0,0 +1,53 @@
+<template>
+    <BaseDialog
+        :model-value="reconnectVisible"
+        title="Session expired"
+        icon="key-alert"
+        :width="440"
+        @update:model-value="cancel"
+    >
+        <p>Your GitHub session expired. Reconnect to pick up where you left off.</p>
+        <template #actions>
+            <button type="button" class="btn btn-text-success" :disabled="connecting" @click="reconnect">
+                {{ connecting ? "Reconnecting…" : "Reconnect to GitHub" }}
+            </button>
+            <button type="button" class="btn btn-text-error" :disabled="connecting" @click="cancel">Cancel</button>
+        </template>
+    </BaseDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import BaseDialog from "./BaseDialog.vue";
+import { reconnectVisible, settleReauth } from "@/plugins/git/providers/github/reauth";
+import { prewarmGitHubAuth, signInWithGitHubPopup } from "@/plugins/git/providers/github/auth";
+import { useToast } from "@/composables/useToast";
+
+const { showErrorToast } = useToast();
+const connecting = ref(false);
+
+// Warm the Firebase modules while the dialog is up so the popup opens within the click gesture.
+watch(reconnectVisible, (visible) => {
+    if (visible) {
+        void prewarmGitHubAuth();
+    }
+});
+
+async function reconnect(): Promise<void> {
+    connecting.value = true;
+    try {
+        await signInWithGitHubPopup();
+        settleReauth(true);
+    } catch (error) {
+        console.error(error);
+        showErrorToast("Could not reconnect to GitHub. Please try again.");
+        settleReauth(false);
+    } finally {
+        connecting.value = false;
+    }
+}
+
+function cancel(): void {
+    settleReauth(false);
+}
+</script>

apps/adr-manager/src/plugins/git/errors.ts

@@ -11,9 +11,12 @@ export function describeGitError(error: unknown): string {
         }
         const status = error.response.status;
         if (status === 401) {
-            return "Your session has expired. Please sign out and sign in again.";
+            return "Your session has expired. Reconnect when prompted, or sign out and sign in again.";
         }
         if (status === 403) {
+            if (error.response.headers["x-github-sso"]) {
+                return "This organization requires SSO authorization for your GitHub token. Authorize it in your GitHub account settings, then retry.";
+            }
             return error.response.headers["x-ratelimit-remaining"] === "0"
                 ? "API rate limit reached. Please try again later."
                 : "You don't have permission to access this resource.";

apps/adr-manager/src/plugins/git/providers/github/api.ts

@@ -1,5 +1,8 @@
 import axios from "axios";
+import type { AxiosInstance, InternalAxiosRequestConfig } from "axios";
+import { lsGet } from "@/plugins/storage";
 import { request } from "../../request";
+import { requestReauth } from "./reauth";
 import type { Branch, CommitAuthor, RepoPage, RepoSummary, UserInfo } from "@/types/git";
 import type {
     GitHubBranch,
@@ -16,6 +19,39 @@ import type {
 const BASE_URL_USER = "https://api.github.com/user";
 const BASE_URL_REPO = "https://api.github.com/repos";
 
+let client: AxiosInstance | null = null;
+
+type RetriableConfig = InternalAxiosRequestConfig & { _retried?: boolean };
+
+/** Injects the stored token per request and, after a 401, prompts for a fresh one and retries once. */
+export function attachGitHubInterceptors(http: AxiosInstance): void {
+    http.interceptors.request.use((config) => {
+        const token = lsGet("authId");
+        if (token) {
+            config.headers.Authorization = `Bearer ${token}`;
+        }
+        return config;
+    });
+    http.interceptors.response.use(undefined, async (error: unknown) => {
+        if (axios.isAxiosError(error) && error.response?.status === 401 && error.config) {
+            const config = error.config as RetriableConfig;
+            if (!config._retried && (await requestReauth())) {
+                config._retried = true;
+                return http.request(config);
+            }
+        }
+        throw error;
+    });
+}
+
+function githubHttp(): AxiosInstance {
+    if (!client) {
+        client = axios.create();
+        attachGitHubInterceptors(client);
+    }
+    return client;
+}
+
 function toRepoSummary(repo: GitHubRepoSummary): RepoSummary {
     return {
         fullName: repo.full_name,
@@ -26,7 +62,7 @@ function toRepoSummary(repo: GitHubRepoSummary): RepoSummary {
 }
 
 export async function listRepositories(page: number, perPage: number): Promise<RepoPage> {
-    const response = await axios.get<GitHubRepoSummary[]>(
+    const response = await githubHttp().get<GitHubRepoSummary[]>(
         `${BASE_URL_USER}/repos?sort=updated&direction=desc&page=${page}&per_page=${perPage}`
     );
     return {
@@ -69,13 +105,13 @@ export async function searchRepositories(query: string, maxResults: number): Pro
 }
 
 export async function listBranches(repoFullName: string): Promise<Branch[]> {
-    const response = await axios.get<GitHubBranch[]>(`${BASE_URL_REPO}/${repoFullName}/branches?per_page=999`);
+    const response = await githubHttp().get<GitHubBranch[]>(`${BASE_URL_REPO}/${repoFullName}/branches?per_page=999`);
     return response.data;
 }
 
 export async function listFiles(repoFullName: string, branch: string): Promise<string[]> {
     try {
-        const response = await axios.get<GitHubFileTree>(
+        const response = await githubHttp().get<GitHubFileTree>(
             `${BASE_URL_REPO}/${repoFullName}/git/trees/${branch}?recursive=1`
         );
         return response.data.tree.filter((entry) => entry.type === "blob").map((entry) => entry.path);
@@ -90,7 +126,7 @@ export async function listFiles(repoFullName: string, branch: string): Promise<s
 
 export async function readFile(repoFullName: string, branch: string, filePath: string): Promise<string | undefined> {
     const content = await request(
-        axios.get<GitHubContent>(`${BASE_URL_REPO}/${repoFullName}/contents/${filePath}?ref=${branch}`)
+        githubHttp().get<GitHubContent>(`${BASE_URL_REPO}/${repoFullName}/contents/${filePath}?ref=${branch}`)
     );
     return content ? decodeUnicode(content.content) : undefined;
 }
@@ -106,23 +142,23 @@ function decodeUnicode(str: string): string {
 }
 
 export async function getUser(): Promise<UserInfo | undefined> {
-    const user = await request(axios.get<GitHubUser>(BASE_URL_USER));
+    const user = await request(githubHttp().get<GitHubUser>(BASE_URL_USER));
     if (!user) {
         return undefined;
     }
-    const emails = await request(axios.get<GitHubEmail[]>(`${BASE_URL_USER}/public_emails`));
+    const emails = await request(githubHttp().get<GitHubEmail[]>(`${BASE_URL_USER}/public_emails`));
     const publicEmail = (emails?.find((entry) => entry.primary) ?? emails?.[0])?.email;
     const email = publicEmail ?? user.email ?? `${user.id}+${user.login}@users.noreply.github.com`;
     return { username: user.login, displayName: user.name ?? user.login, email };
 }
 
 export async function getLastCommit(repoFullName: string, branch: string): Promise<GitHubBranch | undefined> {
-    return request(axios.get<GitHubBranch>(`${BASE_URL_REPO}/${repoFullName}/branches/${branch}`));
+    return request(githubHttp().get<GitHubBranch>(`${BASE_URL_REPO}/${repoFullName}/branches/${branch}`));
 }
 
 export async function createBlob(repoFullName: string, content: string): Promise<GitHubShaResponse | undefined> {
     return request(
-        axios.post<GitHubShaResponse>(`${BASE_URL_REPO}/${repoFullName}/git/blobs`, {
+        githubHttp().post<GitHubShaResponse>(`${BASE_URL_REPO}/${repoFullName}/git/blobs`, {
             content,
             encoding: "utf-8"
         })
@@ -135,7 +171,7 @@ export async function createTree(
     tree: GitHubTreeInput[]
 ): Promise<GitHubShaResponse | undefined> {
     return request(
-        axios.post<GitHubShaResponse>(`${BASE_URL_REPO}/${repoFullName}/git/trees`, {
+        githubHttp().post<GitHubShaResponse>(`${BASE_URL_REPO}/${repoFullName}/git/trees`, {
             base_tree: baseTreeSha,
             tree
         })
@@ -150,7 +186,7 @@ export async function createCommit(
     treeSha: string
 ): Promise<GitHubShaResponse | undefined> {
     return request(
-        axios.post<GitHubShaResponse>(`${BASE_URL_REPO}/${repoFullName}/git/commits`, {
+        githubHttp().post<GitHubShaResponse>(`${BASE_URL_REPO}/${repoFullName}/git/commits`, {
             message,
             author,
             parents: [parentSha],
@@ -165,7 +201,7 @@ export async function updateBranchRef(
     commitSha: string
 ): Promise<GitHubRef | undefined> {
     return request(
-        axios.post<GitHubRef>(`${BASE_URL_REPO}/${repoFullName}/git/refs/heads/${branch}`, {
+        githubHttp().post<GitHubRef>(`${BASE_URL_REPO}/${repoFullName}/git/refs/heads/${branch}`, {
             ref: "refs/heads/" + branch,
             sha: commitSha
         })

apps/adr-manager/src/plugins/git/providers/github/auth.ts

@@ -1,15 +1,16 @@
-import axios from "axios";
-import { lsGet, lsRemove, lsSet } from "@/plugins/storage";
+import { lsRemove, lsSet } from "@/plugins/storage";
 
 const OAUTH_SCOPES = "repo read:user gist workflow read:org";
 
+const loadFirebase = () => Promise.all([import("firebase/auth"), import("@/plugins/firebase/client")]);
+
 /**
  * Runs the Firebase GitHub popup flow and persists the resulting token.
  * Firebase is imported lazily so the GitLab path (and unit tests) never load it.
  */
 export async function signInWithGitHubPopup(): Promise<void> {
     const [{ signInWithPopup, GithubAuthProvider, getAdditionalUserInfo }, { auth, GithubProvider }] =
-        await Promise.all([import("firebase/auth"), import("@/plugins/firebase/client")]);
+        await loadFirebase();
     GithubProvider.addScope(OAUTH_SCOPES);
     const result = await signInWithPopup(auth, GithubProvider);
     const credential = GithubAuthProvider.credentialFromResult(result);
@@ -18,20 +19,16 @@ export async function signInWithGitHubPopup(): Promise<void> {
     }
     lsSet("authId", credential.accessToken);
     lsSet("user", getAdditionalUserInfo(result)?.username ?? "");
-    applyAuthHeader();
 }
 
-export function applyAuthHeader(): void {
-    const token = lsGet("authId");
-    if (token) {
-        axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
-    }
+/** Loads Firebase ahead of a popup so the window opens within the user's click gesture. */
+export function prewarmGitHubAuth(): Promise<unknown> {
+    return loadFirebase();
 }
 
 export async function clearSession(): Promise<void> {
     lsRemove("authId");
     lsRemove("user");
-    delete axios.defaults.headers.common["Authorization"];
-    const [{ signOut }, { auth }] = await Promise.all([import("firebase/auth"), import("@/plugins/firebase/client")]);
+    const [{ signOut }, { auth }] = await loadFirebase();
     await signOut(auth);
 }

apps/adr-manager/src/plugins/git/providers/github/index.ts

@@ -12,7 +12,7 @@ import {
     searchRepositories,
     updateBranchRef
 } from "./api";
-import { applyAuthHeader, clearSession, signInWithGitHubPopup } from "./auth";
+import { clearSession, signInWithGitHubPopup } from "./auth";
 import { encodeFilePath } from "../../paths";
 import type { GitProvider } from "../../provider";
 import type { GitHubTreeInput } from "./types";
@@ -42,7 +42,7 @@ export const githubProvider: GitProvider = {
     },
 
     restoreSession() {
-        applyAuthHeader();
+        // Tokens are injected per request by the auth interceptor; nothing to apply globally.
     },
 
     getUser,

apps/adr-manager/src/plugins/git/providers/github/reauth.ts

@@ -0,0 +1,24 @@
+import { ref } from "vue";
+
+export const reconnectVisible = ref(false);
+
+let pending: Promise<boolean> | null = null;
+let resolvePending: ((ok: boolean) => void) | null = null;
+
+/** Single-flight: concurrent 401s share one reconnect prompt. */
+export function requestReauth(): Promise<boolean> {
+    if (!pending) {
+        pending = new Promise<boolean>((resolve) => {
+            resolvePending = resolve;
+        });
+        reconnectVisible.value = true;
+    }
+    return pending;
+}
+
+export function settleReauth(ok: boolean): void {
+    reconnectVisible.value = false;
+    resolvePending?.(ok);
+    pending = null;
+    resolvePending = null;
+}

apps/adr-manager/tests/git-errors.test.ts

@@ -12,7 +12,9 @@ test("a network failure without response suggests checking the connection", () =
 });
 
 test("a 401 reads as an expired session", () => {
-    expect(describeGitError(axiosError(401))).toBe("Your session has expired. Please sign out and sign in again.");
+    expect(describeGitError(axiosError(401))).toBe(
+        "Your session has expired. Reconnect when prompted, or sign out and sign in again."
+    );
 });
 
 test("a 403 with exhausted rate limit reads as rate limiting", () => {
@@ -25,6 +27,12 @@ test("a plain 403 reads as missing permission", () => {
     expect(describeGitError(axiosError(403))).toBe("You don't have permission to access this resource.");
 });
 
+test("a 403 from organization SSO explains the authorization step", () => {
+    expect(describeGitError(axiosError(403, { "x-github-sso": "required; organizations=12345" }))).toBe(
+        "This organization requires SSO authorization for your GitHub token. Authorize it in your GitHub account settings, then retry."
+    );
+});
+
 test("a 404 mentions a deleted or renamed repository or branch", () => {
     expect(describeGitError(axiosError(404))).toBe(
         "Not found. The repository or branch may have been deleted or renamed."

apps/adr-manager/tests/github-list-repositories.test.ts

@@ -3,7 +3,14 @@ import { listRepositories } from "@/plugins/git/providers/github/api";
 
 vi.mock("axios", async (importOriginal) => {
     const actual = await importOriginal<typeof import("axios")>();
-    return { ...actual, default: { ...actual.default, get: vi.fn() } };
+    const get = vi.fn();
+    const instance = {
+        get,
+        post: vi.fn(),
+        request: vi.fn(),
+        interceptors: { request: { use: vi.fn() }, response: { use: vi.fn() } }
+    };
+    return { ...actual, default: { ...actual.default, get, create: () => instance } };
 });
 
 const get = vi.mocked(axios.get);