feat(app): dynamic authentication provider support

This change adds support for loading authentication providers or modules from dynamic plugins. An environment variable ENABLE_AUTH_PROVIDER_MODULE_OVERRIDE controls whether or not the backend installs the default authentication provider module. When this override is enabled dynamic plugins can be used to supply custom authentication providers. This change also adds a "components" configuration for frontend dynamic plugins, which can be used to supply overrides for the AppComponents option. This is required for dynamic plugins to be able to provide a custom SignInPage component, for example: ``` frontend: my-plugin-package: components: - name: SignInPage module: PluginRoot importName: SignInPage ``` Signed-off-by: Stan Lewis <[email protected]>
redhat-developer · Jan 10, 2025 · ea44955 · ea44955
1 parent a37b35e
commit ea44955
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 10 deletions.
diff --git a/packages/app/src/components/DynamicRoot/DynamicRoot.tsx b/packages/app/src/components/DynamicRoot/DynamicRoot.tsx
@@ -3,7 +3,11 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 
 import { createApp } from '@backstage/app-defaults';
 import { BackstageApp } from '@backstage/core-app-api';
-import { AnyApiFactory, BackstagePlugin } from '@backstage/core-plugin-api';
+import {
+  AnyApiFactory,
+  AppComponents,
+  BackstagePlugin,
+} from '@backstage/core-plugin-api';
 
 import { useThemes } from '@redhat-developer/red-hat-developer-hub-theme';
 import { AppsConfig } from '@scalprum/core';
@@ -61,7 +65,9 @@ export const DynamicRoot = ({
     React.ComponentType | undefined
   >(undefined);
   // registry of remote components loaded at bootstrap
-  const [components, setComponents] = useState<ComponentRegistry | undefined>();
+  const [componentRegistry, setComponentRegistry] = useState<
+    ComponentRegistry | undefined
+  >();
   const { initialized, pluginStore, api: scalprumApi } = useScalprum();
 
   const themes = useThemes();
@@ -72,6 +78,7 @@ export const DynamicRoot = ({
       pluginModules,
       apiFactories,
       appIcons,
+      components,
       dynamicRoutes,
       menuItems,
       entityTabs,
@@ -86,6 +93,10 @@ export const DynamicRoot = ({
         scope,
         module,
       })),
+      ...components.map(({ scope, module }) => ({
+        scope,
+        module,
+      })),
       ...routeBindingTargets.map(({ scope, module }) => ({
         scope,
         module,
@@ -172,6 +183,23 @@ export const DynamicRoot = ({
       ),
     );
 
+    const appComponents = components.reduce<Partial<AppComponents>>(
+      (componentMap, { scope, module, importName, name }) => {
+        if (typeof allPlugins[scope]?.[module]?.[importName] !== 'undefined') {
+          componentMap[name] = allPlugins[scope]?.[module]?.[
+            importName
+          ] as React.ComponentType<any>;
+        } else {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `Plugin ${scope} is not configured properly: ${module}.${importName} not found, ignoring AppComponent: ${name}`,
+          );
+        }
+        return componentMap;
+      },
+      {},
+    );
+
     let icons = Object.fromEntries(
       appIcons.reduce<[string, React.ComponentType<{}>][]>(
         (acc, { scope, module, importName, name }) => {
@@ -408,7 +436,10 @@ export const DynamicRoot = ({
           ...remoteBackstagePlugins,
         ],
         themes: [...filteredStaticThemes, ...dynamicThemeProviders],
-        components: defaultAppComponents,
+        components: {
+          ...defaultAppComponents,
+          ...appComponents,
+        } as Partial<AppComponents>,
       });
     }
 
@@ -424,7 +455,7 @@ export const DynamicRoot = ({
       scaffolderFieldExtensionComponents;
 
     // make the dynamic UI configuration available to DynamicRootContext consumers
-    setComponents({
+    setComponentRegistry({
       AppProvider: app.current.getProvider(),
       AppRouter: app.current.getRouter(),
       dynamicRoutes: dynamicRoutesComponents,
@@ -449,17 +480,17 @@ export const DynamicRoot = ({
   ]);
 
   useEffect(() => {
-    if (initialized && !components) {
+    if (initialized && !componentRegistry) {
       initializeRemoteModules();
     }
-  }, [initialized, components, initializeRemoteModules]);
+  }, [initialized, componentRegistry, initializeRemoteModules]);
 
-  if (!initialized || !components) {
+  if (!initialized || !componentRegistry) {
     return <Loader />;
   }
 
   return (
-    <DynamicRootContext.Provider value={components}>
+    <DynamicRootContext.Provider value={componentRegistry}>
       {ChildComponent ? <ChildComponent /> : <Loader />}
     </DynamicRootContext.Provider>
   );

diff --git a/packages/app/src/utils/dynamicUI/extractDynamicConfig.ts b/packages/app/src/utils/dynamicUI/extractDynamicConfig.ts
@@ -1,5 +1,5 @@
 import { Entity } from '@backstage/catalog-model';
-import { ApiHolder } from '@backstage/core-plugin-api';
+import { ApiHolder, AppComponents } from '@backstage/core-plugin-api';
 import { isKind } from '@backstage/plugin-catalog';
 
 import { hasAnnotation, isType } from '../../components/catalog/utils';
@@ -116,8 +116,17 @@ type ThemeEntry = {
   importName: string;
 };
 
+type ComponentEntry = {
+  scope: string;
+  module: string;
+  id: string;
+  importName: string;
+  name: keyof AppComponents;
+};
+
 type CustomProperties = {
   pluginModule?: string;
+  components: ComponentEntry[];
   dynamicRoutes?: (DynamicModuleEntry & {
     importName?: string;
     module?: string;
@@ -149,6 +158,7 @@ type DynamicConfig = {
   pluginModules: PluginModule[];
   apiFactories: ApiFactory[];
   appIcons: AppIcon[];
+  components: ComponentEntry[];
   dynamicRoutes: DynamicRoute[];
   menuItems: MenuItem[];
   entityTabs: EntityTabEntry[];
@@ -171,6 +181,7 @@ function extractDynamicConfig(
     pluginModules: [],
     apiFactories: [],
     appIcons: [],
+    components: [],
     dynamicRoutes: [],
     menuItems: [],
     entityTabs: [],
@@ -190,6 +201,20 @@ function extractDynamicConfig(
     },
     [],
   );
+  config.components = Object.entries(frontend).reduce<ComponentEntry[]>(
+    (pluginSet, [scope, customProperties]) => {
+      pluginSet.push(
+        ...(customProperties.components ?? []).map(component => ({
+          ...component,
+          module: component.module ?? 'PluginRoot',
+          importName: component.importName ?? 'default',
+          scope,
+        })),
+      );
+      return pluginSet;
+    },
+    [],
+  );
   config.dynamicRoutes = Object.entries(frontend).reduce<DynamicRoute[]>(
     (pluginSet, [scope, customProperties]) => {
       pluginSet.push(

diff --git a/packages/backend/src/index.ts b/packages/backend/src/index.ts
@@ -91,7 +91,11 @@ backend.add(rbacDynamicPluginsProvider);
 
 backend.add(import('@backstage/plugin-auth-backend'));
 backend.add(import('@backstage/plugin-auth-backend-module-guest-provider'));
-backend.add(import('./modules/authProvidersModule'));
+if (process.env.ENABLE_AUTH_PROVIDER_MODULE_OVERRIDE !== 'true') {
+  backend.add(import('./modules/authProvidersModule'));
+} else {
+  staticLogger.info(`Default authentication provider module disabled`);
+}
 
 backend.add(import('@internal/plugin-dynamic-plugins-info-backend'));
 backend.add(import('@internal/plugin-scalprum-backend'));