diff --git a/packages/integration/package.json b/packages/integration/package.json
index a7cd63171b..dae59920d7 100644
--- a/packages/integration/package.json
+++ b/packages/integration/package.json
@@ -38,6 +38,7 @@
   },
   "devDependencies": {
     "@backstage/cli": "^0.6.1",
+    "@backstage/config-loader": "^0.5.1",
     "@backstage/test-utils": "^0.1.7",
     "@types/jest": "^26.0.7",
     "@types/luxon": "^1.25.0",
diff --git a/packages/integration/src/azure/config.test.ts b/packages/integration/src/azure/config.test.ts
index eed88f09f6..4bfdb1290d 100644
--- a/packages/integration/src/azure/config.test.ts
+++ b/packages/integration/src/azure/config.test.ts
@@ -15,6 +15,7 @@
  */
 
 import { Config, ConfigReader } from '@backstage/config';
+import { loadConfigSchema } from '@backstage/config-loader';
 import {
   AzureIntegrationConfig,
   readAzureIntegrationConfig,
@@ -26,6 +27,19 @@ describe('readAzureIntegrationConfig', () => {
     return new ConfigReader(data);
   }
 
+  async function buildFrontendConfig(
+    data: Partial<AzureIntegrationConfig>,
+  ): Promise<Config> {
+    const schema = await loadConfigSchema({
+      dependencies: [require('../../package.json').name],
+    });
+    const processed = schema.process(
+      [{ data: { integrations: { azure: [data] } }, context: 'app' }],
+      { visibility: ['frontend'] },
+    );
+    return new ConfigReader((processed[0].data as any).integrations.azure[0]);
+  }
+
   it('reads all values', () => {
     const output = readAzureIntegrationConfig(
       buildConfig({
@@ -56,6 +70,19 @@ describe('readAzureIntegrationConfig', () => {
       readAzureIntegrationConfig(buildConfig({ ...valid, token: 7 })),
     ).toThrow(/token/);
   });
+
+  it('works on the frontend', async () => {
+    expect(
+      readAzureIntegrationConfig(
+        await buildFrontendConfig({
+          host: 'a.com',
+          token: 't',
+        }),
+      ),
+    ).toEqual({
+      host: 'a.com',
+    });
+  });
 });
 
 describe('readAzureIntegrationConfigs', () => {
diff --git a/packages/integration/src/bitbucket/config.test.ts b/packages/integration/src/bitbucket/config.test.ts
index 9106afbe4f..bad51befbc 100644
--- a/packages/integration/src/bitbucket/config.test.ts
+++ b/packages/integration/src/bitbucket/config.test.ts
@@ -15,6 +15,7 @@
  */
 
 import { Config, ConfigReader } from '@backstage/config';
+import { loadConfigSchema } from '@backstage/config-loader';
 import {
   BitbucketIntegrationConfig,
   readBitbucketIntegrationConfig,
@@ -26,6 +27,21 @@ describe('readBitbucketIntegrationConfig', () => {
     return new ConfigReader(data);
   }
 
+  async function buildFrontendConfig(
+    data: Partial<BitbucketIntegrationConfig>,
+  ): Promise<Config> {
+    const schema = await loadConfigSchema({
+      dependencies: [require('../../package.json').name],
+    });
+    const processed = schema.process(
+      [{ data: { integrations: { bitbucket: [data] } }, context: 'app' }],
+      { visibility: ['frontend'] },
+    );
+    return new ConfigReader(
+      (processed[0].data as any).integrations.bitbucket[0],
+    );
+  }
+
   it('reads all values', () => {
     const output = readBitbucketIntegrationConfig(
       buildConfig({
@@ -79,6 +95,23 @@ describe('readBitbucketIntegrationConfig', () => {
       readBitbucketIntegrationConfig(buildConfig({ ...valid, appPassword: 7 })),
     ).toThrow(/appPassword/);
   });
+
+  it('works on the frontend', async () => {
+    expect(
+      readBitbucketIntegrationConfig(
+        await buildFrontendConfig({
+          host: 'a.com',
+          apiBaseUrl: 'https://a.com/api',
+          token: 't',
+          username: 'u',
+          appPassword: 'p',
+        }),
+      ),
+    ).toEqual({
+      host: 'a.com',
+      apiBaseUrl: 'https://a.com/api',
+    });
+  });
 });
 
 describe('readBitbucketIntegrationConfigs', () => {
diff --git a/packages/integration/src/github/config.test.ts b/packages/integration/src/github/config.test.ts
index bcac7dc82c..e0e7500488 100644
--- a/packages/integration/src/github/config.test.ts
+++ b/packages/integration/src/github/config.test.ts
@@ -15,6 +15,7 @@
  */
 
 import { Config, ConfigReader } from '@backstage/config';
+import { loadConfigSchema } from '@backstage/config-loader';
 import {
   GitHubIntegrationConfig,
   readGitHubIntegrationConfig,
@@ -26,6 +27,19 @@ describe('readGitHubIntegrationConfig', () => {
     return new ConfigReader(provider);
   }
 
+  async function buildFrontendConfig(
+    data: Partial<GitHubIntegrationConfig>,
+  ): Promise<Config> {
+    const schema = await loadConfigSchema({
+      dependencies: [require('../../package.json').name],
+    });
+    const processed = schema.process(
+      [{ data: { integrations: { github: [data] } }, context: 'app' }],
+      { visibility: ['frontend'] },
+    );
+    return new ConfigReader((processed[0].data as any).integrations.github[0]);
+  }
+
   it('reads all values', () => {
     const output = readGitHubIntegrationConfig(
       buildConfig({
@@ -74,6 +88,23 @@ describe('readGitHubIntegrationConfig', () => {
       readGitHubIntegrationConfig(buildConfig({ ...valid, token: 7 })),
     ).toThrow(/token/);
   });
+
+  it('works on the frontend', async () => {
+    expect(
+      readGitHubIntegrationConfig(
+        await buildFrontendConfig({
+          host: 'a.com',
+          apiBaseUrl: 'https://a.com/api',
+          rawBaseUrl: 'https://a.com/raw',
+          token: 't',
+        }),
+      ),
+    ).toEqual({
+      host: 'a.com',
+      apiBaseUrl: 'https://a.com/api',
+      rawBaseUrl: 'https://a.com/raw',
+    });
+  });
 });
 
 describe('readGitHubIntegrationConfigs', () => {
diff --git a/packages/integration/src/gitlab/config.test.ts b/packages/integration/src/gitlab/config.test.ts
index bfa59d001e..99b4613321 100644
--- a/packages/integration/src/gitlab/config.test.ts
+++ b/packages/integration/src/gitlab/config.test.ts
@@ -15,6 +15,7 @@
  */
 
 import { Config, ConfigReader } from '@backstage/config';
+import { loadConfigSchema } from '@backstage/config-loader';
 import {
   GitLabIntegrationConfig,
   readGitLabIntegrationConfig,
@@ -26,6 +27,19 @@ describe('readGitLabIntegrationConfig', () => {
     return new ConfigReader(data);
   }
 
+  async function buildFrontendConfig(
+    data: Partial<GitLabIntegrationConfig>,
+  ): Promise<Config> {
+    const schema = await loadConfigSchema({
+      dependencies: [require('../../package.json').name],
+    });
+    const processed = schema.process(
+      [{ data: { integrations: { gitlab: [data] } }, context: 'app' }],
+      { visibility: ['frontend'] },
+    );
+    return new ConfigReader((processed[0].data as any).integrations.gitlab[0]);
+  }
+
   it('reads all values', () => {
     const output = readGitLabIntegrationConfig(
       buildConfig({
@@ -79,6 +93,23 @@ describe('readGitLabIntegrationConfig', () => {
       readGitLabIntegrationConfig(buildConfig({ ...valid, token: 7 })),
     ).toThrow(/token/);
   });
+
+  it('works on the frontend', async () => {
+    expect(
+      readGitLabIntegrationConfig(
+        await buildFrontendConfig({
+          host: 'a.com',
+          apiBaseUrl: 'https://a.com/api',
+          token: 't',
+          baseUrl: 'https://a.com',
+        }),
+      ),
+    ).toEqual({
+      host: 'a.com',
+      apiBaseUrl: 'https://a.com/api',
+      baseUrl: 'https://a.com',
+    });
+  });
 });
 
 describe('readGitLabIntegrationConfigs', () => {