fix: login redirect

coder · coadler · Oct 24, 2024 · Oct 23, 2024 · Oct 23, 2024 · Oct 23, 2024
commit cc25e09d343e04ff437285f5bc4ec253d7ca6794
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -256,5 +256,8 @@
 
 	"[css][html][markdown][yaml]": {
 		"editor.defaultFormatter": "esbenp.prettier-vscode"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
 	}
 }
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
 		"storybook": "pnpm run -C site/ storybook"
 	},
 	"devDependencies": {
+		"@biomejs/biome": "1.9.4",
 		"prettier": "3.3.3"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/site/src/api/queries/regions.ts b/site/src/api/queries/regions.ts
@@ -0,0 +1,14 @@
+import { API } from "api/api";
+import type { Region } from "api/typesGenerated";
+import type { MetadataState } from "hooks/useEmbeddedMetadata";
+import { cachedQuery } from "./util";
+
+const regionsKey = ["regions"] as const;
+
+export const regions = (metadata: MetadataState<readonly Region[]>) => {
+	return cachedQuery({
+		metadata,
+		queryKey: regionsKey,
+		queryFn: () => API.getWorkspaceProxyRegions(),
+	});
+};
diff --git a/site/src/pages/LoginPage/LoginPage.tsx b/site/src/pages/LoginPage/LoginPage.tsx
@@ -1,8 +1,9 @@
 import { buildInfo } from "api/queries/buildInfo";
+import { regions } from "api/queries/regions";
 import { authMethods } from "api/queries/users";
 import { useAuthContext } from "contexts/auth/AuthProvider";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
-import { type FC, useEffect } from "react";
+import { type FC, useEffect, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { Navigate, useLocation, useNavigate } from "react-router-dom";
@@ -28,6 +29,20 @@ export const LoginPage: FC = () => {
 	const navigate = useNavigate();
 	const { metadata } = useEmbeddedMetadata();
 	const buildInfoQuery = useQuery(buildInfo(metadata["build-info"]));
+	const regionsQuery = useQuery(regions(metadata.regions));
+	const [redirectError, setRedirectError] = useState<Error | null>(null);
+	let redirectUrl: URL | null = null;
+	try {
+		redirectUrl = new URL(redirectTo);
+	} catch (err) {
+		// Do nothing
+	}
+
+	const isApiRoute = redirectTo.startsWith("/api/v2");
+	const isLocalRedirect =
+		(!redirectUrl ||
+			(redirectUrl && redirectUrl.host === window.location.host)) &&
+		!isApiRoute;
 
 	useEffect(() => {
 		if (!buildInfoQuery.data || isSignedIn) {
@@ -41,42 +56,50 @@ export const LoginPage: FC = () => {
 		});
 	}, [isSignedIn, buildInfoQuery.data, user?.id]);
 
-	if (isSignedIn) {
-		if (buildInfoQuery.data) {
-			// This uses `navigator.sendBeacon`, so window.href
-			// will not stop the request from being sent!
-			sendDeploymentEvent(buildInfoQuery.data, {
-				type: "deployment_login",
-				user_id: user?.id,
-			});
+	useEffect(() => {
+		if (!isSignedIn || !regionsQuery.data || isLocalRedirect) {
+			return;
 		}
 
-		// If the redirect is going to a workspace application, and we
-		// are missing authentication, then we need to change the href location
-		// to trigger a HTTP request. This allows the BE to generate the auth
-		// cookie required.  Similarly for the OAuth2 exchange as the authorization
-		// page is served by the backend.
-		// If no redirect is present, then ignore this branched logic.
-		if (redirectTo !== "" && redirectTo !== "/") {
-			try {
-				// This catches any absolute redirects. Relative redirects
-				// will fail the try/catch. Subdomain apps are absolute redirects.
-				const redirectURL = new URL(redirectTo);
-				if (redirectURL.host !== window.location.host) {
-					window.location.href = redirectTo;
-					return null;
-				}
-			} catch {
-				// Do nothing
-			}
-			// Path based apps and OAuth2.
-			if (redirectTo.includes("/apps/") || redirectTo.includes("/oauth2/")) {
-				window.location.href = redirectTo;
-				return null;
-			}
+		const regions = regionsQuery.data.regions;
+		const pathUrls = regions
+			? regions
+					.map((region) => {
+						try {
+							return new URL(region.path_app_url);
+						} catch {
+							return null;
+						}
+					})
+					.filter((url) => url !== null)
+			: [];
+		const wildcardHostnames = regions
+			? regions
+					.map((region) => region.wildcard_hostname)
+					.filter((hostname) => hostname !== "")
+					// remove the leading '*' from the hostname
+					.map((hostname) => hostname.slice(1))
+			: [];
+
+		const allowed =
+			pathUrls.some((url) => url.host === window.location.host) ||
+			wildcardHostnames.some((wildcard) =>
+				window.location.host.endsWith(wildcard),
+			) ||
+			// api routes need to be manually set with href
+			isApiRoute;
+
+		if (allowed) {
+			window.location.href = redirectTo;
+		} else {
+			setRedirectError(new Error("invalid redirect url"));
 		}
+	}, [isSignedIn, regionsQuery.data, redirectTo, isLocalRedirect, isApiRoute]);
 
-		return <Navigate to={redirectTo} replace />;
+	if (isSignedIn && isLocalRedirect) {
+		return (
+			<Navigate to={redirectUrl ? redirectUrl.pathname : redirectTo} replace />
+		);
 	}
 
 	if (isConfiguringTheFirstUser) {
@@ -90,8 +113,10 @@ export const LoginPage: FC = () => {
 			</Helmet>
 			<LoginPageView
 				authMethods={authMethodsQuery.data}
-				error={signInError}
-				isLoading={isLoading || authMethodsQuery.isLoading}
+				error={redirectError ?? signInError}
+				isLoading={
+					isLoading || authMethodsQuery.isLoading || regionsQuery.isLoading
+				}
 				buildInfo={buildInfoQuery.data}
 				isSigningIn={isSigningIn}
 				onSignIn={async ({ email, password }) => {

diff --git a/site/src/utils/redirect.ts b/site/src/utils/redirect.ts
@@ -19,5 +19,5 @@ export const retrieveRedirect = (search: string): string => {
 	const defaultRedirect = "/";
 	const searchParams = new URLSearchParams(search);
 	const redirect = searchParams.get("redirect");
-	return redirect ? redirect : defaultRedirect;
+	return redirect ?? defaultRedirect;
 };