diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index 770f4e8..5b06d36 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -8,7 +8,7 @@ mod websocket;
 use std::collections::HashMap;
 use std::sync::Mutex;
 
-use models::{ActiveStreams, ClientWrapper};
+use models::{ActiveStreams, ClientWrapper, PendingOAuthFlows};
 use websocket::ActiveWebSockets;
 
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
@@ -21,6 +21,10 @@ pub fn run() {
         connections: Mutex::new(HashMap::new()),
     };
 
+    let pending_oauth_flows = PendingOAuthFlows {
+        flows: Mutex::new(HashMap::new()),
+    };
+
     tauri::Builder::default()
         .plugin(tauri_plugin_updater::Builder::new().build())
         .plugin(tauri_plugin_http::init())
@@ -29,12 +33,14 @@ pub fn run() {
         .manage(ClientWrapper::new())
         .manage(active_streams)
         .manage(active_websockets)
+        .manage(pending_oauth_flows)
         .invoke_handler(tauri::generate_handler![
             http_client::send_request,
             streaming::stream_sse,
             streaming::cancel_stream,
             oauth::oauth2_token_exchange,
             oauth::oauth2_auth_code_flow,
+            oauth::oauth2_cancel_flow,
             oauth::oauth2_refresh,
             websocket::ws_connect,
             websocket::ws_send,
diff --git a/src-tauri/src/models.rs b/src-tauri/src/models.rs
index 7db8db7..e1a1634 100644
--- a/src-tauri/src/models.rs
+++ b/src-tauri/src/models.rs
@@ -144,3 +144,13 @@ impl ClientWrapper {
 pub struct ActiveStreams {
     pub streams: Mutex<HashMap<String, tokio::sync::watch::Sender<bool>>>,
 }
+
+/// In-flight authorization code flows, keyed by a frontend-supplied id.
+///
+/// The flow parks on a loopback listener waiting for the provider to redirect
+/// back. If the provider refuses to redirect at all — an unregistered redirect
+/// URI is the usual reason — nothing ever arrives, and without this the user is
+/// stuck watching a spinner until the timeout expires with no way out.
+pub struct PendingOAuthFlows {
+    pub flows: Mutex<HashMap<String, tokio::sync::watch::Sender<bool>>>,
+}
diff --git a/src-tauri/src/oauth.rs b/src-tauri/src/oauth.rs
index e079343..2cf4e2a 100644
--- a/src-tauri/src/oauth.rs
+++ b/src-tauri/src/oauth.rs
@@ -8,12 +8,18 @@ use tauri::Url;
 use tauri_plugin_http::reqwest;
 use tauri_plugin_opener::OpenerExt;
 
-use crate::models::ClientWrapper;
+use crate::models::{ClientWrapper, PendingOAuthFlows};
 
 const OAUTH_TOKEN_ACCEPT_HEADER: &str =
     "application/json, application/x-www-form-urlencoded, text/plain";
 const TOKEN_CONTAINER_KEYS: &[&str] = &["data", "token", "result", "response"];
 
+/// How long to wait for the provider to redirect back to the loopback listener.
+///
+/// Deliberately generous: a real sign-in can involve MFA, an account chooser and
+/// a password manager. Cancelling is the UI's job, not the timeout's.
+const AUTH_CALLBACK_TIMEOUT_SECS: u64 = 300;
+
 #[derive(Debug, Deserialize)]
 pub struct OAuth2TokenExchangeOptions {
     token_url: String,
@@ -43,6 +49,10 @@ pub struct OAuth2AuthCodeOptions {
     scope: Option<String>,
     use_pkce: Option<bool>,
     redirect_uri: Option<String>,
+    /// Identifies this flow so the UI can cancel it. Optional — a flow started
+    /// without one simply cannot be cancelled, which keeps older callers working.
+    #[serde(default)]
+    flow_id: Option<String>,
 }
 
 #[derive(Debug, Deserialize)]
@@ -452,6 +462,7 @@ pub async fn oauth2_auth_code_flow(
     options: OAuth2AuthCodeOptions,
     app: tauri::AppHandle,
     client_wrapper: tauri::State<'_, ClientWrapper>,
+    pending_flows: tauri::State<'_, PendingOAuthFlows>,
 ) -> Result<OAuth2TokenResponse, String> {
     let auth_url = required_field(options.auth_url, "auth_url")?;
     let token_url = required_field(options.token_url, "token_url")?;
@@ -533,13 +544,46 @@ pub async fn oauth2_auth_code_flow(
         .open_url(auth_uri.as_str(), None::<&str>)
         .map_err(|e| format!("Failed to open browser: {}", e))?;
 
-    let (code, received_state) = tokio::time::timeout(
-        std::time::Duration::from_secs(120),
-        wait_for_callback(listener),
-    )
-    .await
-    .map_err(|_| "Authorization timed out after 2 minutes".to_string())?
-    .map_err(|e| format!("Callback error: {}", e))?;
+    // Register a cancel channel so the UI can abort a flow that is never going
+    // to complete. Signing in can legitimately take a while (MFA, a password
+    // manager, picking an account), so the timeout is generous and the cancel
+    // button is the real escape hatch.
+    let (cancel_tx, mut cancel_rx) = tokio::sync::watch::channel(false);
+    let flow_id = normalize_optional_input(options.flow_id);
+    if let Some(id) = &flow_id {
+        pending_flows
+            .flows
+            .lock()
+            .map_err(|_| "Failed to register the authorization flow".to_string())?
+            .insert(id.clone(), cancel_tx);
+    }
+
+    let outcome = tokio::select! {
+        result = tokio::time::timeout(
+            std::time::Duration::from_secs(AUTH_CALLBACK_TIMEOUT_SECS),
+            wait_for_callback(listener),
+        ) => match result {
+            Ok(inner) => inner.map_err(|e| format!("Callback error: {}", e)),
+            Err(_) => Err(format!(
+                "Timed out after {} minutes waiting for the provider to redirect back. \
+                 If your browser showed an error instead of a sign-in page, register \
+                 exactly this callback URL with the provider: {}",
+                AUTH_CALLBACK_TIMEOUT_SECS / 60,
+                redirect_uri
+            )),
+        },
+        _ = cancel_rx.changed() => Err("Authorization cancelled".to_string()),
+    };
+
+    // Always deregister, whichever way the flow ended, so a retry with the same
+    // id does not find a stale sender.
+    if let Some(id) = &flow_id {
+        if let Ok(mut flows) = pending_flows.flows.lock() {
+            flows.remove(id);
+        }
+    }
+
+    let (code, received_state) = outcome?;
 
     if received_state != state {
         return Err("State mismatch - possible CSRF attack".to_string());
@@ -574,6 +618,29 @@ pub async fn oauth2_auth_code_flow(
     parse_oauth_token_response(res).await
 }
 
+/// Abort an in-flight authorization code flow.
+///
+/// Returns whether a flow was actually waiting: the UI uses that to tell "we
+/// stopped it" apart from "it had already finished or timed out".
+#[tauri::command]
+pub async fn oauth2_cancel_flow(
+    flow_id: String,
+    pending_flows: tauri::State<'_, PendingOAuthFlows>,
+) -> Result<bool, String> {
+    let sender = pending_flows
+        .flows
+        .lock()
+        .map_err(|_| "Failed to read in-flight authorization flows".to_string())?
+        .remove(&flow_id);
+
+    match sender {
+        // The receiver side treats any change as cancellation, so the value
+        // only has to differ from the `false` it was created with.
+        Some(sender) => Ok(sender.send(true).is_ok()),
+        None => Ok(false),
+    }
+}
+
 async fn wait_for_callback(listener: tokio::net::TcpListener) -> Result<(String, String), String> {
     use tokio::io::{AsyncReadExt, AsyncWriteExt};
 
diff --git a/src/App.tsx b/src/App.tsx
index 19ed3ef..778edd7 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -337,6 +337,7 @@ function App() {
                           onHeadersChange={(headers) => updateTab(currentTab.id, { headers })}
                           onBodyChange={(body) => updateTab(currentTab.id, { body })}
                           onContentTypeChange={(contentType) => updateTab(currentTab.id, { contentType })}
+                          tabId={currentTab.id}
                           onAuthChange={(auth) => updateTab(currentTab.id, { auth })}
                           onCookiesChange={(cookies) => updateTab(currentTab.id, { cookies })}
                           onTestScriptsChange={(testScripts) => updateTab(currentTab.id, { testScripts })}
diff --git a/src/components/AuthConfigurator.tsx b/src/components/AuthConfigurator.tsx
index 93f043b..c780e81 100644
--- a/src/components/AuthConfigurator.tsx
+++ b/src/components/AuthConfigurator.tsx
@@ -9,6 +9,12 @@ import { ShieldOff, KeyRound, Lock, Key, ShieldCheck } from "lucide-react"
 interface AuthConfiguratorProps {
   auth: AuthConfig
   onAuthChange: (auth: AuthConfig) => void
+  /**
+   * Identifies whose auth this is — a request tab id, or `collection:<id>`.
+   * Passed through so an in-flight OAuth sign-in is scoped to it rather than to
+   * this component, which unmounts whenever the auth type changes.
+   */
+  flowKey?: string
 }
 
 const AUTH_TYPES = [
@@ -19,7 +25,7 @@ const AUTH_TYPES = [
   { value: 'oauth2', label: 'OAuth 2.0', icon: ShieldCheck },
 ]
 
-export function AuthConfigurator({ auth, onAuthChange }: AuthConfiguratorProps) {
+export function AuthConfigurator({ auth, onAuthChange, flowKey }: AuthConfiguratorProps) {
   const themeClass = useThemeClass()
   // Every auth field that supports {{var}} substitution, for the peek badge
   const authText = [
@@ -154,6 +160,7 @@ export function AuthConfigurator({ auth, onAuthChange }: AuthConfiguratorProps)
         <OAuthConfigurator
           oauth2={auth.oauth2 || { grantType: 'authorization_code', clientId: '' }}
           onOAuth2Change={(oauth2) => onAuthChange({ ...auth, oauth2 })}
+          flowKey={flowKey}
         />
       )}
     </div>
diff --git a/src/components/GraphQLEditor.tsx b/src/components/GraphQLEditor.tsx
index 3129332..e7d2e2d 100644
--- a/src/components/GraphQLEditor.tsx
+++ b/src/components/GraphQLEditor.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useRef, useEffect, useState, useMemo } from "react"
+import { basicAuthValue } from "@/utils/base64"
 import Editor, { OnMount, loader } from "@monaco-editor/react"
 import type { editor as MonacoEditor, IDisposable } from "monaco-editor"
 import { Button } from "@/components/ui/button"
@@ -213,8 +214,7 @@ export function GraphQLEditor({
 
             // Apply auth
             if (auth.type === 'basic' && auth.username) {
-                const credentials = btoa(`${auth.username}:${auth.password || ''}`)
-                headerRecord['Authorization'] = `Basic ${credentials}`
+                headerRecord['Authorization'] = basicAuthValue(auth.username, auth.password || '')
             } else if (auth.type === 'bearer' && auth.token) {
                 headerRecord['Authorization'] = `Bearer ${auth.token}`
             } else if (auth.type === 'api-key' && auth.key && auth.value && auth.addTo === 'header') {
diff --git a/src/components/OAuthConfigurator.tsx b/src/components/OAuthConfigurator.tsx
index 6842f12..df212bd 100644
--- a/src/components/OAuthConfigurator.tsx
+++ b/src/components/OAuthConfigurator.tsx
@@ -11,12 +11,14 @@ import { useEnvironmentStore } from "@/store/environments"
 import { detectEntraV1Url, fetchOidcDiscovery } from "@/utils/oidcDiscovery"
 import { substituteVariables } from "@/utils/variables"
 import { decodeToken } from "@/utils/jwt"
-import { Loader2, KeyRound, RefreshCw, Globe, Shield, Wand2 } from "lucide-react"
+import { Loader2, KeyRound, RefreshCw, Globe, Shield, Wand2, X } from "lucide-react"
 import { useMemo, useState } from "react"
 
 interface OAuthConfiguratorProps {
   oauth2: OAuth2Config
   onOAuth2Change: (config: OAuth2Config) => void
+  /** Scopes in-flight sign-in state to this tab or collection — see the store. */
+  flowKey?: string
 }
 
 const GRANT_TYPES: { value: OAuth2GrantType; label: string; description: string }[] = [
@@ -59,7 +61,7 @@ function FormField({ label, hint, children }: {
   )
 }
 
-export function OAuthConfigurator({ oauth2, onOAuth2Change }: OAuthConfiguratorProps) {
+export function OAuthConfigurator({ oauth2, onOAuth2Change, flowKey }: OAuthConfiguratorProps) {
   const themeClass = useThemeClass()
   const { getVariable } = useEnvironmentStore()
   const [isDiscovering, setIsDiscovering] = useState(false)
@@ -75,9 +77,10 @@ export function OAuthConfigurator({ oauth2, onOAuth2Change }: OAuthConfiguratorP
     getNewToken,
     refreshToken,
     clearToken,
+    cancelTokenRequest,
     isExpired,
     expiresIn,
-  } = useOAuth2TokenActions({ oauth2, onOAuth2Change })
+  } = useOAuth2TokenActions({ oauth2, onOAuth2Change, flowKey })
 
   const updateField = (field: keyof OAuth2Config, value: string) => {
     onOAuth2Change({ ...oauth2, [field]: value })
@@ -456,7 +459,7 @@ export function OAuthConfigurator({ oauth2, onOAuth2Change }: OAuthConfiguratorP
           {isLoading ? (
             <>
               <Loader2 size={14} className="mr-2 animate-spin" />
-              Getting Token…
+              {cancelTokenRequest ? 'Waiting for sign-in…' : 'Getting Token…'}
             </>
           ) : (
             <>
@@ -466,6 +469,25 @@ export function OAuthConfigurator({ oauth2, onOAuth2Change }: OAuthConfiguratorP
           )}
         </Button>
 
+        {/*
+          Only the authorization code flow parks waiting on the browser, and it
+          can wait forever: if the redirect URI is not registered the provider
+          shows an error page and never redirects back, so nothing ever arrives
+          on the callback listener.
+        */}
+        {cancelTokenRequest && (
+          <Button
+            onClick={cancelTokenRequest}
+            size="sm"
+            variant="outline"
+            className="border-border/40"
+            data-testid="cancel-token-request"
+          >
+            <X size={14} className="mr-1" />
+            Cancel
+          </Button>
+        )}
+
         {oauth2.refreshToken && (
           <Button
             onClick={refreshToken}
diff --git a/src/components/RequestPanel.tsx b/src/components/RequestPanel.tsx
index d4d058e..978a6bc 100644
--- a/src/components/RequestPanel.tsx
+++ b/src/components/RequestPanel.tsx
@@ -153,6 +153,8 @@ interface RequestPanelProps {
   onBodyChange: (body: string) => void
   onContentTypeChange: (contentType: string) => void
   onAuthChange: (auth: AuthConfig) => void
+  /** The tab this panel is showing, used to scope in-flight OAuth sign-ins. */
+  tabId?: string
   onCookiesChange: (cookies: Cookie[]) => void
   onTestScriptsChange: (scripts: TestScript[]) => void
   onPreRequestScriptsChange?: (scripts: TestScript[]) => void
@@ -189,6 +191,7 @@ export function RequestPanel({
   body,
   contentType,
   auth,
+  tabId,
   cookies,
   response,
   testScripts,
@@ -663,7 +666,7 @@ export function RequestPanel({
           <TabsContent value="auth" className="h-full p-4 pt-2 data-[state=active]:flex data-[state=active]:flex-col">
             <ScrollArea className="flex-1 min-h-0">
               <div className="space-y-4 pr-4">
-                <AuthConfigurator auth={auth} onAuthChange={onAuthChange} />
+                <AuthConfigurator auth={auth} onAuthChange={onAuthChange} flowKey={tabId} />
               </div>
             </ScrollArea>
           </TabsContent>
diff --git a/src/components/WebSocketPanel.tsx b/src/components/WebSocketPanel.tsx
index 5f1eb76..c3d122b 100644
--- a/src/components/WebSocketPanel.tsx
+++ b/src/components/WebSocketPanel.tsx
@@ -1,4 +1,5 @@
 import { useState, useRef, useEffect, useMemo, useCallback } from 'react'
+import { basicAuthValue } from '@/utils/base64'
 import { Card } from '@/components/ui/card'
 import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
@@ -113,8 +114,7 @@ export function WebSocketPanel({ url, headers, auth }: WebSocketPanelProps) {
 
     // Apply auth
     if (auth.type === 'basic' && auth.username) {
-      const credentials = btoa(`${auth.username}:${auth.password || ''}`)
-      headerRecord['Authorization'] = `Basic ${credentials}`
+      headerRecord['Authorization'] = basicAuthValue(auth.username, auth.password || '')
     } else if (auth.type === 'bearer' && auth.token) {
       headerRecord['Authorization'] = `Bearer ${auth.token}`
     } else if (auth.type === 'api-key' && auth.key && auth.value && auth.addTo === 'header') {
diff --git a/src/components/collections/CollectionSettings.tsx b/src/components/collections/CollectionSettings.tsx
index 431004f..95e17d1 100644
--- a/src/components/collections/CollectionSettings.tsx
+++ b/src/components/collections/CollectionSettings.tsx
@@ -100,6 +100,7 @@ export function CollectionSettings({ collection, onUpdateCollection }: Collectio
           <AuthConfigurator
             auth={collection.auth ?? { type: "none" }}
             onAuthChange={(auth) => onUpdateCollection(collection.id, { auth })}
+            flowKey={`collection:${collection.id}`}
           />
           <p className="text-[11px] text-muted-foreground/50 leading-snug pt-2">
             Requests in this collection use this unless they set their own.
diff --git a/src/hooks/useOAuth2TokenActions.ts b/src/hooks/useOAuth2TokenActions.ts
index 1417a2e..a43ab2a 100644
--- a/src/hooks/useOAuth2TokenActions.ts
+++ b/src/hooks/useOAuth2TokenActions.ts
@@ -1,16 +1,29 @@
-import { useMemo, useState } from 'react'
+import { useMemo, useRef } from 'react'
 import { OAuth2Config } from '@/types'
 import {
   OAuthTokenResponse,
   applyTokenResponse,
+  cancelOAuthFlow,
   refreshOAuthToken,
   requestOAuthToken,
 } from '@/services/oauth'
 import { useEnvironmentStore } from '@/store/environments'
+import { useOAuthFlowStore } from '@/store/oauthFlows'
 
 interface UseOAuth2TokenActionsOptions {
   oauth2: OAuth2Config
   onOAuth2Change: (config: OAuth2Config) => void
+  /**
+   * Identifies whose auth this is — a request tab id, or `collection:<id>`.
+   *
+   * In-flight state is stored against this rather than in the component, so a
+   * sign-in survives the component unmounting when you switch to a tab with
+   * different auth, and stays invisible on tabs it does not belong to.
+   *
+   * Omitting it falls back to a per-instance key, which isolates the instance
+   * but loses the state when it unmounts.
+   */
+  flowKey?: string
 }
 
 interface OAuth2TokenActions {
@@ -19,6 +32,8 @@ interface OAuth2TokenActions {
   getNewToken: () => Promise<void>
   refreshToken: () => Promise<void>
   clearToken: () => void
+  /** Abort an in-flight browser sign-in. Null when there is nothing to cancel. */
+  cancelTokenRequest: (() => Promise<void>) | null
   isExpired: boolean
   expiresIn: number | null
 }
@@ -26,11 +41,21 @@ interface OAuth2TokenActions {
 export function useOAuth2TokenActions({
   oauth2,
   onOAuth2Change,
+  flowKey,
 }: UseOAuth2TokenActionsOptions): OAuth2TokenActions {
-  const [isLoading, setIsLoading] = useState(false)
-  const [tokenError, setTokenError] = useState<string | null>(null)
   const { getVariable } = useEnvironmentStore()
 
+  // Stable for the lifetime of the instance, used only when no key is supplied.
+  const fallbackKey = useRef<string>()
+  if (!fallbackKey.current) fallbackKey.current = `instance:${crypto.randomUUID()}`
+  const key = flowKey ?? fallbackKey.current
+
+  // Subscribed by key, so a change to one tab's flow does not re-render another.
+  const flow = useOAuthFlowStore((state) => state.flows[key])
+  const isLoading = flow?.isLoading ?? false
+  const tokenError = flow?.error ?? null
+  const activeFlowId = flow?.flowId ?? null
+
   // Note this stores against the *unresolved* config: substitution happens on
   // the way out to the provider, so `{{clientSecret}}` stays `{{clientSecret}}`
   // in what gets persisted with the request.
@@ -39,38 +64,51 @@ export function useOAuth2TokenActions({
   }
 
   const getNewToken = async () => {
-    setIsLoading(true)
-    setTokenError(null)
+    // Only the authorization code flow parks waiting on the browser, so it is
+    // the only one that can be cancelled.
+    const flowId = oauth2.grantType === 'authorization_code' ? crypto.randomUUID() : undefined
+
+    // Read actions off the store rather than through the hook, so the calls
+    // below still land if this component unmounted while the flow was running —
+    // which is exactly what happens when you switch tabs mid sign-in.
+    const { beginFlow, endFlow } = useOAuthFlowStore.getState()
+    beginFlow(key, flowId ?? null)
 
     try {
-      const token = await requestOAuthToken(oauth2, getVariable)
+      const token = await requestOAuthToken(oauth2, getVariable, flowId)
       handleTokenResponse(token)
+      endFlow(key)
     } catch (err) {
-      setTokenError(err instanceof Error ? err.message : String(err))
-    } finally {
-      setIsLoading(false)
+      endFlow(key, err instanceof Error ? err.message : String(err))
     }
   }
 
+  const cancelTokenRequest = async () => {
+    if (!activeFlowId) return
+    await cancelOAuthFlow(activeFlowId)
+    // The flow itself rejects with "Authorization cancelled", which is what
+    // clears isLoading and surfaces the message — nothing to do here.
+  }
+
   const refreshToken = async () => {
     if (!oauth2.refreshToken || !oauth2.tokenUrl) {
       return
     }
 
-    setIsLoading(true)
-    setTokenError(null)
+    const { beginFlow, endFlow } = useOAuthFlowStore.getState()
+    beginFlow(key, null)
 
     try {
       const token = await refreshOAuthToken(oauth2, getVariable)
       handleTokenResponse(token)
+      endFlow(key)
     } catch (err) {
-      setTokenError(err instanceof Error ? err.message : String(err))
-    } finally {
-      setIsLoading(false)
+      endFlow(key, err instanceof Error ? err.message : String(err))
     }
   }
 
   const clearToken = () => {
+    useOAuthFlowStore.getState().clearError(key)
     onOAuth2Change({
       ...oauth2,
       accessToken: undefined,
@@ -98,6 +136,7 @@ export function useOAuth2TokenActions({
     getNewToken,
     refreshToken,
     clearToken,
+    cancelTokenRequest: activeFlowId ? cancelTokenRequest : null,
     isExpired,
     expiresIn,
   }
diff --git a/src/services/oauth.ts b/src/services/oauth.ts
index 9a2a301..9c3c9b6 100644
--- a/src/services/oauth.ts
+++ b/src/services/oauth.ts
@@ -125,9 +125,26 @@ export function applyTokenResponse(config: OAuth2Config, token: OAuthTokenRespon
   }
 }
 
+/**
+ * Abort an in-flight authorization code flow.
+ *
+ * Resolves to whether a flow was actually waiting — false means it had already
+ * finished or timed out, so there is nothing to report to the user.
+ */
+export async function cancelOAuthFlow(flowId: string): Promise<boolean> {
+  try {
+    return await invoke<boolean>('oauth2_cancel_flow', { flowId })
+  } catch {
+    // Cancelling is best-effort; failing to cancel must not raise an error over
+    // whatever the flow itself is about to report.
+    return false
+  }
+}
+
 export async function requestOAuthToken(
   rawConfig: OAuth2Config,
-  resolve: VariableResolver
+  resolve: VariableResolver,
+  flowId?: string
 ): Promise<OAuthTokenResponse> {
   // Substitute first, then validate — otherwise a required field holding only
   // `{{clientId}}` passes the non-empty check and the literal braces are what
@@ -146,6 +163,7 @@ export async function requestOAuthToken(
           scope: optionalOrNull(config.scope),
           use_pkce: config.usePkce ?? true,
           redirect_uri: optionalOrNull(config.redirectUri),
+          flow_id: flowId ?? null,
         },
       })
     case 'client_credentials':
diff --git a/src/store/oauthFlows.ts b/src/store/oauthFlows.ts
new file mode 100644
index 0000000..a092114
--- /dev/null
+++ b/src/store/oauthFlows.ts
@@ -0,0 +1,57 @@
+import { create } from 'zustand'
+
+/**
+ * In-flight OAuth token requests, keyed by whose auth they belong to.
+ *
+ * This state cannot live in the component. `OAuthConfigurator` is rendered only
+ * while `auth.type === 'oauth2'`, so switching to a request tab with different
+ * auth unmounts it — and a browser sign-in that is still waiting took its
+ * spinner, its Cancel button and its error message down with it. Switching to
+ * *another* OAuth tab is the mirror of the same problem: the component stays
+ * mounted with new props, so the pending state of one tab's flow appeared on
+ * another tab's screen.
+ *
+ * Keying by tab (or collection) fixes both: the flow is found again on return,
+ * and is invisible everywhere else.
+ *
+ * Deliberately not persisted. A flow cannot outlive the process that is waiting
+ * on the callback listener, so restoring one from disk would only ever show a
+ * spinner for something already gone.
+ */
+export interface OAuthFlowState {
+  isLoading: boolean
+  /** Set only for grant types that can be cancelled, i.e. authorization code. */
+  flowId: string | null
+  error: string | null
+}
+
+const IDLE: OAuthFlowState = { isLoading: false, flowId: null, error: null }
+
+interface OAuthFlowStore {
+  flows: Record<string, OAuthFlowState>
+  getFlow: (key: string) => OAuthFlowState
+  beginFlow: (key: string, flowId: string | null) => void
+  endFlow: (key: string, error?: string | null) => void
+  clearError: (key: string) => void
+}
+
+export const useOAuthFlowStore = create<OAuthFlowStore>((set, get) => ({
+  flows: {},
+
+  getFlow: (key) => get().flows[key] ?? IDLE,
+
+  beginFlow: (key, flowId) =>
+    set((state) => ({
+      flows: { ...state.flows, [key]: { isLoading: true, flowId, error: null } },
+    })),
+
+  endFlow: (key, error = null) =>
+    set((state) => ({
+      flows: { ...state.flows, [key]: { isLoading: false, flowId: null, error } },
+    })),
+
+  clearError: (key) =>
+    set((state) => ({
+      flows: { ...state.flows, [key]: { ...(state.flows[key] ?? IDLE), error: null } },
+    })),
+}))
diff --git a/src/test/base64.test.ts b/src/test/base64.test.ts
new file mode 100644
index 0000000..43c5866
--- /dev/null
+++ b/src/test/base64.test.ts
@@ -0,0 +1,99 @@
+import { describe, it, expect } from 'vitest'
+import { utf8ToBase64, base64ToUtf8, basicAuthValue } from '@/utils/base64'
+import { applyAuthToHeaders } from '@/utils/authHeaders'
+import { parseCurlCommand } from '@/utils/curlParser'
+
+const identity = (text: string) => text
+
+describe('utf8ToBase64', () => {
+  it('matches btoa for plain ASCII', () => {
+    expect(utf8ToBase64('user:hunter2')).toBe(btoa('user:hunter2'))
+  })
+
+  // btoa is Latin-1, and it fails in two different ways depending on where the
+  // character sits. Above U+00FF it throws outright:
+  it('encodes characters that would make btoa throw', () => {
+    expect(() => btoa('user:密码')).toThrow()
+    expect(() => utf8ToBase64('user:密码')).not.toThrow()
+  })
+
+  // ...but between U+0080 and U+00FF — precisely the common European accented
+  // case — it does not complain at all. It emits the single Latin-1 byte, the
+  // server decodes it as UTF-8, and the credential silently arrives wrong. That
+  // is the worse of the two failures, because nothing anywhere reports it.
+  it('differs from btoa on accented characters that btoa accepts silently', () => {
+    expect(() => btoa('user:pässwörd')).not.toThrow()
+    expect(utf8ToBase64('user:pässwörd')).not.toBe(btoa('user:pässwörd'))
+    expect(base64ToUtf8(utf8ToBase64('user:pässwörd'))).toBe('user:pässwörd')
+  })
+
+  it('round-trips accented text', () => {
+    expect(base64ToUtf8(utf8ToBase64('José:Niño'))).toBe('José:Niño')
+  })
+
+  it('round-trips CJK and emoji', () => {
+    expect(base64ToUtf8(utf8ToBase64('user:密码🔑'))).toBe('user:密码🔑')
+  })
+
+  it('handles the empty string', () => {
+    expect(utf8ToBase64('')).toBe('')
+    expect(base64ToUtf8('')).toBe('')
+  })
+
+  it('does not hit the argument limit on long input', () => {
+    // String.fromCharCode(...bytes) would blow the stack around here.
+    const long = 'ü'.repeat(200_000)
+    expect(base64ToUtf8(utf8ToBase64(long))).toBe(long)
+  })
+
+  it('produces the byte sequence a server would expect', () => {
+    // 'é' is U+00E9 → UTF-8 0xC3 0xA9, not the single Latin-1 byte 0xE9.
+    expect(utf8ToBase64('é')).toBe('w6k=')
+  })
+})
+
+describe('basicAuthValue', () => {
+  it('builds a complete header value', () => {
+    expect(basicAuthValue('user', 'pass')).toBe(`Basic ${btoa('user:pass')}`)
+  })
+
+  it('keeps colons in the password intact', () => {
+    // Only the first colon separates the two; the rest belong to the password.
+    expect(base64ToUtf8(basicAuthValue('user', 'a:b:c').slice(6))).toBe('user:a:b:c')
+  })
+})
+
+describe('basic auth end to end', () => {
+  it('sends a non-ASCII password instead of throwing', () => {
+    const headers: Record<string, string> = {}
+    expect(() =>
+      applyAuthToHeaders(
+        { type: 'basic', username: 'jt', password: 'pässwörd' },
+        headers, 'https://api.example.com', identity
+      )
+    ).not.toThrow()
+
+    expect(base64ToUtf8(headers['Authorization'].slice(6))).toBe('jt:pässwörd')
+  })
+
+  it('reads a non-ASCII credential back out of a curl command', () => {
+    // The mirror of the same fault: atob alone returns bytes-as-characters,
+    // so an imported credential came back as mojibake.
+    const encoded = utf8ToBase64('jt:pässwörd')
+    const parsed = parseCurlCommand(
+      `curl https://api.example.com -H "Authorization: Basic ${encoded}"`
+    )
+
+    expect(parsed.auth).toEqual({ type: 'basic', username: 'jt', password: 'pässwörd' })
+  })
+
+  it('round-trips a credential through curl import and back out', () => {
+    const parsed = parseCurlCommand(
+      `curl https://api.example.com -u "josé:契約"`
+    )
+    const headers: Record<string, string> = {}
+    applyAuthToHeaders(parsed.auth, headers, 'https://api.example.com', identity)
+
+    expect(base64ToUtf8(headers['Authorization'].slice(6))).toBe('josé:契約')
+  })
+})
diff --git a/src/test/oauthCancel.test.tsx b/src/test/oauthCancel.test.tsx
new file mode 100644
index 0000000..81d9b17
--- /dev/null
+++ b/src/test/oauthCancel.test.tsx
@@ -0,0 +1,117 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor } from '@testing-library/react'
+import { OAuthConfigurator } from '@/components/OAuthConfigurator'
+import { OAuth2Config } from '@/types'
+
+const invoke = vi.fn()
+vi.mock('@tauri-apps/api/core', () => ({ invoke: (...args: unknown[]) => invoke(...args) }))
+
+vi.mock('@/store/environments', () => ({
+  useEnvironmentStore: () => ({ getVariable: () => undefined }),
+}))
+
+const base: OAuth2Config = {
+  grantType: 'authorization_code',
+  clientId: 'client-abc',
+  authUrl: 'https://id.example.com/authorize',
+  tokenUrl: 'https://id.example.com/token',
+}
+
+const renderConfigurator = (oauth2: Partial<OAuth2Config> = {}) => {
+  const onOAuth2Change = vi.fn()
+  render(<OAuthConfigurator oauth2={{ ...base, ...oauth2 }} onOAuth2Change={onOAuth2Change} />)
+  return onOAuth2Change
+}
+
+/** A flow that never resolves, standing in for a provider that never redirects. */
+function neverResolves() {
+  return new Promise(() => { })
+}
+
+describe('cancelling an authorization code flow', () => {
+  beforeEach(() => {
+    invoke.mockReset()
+  })
+
+  // The bug: an unregistered redirect URI means the provider shows an error page
+  // and never redirects back, so the callback listener waits and the button sat
+  // on "Getting Token…" with no way out until the timeout fired.
+  it('offers a cancel button once the browser sign-in is waiting', async () => {
+    invoke.mockImplementation(neverResolves)
+    renderConfigurator()
+
+    expect(screen.queryByTestId('cancel-token-request')).not.toBeInTheDocument()
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+
+    expect(await screen.findByTestId('cancel-token-request')).toBeInTheDocument()
+    expect(screen.getByText(/Waiting for sign-in/)).toBeInTheDocument()
+  })
+
+  it('cancels the flow by the same id it was started with', async () => {
+    invoke.mockImplementation(neverResolves)
+    renderConfigurator()
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+
+    fireEvent.click(await screen.findByTestId('cancel-token-request'))
+
+    await waitFor(() => {
+      expect(invoke).toHaveBeenCalledWith('oauth2_cancel_flow', expect.anything())
+    })
+
+    const started = invoke.mock.calls.find(([cmd]) => cmd === 'oauth2_auth_code_flow')
+    const cancelled = invoke.mock.calls.find(([cmd]) => cmd === 'oauth2_cancel_flow')
+    expect(cancelled![1].flowId).toBe(started![1].options.flow_id)
+    expect(started![1].options.flow_id).toBeTruthy()
+  })
+
+  it('surfaces the cancellation as the flow rejecting, and clears the spinner', async () => {
+    invoke.mockRejectedValueOnce('Authorization cancelled')
+    renderConfigurator()
+
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+
+    expect(await screen.findByText(/Authorization cancelled/)).toBeInTheDocument()
+    expect(screen.queryByTestId('cancel-token-request')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Get Access Token/i })).toBeEnabled()
+  })
+
+  it('does not offer cancel for client credentials, which never waits on a browser', async () => {
+    invoke.mockImplementation(neverResolves)
+    renderConfigurator({ grantType: 'client_credentials' })
+
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+
+    await waitFor(() => expect(invoke).toHaveBeenCalled())
+    expect(screen.queryByTestId('cancel-token-request')).not.toBeInTheDocument()
+    expect(screen.getByText(/Getting Token/)).toBeInTheDocument()
+  })
+
+  it('sends no flow id for grant types that cannot be cancelled', async () => {
+    invoke.mockImplementation(neverResolves)
+    renderConfigurator({ grantType: 'client_credentials' })
+
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+
+    await waitFor(() => expect(invoke).toHaveBeenCalled())
+    expect(invoke.mock.calls[0][0]).toBe('oauth2_token_exchange')
+    expect(invoke.mock.calls[0][1].options.flow_id).toBeUndefined()
+  })
+
+  it('leaves the error visible after a failed cancel attempt', async () => {
+    // cancelOAuthFlow swallows its own failure so it cannot mask whatever the
+    // flow itself is about to report.
+    invoke.mockImplementation((cmd: string) =>
+      cmd === 'oauth2_cancel_flow' ? Promise.reject('no such flow') : neverResolves()
+    )
+    renderConfigurator()
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+
+    fireEvent.click(await screen.findByTestId('cancel-token-request'))
+
+    // No unhandled rejection, and the flow is still considered in-flight.
+    await waitFor(() => {
+      expect(invoke).toHaveBeenCalledWith('oauth2_cancel_flow', expect.anything())
+    })
+    expect(screen.getByTestId('cancel-token-request')).toBeInTheDocument()
+  })
+})
diff --git a/src/test/oauthFlowPersistence.test.tsx b/src/test/oauthFlowPersistence.test.tsx
new file mode 100644
index 0000000..21a4c1a
--- /dev/null
+++ b/src/test/oauthFlowPersistence.test.tsx
@@ -0,0 +1,181 @@
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+import { render, screen, fireEvent, waitFor, act, within } from '@testing-library/react'
+import { OAuthConfigurator } from '@/components/OAuthConfigurator'
+import { useOAuthFlowStore } from '@/store/oauthFlows'
+import { OAuth2Config } from '@/types'
+
+const invoke = vi.fn()
+vi.mock('@tauri-apps/api/core', () => ({ invoke: (...args: unknown[]) => invoke(...args) }))
+
+vi.mock('@/store/environments', () => ({
+  useEnvironmentStore: () => ({ getVariable: () => undefined }),
+}))
+
+const base: OAuth2Config = {
+  grantType: 'authorization_code',
+  clientId: 'client-abc',
+  authUrl: 'https://id.example.com/authorize',
+  tokenUrl: 'https://id.example.com/token',
+}
+
+/** A flow whose resolution this test controls, standing in for a browser sign-in. */
+function deferred<T>() {
+  let resolve!: (value: T) => void
+  let reject!: (reason: unknown) => void
+  const promise = new Promise<T>((res, rej) => { resolve = res; reject = rej })
+  return { promise, resolve, reject }
+}
+
+describe('an in-flight sign-in surviving a tab switch', () => {
+  beforeEach(() => {
+    invoke.mockReset()
+    useOAuthFlowStore.setState({ flows: {} })
+  })
+
+  // The bug: OAuthConfigurator only renders while auth.type === 'oauth2', so
+  // switching to a tab with different auth unmounts it. With the state held in
+  // the component, coming back showed an idle button for a sign-in that was
+  // still very much waiting.
+  it('is still pending after the component unmounts and comes back', async () => {
+    invoke.mockImplementation(() => new Promise(() => { }))
+
+    const { unmount } = render(
+      <OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-1" />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+    expect(await screen.findByTestId('cancel-token-request')).toBeInTheDocument()
+
+    unmount() // switch to a tab whose auth is not OAuth
+
+    render(<OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-1" />)
+
+    expect(screen.getByTestId('cancel-token-request')).toBeInTheDocument()
+    expect(screen.getByText(/Waiting for sign-in/)).toBeInTheDocument()
+  })
+
+  // The mirror of the same problem: switching to *another* OAuth tab keeps the
+  // component mounted with new props, so one tab's pending flow showed up on a
+  // different tab's screen.
+  it('is invisible on a tab it does not belong to', async () => {
+    invoke.mockImplementation(() => new Promise(() => { }))
+
+    const { rerender } = render(
+      <OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-1" />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+    expect(await screen.findByTestId('cancel-token-request')).toBeInTheDocument()
+
+    rerender(<OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-2" />)
+
+    expect(screen.queryByTestId('cancel-token-request')).not.toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /Get Access Token/i })).toBeEnabled()
+
+    // ...and is still there on the tab that owns it.
+    rerender(<OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-1" />)
+    expect(screen.getByTestId('cancel-token-request')).toBeInTheDocument()
+  })
+
+  it('delivers the token to the original tab even if that tab is not on screen', async () => {
+    // This already worked — onAuthChange closes over the tab it was created for
+    // — but nothing pinned it down, and it is the part that actually matters:
+    // completing a sign-in while looking at another tab must not lose the token.
+    const flow = deferred<Record<string, unknown>>()
+    invoke.mockReturnValue(flow.promise)
+    const onOAuth2Change = vi.fn()
+
+    const { unmount } = render(
+      <OAuthConfigurator oauth2={base} onOAuth2Change={onOAuth2Change} flowKey="tab-1" />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+    await screen.findByTestId('cancel-token-request')
+
+    unmount()
+
+    await act(async () => {
+      flow.resolve({ access_token: 'the-token', token_type: 'Bearer' })
+    })
+
+    expect(onOAuth2Change).toHaveBeenCalledWith(
+      expect.objectContaining({ accessToken: 'the-token', tokenType: 'Bearer' })
+    )
+    expect(useOAuthFlowStore.getState().flows['tab-1'].isLoading).toBe(false)
+  })
+
+  it('shows the outcome of a flow that finished while the tab was away', async () => {
+    const flow = deferred<Record<string, unknown>>()
+    invoke.mockReturnValue(flow.promise)
+
+    const { unmount } = render(
+      <OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-1" />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+    await screen.findByTestId('cancel-token-request')
+
+    unmount()
+    await act(async () => {
+      flow.reject('Authorization cancelled')
+    })
+
+    render(<OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-1" />)
+
+    expect(screen.getByText(/Authorization cancelled/)).toBeInTheDocument()
+    expect(screen.queryByTestId('cancel-token-request')).not.toBeInTheDocument()
+  })
+
+  it('keeps two tabs signing in at once apart', async () => {
+    invoke.mockImplementation(() => new Promise(() => { }))
+
+    // Queries are scoped to each render's own container — RTL's returned
+    // queries search the whole document by default, which would cross over.
+    const first = render(
+      <OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-1" />
+    )
+    fireEvent.click(within(first.container).getByRole('button', { name: /Get Access Token/i }))
+
+    const second = render(
+      <OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-2" />
+    )
+    fireEvent.click(within(second.container).getByRole('button', { name: /Get Access Token/i }))
+
+    await waitFor(() => {
+      const flows = useOAuthFlowStore.getState().flows
+      expect(flows['tab-1'].flowId).toBeTruthy()
+      expect(flows['tab-2'].flowId).toBeTruthy()
+      // Distinct ids, so cancelling one cannot abort the other.
+      expect(flows['tab-1'].flowId).not.toBe(flows['tab-2'].flowId)
+    })
+  })
+
+  it('isolates instances that are given no key at all', async () => {
+    invoke.mockImplementation(() => new Promise(() => { }))
+
+    const first = render(<OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} />)
+    fireEvent.click(within(first.container).getByRole('button', { name: /Get Access Token/i }))
+    await waitFor(() => expect(invoke).toHaveBeenCalled())
+
+    const second = render(<OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} />)
+    expect(within(second.container).queryByTestId('cancel-token-request')).not.toBeInTheDocument()
+    expect(within(first.container).getByTestId('cancel-token-request')).toBeInTheDocument()
+  })
+
+  it('drops a stale error when the token is cleared', async () => {
+    invoke.mockRejectedValueOnce('Something went wrong')
+
+    const { rerender } = render(
+      <OAuthConfigurator oauth2={base} onOAuth2Change={vi.fn()} flowKey="tab-1" />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /Get Access Token/i }))
+    expect(await screen.findByText(/Something went wrong/)).toBeInTheDocument()
+
+    rerender(
+      <OAuthConfigurator
+        oauth2={{ ...base, accessToken: 'tok' }}
+        onOAuth2Change={vi.fn()}
+        flowKey="tab-1"
+      />
+    )
+    fireEvent.click(screen.getByRole('button', { name: /^Clear$/i }))
+
+    expect(screen.queryByText(/Something went wrong/)).not.toBeInTheDocument()
+  })
+})
diff --git a/src/utils/auth.ts b/src/utils/auth.ts
index 5316a67..64852ed 100644
--- a/src/utils/auth.ts
+++ b/src/utils/auth.ts
@@ -1,4 +1,5 @@
 import { AuthConfig, Header } from '@/types'
+import { utf8ToBase64 } from '@/utils/base64'
 
 /**
  * Applies authentication settings to request headers
@@ -22,7 +23,7 @@ export function applyAuthToRequest(headers: Header[], auth: AuthConfig): Header[
           ? `${auth.username}:${auth.password}`
           : auth.username
         
-        const encodedCredentials = btoa(credentials)
+        const encodedCredentials = utf8ToBase64(credentials)
         
         // Check if authorization header already exists
         const existingAuthHeader = headersWithAuth.findIndex(
diff --git a/src/utils/authHeaders.ts b/src/utils/authHeaders.ts
index 336c548..0018575 100644
--- a/src/utils/authHeaders.ts
+++ b/src/utils/authHeaders.ts
@@ -1,4 +1,5 @@
 import { AuthConfig } from '@/types'
+import { basicAuthValue } from '@/utils/base64'
 
 /**
  * Set a header, replacing any existing key that differs only in case.
@@ -39,7 +40,7 @@ export function applyAuthToHeaders(
   if (auth.type === 'basic') {
     const username = substitute(auth.username || '')
     const password = substitute(auth.password || '')
-    setHeader(headers, 'Authorization', `Basic ${btoa(`${username}:${password}`)}`)
+    setHeader(headers, 'Authorization', basicAuthValue(username, password))
     return url
   }
 
diff --git a/src/utils/base64.ts b/src/utils/base64.ts
new file mode 100644
index 0000000..635905a
--- /dev/null
+++ b/src/utils/base64.ts
@@ -0,0 +1,39 @@
+/**
+ * Base64 that survives non-ASCII text.
+ *
+ * `btoa` and `atob` operate on Latin-1: every character has to fit in one byte.
+ * Hand `btoa` a string containing `é`, a CJK character or an emoji and it does
+ * not mangle the output, it *throws* `InvalidCharacterError` — so a password
+ * with an accent in it takes the whole request down rather than degrading.
+ * `atob` has the mirror problem, returning bytes-as-characters that read as
+ * mojibake once they are treated as text.
+ *
+ * Encoding to UTF-8 first, and decoding back out of it, is what RFC 7617 §2.1
+ * expects of Basic credentials and what servers overwhelmingly assume.
+ */
+
+/** UTF-8 encode, then base64. Safe for any string. */
+export function utf8ToBase64(text: string): string {
+  const bytes = new TextEncoder().encode(text)
+
+  // Built one character per byte rather than via String.fromCharCode(...bytes),
+  // which blows the argument limit on large inputs.
+  let binary = ''
+  for (const byte of bytes) {
+    binary += String.fromCharCode(byte)
+  }
+
+  return btoa(binary)
+}
+
+/** base64 decode, then read the bytes back as UTF-8. */
+export function base64ToUtf8(encoded: string): string {
+  const binary = atob(encoded)
+  const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
+  return new TextDecoder('utf-8').decode(bytes)
+}
+
+/** `Basic <base64(user:pass)>`, the one place these credentials get assembled. */
+export function basicAuthValue(username: string, password: string): string {
+  return `Basic ${utf8ToBase64(`${username}:${password}`)}`
+}
diff --git a/src/utils/codeSnippets.ts b/src/utils/codeSnippets.ts
index 59e5e1a..db70846 100644
--- a/src/utils/codeSnippets.ts
+++ b/src/utils/codeSnippets.ts
@@ -1,4 +1,5 @@
 import { AuthConfig, Header, Cookie } from "@/types"
+import { basicAuthValue } from "@/utils/base64"
 
 interface RequestData {
   method: string
@@ -16,8 +17,7 @@ function getAuthHeaders(auth: AuthConfig): Record<string, string> {
   switch (auth.type) {
     case 'basic':
       if (auth.username && auth.password) {
-        const credentials = btoa(`${auth.username}:${auth.password}`)
-        headers['Authorization'] = `Basic ${credentials}`
+        headers['Authorization'] = basicAuthValue(auth.username, auth.password)
       }
       break
     case 'bearer':
diff --git a/src/utils/curlParser.ts b/src/utils/curlParser.ts
index 04b9e72..d27fe90 100644
--- a/src/utils/curlParser.ts
+++ b/src/utils/curlParser.ts
@@ -1,4 +1,5 @@
 import { AuthConfig, Header, URLParam, Cookie, FormDataEntry } from "@/types"
+import { base64ToUtf8 } from "@/utils/base64"
 
 export interface ParsedCurlRequest {
     method: string
@@ -137,7 +138,10 @@ function detectAuth(headers: Record<string, string>): {
         const basicMatch = value.match(/^Basic\s+(.+)$/i)
         if (basicMatch) {
             try {
-                const decoded = atob(basicMatch[1])
+                // Decoded as UTF-8 to match how it was encoded — atob alone
+                // hands back bytes-as-characters, which reads as mojibake for
+                // any credential outside ASCII.
+                const decoded = base64ToUtf8(basicMatch[1])
                 const [username, ...passwordParts] = decoded.split(':')
                 return {
                     auth: {