feat(app): dynamic authentication provider support

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