Add config api to storybook

packages/app/src/App.tsx

@@ -34,8 +34,8 @@ const app = createApp({
   components: {
     SignInPage: props => {
       const configApi = useApi(configApiRef);
-      const providersConfig = configApi.getConfig('auth.providers');
-      const providers = providersConfig.keys();
+      const providersConfig = configApi.getOptionalConfig('auth.providers');
+      const providers = providersConfig?.keys() ?? [];
 
       return <SignInPage {...props} providers={['guest', ...providers]} />;
     },

packages/core/src/layout/Sidebar/UserSettings.tsx

@@ -41,8 +41,8 @@ export function SidebarUserSettings() {
   const [open, setOpen] = React.useState(false);
   const identityApi = useApi(identityApiRef);
   const configApi = useApi(configApiRef);
-  const providersConfig = configApi.getConfig('auth.providers');
-  const providers = providersConfig.keys();
+  const providersConfig = configApi.getOptionalConfig('auth.providers');
+  const providers = providersConfig?.keys() ?? [];
 
   // Close the provider list when sidebar collapse
   useEffect(() => {

packages/storybook/.storybook/apis.js

@@ -18,10 +18,14 @@ import {
   OAuthRequestManager,
   OktaAuth,
   oktaAuthApiRef,
+  configApiRef,
+  ConfigReader,
 } from '@backstage/core';
 
 const builder = ApiRegistry.builder();
 
+builder.add(configApiRef, ConfigReader.fromConfigs([]));
+
 const alertApi = builder.add(alertApiRef, new AlertApiForwarder());
 
 builder.add(errorApiRef, new ErrorAlerter(alertApi, new ErrorApiForwarder()));