diff --git a/api/src/cli/utils/create-env/env-stub.liquid b/api/src/cli/utils/create-env/env-stub.liquid
index a061472c36..a38e821471 100644
--- a/api/src/cli/utils/create-env/env-stub.liquid
+++ b/api/src/cli/utils/create-env/env-stub.liquid
@@ -273,6 +273,7 @@ AUTH_PROVIDERS=""
# AUTH_GITHUB_ALLOW_PUBLIC_REGISTRATION=true
# AUTH_GITHUB_DEFAULT_ROLE_ID="82424427-c9d4-4289-8bc5-ed1bf8422c90"
# AUTH_GITHUB_ICON="github"
+# AUTH_GITHUB_LABEL="GitHub"
# AUTH_GITHUB_EMAIL_KEY="email"
# AUTH_GITHUB_IDENTIFIER_KEY="login"
diff --git a/api/src/env.ts b/api/src/env.ts
index 722dd78200..ba35576c89 100644
--- a/api/src/env.ts
+++ b/api/src/env.ts
@@ -120,6 +120,7 @@ const allowedEnvironmentVars = [
'AUTH_.+_ALLOW_PUBLIC_REGISTRATION',
'AUTH_.+_DEFAULT_ROLE_ID',
'AUTH_.+_ICON',
+ 'AUTH_.+_LABEL',
'AUTH_.+_PARAMS',
'AUTH_.+_ISSUER_URL',
'AUTH_.+_AUTH_REQUIRE_VERIFIED_EMAIL',
diff --git a/api/src/utils/get-auth-providers.test.ts b/api/src/utils/get-auth-providers.test.ts
new file mode 100644
index 0000000000..586643aff5
--- /dev/null
+++ b/api/src/utils/get-auth-providers.test.ts
@@ -0,0 +1,83 @@
+let factoryEnv: { [k: string]: any } = {};
+
+jest.mock(
+ '../../src/env',
+ () =>
+ new Proxy(
+ {},
+ {
+ get(target, prop) {
+ return factoryEnv[prop as string];
+ },
+ }
+ )
+);
+
+import { getAuthProviders } from '../../src/utils/get-auth-providers';
+
+const scenarios = [
+ {
+ name: 'when no providers configured',
+ input: {},
+ output: [],
+ },
+ {
+ name: 'when no driver configured',
+ input: {
+ AUTH_PROVIDERS: 'directus',
+ },
+ output: [],
+ },
+
+ {
+ name: 'when single provider and driver are properly configured',
+ input: {
+ AUTH_PROVIDERS: 'directus',
+ AUTH_DIRECTUS_DRIVER: 'openid',
+ AUTH_DIRECTUS_LABEL: 'Directus',
+ AUTH_DIRECTUS_ICON: 'hare',
+ },
+ output: [
+ {
+ name: 'directus',
+ driver: 'openid',
+ label: 'Directus',
+ icon: 'hare',
+ },
+ ],
+ },
+
+ {
+ name: 'when multiple provider and driver are properly configured',
+ input: {
+ AUTH_PROVIDERS: 'directus,custom',
+ AUTH_DIRECTUS_DRIVER: 'openid',
+ AUTH_DIRECTUS_LABEL: 'Directus',
+ AUTH_DIRECTUS_ICON: 'hare',
+ AUTH_CUSTOM_DRIVER: 'openid',
+ AUTH_CUSTOM_ICON: 'lock',
+ },
+ output: [
+ {
+ name: 'directus',
+ driver: 'openid',
+ label: 'Directus',
+ icon: 'hare',
+ },
+ {
+ name: 'custom',
+ driver: 'openid',
+ icon: 'lock',
+ },
+ ],
+ },
+];
+
+describe('get auth providers', () => {
+ for (const scenario of scenarios) {
+ test(scenario.name, () => {
+ factoryEnv = scenario.input;
+ expect(getAuthProviders()).toEqual(scenario.output);
+ });
+ }
+});
diff --git a/api/src/utils/get-auth-providers.ts b/api/src/utils/get-auth-providers.ts
index fbe5b33504..e380a5d20b 100644
--- a/api/src/utils/get-auth-providers.ts
+++ b/api/src/utils/get-auth-providers.ts
@@ -2,6 +2,7 @@ import { toArray } from '@directus/shared/utils';
import env from '../env';
interface AuthProvider {
+ label: string;
name: string;
driver: string;
icon?: string;
@@ -12,6 +13,7 @@ export function getAuthProviders(): AuthProvider[] {
.filter((provider) => provider && env[`AUTH_${provider.toUpperCase()}_DRIVER`])
.map((provider) => ({
name: provider,
+ label: env[`AUTH_${provider.toUpperCase()}_LABEL`],
driver: env[`AUTH_${provider.toUpperCase()}_DRIVER`],
icon: env[`AUTH_${provider.toUpperCase()}_ICON`],
}));
diff --git a/app/src/routes/login/components/sso-links.vue b/app/src/routes/login/components/sso-links.vue
index 73ff0bc7d3..d93cfcd305 100644
--- a/app/src/routes/login/components/sso-links.vue
+++ b/app/src/routes/login/components/sso-links.vue
@@ -12,7 +12,7 @@