Warn about a few login scenarios that might not work

https://harperdb.atlassian.net/browse/STUDIO-242

Author: dawsontoth

src/features/auth/ClusterInstanceSignIn.tsx

@@ -13,6 +13,7 @@ import { getClusterInfoQueryOptions } from '@/features/cluster/queries/getCluste
 import { useInstanceLoginMutation } from '@/features/instance/operations/mutations/useInstanceLoginMutation';
 import { getInstanceUserInfo } from '@/features/instance/operations/queries/getInstanceUserInfo';
 import { authStore, OverallAppSignIn } from '@/lib/authStore';
+import { CrossLocalhostIssueType, detectCrossLocalhostUrls } from '@/lib/urls/detectCrossLocalhostUrls';
 import { getOperationsUrlForCluster } from '@/lib/urls/getOperationsUrlForCluster';
 import { getOperationsUrlForInstance } from '@/lib/urls/getOperationsUrlForInstance';
 import { queryKeys } from '@/react-query/constants';
@@ -42,6 +43,7 @@ export function ClusterInstanceSignIn() {
 	const navigate = useNavigate();
 	const router = useRouter();
 	const queryClient = useQueryClient();
+	const { redirect } = useSearch({ strict: false });
 	const { clusterId, instanceId }: { instanceId?: string; clusterId?: string; } = useParams({ strict: false });
 	const { data: cluster } = useQuery(
 		getClusterInfoQueryOptions(clusterId, true),
@@ -61,8 +63,12 @@ export function ClusterInstanceSignIn() {
 		}
 		return null;
 	}, [cluster, instance]);
+
 	const instanceClient = useInstanceClient(operationsUrl);
-	const { redirect } = useSearch({ strict: false });
+	const warnAboutLoginCookieIssues = useMemo(
+		() => detectCrossLocalhostUrls(navigator.userAgent, location.hostname, operationsUrl),
+		[operationsUrl],
+	);
 
 	const form = useForm<z.infer<typeof SignInSchema>>({
 		resolver: zodResolver(SignInSchema),
@@ -158,6 +164,19 @@ export function ClusterInstanceSignIn() {
 							<Button disabled={isPending} type="submit" variant="submit" className="w-full my-2 rounded-full">
 								Sign In
 							</Button>
+							{warnAboutLoginCookieIssues === CrossLocalhostIssueType.MixedLoopback && (
+								<div className="p-4 mt-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300" role="alert">
+									<span className="font-medium">Warning!</span> Your login might not work because
+									you're mixing 127.0.0.1 and localhost. Pick one or the other.
+								</div>
+							)}
+							{warnAboutLoginCookieIssues === CrossLocalhostIssueType.InsecureCookieOutsideChromeAndFirefox && (
+								<div className="p-4 mt-4 text-sm text-yellow-800 rounded-lg bg-yellow-50 dark:bg-gray-800 dark:text-yellow-300" role="alert">
+									<span className="font-medium">Warning!</span> Your login might not work because your
+									browser doesn't consider localhost to be secure, so it doesn't pass the cookies
+									along. Firefox or Chromium based browsers should pass the cookies properly.
+								</div>
+							)}
 						</form>
 					</Form>
 				</div>

src/lib/urls/detectCrossLocalhostUrls.test.ts

@@ -0,0 +1,58 @@
+import { describe, expect, it } from 'vitest';
+import { CrossLocalhostIssueType, detectCrossLocalhostUrls } from './detectCrossLocalhostUrls';
+
+describe('detectCrossLocalhostUrls', () => {
+	const chrome = 'Chrome';
+	const firefox = 'Firefox';
+	const safari = 'Safari';
+
+	it('returns null when operationsUrl is null', () => {
+		expect(detectCrossLocalhostUrls(chrome, 'localhost', null)).toBe(null);
+	});
+
+	it('returns null when operationsUrl is undefined', () => {
+		expect(detectCrossLocalhostUrls(chrome, 'localhost', undefined)).toBe(null);
+	});
+
+	it('returns null when operationsUrl is empty string', () => {
+		expect(detectCrossLocalhostUrls(chrome, 'localhost', '')).toBe(null);
+	});
+
+	it('returns null when browserHostname is missing', () => {
+		expect(detectCrossLocalhostUrls(chrome, undefined, 'http://localhost:3000')).toBe(null);
+	});
+
+	it('returns null when browserHostname is not localhost or 127.0.0.1', () => {
+		expect(detectCrossLocalhostUrls(chrome, 'example.com', 'http://localhost:3000')).toBe(null);
+		expect(detectCrossLocalhostUrls(chrome, 'my.dev', 'http://127.0.0.1:3000')).toBe(null);
+	});
+
+	it('returns true when browser is localhost and operationsUrl is 127.0.0.1', () => {
+		expect(detectCrossLocalhostUrls(chrome, 'localhost', 'http://127.0.0.1:3000')).toBe(CrossLocalhostIssueType.MixedLoopback);
+	});
+
+	it('returns true when browser is 127.0.0.1 and operationsUrl is localhost', () => {
+		expect(detectCrossLocalhostUrls(chrome, '127.0.0.1', 'http://localhost:8080')).toBe(CrossLocalhostIssueType.MixedLoopback);
+	});
+
+	it('returns null when both hostnames match (localhost)', () => {
+		expect(detectCrossLocalhostUrls(chrome, 'localhost', 'http://localhost:8080')).toBe(null);
+	});
+
+	it('returns null when both hostnames match (127.0.0.1)', () => {
+		expect(detectCrossLocalhostUrls(chrome, '127.0.0.1', 'http://127.0.0.1:8080')).toBe(null);
+	});
+
+	it('ignores port differences and only compares hostname', () => {
+		// Hostnames differ -> true
+		expect(detectCrossLocalhostUrls(chrome, 'localhost', 'http://127.0.0.1:1234')).toBe(CrossLocalhostIssueType.MixedLoopback);
+		// Hostnames same -> null even if ports different
+		expect(detectCrossLocalhostUrls(chrome, 'localhost', 'http://localhost:1234')).toBe(null);
+	});
+
+	it('returns true when connecting from the cloud to local outside Chrome and Firefox', () => {
+		expect(detectCrossLocalhostUrls(chrome, 'prod.com', 'http://127.0.0.1:8080')).toBe(null);
+		expect(detectCrossLocalhostUrls(firefox, 'prod.com', 'http://127.0.0.1:8080')).toBe(null);
+		expect(detectCrossLocalhostUrls(safari, 'prod.com', 'http://127.0.0.1:8080')).toBe(CrossLocalhostIssueType.InsecureCookieOutsideChromeAndFirefox);
+	});
+});

src/lib/urls/detectCrossLocalhostUrls.ts

@@ -0,0 +1,40 @@
+const localHostnames = [
+	'localhost',
+	'127.0.0.1',
+];
+
+export const enum CrossLocalhostIssueType {
+	MixedLoopback = 'MixedLoopback',
+	InsecureCookieOutsideChromeAndFirefox = 'InsecureCookieOutsideChromeAndFirefox',
+}
+
+export function detectCrossLocalhostUrls(
+	userAgent: string | undefined,
+	browserHostname: string | undefined,
+	operationsUrl: string | undefined | null,
+): CrossLocalhostIssueType | null {
+	if (!operationsUrl || !browserHostname || !userAgent) {
+		return null;
+	}
+	const serverHostname = new URL(operationsUrl).hostname;
+	const browserIsLocal = localHostnames.includes(browserHostname);
+	const serverIsLocal = localHostnames.includes(serverHostname);
+
+	if (browserIsLocal && serverIsLocal && serverHostname !== browserHostname) {
+		// When running Studio locally and self-managing locally, warn when we mix localhost and 127.0.0.1.
+		return CrossLocalhostIssueType.MixedLoopback;
+	}
+
+	if (!browserIsLocal && serverIsLocal) {
+		const isChromium = userAgent.indexOf('Chrome') >= 0;
+		const isFirefox = userAgent.indexOf('Firefox') >= 0;
+		if (!isChromium && !isFirefox) {
+			// When running Studio in the cloud, and signing in to a local instance, Chrome and Firefox allow the
+			// cookies to cross to the insecure localhost because they consider it to be secure enough.
+			// https://github.com/httpwg/http-extensions/issues/2605
+			return CrossLocalhostIssueType.InsecureCookieOutsideChromeAndFirefox;
+		}
+	}
+
+	return null;
+}