@backstage/plugin-auth-react 0.0.0-nightly-20240321021124

package/CHANGELOG.md

@@ -0,0 +1,20 @@
+# @backstage/plugin-auth-react
+
+## 0.0.0-nightly-20240321021124
+
+### Patch Changes
+
+- Updated dependencies
+  - @backstage/core-components@0.0.0-nightly-20240321021124
+  - @backstage/core-plugin-api@1.9.1
+  - @backstage/errors@1.2.4
+
+## 0.0.1
+
+### Patch Changes
+
+- 62bcaf8: Create a generic React component for refreshing user cookie.
+- Updated dependencies
+  - @backstage/core-components@0.14.1
+  - @backstage/errors@1.2.4
+  - @backstage/core-plugin-api@1.9.1

package/README.md

@@ -0,0 +1,5 @@
+# @backstage/plugin-auth-react
+
+Welcome to the web library package for the auth plugin!
+
+_This plugin was created through the Backstage CLI_

package/dist/index.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode } from 'react';
+
+/**
+ * @public
+ * Props for the {@link CookieAuthRefreshProvider} component.
+ */
+type CookieAuthRefreshProviderProps = {
+    pluginId: string;
+    path?: string;
+    children: ReactNode;
+};
+/**
+ * @public
+ * A provider that will refresh the cookie when it is about to expire.
+ */
+declare function CookieAuthRefreshProvider(props: CookieAuthRefreshProviderProps): JSX.Element;
+
+/**
+ * @public
+ * A hook that will refresh the cookie when it is about to expire.
+ * @param options - Options for configuring the refresh cookie endpoint
+ */
+declare function useCookieAuthRefresh(options: {
+    pluginId: string;
+    path?: string;
+}): {
+    status: 'loading';
+} | {
+    status: 'error';
+    error: Error;
+    retry: () => void;
+} | {
+    status: 'success';
+    data: {
+        expiresAt: string;
+    };
+};
+
+export { CookieAuthRefreshProvider, type CookieAuthRefreshProviderProps, useCookieAuthRefresh };

package/dist/index.esm.js

@@ -0,0 +1,96 @@
+import React, { useMemo, useCallback, useEffect } from 'react';
+import { ErrorPanel } from '@backstage/core-components';
+import { useApi, fetchApiRef, discoveryApiRef, useApp } from '@backstage/core-plugin-api';
+import { Button } from '@material-ui/core';
+import { useAsync, useMountEffect } from '@react-hookz/web';
+import { ResponseError } from '@backstage/errors';
+
+function useCookieAuthRefresh(options) {
+  const { pluginId, path = "/cookie" } = options != null ? options : {};
+  const fetchApi = useApi(fetchApiRef);
+  const discoveryApi = useApi(discoveryApiRef);
+  const channel = useMemo(() => {
+    return "BroadcastChannel" in window ? new BroadcastChannel(`${pluginId}-auth-cookie-expires-at`) : null;
+  }, [pluginId]);
+  const [state, actions] = useAsync(async () => {
+    const apiOrigin = await discoveryApi.getBaseUrl(pluginId);
+    const requestUrl = `${apiOrigin}${path}`;
+    const response = await fetchApi.fetch(`${requestUrl}`, {
+      credentials: "include"
+    });
+    if (!response.ok) {
+      throw await ResponseError.fromResponse(response);
+    }
+    const data = await response.json();
+    if (!data.expiresAt) {
+      throw new Error("No expiration date found in response");
+    }
+    return data;
+  });
+  useMountEffect(actions.execute);
+  const retry = useCallback(() => {
+    actions.execute();
+  }, [actions]);
+  const refresh = useCallback(
+    (params) => {
+      const margin = (1 + 3 * Math.random()) * 6e4;
+      const delay = Date.parse(params.expiresAt) - Date.now() - margin;
+      const timeout = setTimeout(retry, delay);
+      return () => clearTimeout(timeout);
+    },
+    [retry]
+  );
+  useEffect(() => {
+    if (state.status !== "success" || !state.result) {
+      return () => {
+      };
+    }
+    channel == null ? void 0 : channel.postMessage({
+      action: "COOKIE_REFRESH_SUCCESS",
+      payload: state.result
+    });
+    let cancel = refresh(state.result);
+    const listener = (event) => {
+      const { action, payload } = event.data;
+      if (action === "COOKIE_REFRESH_SUCCESS") {
+        cancel();
+        cancel = refresh(payload);
+      }
+    };
+    channel == null ? void 0 : channel.addEventListener("message", listener);
+    return () => {
+      cancel();
+      channel == null ? void 0 : channel.removeEventListener("message", listener);
+    };
+  }, [state, refresh, channel]);
+  if (state.status === "not-executed") {
+    return { status: "loading" };
+  }
+  if (state.status === "loading" && !state.result) {
+    return { status: "loading" };
+  }
+  if (state.status === "loading" && state.error) {
+    return { status: "loading" };
+  }
+  if (state.status === "error" && state.error) {
+    return { status: "error", error: state.error, retry };
+  }
+  return { status: "success", data: state.result };
+}
+
+function CookieAuthRefreshProvider(props) {
+  const { children, ...options } = props;
+  const app = useApp();
+  const { Progress } = app.getComponents();
+  const result = useCookieAuthRefresh(options);
+  if (result.status === "loading") {
+    return /* @__PURE__ */ React.createElement(Progress, null);
+  }
+  if (result.status === "error") {
+    return /* @__PURE__ */ React.createElement(ErrorPanel, { error: result.error }, /* @__PURE__ */ React.createElement(Button, { variant: "outlined", onClick: result.retry }, "Retry"));
+  }
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children);
+}
+
+export { CookieAuthRefreshProvider, useCookieAuthRefresh };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/hooks/useCookieAuthRefresh/useCookieAuthRefresh.tsx","../src/components/CookieAuthRefreshProvider/CookieAuthRefreshProvider.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useEffect, useCallback, useMemo } from 'react';\nimport {\n  discoveryApiRef,\n  fetchApiRef,\n  useApi,\n} from '@backstage/core-plugin-api';\nimport { useAsync, useMountEffect } from '@react-hookz/web';\nimport { ResponseError } from '@backstage/errors';\n\n/**\n * @public\n * A hook that will refresh the cookie when it is about to expire.\n * @param options - Options for configuring the refresh cookie endpoint\n */\nexport function useCookieAuthRefresh(options: {\n  // The plugin id used for discovering the API origin\n  pluginId: string;\n  // The path used for calling the refresh cookie endpoint, default to '/cookie'\n  path?: string;\n}):\n  | { status: 'loading' }\n  | { status: 'error'; error: Error; retry: () => void }\n  | { status: 'success'; data: { expiresAt: string } } {\n  const { pluginId, path = '/cookie' } = options ?? {};\n  const fetchApi = useApi(fetchApiRef);\n  const discoveryApi = useApi(discoveryApiRef);\n\n  const channel = useMemo(() => {\n    return 'BroadcastChannel' in window\n      ? new BroadcastChannel(`${pluginId}-auth-cookie-expires-at`)\n      : null;\n  }, [pluginId]);\n\n  const [state, actions] = useAsync<{ expiresAt: string }>(async () => {\n    const apiOrigin = await discoveryApi.getBaseUrl(pluginId);\n    const requestUrl = `${apiOrigin}${path}`;\n    const response = await fetchApi.fetch(`${requestUrl}`, {\n      credentials: 'include',\n    });\n    if (!response.ok) {\n      throw await ResponseError.fromResponse(response);\n    }\n    const data = await response.json();\n    if (!data.expiresAt) {\n      throw new Error('No expiration date found in response');\n    }\n    return data;\n  });\n\n  useMountEffect(actions.execute);\n\n  const retry = useCallback(() => {\n    actions.execute();\n  }, [actions]);\n\n  const refresh = useCallback(\n    (params: { expiresAt: string }) => {\n      // Randomize the refreshing margin with a margin of 1-4 minutes to avoid all tabs refreshing at the same time\n      // It cannot be less than 5 minutes otherwise the backend will return the same expiration date\n      const margin = (1 + 3 * Math.random()) * 60000;\n      const delay = Date.parse(params.expiresAt) - Date.now() - margin;\n      const timeout = setTimeout(retry, delay);\n      return () => clearTimeout(timeout);\n    },\n    [retry],\n  );\n\n  useEffect(() => {\n    // Only schedule a refresh if we have a successful response\n    if (state.status !== 'success' || !state.result) {\n      return () => {};\n    }\n    channel?.postMessage({\n      action: 'COOKIE_REFRESH_SUCCESS',\n      payload: state.result,\n    });\n    let cancel = refresh(state.result);\n    const listener = (\n      event: MessageEvent<{ action: string; payload: { expiresAt: string } }>,\n    ) => {\n      const { action, payload } = event.data;\n      if (action === 'COOKIE_REFRESH_SUCCESS') {\n        cancel();\n        cancel = refresh(payload);\n      }\n    };\n    channel?.addEventListener('message', listener);\n    return () => {\n      cancel();\n      channel?.removeEventListener('message', listener);\n    };\n  }, [state, refresh, channel]);\n\n  // Initialising\n  if (state.status === 'not-executed') {\n    return { status: 'loading' };\n  }\n\n  // First refresh or retrying without any success before\n  // Possible state transitions:\n  // e.g. not-executed -> loading (first-refresh)\n  // e.g. not-executed -> loading (first-refresh) -> error -> loading (manual-retry)\n  if (state.status === 'loading' && !state.result) {\n    return { status: 'loading' };\n  }\n\n  // Retrying after having succeeding at least once\n  // Current state is: { status: 'loading', result: {...}, error: undefined | Error }\n  // e.g. not-executed -> loading (first-refresh) -> success -> loading (scheduled-refresh) -> error -> loading (manual-retry)\n  if (state.status === 'loading' && state.error) {\n    return { status: 'loading' };\n  }\n\n  // Something went wrong during any situation of a refresh\n  if (state.status === 'error' && state.error) {\n    return { status: 'error', error: state.error, retry };\n  }\n\n  // At this point it should be safe to assume that we have a successful refresh\n  return { status: 'success', data: state.result! };\n}\n","/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { ReactNode } from 'react';\nimport { ErrorPanel } from '@backstage/core-components';\nimport { useApp } from '@backstage/core-plugin-api';\nimport { Button } from '@material-ui/core';\nimport { useCookieAuthRefresh } from '../../hooks';\n\n/**\n * @public\n * Props for the {@link CookieAuthRefreshProvider} component.\n */\nexport type CookieAuthRefreshProviderProps = {\n  // The plugin ID used for discovering the API origin\n  pluginId: string;\n  // The path used for calling the refresh cookie endpoint, default to '/cookie'\n  path?: string;\n  // The children to render when the refresh is successful\n  children: ReactNode;\n};\n\n/**\n * @public\n * A provider that will refresh the cookie when it is about to expire.\n */\nexport function CookieAuthRefreshProvider(\n  props: CookieAuthRefreshProviderProps,\n): JSX.Element {\n  const { children, ...options } = props;\n  const app = useApp();\n  const { Progress } = app.getComponents();\n\n  const result = useCookieAuthRefresh(options);\n\n  if (result.status === 'loading') {\n    return <Progress />;\n  }\n\n  if (result.status === 'error') {\n    return (\n      <ErrorPanel error={result.error}>\n        <Button variant=\"outlined\" onClick={result.retry}>\n          Retry\n        </Button>\n      </ErrorPanel>\n    );\n  }\n\n  return <>{children}</>;\n}\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@backstage/plugin-auth-react",
+  "version": "0.0.0-nightly-20240321021124",
+  "description": "Web library for the auth plugin",
+  "backstage": {
+    "role": "web-library"
+  },
+  "publishConfig": {
+    "access": "public",
+    "main": "dist/index.esm.js",
+    "types": "dist/index.d.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/backstage/backstage",
+    "directory": "plugins/auth-react"
+  },
+  "license": "Apache-2.0",
+  "sideEffects": false,
+  "main": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "backstage-cli package build",
+    "clean": "backstage-cli package clean",
+    "lint": "backstage-cli package lint",
+    "prepack": "backstage-cli package prepack",
+    "postpack": "backstage-cli package postpack",
+    "start": "backstage-cli package start",
+    "test": "backstage-cli package test"
+  },
+  "dependencies": {
+    "@backstage/core-components": "^0.0.0-nightly-20240321021124",
+    "@backstage/core-plugin-api": "^1.9.1",
+    "@backstage/errors": "^1.2.4",
+    "@material-ui/core": "^4.9.13",
+    "@react-hookz/web": "^24.0.0",
+    "@types/react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "devDependencies": {
+    "@backstage/cli": "^0.0.0-nightly-20240321021124",
+    "@backstage/test-utils": "^0.0.0-nightly-20240321021124",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.13.1 || ^17.0.0 || ^18.0.0"
+  },
+  "module": "./dist/index.esm.js"
+}