Allow custom label for auth provider (#15673)

* Allow to pass custom label for auth provider

* Add tests

* Update api/src/cli/utils/create-env/env-stub.liquid

* Fix tests

Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com>

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"
 

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',

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);
+		});
+	}
+});

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`],
 		}));

app/src/routes/login/components/sso-links.vue

@@ -12,7 +12,7 @@
 					<v-icon :name="provider.icon" />
 				</div>
 				<div class="sso-title">
-					{{ t('log_in_with', { provider: provider.name }) }}
+					{{ t('log_in_with', { provider: provider.label }) }}
 				</div>
 			</a>
 		</template>
@@ -50,7 +50,8 @@ export default defineComponent({
 				ssoProviders.value = providers.value
 					.filter((provider: AuthProvider) => AUTH_SSO_DRIVERS.includes(provider.driver))
 					.map((provider: AuthProvider) => ({
-						name: formatTitle(provider.name),
+						name: provider.name,
+						label: provider.label || formatTitle(provider.name),
 						link: `${getRootPath()}auth/login/${provider.name}?redirect=${window.location.href.replace(
 							location.search,
 							''

app/src/types/login.ts

@@ -2,4 +2,5 @@ export interface AuthProvider {
 	driver: string;
 	name: string;
 	icon?: string;
+	label: string;
 }