diff --git a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
index 9899e941fbfe9b6342e527340655acf6b9a203bb..24dfba585782079af0eca204d16dc9df7052ea6a 100644
--- a/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
+++ b/app/assets/javascripts/ide/components/oauth_domain_mismatch_error.vue
@@ -1,41 +1,38 @@
 <script>
-import { GlButton, GlSprintf, GlCollapsibleListbox, GlIcon } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlDisclosureDropdown } from '@gitlab/ui';
 import GITLAB_LOGO_SVG_URL from '@gitlab/svgs/dist/illustrations/gitlab_logo.svg?url';
 import { s__ } from '~/locale';
-import { logError } from '~/lib/logger';
+import { joinPaths, stripRelativeUrlRootFromPath } from '~/lib/utils/url_utility';
 
 export default {
   name: 'OAuthDomainMismatchError',
   components: {
     GlButton,
     GlSprintf,
-    GlCollapsibleListbox,
-    GlIcon,
+    GlDisclosureDropdown,
   },
   props: {
-    callbackUrlOrigins: {
+    expectedCallbackUrl: {
+      type: String,
+      required: true,
+    },
+    callbackUrls: {
       type: Array,
       required: true,
     },
   },
   computed: {
     dropdownItems() {
-      return this.callbackUrlOrigins.map((domain) => {
-        return {
-          value: domain,
-          text: domain,
-        };
-      });
-    },
-  },
-  methods: {
-    reloadPage(urlDomain) {
-      try {
-        const current = new URL(urlDomain + window.location.pathname);
-        window.location.replace(current.toString());
-      } catch (e) {
-        logError(s__('IDE|Error reloading page'), e);
-      }
+      const currentOrigin = window.location.origin;
+
+      return this.callbackUrls
+        .filter(({ base }) => new URL(base).origin !== currentOrigin)
+        .map(({ base }) => {
+          return {
+            href: joinPaths(base, stripRelativeUrlRootFromPath(window.location.pathname)),
+            text: base,
+          };
+        });
     },
   },
   gitlabLogo: GITLAB_LOGO_SVG_URL,
@@ -50,6 +47,7 @@ export default {
     description: s__(
       "IDE|The URL you're using to access the Web IDE and the configured OAuth callback URL do not match. This issue often occurs when you're using a proxy.",
     ),
+    expected: s__('IDE|Could not find a callback URL entry for %{expectedCallbackUrl}.'),
     contact: s__(
       'IDE|Contact your administrator or try to open the Web IDE again with another domain.',
     ),
@@ -64,27 +62,28 @@ export default {
       <p>
         {{ $options.i18n.description }}
       </p>
+      <gl-sprintf :message="$options.i18n.expected">
+        <template #expectedCallbackUrl>
+          <code>{{ expectedCallbackUrl }}</code>
+        </template>
+      </gl-sprintf>
       <p>
         {{ $options.i18n.contact }}
       </p>
       <div class="gl-mt-6">
-        <gl-collapsible-listbox
-          v-if="callbackUrlOrigins.length > 1"
+        <gl-disclosure-dropdown
+          v-if="dropdownItems.length > 1"
           :items="dropdownItems"
-          :header-text="$options.i18n.dropdownHeader"
-          @select="reloadPage"
+          :toggle-text="$options.i18n.buttonText.domains"
+        />
+        <gl-button
+          v-else-if="dropdownItems.length === 1"
+          variant="confirm"
+          :href="dropdownItems[0].href"
         >
-          <template #toggle>
-            <gl-button variant="confirm" class="self-center">
-              {{ $options.i18n.buttonText.domains }}
-              <gl-icon class="dropdown-chevron gl-ml-2" name="chevron-down" />
-            </gl-button>
-          </template>
-        </gl-collapsible-listbox>
-        <gl-button v-else variant="confirm" @click="reloadPage(callbackUrlOrigins[0])">
           <gl-sprintf :message="$options.i18n.buttonText.singleDomain">
             <template #domain>
-              {{ callbackUrlOrigins[0] }}
+              {{ dropdownItems[0].text }}
             </template>
           </gl-sprintf>
         </gl-button>
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index f754de6727c13fd8af14ef286aa71d89bbdcc216..c92fe21068d50c0576eba832829955ac9c37f0f6 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -112,3 +112,7 @@ export const DEFAULT_BRANCH = 'main';
 export const GITLAB_WEB_IDE_FEEDBACK_ISSUE = 'https://gitlab.com/gitlab-org/gitlab/-/issues/377367';
 
 export const IDE_ELEMENT_ID = 'ide';
+
+// note: This path comes from `config/routes.rb`
+export const IDE_PATH = '/-/ide';
+export const WEB_IDE_OAUTH_CALLBACK_URL_PATH = '/-/ide/oauth_redirect';
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index 020f8e98da19dad9d81837cef9e200b1b4a69c27..4b856550f2b943cfdf1c8e1c0e9fc304a7917ab1 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -24,24 +24,21 @@ export async function startIde(options) {
     return;
   }
 
-  const oAuthCallbackDomainMismatchApp = new OAuthCallbackDomainMismatchErrorApp(
-    ideElement,
-    ideElement.dataset.callbackUrls,
-  );
-
-  if (oAuthCallbackDomainMismatchApp.isVisitingFromNonRegisteredOrigin()) {
-    oAuthCallbackDomainMismatchApp.renderError();
-    return;
-  }
-
   const useNewWebIde = parseBoolean(ideElement.dataset.useNewWebIde);
 
-  if (useNewWebIde) {
-    const { initGitlabWebIDE } = await import('./init_gitlab_web_ide');
-    initGitlabWebIDE(ideElement);
-  } else {
+  if (!useNewWebIde) {
     resetServiceWorkersPublicPath();
     const { initLegacyWebIDE } = await import('./init_legacy_web_ide');
     initLegacyWebIDE(ideElement, options);
+    return;
+  }
+
+  const oAuthCallbackDomainMismatchApp = new OAuthCallbackDomainMismatchErrorApp(ideElement);
+
+  if (oAuthCallbackDomainMismatchApp.shouldRenderError()) {
+    oAuthCallbackDomainMismatchApp.renderError();
+    return;
   }
+  const { initGitlabWebIDE } = await import('./init_gitlab_web_ide');
+  initGitlabWebIDE(ideElement);
 }
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_base_config.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_base_config.js
index e131fb669ead710aa239cd3753135b55cc34608e..76a79fddf23760b35dc6f20308c634729ffacab2 100644
--- a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_base_config.js
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_base_config.js
@@ -10,6 +10,6 @@ const getGitLabUrl = (gitlabPath = '') => {
 export const getBaseConfig = () => ({
   // baseUrl - The URL which hosts the Web IDE static web assets
   baseUrl: getGitLabUrl(process.env.GITLAB_WEB_IDE_PUBLIC_PATH),
-  // baseUrl - The URL for the GitLab instance
+  // gitlabUrl - The URL for the GitLab instance
   gitlabUrl: getGitLabUrl(''),
 });
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js
index bcd3d240c8cb1c429c5a7665d844227eae1a484e..66a36896a31628cd2f7de64ade67e0149f258218 100644
--- a/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/get_oauth_config.js
@@ -1,4 +1,4 @@
-export const WEB_IDE_OAUTH_CALLBACK_URL_PATH = '/-/ide/oauth_redirect';
+import { getOAuthCallbackUrl } from './oauth_callback_urls';
 
 export const getOAuthConfig = ({ clientId }) => {
   if (!clientId) {
@@ -8,7 +8,7 @@ export const getOAuthConfig = ({ clientId }) => {
   return {
     type: 'oauth',
     clientId,
-    callbackUrl: new URL(WEB_IDE_OAUTH_CALLBACK_URL_PATH, window.location.origin).toString(),
+    callbackUrl: getOAuthCallbackUrl(),
     protectRefreshToken: true,
   };
 };
diff --git a/app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js b/app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js
new file mode 100644
index 0000000000000000000000000000000000000000..0ea0b83564f0a96760d0298b5399803ee5e98f52
--- /dev/null
+++ b/app/assets/javascripts/ide/lib/gitlab_web_ide/oauth_callback_urls.js
@@ -0,0 +1,75 @@
+import { joinPaths } from '~/lib/utils/url_utility';
+import { logError } from '~/lib/logger';
+import { WEB_IDE_OAUTH_CALLBACK_URL_PATH, IDE_PATH } from '../../constants';
+
+/**
+ * @returns callback URL constructed from current window url
+ */
+export function getOAuthCallbackUrl() {
+  const url = window.location.href;
+
+  // We don't rely on `gon.gitlab_url` and `gon.relative_url_root` here because these may not be configured correctly
+  // or we're visiting the instance through a proxy.
+  // Instead, we split on the `/-/ide` in the `href` and use the first part as the base URL.
+  const baseUrl = url.split(IDE_PATH, 2)[0];
+  const callbackUrl = joinPaths(baseUrl, WEB_IDE_OAUTH_CALLBACK_URL_PATH);
+
+  return callbackUrl;
+}
+
+const parseCallbackUrl = (urlStr) => {
+  let callbackUrl;
+
+  try {
+    callbackUrl = new URL(urlStr);
+  } catch {
+    // Not a valid URL. Nothing to do here.
+    return undefined;
+  }
+
+  // If we're an unexpected callback URL
+  if (!callbackUrl.pathname.endsWith(WEB_IDE_OAUTH_CALLBACK_URL_PATH)) {
+    return {
+      base: joinPaths(callbackUrl.origin, '/'),
+      url: urlStr,
+    };
+  }
+
+  // Else, trim the expected bit to get the origin + relative_url_root
+  const callbackRelativePath = callbackUrl.pathname.substring(
+    0,
+    callbackUrl.pathname.length - WEB_IDE_OAUTH_CALLBACK_URL_PATH.length,
+  );
+  const baseUrl = new URL(callbackUrl);
+  baseUrl.pathname = callbackRelativePath;
+  baseUrl.hash = '';
+  baseUrl.search = '';
+
+  return {
+    base: joinPaths(baseUrl.toString(), '/'),
+    url: urlStr,
+  };
+};
+
+export const parseCallbackUrls = (callbackUrlsJson) => {
+  if (!callbackUrlsJson) {
+    return [];
+  }
+
+  let urls;
+
+  try {
+    urls = JSON.parse(callbackUrlsJson);
+  } catch {
+    // why: We dont want to translate console errors
+    // eslint-disable-next-line @gitlab/require-i18n-strings
+    logError('Failed to parse callback URLs JSON');
+    return [];
+  }
+
+  if (!urls || !Array.isArray(urls)) {
+    return [];
+  }
+
+  return urls.map(parseCallbackUrl).filter(Boolean);
+};
diff --git a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
index 6598fe62d4979eca3c159df6d2bf59564b802aa2..bf9678bc498133916978e25a0a3fea58e923fefa 100644
--- a/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
+++ b/app/assets/javascripts/ide/oauth_callback_domain_mismatch_error.js
@@ -1,48 +1,43 @@
 import Vue from 'vue';
 import OAuthDomainMismatchError from './components/oauth_domain_mismatch_error.vue';
+import { parseCallbackUrls, getOAuthCallbackUrl } from './lib/gitlab_web_ide/oauth_callback_urls';
 
 export class OAuthCallbackDomainMismatchErrorApp {
   #el;
-  #callbackUrlOrigins;
+  #callbackUrls;
+  #expectedCallbackUrl;
 
-  constructor(el, callbackUrls) {
+  constructor(el) {
     this.#el = el;
-    this.#callbackUrlOrigins =
-      OAuthCallbackDomainMismatchErrorApp.#getCallbackUrlOrigins(callbackUrls);
+    this.#callbackUrls = parseCallbackUrls(el.dataset.callbackUrls);
+    this.#expectedCallbackUrl = getOAuthCallbackUrl();
   }
 
-  isVisitingFromNonRegisteredOrigin() {
-    return (
-      this.#callbackUrlOrigins.length && !this.#callbackUrlOrigins.includes(window.location.origin)
-    );
+  shouldRenderError() {
+    if (!this.#callbackUrls.length) {
+      return false;
+    }
+
+    return this.#callbackUrls.every(({ url }) => url !== this.#expectedCallbackUrl);
   }
 
   renderError() {
-    const callbackUrlOrigins = this.#callbackUrlOrigins;
+    const callbackUrls = this.#callbackUrls;
+    const expectedCallbackUrl = this.#expectedCallbackUrl;
     const el = this.#el;
 
     if (!el) return null;
 
     return new Vue({
       el,
-      data() {
-        return {
-          callbackUrlOrigins,
-        };
-      },
       render(createElement) {
         return createElement(OAuthDomainMismatchError, {
           props: {
-            callbackUrlOrigins,
+            expectedCallbackUrl,
+            callbackUrls,
           },
         });
       },
     });
   }
-
-  static #getCallbackUrlOrigins(callbackUrls) {
-    if (!callbackUrls) return [];
-
-    return JSON.parse(callbackUrls).map((url) => new URL(url).origin);
-  }
 }
diff --git a/app/assets/javascripts/lib/utils/url_utility.js b/app/assets/javascripts/lib/utils/url_utility.js
index b556595bc67e97ddb27002b9b16aaa4e6c1bf1d9..48b7cb86bda46795bba8f2e582556afca006ab41 100644
--- a/app/assets/javascripts/lib/utils/url_utility.js
+++ b/app/assets/javascripts/lib/utils/url_utility.js
@@ -780,3 +780,14 @@ export function buildURLwithRefType({ base = window.location.origin, path, refTy
   }
   return url.pathname + url.search;
 }
+
+export function stripRelativeUrlRootFromPath(path) {
+  const relativeUrlRoot = joinPaths(window.gon.relative_url_root, '/');
+
+  // If we have no relative url root or path doesn't start with it, just return the path
+  if (relativeUrlRoot === '/' || !path.startsWith(relativeUrlRoot)) {
+    return path;
+  }
+
+  return joinPaths('/', path.substring(relativeUrlRoot.length));
+}
diff --git a/config/routes.rb b/config/routes.rb
index 44903738510aa886847f72a94607328a54338037..3fede72eebb3b5a0e53ef5648b89e810f4b51c96 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -145,6 +145,7 @@
       scope :ide, as: :ide, format: false do
         get '/', to: 'ide#index'
         get '/project', to: 'ide#index'
+        # note: This path has a hardcoded reference in the FE `app/assets/javascripts/ide/constants.js`
         get '/oauth_redirect', to: 'ide#oauth_redirect'
 
         scope path: 'project/:project_id', as: :project, constraints: { project_id: Gitlab::PathRegex.full_namespace_route_regex } do
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index bf158a72e9d773aa60bed0e60a7ef2dab1c75006..30d4c98cea098aa6e8f36ae50ed5aef4b28b959d 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -26939,13 +26939,13 @@ msgstr ""
 msgid "IDE|Contact your administrator or try to open the Web IDE again with another domain."
 msgstr ""
 
-msgid "IDE|Edit"
+msgid "IDE|Could not find a callback URL entry for %{expectedCallbackUrl}."
 msgstr ""
 
-msgid "IDE|Editing this application might affect the functionality of the Web IDE. Ensure the configuration meets the following conditions:"
+msgid "IDE|Edit"
 msgstr ""
 
-msgid "IDE|Error reloading page"
+msgid "IDE|Editing this application might affect the functionality of the Web IDE. Ensure the configuration meets the following conditions:"
 msgstr ""
 
 msgid "IDE|GitLab logo"
diff --git a/package.json b/package.json
index 6a603dfde294cfb5561c24581cc3518fd68c8b6e..42c848bcb177a82e5932a3723c0a8b8e9c7cc475 100644
--- a/package.json
+++ b/package.json
@@ -76,7 +76,7 @@
     "@gitlab/query-language": "^0.0.5-a-20240806",
     "@gitlab/svgs": "3.112.0",
     "@gitlab/ui": "89.0.0",
-    "@gitlab/web-ide": "^0.0.1-dev-20240731185426",
+    "@gitlab/web-ide": "^0.0.1-dev-20240813211849",
     "@mattiasbuelens/web-streams-adapter": "^0.1.0",
     "@rails/actioncable": "7.0.8-4",
     "@rails/ujs": "7.0.8-4",
diff --git a/patches/@gitlab+web-ide+0.0.1-dev-20240731185426.patch b/patches/@gitlab+web-ide+0.0.1-dev-20240813211849.patch
similarity index 99%
rename from patches/@gitlab+web-ide+0.0.1-dev-20240731185426.patch
rename to patches/@gitlab+web-ide+0.0.1-dev-20240813211849.patch
index 815bfb36eebc2b219942883365f42319c34c83d4..0b40e9ec7d4019edd6add822d43fadec777615e5 100644
--- a/patches/@gitlab+web-ide+0.0.1-dev-20240731185426.patch
+++ b/patches/@gitlab+web-ide+0.0.1-dev-20240813211849.patch
@@ -2950,5 +2950,5 @@ index 6a16dd1..99b1df4 100644
 -	const parentOrigin = searchParams.get('parentOrigin') || window.origin;
 +	const parentOrigin = window.origin;
  	const salt = searchParams.get('salt');
- 
+
  	(async function () {
diff --git a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
index 1ce0201f5e9e006059971a0a90041e1edfd0fc2f..2de27b26aaea4cbea7a4bbcc4d1103dde756568b 100644
--- a/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
+++ b/spec/frontend/ide/components/oauth_domain_mismatch_error_spec.js
@@ -1,87 +1,111 @@
-import { GlButton, GlCollapsibleListbox, GlListboxItem } from '@gitlab/ui';
+import { GlButton, GlDisclosureDropdown } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
-import { nextTick } from 'vue';
-import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 import OAuthDomainMismatchError from '~/ide/components/oauth_domain_mismatch_error.vue';
 
-const MOCK_CALLBACK_URL_ORIGIN = 'https://example1.com';
-const MOCK_PATH_NAME = '/path/to/ide';
+const MOCK_CALLBACK_URLS = [
+  {
+    base: 'https://example1.com/',
+  },
+  {
+    base: 'https://example2.com/',
+  },
+  {
+    base: 'https://example3.com/relative-path/',
+  },
+];
+const MOCK_CALLBACK_URL = 'https://example.com';
+const MOCK_PATH_NAME = 'path/to/ide';
+
+const EXPECTED_DROPDOWN_ITEMS = MOCK_CALLBACK_URLS.map(({ base }) => ({
+  text: base,
+  href: `${base}${MOCK_PATH_NAME}`,
+}));
 
 describe('OAuthDomainMismatchError', () => {
-  useMockLocationHelper();
-
   let wrapper;
-  let originalLocation;
 
   const findButton = () => wrapper.findComponent(GlButton);
-  const findDropdown = () => wrapper.findComponent(GlCollapsibleListbox);
-  const findDropdownItems = () => wrapper.findAllComponents(GlListboxItem);
+  const findDropdown = () => wrapper.findComponent(GlDisclosureDropdown);
 
   const createWrapper = (props = {}) => {
     wrapper = mount(OAuthDomainMismatchError, {
       propsData: {
-        callbackUrlOrigins: [MOCK_CALLBACK_URL_ORIGIN],
+        expectedCallbackUrl: MOCK_CALLBACK_URL,
+        callbackUrls: MOCK_CALLBACK_URLS,
         ...props,
       },
     });
   };
 
   beforeEach(() => {
-    originalLocation = window.location;
-    window.location.pathname = MOCK_PATH_NAME;
-  });
-
-  afterEach(() => {
-    window.location = originalLocation;
+    setWindowLocation(`/${MOCK_PATH_NAME}`);
   });
 
   describe('single callback URL domain passed', () => {
     beforeEach(() => {
-      createWrapper();
+      createWrapper({
+        callbackUrls: MOCK_CALLBACK_URLS.slice(0, 1),
+      });
+    });
+
+    it('renders expected callback URL message', () => {
+      expect(wrapper.text()).toContain(
+        `Could not find a callback URL entry for ${MOCK_CALLBACK_URL}.`,
+      );
     });
 
     it('does not render dropdown', () => {
       expect(findDropdown().exists()).toBe(false);
     });
 
-    it('reloads page with correct url on button click', async () => {
-      findButton().vm.$emit('click');
-      await nextTick();
-
-      expect(window.location.replace).toHaveBeenCalledTimes(1);
-      expect(window.location.replace).toHaveBeenCalledWith(
-        new URL(MOCK_CALLBACK_URL_ORIGIN + MOCK_PATH_NAME).toString(),
-      );
+    it('renders button with correct attributes', () => {
+      const button = findButton();
+      expect(button.exists()).toBe(true);
+      const baseUrl = MOCK_CALLBACK_URLS[0].base;
+      expect(button.text()).toContain(baseUrl);
+      expect(button.attributes('href')).toBe(`${baseUrl}${MOCK_PATH_NAME}`);
     });
   });
 
   describe('multiple callback URL domains passed', () => {
-    const MOCK_CALLBACK_URL_ORIGINS = [MOCK_CALLBACK_URL_ORIGIN, 'https://example2.com'];
-
     beforeEach(() => {
-      createWrapper({ callbackUrlOrigins: MOCK_CALLBACK_URL_ORIGINS });
+      createWrapper();
     });
 
-    it('renders dropdown', () => {
-      expect(findDropdown().exists()).toBe(true);
+    it('renders dropdown with correct items', () => {
+      const dropdown = findDropdown();
+
+      expect(dropdown.exists()).toBe(true);
+      expect(dropdown.props('items')).toStrictEqual(EXPECTED_DROPDOWN_ITEMS);
+    });
+  });
+
+  describe('with erroneous callback from current origin', () => {
+    beforeEach(() => {
+      createWrapper({
+        callbackUrls: MOCK_CALLBACK_URLS.concat({
+          base: `${TEST_HOST}/foo`,
+        }),
+      });
     });
 
-    it('renders dropdown items', () => {
-      const dropdownItems = findDropdownItems();
-      expect(dropdownItems.length).toBe(MOCK_CALLBACK_URL_ORIGINS.length);
-      expect(dropdownItems.at(0).text()).toBe(MOCK_CALLBACK_URL_ORIGINS[0]);
-      expect(dropdownItems.at(1).text()).toBe(MOCK_CALLBACK_URL_ORIGINS[1]);
+    it('filters out item with current origin', () => {
+      expect(findDropdown().props('items')).toStrictEqual(EXPECTED_DROPDOWN_ITEMS);
     });
+  });
 
-    it('reloads page with correct url on dropdown item click', async () => {
-      const dropdownItem = findDropdownItems().at(0);
-      dropdownItem.vm.$emit('select', MOCK_CALLBACK_URL_ORIGIN);
-      await nextTick();
+  describe('when no callback URL passed', () => {
+    beforeEach(() => {
+      createWrapper({
+        callbackUrls: [],
+      });
+    });
 
-      expect(window.location.replace).toHaveBeenCalledTimes(1);
-      expect(window.location.replace).toHaveBeenCalledWith(
-        new URL(MOCK_CALLBACK_URL_ORIGIN + MOCK_PATH_NAME).toString(),
-      );
+    it('does not render dropdown or button', () => {
+      expect(findDropdown().exists()).toBe(false);
+      expect(findButton().exists()).toBe(false);
     });
   });
 });
diff --git a/spec/frontend/ide/helpers.js b/spec/frontend/ide/helpers.js
index e5797ca857530c1f6b67c739ed8f76016e20c676..89d3b14c43299ce94f8ec0c05368218eb57a9aa3 100644
--- a/spec/frontend/ide/helpers.js
+++ b/spec/frontend/ide/helpers.js
@@ -1,7 +1,6 @@
 import * as pathUtils from 'path';
-import { commitActionTypes } from '~/ide/constants';
+import { WEB_IDE_OAUTH_CALLBACK_URL_PATH, commitActionTypes } from '~/ide/constants';
 import { decorateData } from '~/ide/stores/utils';
-import { WEB_IDE_OAUTH_CALLBACK_URL_PATH } from '~/ide/lib/gitlab_web_ide/get_oauth_config';
 
 // eslint-disable-next-line max-params
 export const file = (name = 'name', id = name, type = '', parent = null) =>
diff --git a/spec/frontend/ide/index_spec.js b/spec/frontend/ide/index_spec.js
index 414c963aeb763a60e91d35ada8a98f1ea3364364..36a7f1c4b776ecfccdd99d1fd1724b4d8e4bdd6e 100644
--- a/spec/frontend/ide/index_spec.js
+++ b/spec/frontend/ide/index_spec.js
@@ -2,12 +2,16 @@ import { startIde } from '~/ide/index';
 import { IDE_ELEMENT_ID } from '~/ide/constants';
 import { OAuthCallbackDomainMismatchErrorApp } from '~/ide/oauth_callback_domain_mismatch_error';
 import { initGitlabWebIDE } from '~/ide/init_gitlab_web_ide';
+import { initLegacyWebIDE } from '~/ide/init_legacy_web_ide';
+import setWindowLocation from 'helpers/set_window_location_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 
 jest.mock('~/ide/init_gitlab_web_ide');
+jest.mock('~/ide/init_legacy_web_ide');
 
-const MOCK_CALLBACK_URL = `${window.location.origin}/ide/redirect`;
+const MOCK_MISMATCH_CALLBACK_URL = 'https://example.com/ide/redirect';
 const MOCK_DATA_SET = {
-  callbackUrls: JSON.stringify([MOCK_CALLBACK_URL]),
+  callbackUrls: JSON.stringify([`${TEST_HOST}/-/ide/oauth_redirect`]),
   useNewWebIde: true,
 };
 /**
@@ -27,12 +31,20 @@ const setupMockIdeElement = (customData = MOCK_DATA_SET) => {
 };
 
 describe('startIde', () => {
+  let renderErrorSpy;
+
+  beforeEach(() => {
+    setWindowLocation(`${TEST_HOST}/-/ide/edit/gitlab-org/gitlab`);
+    renderErrorSpy = jest.spyOn(OAuthCallbackDomainMismatchErrorApp.prototype, 'renderError');
+  });
+
   afterEach(() => {
-    document.getElementById(IDE_ELEMENT_ID).remove();
+    document.getElementById(IDE_ELEMENT_ID)?.remove();
   });
 
   describe('when useNewWebIde feature flag is true', () => {
     let ideElement;
+
     beforeEach(async () => {
       ideElement = setupMockIdeElement();
 
@@ -43,43 +55,53 @@ describe('startIde', () => {
       expect(initGitlabWebIDE).toHaveBeenCalledTimes(1);
       expect(initGitlabWebIDE).toHaveBeenCalledWith(ideElement);
     });
-  });
 
-  describe('OAuth callback origin mismatch check', () => {
-    let renderErrorSpy;
-
-    beforeEach(() => {
-      renderErrorSpy = jest.spyOn(OAuthCallbackDomainMismatchErrorApp.prototype, 'renderError');
+    it('does not render error page', () => {
+      expect(renderErrorSpy).not.toHaveBeenCalled();
     });
+  });
+
+  describe('with mismatch callback url', () => {
+    it('renders error page', async () => {
+      setupMockIdeElement({
+        callbackUrls: JSON.stringify([MOCK_MISMATCH_CALLBACK_URL]),
+        useNewWebIde: true,
+      });
 
-    it('does not render error page if no callbackUrl provided', async () => {
-      setupMockIdeElement({ useNewWebIde: true });
       await startIde();
 
-      expect(renderErrorSpy).not.toHaveBeenCalled();
-      expect(initGitlabWebIDE).toHaveBeenCalledTimes(1);
+      expect(renderErrorSpy).toHaveBeenCalledTimes(1);
+      expect(initGitlabWebIDE).not.toHaveBeenCalled();
     });
+  });
+
+  describe('with relative URL location and mismatch callback url', () => {
+    it('renders error page', async () => {
+      setWindowLocation(`${TEST_HOST}/relative-path/-/ide/edit/project`);
 
-    it('does not call renderOAuthDomainMismatchError if no mismatch detected', async () => {
       setupMockIdeElement();
+
       await startIde();
 
-      expect(renderErrorSpy).not.toHaveBeenCalled();
-      expect(initGitlabWebIDE).toHaveBeenCalledTimes(1);
+      expect(renderErrorSpy).toHaveBeenCalledTimes(1);
+      expect(initGitlabWebIDE).not.toHaveBeenCalled();
     });
+  });
 
-    it('renders error page if OAuth callback origin does not match window.location.origin', async () => {
-      const MOCK_MISMATCH_CALLBACK_URL = 'https://example.com/ide/redirect';
-      renderErrorSpy.mockImplementation(() => {});
-      setupMockIdeElement({
-        callbackUrls: JSON.stringify([MOCK_MISMATCH_CALLBACK_URL]),
-        useNewWebIde: true,
-      });
+  describe('when useNewWebIde feature flag is false', () => {
+    beforeEach(async () => {
+      setupMockIdeElement({ useNewWebIde: false });
 
       await startIde();
+    });
 
-      expect(renderErrorSpy).toHaveBeenCalledTimes(1);
-      expect(initGitlabWebIDE).not.toHaveBeenCalled();
+    it('calls initGitlabWebIDE', () => {
+      expect(initLegacyWebIDE).toHaveBeenCalledTimes(1);
+      expect(initGitlabWebIDE).toHaveBeenCalledTimes(0);
+    });
+
+    it('does not render error page', () => {
+      expect(renderErrorSpy).not.toHaveBeenCalled();
     });
   });
 });
diff --git a/spec/frontend/ide/lib/gitlab_web_ide/oauth_callback_urls_spec.js b/spec/frontend/ide/lib/gitlab_web_ide/oauth_callback_urls_spec.js
new file mode 100644
index 0000000000000000000000000000000000000000..61a8e3288d8bc9a8db2df8a72599609db90856d2
--- /dev/null
+++ b/spec/frontend/ide/lib/gitlab_web_ide/oauth_callback_urls_spec.js
@@ -0,0 +1,89 @@
+import {
+  parseCallbackUrls,
+  getOAuthCallbackUrl,
+} from '~/ide/lib/gitlab_web_ide/oauth_callback_urls';
+import { logError } from '~/lib/logger';
+import { joinPaths } from '~/lib/utils/url_utility';
+import { IDE_PATH, WEB_IDE_OAUTH_CALLBACK_URL_PATH } from '~/ide/constants';
+import setWindowLocation from 'helpers/set_window_location_helper';
+
+jest.mock('~/lib/logger');
+
+const MOCK_IDE_PATH = joinPaths(IDE_PATH, 'some/path');
+
+describe('ide/lib/oauth_callback_urls', () => {
+  describe('getOAuthCallbackUrl', () => {
+    const mockPath = MOCK_IDE_PATH;
+    const MOCK_RELATIVE_PATH = 'relative-path';
+    const mockPathWithRelative = joinPaths(MOCK_RELATIVE_PATH, MOCK_IDE_PATH);
+
+    const originalHref = window.location.href;
+
+    afterEach(() => {
+      setWindowLocation(originalHref);
+    });
+
+    const expectedBaseUrlWithRelative = joinPaths(window.location.origin, MOCK_RELATIVE_PATH);
+
+    it.each`
+      path                    | expectedCallbackBaseUrl
+      ${mockPath}             | ${window.location.origin}
+      ${mockPathWithRelative} | ${expectedBaseUrlWithRelative}
+    `(
+      'retrieves expected callback URL based on window url',
+      ({ path, expectedCallbackBaseUrl }) => {
+        setWindowLocation(path);
+
+        const actual = getOAuthCallbackUrl();
+        const expected = joinPaths(expectedCallbackBaseUrl, WEB_IDE_OAUTH_CALLBACK_URL_PATH);
+        expect(actual).toEqual(expected);
+      },
+    );
+  });
+  describe('parseCallbackUrls', () => {
+    it('parses the given JSON URL array and returns some metadata for them', () => {
+      const actual = parseCallbackUrls(
+        JSON.stringify([
+          'https://gitlab.com/-/ide/oauth_redirect',
+          'not a url',
+          'https://gdk.test:3443/-/ide/oauth_redirect/',
+          'https://gdk.test:3443/gitlab/-/ide/oauth_redirect#1234?query=foo',
+          'https://example.com/not-a-real-one-/ide/oauth_redirectz',
+        ]),
+      );
+
+      expect(actual).toEqual([
+        {
+          base: 'https://gitlab.com/',
+          url: 'https://gitlab.com/-/ide/oauth_redirect',
+        },
+        {
+          base: 'https://gdk.test:3443/',
+          url: 'https://gdk.test:3443/-/ide/oauth_redirect/',
+        },
+        {
+          base: 'https://gdk.test:3443/gitlab/',
+          url: 'https://gdk.test:3443/gitlab/-/ide/oauth_redirect#1234?query=foo',
+        },
+        {
+          base: 'https://example.com/',
+          url: 'https://example.com/not-a-real-one-/ide/oauth_redirectz',
+        },
+      ]);
+    });
+
+    it('returns empty when given empty', () => {
+      expect(parseCallbackUrls('')).toEqual([]);
+      expect(logError).not.toHaveBeenCalled();
+    });
+
+    it('returns empty when not valid JSON', () => {
+      expect(parseCallbackUrls('babar')).toEqual([]);
+      expect(logError).toHaveBeenCalledWith('Failed to parse callback URLs JSON');
+    });
+
+    it('returns empty when not array JSON', () => {
+      expect(parseCallbackUrls('{}')).toEqual([]);
+    });
+  });
+});
diff --git a/spec/frontend/ide/mount_oauth_callback_spec.js b/spec/frontend/ide/mount_oauth_callback_spec.js
index 9187fffca811497101fb0d3c42d4cd7edbf09f05..97a9a100ec9418debb9a103cbb1490a357b24590 100644
--- a/spec/frontend/ide/mount_oauth_callback_spec.js
+++ b/spec/frontend/ide/mount_oauth_callback_spec.js
@@ -46,7 +46,7 @@ describe('~/ide/mount_oauth_callback', () => {
         clientId: TEST_OAUTH_CLIENT_ID,
         protectRefreshToken: true,
       },
-      gitlabUrl: TEST_HOST,
+      gitlabUrl: `${TEST_HOST}`,
       baseUrl: `${TEST_HOST}/${TEST_GITLAB_WEB_IDE_PUBLIC_PATH}`,
       username: TEST_USERNAME,
     });
diff --git a/spec/frontend/lib/utils/url_utility_spec.js b/spec/frontend/lib/utils/url_utility_spec.js
index f9fa2f0e1a53bc820d2233fcb4c5ae5cc2ef5082..0a8c4ee1b2568925144663c5d61ae48434b06f1e 100644
--- a/spec/frontend/lib/utils/url_utility_spec.js
+++ b/spec/frontend/lib/utils/url_utility_spec.js
@@ -1296,4 +1296,21 @@ describe('URL utility', () => {
       expect(urlUtils.buildURLwithRefType({ base, path, refType })).toBe(output);
     });
   });
+
+  describe('stripRelativeUrlRootFromPath', () => {
+    it.each`
+      relativeUrlRoot | path                   | expectation
+      ${''}           | ${'/foo/bar'}          | ${'/foo/bar'}
+      ${'/'}          | ${'/foo/bar'}          | ${'/foo/bar'}
+      ${'/foo'}       | ${'/foo/bar'}          | ${'/bar'}
+      ${'/gitlab/'}   | ${'/gitlab/-/ide/foo'} | ${'/-/ide/foo'}
+    `(
+      'with relative_url_root="$relativeUrlRoot", "$path" should return "$expectation"',
+      ({ relativeUrlRoot, path, expectation }) => {
+        window.gon.relative_url_root = relativeUrlRoot;
+
+        expect(urlUtils.stripRelativeUrlRootFromPath(path)).toBe(expectation);
+      },
+    );
+  });
 });
diff --git a/yarn.lock b/yarn.lock
index 9a38cd923650f43193aff723947fa605ece08799..8b437a42d21ad68c33faadde6866360984444b0e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1378,10 +1378,10 @@
     vue-functional-data-merge "^3.1.0"
     vue-runtime-helpers "^1.1.2"
 
-"@gitlab/web-ide@^0.0.1-dev-20240731185426":
-  version "0.0.1-dev-20240731185426"
-  resolved "https://registry.yarnpkg.com/@gitlab/web-ide/-/web-ide-0.0.1-dev-20240731185426.tgz#dd80adac2286131b08ccb13f590befe80a8e1981"
-  integrity sha512-Mfnglz0j1UTNtSP+PMIlasbUQMSrUZFjrhUgy9KwdzOIUqe3SdjXs9hAaeYWQ2KAM8libarsqrHTVvstsLJKhw==
+"@gitlab/web-ide@^0.0.1-dev-20240813211849":
+  version "0.0.1-dev-20240813211849"
+  resolved "https://registry.yarnpkg.com/@gitlab/web-ide/-/web-ide-0.0.1-dev-20240813211849.tgz#da0e6c8ce1137ac7983dd743e0372d6fc8554155"
+  integrity sha512-JrTgCh+PiWe4pQzdy7KuvIaZjPazoQdBOVzlPzYr7e9tP95w9l5Wy+4I2et4vva0NKRmYYllaqGxxbRTyCCfcA==
 
 "@graphql-eslint/eslint-plugin@3.20.1":
   version "3.20.1"
@@ -12914,16 +12914,7 @@ string-length@^4.0.1:
     char-regex "^1.0.2"
     strip-ansi "^6.0.0"
 
-"string-width-cjs@npm:string-width@^4.2.0":
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
-string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -12975,7 +12966,7 @@ string_decoder@^1.0.0, string_decoder@^1.1.1, string_decoder@~1.1.1:
   dependencies:
     safe-buffer "~5.1.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -12989,13 +12980,6 @@ strip-ansi@^5.2.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.1, strip-ansi@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -14670,7 +14654,7 @@ worker-loader@^3.0.8:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -14688,15 +14672,6 @@ wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"