fix(auth): polish OIDC integration

- Let the SPA shell (HTML/JS/CSS, /search, /view/<id>, /auth/callback)
  load without an auth challenge when OIDC is enabled, so the SPA can
  run the redirect itself. API and direct .html/.txt previews stay
  gated.
- Suppress WWW-Authenticate: Basic on 401s when OIDC is on, so the
  browser's native Basic dialog doesn't pop up on a SPA-side 401.
  Basic Auth still works for clients that send the header proactively.
- Add the IdP origin to connect-src in the CSP so the SPA can reach
  the discovery / JWKS / token endpoints.
- Drop the duplicate Basic Auth check in websockets.ServeWs — auth is
  the middleware's job, and the duplicate broke browser WS upgrades
  (browsers can't send Authorization on WS handshakes).
- Move the SPA-side OIDC config to a cached Promise so callers race-
  free await the same init. AuthCallbackView does a hard navigation
  after exchange so the router guard sees the freshly stored user.
- Store tokens in localStorage so a new tab inherits the session.
- Move the logout button next to "About Mailpit" and show the signed-
  in user's name beside it.

Author: pgbezerra

config/config.go

@@ -6,6 +6,7 @@ import (
 	"errors"
 	"fmt"
 	"net"
+	"net/url"
 	"os"
 	"path"
 	"path/filepath"
@@ -301,9 +302,18 @@ func VerifyConfig() error {
 	// The default Content Security Policy is updates on every application page load to replace script-src 'self'
 	// with a random nonce ID to prevent XSS. This applies to the Mailpit app & API.
 	// See server.middleWareFunc()
+	connectSrc := "'self' ws: wss:"
+	// When OIDC is enabled the SPA must be allowed to fetch the IdP's
+	// discovery doc / JWKS / token endpoint. Add the issuer's origin
+	// to connect-src.
+	if UIOIDCIssuer != "" {
+		if u, err := url.Parse(UIOIDCIssuer); err == nil && u.Scheme != "" && u.Host != "" {
+			connectSrc += " " + u.Scheme + "://" + u.Host
+		}
+	}
 	ContentSecurityPolicy = fmt.Sprintf(
-		"default-src 'self'; script-src 'self'; style-src %s 'unsafe-inline'; frame-src 'self'; img-src * data: blob:; font-src %s data:; media-src 'self'; connect-src 'self' ws: wss:; object-src 'none'; base-uri 'self';",
-		cssFontRestriction, cssFontRestriction,
+		"default-src 'self'; script-src 'self'; style-src %s 'unsafe-inline'; frame-src 'self'; img-src * data: blob:; font-src %s data:; media-src 'self'; connect-src %s; object-src 'none'; base-uri 'self';",
+		cssFontRestriction, cssFontRestriction, connectSrc,
 	)
 
 	if Database != "" && isDir(Database) {

server/server.go

@@ -92,6 +92,8 @@ func Listen() {
 	r.HandleFunc("GET "+config.Webroot+"view/", middleWareFunc(viewHandler))
 
 	r.Handle("GET "+config.Webroot+"search", middleWareFunc(index))
+	// OIDC callback — served by the SPA (Vue Router handles the code+state).
+	r.Handle("GET "+config.Webroot+"auth/callback", middleWareFunc(index))
 	// Exact-match the webroot; stdlib "/" is always a subtree so we guard inside.
 	r.HandleFunc("GET "+config.Webroot, func(w http.ResponseWriter, r *http.Request) {
 		if r.URL.Path != config.Webroot {
@@ -228,6 +230,15 @@ func checkUIAuth(r *http.Request) bool {
 	if auth.UICredentials == nil && auth.OIDCVerifier == nil {
 		return true
 	}
+	// When OIDC is configured, the SPA shell (HTML + JS/CSS + SPA-served
+	// routes) must boot without an auth challenge so it can run the OIDC
+	// redirect itself. Otherwise the browser's native Basic Auth dialog
+	// would fire on first navigation and the SPA would never get a chance
+	// to redirect to the IdP. The API and direct message-preview routes
+	// remain gated.
+	if auth.OIDCVerifier != nil && isSPAShellRequest(r) {
+		return true
+	}
 	if auth.OIDCVerifier != nil {
 		authz := r.Header.Get("Authorization")
 		raw := strings.TrimPrefix(authz, "Bearer ")
@@ -247,15 +258,56 @@ func checkUIAuth(r *http.Request) bool {
 	return false
 }
 
+// isSPAShellRequest reports whether the request targets the SPA shell —
+// the HTML page, its bundled JS/CSS, favicons, and the client-side
+// routes that all serve the same index template. It deliberately
+// excludes /api/*, direct HTML/TXT message previews, and /view/latest
+// (which leaks the latest message ID via redirect).
+func isSPAShellRequest(r *http.Request) bool {
+	if r.Method != http.MethodGet && r.Method != http.MethodHead {
+		return false
+	}
+	p := r.URL.Path
+	wr := config.Webroot
+	wrTrim := strings.TrimRight(wr, "/")
+	if p == wr || p == wrTrim {
+		return true
+	}
+	if strings.HasPrefix(p, wr+"dist/") {
+		return true
+	}
+	switch p {
+	case wr + "favicon.ico",
+		wr + "favicon.svg",
+		wr + "mailpit.svg",
+		wr + "notification.png",
+		wr + "search",
+		wr + "auth/callback":
+		return true
+	}
+	if strings.HasPrefix(p, wr+"view/") && p != wr+"view/latest" {
+		if strings.HasSuffix(p, ".html") || strings.HasSuffix(p, ".txt") {
+			return false
+		}
+		return true
+	}
+	return false
+}
+
 // unauthorizedResponse writes a 401. When OIDC is enabled it adds the
 // X-Mp-Auth-Required header so the SPA's axios interceptor can trigger
 // signinRedirect. The Basic challenge is preserved when htpasswd is
 // configured so curl-based integrations keep working.
 func unauthorizedResponse(w http.ResponseWriter) {
+	// When OIDC is enabled, do NOT advertise a Basic challenge. The
+	// browser would otherwise pop its native Basic Auth dialog on every
+	// SPA-side 401 (e.g. a new tab with empty sessionStorage racing the
+	// OIDC redirect) — even when Basic Auth is also configured for API
+	// integrations. Basic Auth still works for clients that proactively
+	// send `Authorization: Basic …` (curl -u, automation scripts).
 	if auth.OIDCVerifier != nil {
 		w.Header().Set("X-Mp-Auth-Required", "oidc")
-	}
-	if auth.UICredentials != nil {
+	} else if auth.UICredentials != nil {
 		w.Header().Set("WWW-Authenticate", `Basic realm="Login"`)
 	}
 	w.WriteHeader(http.StatusUnauthorized)

server/server_test.go

@@ -920,18 +920,89 @@ func TestUIAuthOIDC(t *testing.T) {
 
 	t.Run("TamperedBearer_Returns401", func(t *testing.T) {
 		tok := idp.issue("mailpit", "alice", time.Now().Add(time.Hour))
-		// Flip the last char of the signature.
-		tampered := tok[:len(tok)-1] + "A"
-		if tampered == tok {
-			tampered = tok[:len(tok)-1] + "B"
+		// Flip a char in the middle of the signature segment so we are
+		// always changing real signature bytes (the last base64url char
+		// may encode unused padding bits and produce identical bytes).
+		dot := strings.LastIndex(tok, ".")
+		sigStart := dot + 1
+		mid := sigStart + (len(tok)-sigStart)/2
+		swap := byte('A')
+		if tok[mid] == 'A' {
+			swap = 'B'
 		}
+		tampered := tok[:mid] + string(swap) + tok[mid+1:]
 		resp, err := clientGetWithBearer(ts.URL+"/api/v1/messages", tampered)
 		if err != nil {
 			t.Fatalf("get: %v", err)
 		}
 		defer func() { _ = resp.Body.Close() }()
 		assertEqual(t, http.StatusUnauthorized, resp.StatusCode, "expected 401 for tampered token")
 	})
+
+	t.Run("SPAShell_ServesWithoutAuth_WhenOIDCEnabled", func(t *testing.T) {
+		// The SPA shell must load without an auth challenge so the SPA
+		// can run the OIDC redirect itself. Otherwise the browser pops
+		// up its native Basic Auth dialog and the SPA never boots.
+		for _, path := range []string{"/", "/search", "/view/abc", "/dist/app.js", "/favicon.svg"} {
+			resp, err := clientGetRaw(ts.URL + path)
+			if err != nil {
+				t.Fatalf("get %s: %v", path, err)
+			}
+			_ = resp.Body.Close()
+			if resp.StatusCode == http.StatusUnauthorized {
+				t.Errorf("%s: expected SPA shell to load without auth, got 401 (WWW-Authenticate=%q)",
+					path, resp.Header.Get("Www-Authenticate"))
+			}
+			if got := resp.Header.Get("Www-Authenticate"); got != "" {
+				t.Errorf("%s: SPA shell must not return WWW-Authenticate, got %q", path, got)
+			}
+		}
+	})
+
+}
+
+func TestIsSPAShellRequest(t *testing.T) {
+	// Webroot is "/" in tests by default.
+	cases := []struct {
+		method string
+		path   string
+		want   bool
+	}{
+		{"GET", "/", true},
+		{"GET", "/search", true},
+		{"GET", "/auth/callback", true},
+		{"GET", "/view/abc", true},
+		{"GET", "/view/abc123XYZ", true},
+		{"GET", "/dist/app.js", true},
+		{"GET", "/dist/app.css", true},
+		{"GET", "/favicon.ico", true},
+		{"GET", "/favicon.svg", true},
+		{"GET", "/mailpit.svg", true},
+		{"GET", "/notification.png", true},
+		// Must remain gated:
+		{"GET", "/view/abc.html", false},
+		{"GET", "/view/abc.txt", false},
+		{"GET", "/view/latest", false},
+		{"GET", "/api/v1/messages", false},
+		{"GET", "/api/v1/webui", false},
+		{"GET", "/api/events", false},
+		{"GET", "/proxy", false},
+		// HEAD also qualifies (browsers + curl -I).
+		{"HEAD", "/", true},
+		{"HEAD", "/dist/app.js", true},
+		// Non-GET/HEAD methods never qualify.
+		{"POST", "/", false},
+		{"PUT", "/dist/app.js", false},
+	}
+	for _, tc := range cases {
+		r, err := http.NewRequest(tc.method, tc.path, nil)
+		if err != nil {
+			t.Fatalf("NewRequest: %v", err)
+		}
+		if got := isSPAShellRequest(r); got != tc.want {
+			t.Errorf("isSPAShellRequest(%s %s) = %v, want %v", tc.method, tc.path, got, tc.want)
+		}
+	}
 }
 
 func TestUIAuthOIDCAndBasicCoexist(t *testing.T) {
@@ -976,17 +1047,19 @@ func TestUIAuthOIDCAndBasicCoexist(t *testing.T) {
 		}
 	})
 
-	t.Run("NoAuth_401_WithBothChallenges", func(t *testing.T) {
+	t.Run("NoAuth_401_OIDCHintOnly_NoBasicChallenge", func(t *testing.T) {
+		// When OIDC is enabled the server must NOT advertise a Basic
+		// challenge, even if htpasswd is also configured — otherwise
+		// the browser pops its native dialog on any SPA-side 401.
+		// Basic Auth still works for clients that proactively send it.
 		resp, err := clientGetRaw(ts.URL + "/api/v1/messages")
 		if err != nil {
 			t.Fatalf("get: %v", err)
 		}
 		defer func() { _ = resp.Body.Close() }()
 		assertEqual(t, http.StatusUnauthorized, resp.StatusCode, "expected 401")
 		assertEqual(t, "oidc", resp.Header.Get("X-Mp-Auth-Required"), "expected OIDC hint")
-		if resp.Header.Get("WWW-Authenticate") == "" {
-			t.Fatalf("expected WWW-Authenticate Basic challenge")
-		}
+		assertEqual(t, "", resp.Header.Get("WWW-Authenticate"), "Basic challenge must be suppressed when OIDC is enabled")
 	})
 }
 

server/ui-src/App.vue

@@ -2,7 +2,6 @@
 import CommonMixins from "./mixins/CommonMixins";
 import Favicon from "./components/AppFavicon.vue";
 import AppBadge from "./components/AppBadge.vue";
-import AppLogout from "./components/AppLogout.vue";
 import Notifications from "./components/AppNotifications.vue";
 import EditTags from "./components/EditTags.vue";
 import { mailbox } from "./stores/mailbox";
@@ -11,7 +10,6 @@ export default {
 	components: {
 		Favicon,
 		AppBadge,
-		AppLogout,
 		Notifications,
 		EditTags,
 	},
@@ -44,7 +42,6 @@ export default {
 	<RouterView />
 	<Favicon />
 	<AppBadge />
-	<AppLogout />
 	<Notifications />
 	<EditTags />
 </template>

server/ui-src/components/AppAbout.vue

@@ -1,12 +1,14 @@
 <script>
 import AjaxLoader from "./AjaxLoader.vue";
+import AppLogout from "./AppLogout.vue";
 import Settings from "./AppSettings.vue";
 import CommonMixins from "../mixins/CommonMixins";
 import { mailbox } from "../stores/mailbox";
 
 export default {
 	components: {
 		AjaxLoader,
+		AppLogout,
 		Settings,
 	},
 
@@ -88,6 +90,7 @@ export default {
 				<i class="bi bi-bell"></i>
 			</button>
 		</div>
+		<AppLogout />
 	</template>
 
 	<template v-else>

server/ui-src/components/AppLogout.vue

@@ -1,12 +1,23 @@
 <script>
-import { logout, oidcEnabled } from "../services/oidcAuth";
+import { getUser, logout, oidcEnabled } from "../services/oidcAuth";
 
 export default {
+	data() {
+		return {
+			displayName: "",
+		};
+	},
 	computed: {
 		show() {
 			return oidcEnabled();
 		},
 	},
+	async mounted() {
+		if (!this.show) return;
+		const u = await getUser();
+		if (!u || !u.profile) return;
+		this.displayName = u.profile.name || u.profile.preferred_username || u.profile.email || "Signed in";
+	},
 	methods: {
 		signOut() {
 			logout();
@@ -16,15 +27,13 @@ export default {
 </script>
 
 <template>
-	<button
-		v-if="show"
-		type="button"
-		class="btn btn-sm btn-outline-light position-fixed top-0 end-0 mt-2 me-2 d-print-none"
-		style="z-index: 1050"
-		title="Sign out"
-		@click="signOut"
-	>
-		<i class="bi bi-box-arrow-right"></i>
-		<span class="d-none d-md-inline ms-1">Sign out</span>
-	</button>
+	<div v-if="show" class="bg-body ms-sm-n1 me-sm-n1 pb-2 text-muted small">
+		<button type="button" class="text-muted btn btn-sm" :title="displayName">
+			<i class="bi bi-person-fill me-1"></i>
+			{{ displayName || "Signed in" }}
+		</button>
+		<button type="button" class="btn btn-sm btn-outline-secondary float-end" title="Sign out" @click="signOut">
+			<i class="bi bi-box-arrow-right"></i>
+		</button>
+	</div>
 </template>

server/ui-src/components/AppNotifications.vue

@@ -3,7 +3,7 @@ import CommonMixins from "../mixins/CommonMixins";
 import { Toast } from "bootstrap";
 import { mailbox } from "../stores/mailbox";
 import { pagination } from "../stores/pagination";
-import { getToken, oidcEnabled } from "../services/oidcAuth";
+import { configureOIDC, getToken, oidcEnabled } from "../services/oidcAuth";
 
 export default {
 	mixins: [CommonMixins],
@@ -51,6 +51,11 @@ export default {
 			const proto = location.protocol === "https:" ? "wss" : "ws";
 			let uri = proto + "://" + document.location.host + this.resolve("/api/events");
 			if (oidcEnabled()) {
+				// configureOIDC is idempotent: the first call sets up the
+				// UserManager, subsequent calls await the same promise.
+				// Awaiting here closes the race between component mount
+				// and the async OIDC init in router/index.js.
+				await configureOIDC();
 				const t = await getToken();
 				if (t) {
 					uri += "?access_token=" + encodeURIComponent(t);