feat(app): dynamic authentication provider support (#2167)

This change adds support for loading authentication providers or modules
from dynamic plugins via 3 main changes to the code.

First, 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.

Secondly this change also adds a `signInPage` configuration for frontend
dynamic plugins which is required for dynamic plugins to be able to
provide a custom SignInPage component, for example:

```yaml
dynamicPlugins:
  frontend:
    my-plugin-package:
      signInPage:
	    importName: CustomSignInPage
```

Where the named export `CustomSignInPage` 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: core.auth.github-two
```

Each `providerSettings` item will be turned into a new row under the
"Authentication Providers" tab on the user settings page.  The
`provider` field is used to look up and connect the API ref for the
external authentication provider and should be the same string used when
calling `createApiRef`, for example:

```javascript
export const ghTwoAuthApiRef: ApiRef<
  OAuthApi & ProfileInfoApi & BackstageIdentityApi & SessionApi
> = createApiRef({
  id: 'core.auth.github-two',  // <--- this string
})
```

This commit also updates the app config.d.ts with some missing
definitions as well as adds definitions for the above.

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

Author: gashcrumb

packages/app/config.d.ts

@@ -143,6 +143,36 @@ export interface Config {
           module?: string;
           importName?: string;
         }[];
+        providerSettings?: {
+          title: string;
+          description: string;
+          provider: string;
+        }[];
+        scaffolderFieldExtensions?: {
+          module?: string;
+          importName?: string;
+        }[];
+        signInPage?: {
+          module?: string;
+          importName: string;
+        };
+        techdocsAddons?: {
+          module?: string;
+          importName?: string;
+          config?: {
+            props?: {
+              [key: string]: string;
+            };
+          };
+        }[];
+        themes?: {
+          module?: string;
+          id: string;
+          title: string;
+          variant: 'light' | 'dark';
+          icon: string;
+          importName?: string;
+        }[];
       };
     };
   };

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

@@ -37,6 +37,7 @@ const AppBase = () => {
     AppRouter,
     dynamicRoutes,
     entityTabOverrides,
+    providerSettings,
     scaffolderFieldExtensions,
   } = useContext(DynamicRootContext);
 
@@ -123,7 +124,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,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';
@@ -63,7 +67,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();
@@ -78,11 +84,13 @@ export const DynamicRoot = ({
       menuItems,
       entityTabs,
       mountPoints,
+      providerSettings,
       routeBindings,
       routeBindingTargets,
       scaffolderFieldExtensions,
       techdocsAddons,
       themes: pluginThemes,
+      signInPages,
     } = extractDynamicConfig(dynamicPlugins);
     const requiredModules = [
       ...pluginModules.map(({ scope, module }) => ({
@@ -117,6 +125,10 @@ export const DynamicRoot = ({
         scope,
         module,
       })),
+      ...signInPages.map(({ scope, module }) => ({
+        scope,
+        module,
+      })),
     ];
 
     const staticPlugins = Object.keys(staticPluginStore).reduce(
@@ -416,6 +428,25 @@ export const DynamicRoot = ({
       [],
     );
 
+    // the config allows for multiple sign-in pages, discover and use the first
+    // working instance but check all of them
+    const signInPage = signInPages
+      .map<React.ComponentType<{}> | undefined>(
+        ({ scope, module, importName }) => {
+          const candidate = allPlugins[scope]?.[module]?.[
+            importName
+          ] as React.ComponentType<{}>;
+          if (!candidate) {
+            // eslint-disable-next-line no-console
+            console.warn(
+              `Plugin ${scope} is not configured properly: ${module}.${importName} not found, ignoring SignInPage: ${importName}`,
+            );
+          }
+          return candidate;
+        },
+      )
+      .find(candidate => candidate !== undefined);
+
     if (!app.current) {
       const filteredStaticThemes = themes.filter(
         theme =>
@@ -437,7 +468,12 @@ export const DynamicRoot = ({
           ...remoteBackstagePlugins,
         ],
         themes: [...filteredStaticThemes, ...dynamicThemeProviders],
-        components: defaultAppComponents,
+        components: {
+          ...defaultAppComponents,
+          ...(signInPage && {
+            SignInPage: signInPage,
+          }),
+        } as Partial<AppComponents>,
       });
     }
 
@@ -454,17 +490,17 @@ export const DynamicRoot = ({
     dynamicRootConfig.techdocsAddons = techdocsAddonComponents;
 
     // 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,
       techdocsAddons: techdocsAddonComponents,
     });
-
     afterInit().then(({ default: Component }) => {
       setChildComponent(() => Component);
     });
@@ -480,17 +516,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

@@ -128,11 +128,18 @@ export type TechdocsAddon = {
   };
 };
 
+export type ProviderSetting = {
+  title: string;
+  description: string;
+  provider: string;
+};
+
 export type DynamicRootConfig = {
   dynamicRoutes: ResolvedDynamicRoute[];
   entityTabOverrides: EntityTabOverrides;
   mountPoints: MountPoints;
   menuItems: ResolvedMenuItem[];
+  providerSettings: ProviderSetting[];
   scaffolderFieldExtensions: ScaffolderFieldExtension[];
   techdocsAddons: TechdocsAddon[];
 };
@@ -149,6 +156,7 @@ const DynamicRootContext = createContext<ComponentRegistry>({
   entityTabOverrides: {},
   mountPoints: {},
   menuItems: [],
+  providerSettings: [],
   scaffolderFieldExtensions: [],
   techdocsAddons: [],
 });

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

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

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

@@ -1,11 +1,83 @@
+import { ErrorBoundary } from '@backstage/core-components';
 import {
+  AnyApiFactory,
+  ApiRef,
+  configApiRef,
+  ProfileInfoApi,
+  SessionApi,
+  useApi,
+  useApp,
+} 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 = (
+const DynamicProviderSettingsItem = ({
+  title,
+  description,
+  provider,
+}: {
+  title: string;
+  description: string;
+  provider: string;
+}) => {
+  const app = useApp();
+  // The provider API needs to be registered with the app
+  const apiRef = app
+    .getPlugins()
+    .flatMap(plugin => Array.from(plugin.getApis()))
+    .filter((api: AnyApiFactory) => api.api.id === provider)
+    .at(0)?.api;
+  if (!apiRef) {
+    // eslint-disable-next-line no-console
+    console.warn(
+      `No API factory found for provider ref "${provider}", hiding the related provider settings UI`,
+    );
+    return <></>;
+  }
+  return (
+    <ProviderSettingsItem
+      title={title}
+      description={description}
+      apiRef={apiRef as ApiRef<ProfileInfoApi & SessionApi>}
+      icon={Star}
+    />
+  );
+};
+
+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, provider }) => (
+        <ErrorBoundary>
+          <DynamicProviderSettingsItem
+            title={title}
+            description={description}
+            provider={provider}
+          />
+        </ErrorBoundary>
+      ))}
+    </>
+  );
+};
+
+export const settingsPage = (providerSettings: ProviderSetting[]) => (
   <SettingsLayout>
     <SettingsLayout.Route path="general" title="General">
       <GeneralPage />
@@ -14,7 +86,11 @@ export const settingsPage = (
       path="auth-providers"
       title="Authentication Providers"
     >
-      <UserSettingsAuthProviders />
+      <UserSettingsAuthProviders
+        providerSettings={
+          <DynamicProviderSettings providerSettings={providerSettings} />
+        }
+      />
     </SettingsLayout.Route>
   </SettingsLayout>
 );