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:

```
dynamicPlugins:
  frontend:
    my-plugin-package:
      components:
        - name: SignInPage
          module: PluginRoot
          importName: SignInPage
```

Where the named export SignInPage will be mapped to
`components.SignInPage` when the frontend is initialized.  Finally, to
ensure authentication providers can be managed by the user a new
`providerSettings` configuration field is available for frontend dynamic
plugins, which can be used to inform the user settings page of the new
provider, for example:

```yaml
dynamicPlugins:
  frontend:
    my-plugin-package:
      providerSettings:
	- title: Github Two
	  description: Sign in with GitHub Org Two
	  provider: github-two
```

Each `providerSettings` item will be turned into a new row under the
"Authentication Providers" tab in the user settings.  The `provider`
field is used to look up the API ref for the external auth provider by
expanding the simple provider name to the auth ID convention
`core.auth.<provider name>`.

Signed-off-by: Stan Lewis <[email protected]>

Author: gashcrumb

packages/app/src/components/AppBase/AppBase.tsx

@@ -36,6 +36,7 @@ const AppBase = () => {
     AppRouter,
     dynamicRoutes,
     entityTabOverrides,
+    providerSettings,
     scaffolderFieldExtensions,
   } = useContext(DynamicRootContext);
 
@@ -122,7 +123,7 @@ const AppBase = () => {
                 <SearchPage />
               </Route>
               <Route path="/settings" element={<UserSettingsPage />}>
-                {settingsPage}
+                {settingsPage(providerSettings)}
               </Route>
               <Route path="/catalog-graph" element={<CatalogGraphPage />} />
               <Route path="/learning-paths" element={<LearningPaths />} />

packages/app/src/components/DynamicRoot/DynamicRoot.tsx

@@ -3,7 +3,14 @@ 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,
+  ApiRef,
+  AppComponents,
+  BackstagePlugin,
+  ProfileInfoApi,
+  SessionApi,
+} from '@backstage/core-plugin-api';
 
 import { useThemes } from '@redhat-developer/red-hat-developer-hub-theme';
 import { AppsConfig } from '@scalprum/core';
@@ -24,6 +31,7 @@ import DynamicRootContext, {
   ComponentRegistry,
   EntityTabOverrides,
   MountPoints,
+  ProviderSetting,
   RemotePlugins,
   ResolvedDynamicRoute,
   ResolvedDynamicRouteMenuItem,
@@ -61,7 +69,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,10 +82,12 @@ export const DynamicRoot = ({
       pluginModules,
       apiFactories,
       appIcons,
+      components,
       dynamicRoutes,
       menuItems,
       entityTabs,
       mountPoints,
+      providerSettings: providerSettingsConfig,
       routeBindings,
       routeBindingTargets,
       scaffolderFieldExtensions,
@@ -86,6 +98,10 @@ export const DynamicRoot = ({
         scope,
         module,
       })),
+      ...components.map(({ scope, module }) => ({
+        scope,
+        module,
+      })),
       ...routeBindingTargets.map(({ scope, module }) => ({
         scope,
         module,
@@ -172,6 +188,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 }) => {
@@ -386,6 +419,31 @@ export const DynamicRoot = ({
       },
       [],
     );
+    const filteredStaticApis = staticApis.filter(
+      api => !remoteApis.some(remoteApi => remoteApi.api.id === api.api.id),
+    );
+    const apis = [...filteredStaticApis, ...remoteApis];
+    const providerSettings: ProviderSetting[] = providerSettingsConfig
+      .map(({ title, description, provider }) => {
+        try {
+          return {
+            title,
+            description,
+            apiRef: apis
+              .filter(api => api.api.id === `core.auth.${provider}`)
+              .pop()!.api as ApiRef<ProfileInfoApi & SessionApi>,
+          };
+        } catch (err) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            'Could not find auth provider ',
+            provider,
+            ' this auth provider user settings will be unavailable',
+          );
+          return undefined;
+        }
+      })
+      .filter(item => item !== undefined);
 
     if (!app.current) {
       const filteredStaticThemes = themes.filter(
@@ -394,11 +452,8 @@ export const DynamicRoot = ({
             dynamicTheme => dynamicTheme.id === theme.id,
           ),
       );
-      const filteredStaticApis = staticApis.filter(
-        api => !remoteApis.some(remoteApi => remoteApi.api.id === api.api.id),
-      );
       app.current = createApp({
-        apis: [...filteredStaticApis, ...remoteApis],
+        apis,
         bindRoutes({ bind }) {
           bindAppRoutes(bind, resolvedRouteBindingTargets, routeBindings);
         },
@@ -408,7 +463,10 @@ export const DynamicRoot = ({
           ...remoteBackstagePlugins,
         ],
         themes: [...filteredStaticThemes, ...dynamicThemeProviders],
-        components: defaultAppComponents,
+        components: {
+          ...defaultAppComponents,
+          ...appComponents,
+        } as Partial<AppComponents>,
       });
     }
 
@@ -424,16 +482,16 @@ 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,
       menuItems: dynamicRoutesMenuItems,
       entityTabOverrides,
       mountPoints: mountPointComponents,
+      providerSettings,
       scaffolderFieldExtensions: scaffolderFieldExtensionComponents,
     });
-
     afterInit().then(({ default: Component }) => {
       setChildComponent(() => Component);
     });
@@ -449,17 +507,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>
   );

packages/app/src/components/DynamicRoot/DynamicRootContext.tsx

@@ -3,8 +3,11 @@ import React, { createContext } from 'react';
 import { Entity } from '@backstage/catalog-model';
 import {
   AnyApiFactory,
+  ApiRef,
   AppTheme,
   BackstagePlugin,
+  ProfileInfoApi,
+  SessionApi,
 } from '@backstage/core-plugin-api';
 
 import { ScalprumComponentProps } from '@scalprum/react-core';
@@ -112,11 +115,18 @@ export type ScaffolderFieldExtension = {
   Component: React.ComponentType<{}>;
 };
 
+export type ProviderSetting = {
+  title: string;
+  description: string;
+  apiRef: ApiRef<ProfileInfoApi & SessionApi>;
+};
+
 export type DynamicRootConfig = {
   dynamicRoutes: ResolvedDynamicRoute[];
   entityTabOverrides: EntityTabOverrides;
   mountPoints: MountPoints;
   menuItems: ResolvedMenuItem[];
+  providerSettings: ProviderSetting[];
   scaffolderFieldExtensions: ScaffolderFieldExtension[];
 };
 
@@ -132,6 +142,7 @@ const DynamicRootContext = createContext<ComponentRegistry>({
   entityTabOverrides: {},
   mountPoints: {},
   menuItems: [],
+  providerSettings: [],
   scaffolderFieldExtensions: [],
 });
 

packages/app/src/components/DynamicRoot/ScalprumRoot.tsx

@@ -77,6 +77,7 @@ const ScalprumRoot = ({
       entityTabOverrides: {},
       mountPoints: {},
       scaffolderFieldExtensions: [],
+      providerSettings: [],
     } as DynamicRootConfig,
   };
   return (

packages/app/src/components/UserSettings/SettingsPages.tsx

@@ -1,11 +1,43 @@
+import { ErrorBoundary } from '@backstage/core-components';
+import { configApiRef, useApi } from '@backstage/core-plugin-api';
 import {
+  DefaultProviderSettings,
+  ProviderSettingsItem,
   SettingsLayout,
   UserSettingsAuthProviders,
 } from '@backstage/plugin-user-settings';
 
+import Star from '@mui/icons-material/Star';
+
+import { ProviderSetting } from '../DynamicRoot/DynamicRootContext';
 import { GeneralPage } from './GeneralPage';
 
-export const settingsPage = (
+export const DynamicProviderSettings = ({
+  providerSettings,
+}: {
+  providerSettings: ProviderSetting[];
+}) => {
+  const configApi = useApi(configApiRef);
+  const providersConfig = configApi.getOptionalConfig('auth.providers');
+  const configuredProviders = providersConfig?.keys() || [];
+  return (
+    <>
+      <DefaultProviderSettings configuredProviders={configuredProviders} />
+      {providerSettings.map(({ title, description, apiRef }) => (
+        <ErrorBoundary>
+          <ProviderSettingsItem
+            title={title}
+            description={description}
+            apiRef={apiRef}
+            icon={Star}
+          />
+        </ErrorBoundary>
+      ))}
+    </>
+  );
+};
+
+export const settingsPage = (providerSettings: ProviderSetting[]) => (
   <SettingsLayout>
     <SettingsLayout.Route path="general" title="General">
       <GeneralPage />
@@ -14,7 +46,11 @@ export const settingsPage = (
       path="auth-providers"
       title="Authentication Providers"
     >
-      <UserSettingsAuthProviders />
+      <UserSettingsAuthProviders
+        providerSettings={
+          <DynamicProviderSettings providerSettings={providerSettings} />
+        }
+      />
     </SettingsLayout.Route>
   </SettingsLayout>
 );

packages/app/src/utils/dynamicUI/extractDynamicConfig.test.ts

@@ -148,12 +148,14 @@ describe('extractDynamicConfig', () => {
     const config = extractDynamicConfig(source as DynamicPluginConfig);
     expect(config).toEqual({
       pluginModules: [],
+      components: [],
       routeBindings: [],
       dynamicRoutes: [],
       entityTabs: [],
       menuItems: [],
       mountPoints: [],
       appIcons: [],
+      providerSettings: [],
       routeBindingTargets: [],
       apiFactories: [],
       scaffolderFieldExtensions: [],
@@ -162,6 +164,20 @@ describe('extractDynamicConfig', () => {
   });
 
   it.each([
+    [
+      'a component',
+      { components: [{ name: 'foo', importName: 'blah' }] },
+      {
+        components: [
+          {
+            importName: 'blah',
+            module: 'PluginRoot',
+            name: 'foo',
+            scope: 'janus-idp.plugin-foo',
+          },
+        ],
+      },
+    ],
     [
       'a dynamicRoute',
       { dynamicRoutes: [{ path: '/foo' }] },
@@ -506,6 +522,7 @@ describe('extractDynamicConfig', () => {
           scope: 'janus-idp.plugin-foo',
         },
       ],
+      components: [],
       routeBindings: [],
       routeBindingTargets: [],
       dynamicRoutes: [],
@@ -516,6 +533,7 @@ describe('extractDynamicConfig', () => {
       apiFactories: [],
       scaffolderFieldExtensions: [],
       themes: [],
+      providerSettings: [],
       ...output,
     });
   });