diff --git a/interface/components/LoginButton.tsx b/interface/components/LoginButton.tsx
index 25b8f4db5..641a0f864 100644
--- a/interface/components/LoginButton.tsx
+++ b/interface/components/LoginButton.tsx
@@ -5,21 +5,32 @@ import { usePlatform } from '..';
 
 export function LoginButton({ children, ...props }: { onLogin?(): void } & ButtonProps) {
 	const authState = auth.useStateSnapshot();
-
 	const platform = usePlatform();
 
 	return (
-		<Button
-			variant="accent"
-			disabled={authState.status === 'loggingIn'}
-			onClick={async () => {
-				await auth.login(platform.auth);
-
-				props.onLogin?.();
-			}}
-			{...props}
-		>
-			{authState.status !== 'loggingIn' ? children || 'Log in' : 'Logging In...'}
-		</Button>
+		<div className="flex flex-col items-center justify-center">
+			<Button
+				variant="accent"
+				disabled={authState.status === 'loggingIn'}
+				onClick={async () => {
+					await auth.login(platform.auth);
+					props.onLogin?.();
+				}}
+				{...props}
+			>
+				{authState.status !== 'loggingIn' ? children || 'Log in' : 'Logging In...'}
+			</Button>
+			{authState.status === 'loggingIn' && (
+				<button
+					onClick={(e) => {
+						e.preventDefault();
+						auth.cancel();
+					}}
+					className="mt-2 text-sm text-ink-faint"
+				>
+					Cancel
+				</button>
+			)}
+		</div>
 	);
 }
diff --git a/packages/client/src/stores/auth.ts b/packages/client/src/stores/auth.ts
index 3bb4f34aa..4e2260a73 100644
--- a/packages/client/src/stores/auth.ts
+++ b/packages/client/src/stores/auth.ts
@@ -11,6 +11,7 @@ export interface ProviderConfig {
 	start(key: string): any;
 	finish?(ret: any): void;
 }
+
 // inner object so we can overwrite it in one assignment
 const store = proxy<Store>({
 	state: {
@@ -32,7 +33,8 @@ nonLibraryClient
 		store.state = { status: 'notLoggedIn' };
 	});
 
-const loginCallbacks = new Set<(status: 'success' | 'error') => void>();
+type CallbackStatus = 'success' | 'error' | 'cancel';
+const loginCallbacks = new Set<(status: CallbackStatus) => void>();
 
 function onError() {
 	loginCallbacks.forEach((cb) => cb('error'));
@@ -57,7 +59,7 @@ export function login(config: ProviderConfig) {
 	});
 
 	return new Promise<void>((res, rej) => {
-		const cb = async (status: 'success' | 'error') => {
+		const cb = async (status: CallbackStatus) => {
 			loginCallbacks.delete(cb);
 
 			if (status === 'success') {
@@ -79,3 +81,9 @@ export function logout() {
 	nonLibraryClient.query(['auth.me']);
 	store.state = { status: 'notLoggedIn' };
 }
+
+export function cancel() {
+	loginCallbacks.forEach((cb) => cb('cancel'));
+	loginCallbacks.clear();
+	store.state = { status: 'notLoggedIn' };
+}