@backstage/frontend-app-api 0.6.4-next.0 → 0.6.4

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @backstage/frontend-app-api
 
+## 0.6.4
+
+### Patch Changes
+
+- 83f24f6: add `@backstage/no-top-level-material-ui-4-imports` lint rule
+- c884b9a: The app is now aware of if it is being served from the `app-backend` with a separate public and protected bundles. When in protected mode the app will now continuously refresh the session cookie, as well as clear the cookie if the user signs out.
+- 7ef7cc8: Fix duplicated subpath on routes resolved by the `useRouteRef` hook.
+- abfbcfc: Updated dependency `@testing-library/react` to `^15.0.0`.
+- Updated dependencies
+  - @backstage/core-components@0.14.4
+  - @backstage/core-app-api@1.12.4
+  - @backstage/core-plugin-api@1.9.2
+  - @backstage/frontend-plugin-api@0.6.4
+  - @backstage/theme@0.5.3
+  - @backstage/version-bridge@1.0.8
+  - @backstage/config@1.2.0
+  - @backstage/errors@1.2.4
+  - @backstage/types@1.1.1
+
+## 0.6.4-next.1
+
+### Patch Changes
+
+- c884b9a: The app is now aware of if it is being served from the `app-backend` with a separate public and protected bundles. When in protected mode the app will now continuously refresh the session cookie, as well as clear the cookie if the user signs out.
+- Updated dependencies
+  - @backstage/core-app-api@1.12.4-next.0
+  - @backstage/frontend-plugin-api@0.6.4-next.1
+  - @backstage/config@1.2.0
+  - @backstage/core-components@0.14.4-next.0
+  - @backstage/core-plugin-api@1.9.1
+  - @backstage/errors@1.2.4
+  - @backstage/theme@0.5.2
+  - @backstage/types@1.1.1
+  - @backstage/version-bridge@1.0.7
+
 ## 0.6.4-next.0
 
 ### Patch Changes

package/dist/index.esm.js

@@ -3,7 +3,8 @@ import { ConfigReader } from '@backstage/config';
 import { createExtension, createExtensionInput, createApiExtension, createThemeExtension, createComponentExtension, createTranslationExtension, coreExtensionData, ExtensionBoundary, useComponentRef, coreComponentRefs, createNavItemExtension, createNavLogoExtension, useRouteRef, createAppRootElementExtension, createSchemaFromZod, AnalyticsContext, useAnalytics, createRouterExtension, createSignInPageExtension, createAppRootWrapperExtension, appTreeApiRef, routeResolutionApiRef, componentsApiRef, iconsApiRef } from '@backstage/frontend-plugin-api';
 import { useRoutes, BrowserRouter, useInRouterContext, MemoryRouter, matchRoutes, generatePath, useLocation } from 'react-router-dom';
 import { SidebarPage, sidebarConfig, Sidebar, SidebarDivider, useSidebarOpenState, Link, SidebarItem, Progress, ErrorPage, ErrorPanel, OAuthRequestDialog, AlertDisplay } from '@backstage/core-components';
-import { makeStyles, Button as Button$1 } from '@material-ui/core';
+import { makeStyles as makeStyles$1 } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core';
 import { useApi, appThemeApiRef, FeatureFlagState, createApiFactory, discoveryApiRef, configApiRef, alertApiRef, analyticsApiRef, errorApiRef, storageApiRef, fetchApiRef, identityApiRef, oauthRequestApiRef, googleAuthApiRef, microsoftAuthApiRef, githubAuthApiRef, oktaAuthApiRef, gitlabAuthApiRef, oneloginAuthApiRef, bitbucketAuthApiRef, bitbucketServerAuthApiRef, atlassianAuthApiRef, vmwareCloudAuthApiRef, featureFlagsApiRef } from '@backstage/core-plugin-api';
 import { UrlPatternDiscovery, AlertApiForwarder, NoOpAnalyticsApi, ErrorAlerter, ErrorApiForwarder, UnhandledErrorForwarder, WebStorage, createFetchApi, FetchMiddlewares, OAuthRequestManager, GoogleAuth, MicrosoftAuth, GithubAuth, OktaAuth, GitlabAuth, OneLoginAuth, BitbucketAuth, BitbucketServerAuth, AtlassianAuth, VMwareCloudAuth, ApiFactoryRegistry, AppThemeSelector, ApiResolver, ApiProvider } from '@backstage/core-app-api';
 import useObservable from 'react-use/esm/useObservable';
@@ -195,7 +196,7 @@ const LogoFull = () => {
   );
 };
 
-const useSidebarLogoStyles = makeStyles({
+const useSidebarLogoStyles = makeStyles$1({
   root: {
     width: sidebarConfig.drawerWidthClosed,
     height: 3 * sidebarConfig.logoHeight,
@@ -301,6 +302,13 @@ function isBackstageFeature(obj) {
   return false;
 }
 
+function isProtectedApp() {
+  var _a;
+  const element = document.querySelector('meta[name="backstage-app-mode"]');
+  const appMode = (_a = element == null ? void 0 : element.getAttribute("content")) != null ? _a : "public";
+  return appMode === "protected";
+}
+
 function resolveTheme(themeId, shouldPreferDark, themes) {
   if (themeId !== void 0) {
     const selectedTheme = themes.find((theme) => theme.id === themeId);
@@ -355,12 +363,134 @@ function AppThemeProvider({ children }) {
   return /* @__PURE__ */ React.createElement(appTheme.Provider, { children });
 }
 
+const PLUGIN_ID = "app";
+const CHANNEL_ID = `${PLUGIN_ID}-auth-cookie-expires-at`;
+const MIN_BASE_DELAY_MS = 5 * 6e4;
+const ERROR_BACKOFF_START = 5e3;
+const ERROR_BACKOFF_FACTOR = 2;
+const ERROR_BACKOFF_MAX = 5 * 6e4;
+function startCookieAuthRefresh({
+  discoveryApi,
+  fetchApi,
+  errorApi
+}) {
+  let stopped = false;
+  let timeout;
+  let firstError = true;
+  let errorBackoff = ERROR_BACKOFF_START;
+  const channel = "BroadcastChannel" in window ? new BroadcastChannel(CHANNEL_ID) : void 0;
+  const getDelay = (expiresAt) => {
+    const margin = (1 + 3 * Math.random()) * 6e4;
+    const delay = Math.max(expiresAt - Date.now(), MIN_BASE_DELAY_MS) - margin;
+    return delay;
+  };
+  const refresh = async () => {
+    try {
+      const baseUrl = await discoveryApi.getBaseUrl(PLUGIN_ID);
+      const requestUrl = `${baseUrl}/.backstage/auth/v1/cookie`;
+      const res = await fetchApi.fetch(requestUrl, {
+        credentials: "include"
+      });
+      if (!res.ok) {
+        throw new Error(
+          `Request failed with status ${res.status} ${res.statusText}, see request towards ${requestUrl} for more details`
+        );
+      }
+      const data = await res.json();
+      if (!data.expiresAt) {
+        throw new Error("No expiration date in response");
+      }
+      const expiresAt = Date.parse(data.expiresAt);
+      if (Number.isNaN(expiresAt)) {
+        throw new Error("Invalid expiration date in response");
+      }
+      firstError = true;
+      channel == null ? void 0 : channel.postMessage({
+        action: "COOKIE_REFRESH_SUCCESS",
+        payload: { expiresAt: new Date(expiresAt).toISOString() }
+      });
+      scheduleRefresh(getDelay(expiresAt));
+    } catch (error) {
+      if (firstError) {
+        firstError = false;
+        errorBackoff = ERROR_BACKOFF_START;
+      } else {
+        errorBackoff = Math.min(
+          ERROR_BACKOFF_MAX,
+          errorBackoff * ERROR_BACKOFF_FACTOR
+        );
+        console.error("Session cookie refresh failed", error);
+        errorApi.post(
+          new Error(
+            `Session refresh failed, see developer console for details`
+          )
+        );
+      }
+      scheduleRefresh(errorBackoff);
+    }
+  };
+  const onMessage = (event) => {
+    const { data } = event;
+    if (data === null || typeof data !== "object") {
+      return;
+    }
+    if ("action" in data && data.action === "COOKIE_REFRESH_SUCCESS") {
+      const expiresAt = Date.parse(data.payload.expiresAt);
+      if (Number.isNaN(expiresAt)) {
+        console.warn(
+          "Received invalid expiration from session refresh channel"
+        );
+        return;
+      }
+      scheduleRefresh(getDelay(expiresAt));
+    }
+  };
+  function scheduleRefresh(delayMs) {
+    if (stopped) {
+      return;
+    }
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(refresh, delayMs);
+  }
+  channel == null ? void 0 : channel.addEventListener("message", onMessage);
+  refresh();
+  return () => {
+    stopped = true;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    channel == null ? void 0 : channel.removeEventListener("message", onMessage);
+    channel == null ? void 0 : channel.close();
+  };
+}
+
 var __defProp$3 = Object.defineProperty;
 var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField$3 = (obj, key, value) => {
   __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
+var __accessCheck$4 = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet$4 = (obj, member, getter) => {
+  __accessCheck$4(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd$4 = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var __privateSet$4 = (obj, member, value, setter) => {
+  __accessCheck$4(obj, member, "write to private field");
+  setter ? setter.call(obj, value) : member.set(obj, value);
+  return value;
+};
+var _cookieAuthSignOut;
 function mkError(thing) {
   return new Error(
     `Tried to access IdentityApi ${thing} before app was loaded`
@@ -378,6 +508,7 @@ class AppIdentityProxy {
     __publicField$3(this, "resolveTarget", () => {
     });
     __publicField$3(this, "signOutTargetUrl", "/");
+    __privateAdd$4(this, _cookieAuthSignOut, void 0);
     this.waitForTarget = new Promise((resolve) => {
       this.resolveTarget = resolve;
     });
@@ -435,10 +566,29 @@ class AppIdentityProxy {
     });
   }
   async signOut() {
+    var _a;
     await this.waitForTarget.then((target) => target.signOut());
+    await ((_a = __privateGet$4(this, _cookieAuthSignOut)) == null ? void 0 : _a.call(this));
     window.location.href = this.signOutTargetUrl;
   }
+  enableCookieAuth(ctx) {
+    if (__privateGet$4(this, _cookieAuthSignOut)) {
+      return;
+    }
+    const stopRefresh = startCookieAuthRefresh(ctx);
+    __privateSet$4(this, _cookieAuthSignOut, async () => {
+      stopRefresh();
+      const appBaseUrl = await ctx.discoveryApi.getBaseUrl("app");
+      try {
+        await ctx.fetchApi.fetch(`${appBaseUrl}/.backstage/auth/v1/cookie`, {
+          method: "DELETE"
+        });
+      } catch {
+      }
+    });
+  }
 }
+_cookieAuthSignOut = new WeakMap();
 
 var __defProp$2 = Object.defineProperty;
 var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -1674,7 +1824,7 @@ class RouteResolver {
       return void 0;
     }
     const relativeSourceLocation = this.trimPath((_a = options == null ? void 0 : options.sourcePath) != null ? _a : "");
-    const basePath = this.appBasePath + resolveBasePath(
+    const basePath = resolveBasePath(
       targetRef,
       relativeSourceLocation,
       this.routePaths,
@@ -2357,7 +2507,7 @@ const DefaultErrorBoundaryComponent = createComponentExtension({
     sync: () => (props) => {
       const { plugin, error, resetError } = props;
       const title = `Error in ${plugin == null ? void 0 : plugin.id}`;
-      return /* @__PURE__ */ React.createElement(ErrorPanel, { title, error, defaultExpanded: true }, /* @__PURE__ */ React.createElement(Button$1, { variant: "outlined", onClick: resetError }, "Retry"));
+      return /* @__PURE__ */ React.createElement(ErrorPanel, { title, error, defaultExpanded: true }, /* @__PURE__ */ React.createElement(Button, { variant: "outlined", onClick: resetError }, "Retry"));
     }
   }
 });
@@ -2743,6 +2893,21 @@ function createSpecializedApp(options) {
     ),
     options == null ? void 0 : options.icons
   );
+  if (isProtectedApp()) {
+    const discoveryApi = apiHolder.get(discoveryApiRef);
+    const errorApi = apiHolder.get(errorApiRef);
+    const fetchApi = apiHolder.get(fetchApiRef);
+    if (!discoveryApi || !errorApi || !fetchApi) {
+      throw new Error(
+        "App is running in protected mode but missing required APIs"
+      );
+    }
+    appIdentityProxy.enableCookieAuth({
+      discoveryApi,
+      errorApi,
+      fetchApi
+    });
+  }
   const featureFlagApi = apiHolder.get(featureFlagsApiRef);
   if (featureFlagApi) {
     for (const feature of features) {