diff --git a/frontend/src/pages/integrations/gitlab/authorize.tsx b/frontend/src/pages/integrations/gitlab/authorize.tsx
new file mode 100644
index 000000000..d3ec0e255
--- /dev/null
+++ b/frontend/src/pages/integrations/gitlab/authorize.tsx
@@ -0,0 +1,53 @@
+import crypto from "crypto";
+
+import { useState } from "react";
+import { faGoogle } from "@fortawesome/free-brands-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+import { useGetCloudIntegrations } from "@app/hooks/api";
+
+import { Button, Card, CardTitle, FormControl, Input } from "../../../components/v2";
+
+export default function GitLabAuthorizeIntegrationPage() {
+ const { data: cloudIntegrations } = useGetCloudIntegrations();
+
+ const [gitLabURL, setGitLabURL] = useState("");
+
+ const handleIntegrateWithOAuth = () => {
+ if (!cloudIntegrations) return;
+ const integrationOption = cloudIntegrations.find((integration) => integration.slug === "gitlab");
+
+ if (!integrationOption) return;
+
+ const baseURL = gitLabURL.trim() === "" ? "https://gitlab.com" : gitLabURL.trim();
+
+ const csrfToken = crypto.randomBytes(16).toString("hex");
+ localStorage.setItem("latestCSRFToken", csrfToken);
+
+ const link = `${baseURL}/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
+ window.location.assign(link);
+ }
+
+ return (
+
+
+ GitLab Integration
+
+ setGitLabURL(e.target.value)}
+ />
+
+ }
+ className="h-11 w-full mx-0 mt-4"
+ >
+ Continue with OAuth
+
+
+
+ );
+}
+
+GitLabAuthorizeIntegrationPage.requireAuth = true;
diff --git a/frontend/src/pages/integrations/gitlab/oauth2/callback.tsx b/frontend/src/pages/integrations/gitlab/oauth2/callback.tsx
index 4df89f072..df5c98ad1 100644
--- a/frontend/src/pages/integrations/gitlab/oauth2/callback.tsx
+++ b/frontend/src/pages/integrations/gitlab/oauth2/callback.tsx
@@ -18,6 +18,7 @@ export default function GitLabOAuth2CallbackPage() {
if (state !== localStorage.getItem("latestCSRFToken")) return;
localStorage.removeItem("latestCSRFToken");
+ // TODO: self-hosted url somewhere here?
const integrationAuth = await mutateAsync({
workspaceId: localStorage.getItem("projectData.id") as string,
code: code as string,
diff --git a/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx b/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
index 3c8ba3785..f45e16ab6 100644
--- a/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
+++ b/frontend/src/views/IntegrationsPage/IntegrationPage.utils.tsx
@@ -64,7 +64,7 @@ export const redirectForProviderAuth = (integrationOption: TCloudIntegration) =>
link = `https://github.com/login/oauth/authorize?client_id=${integrationOption.clientId}&response_type=code&scope=repo&redirect_uri=${window.location.origin}/integrations/github/oauth2/callback&state=${state}`;
break;
case "gitlab":
- link = `https://gitlab.com/oauth/authorize?client_id=${integrationOption.clientId}&redirect_uri=${window.location.origin}/integrations/gitlab/oauth2/callback&response_type=code&state=${state}`;
+ link = `${window.location.origin}/integrations/gitlab/authorize`;
break;
case "render":
link = `${window.location.origin}/integrations/render/authorize`;