Use fetch middlewares in event-source-polifyll (re: #23015)

packages/core-app-api/src/apis/implementations/FetchApi/IdentityAuthInjectorFetchMiddleware.ts

@@ -75,6 +75,16 @@ export class IdentityAuthInjectorFetchMiddleware implements FetchMiddleware {
       return next(request);
     };
   }
+
+  async headers(): Promise<Record<string, string>> {
+    const { token } = await this.identityApi.getCredentials();
+    if (!token) {
+      return {};
+    }
+    return {
+      [this.headerName]: this.headerValue(token),
+    };
+  }
 }
 
 function buildMatcher(options: {

packages/core-app-api/src/apis/implementations/FetchApi/createFetchApi.ts

@@ -42,5 +42,12 @@ export function createFetchApi(options: {
 
   return {
     fetch: result,
+    headers: () => {
+      return Promise.all(
+        middleware.map(m => (m.headers ? m.headers() : Promise.resolve({}))),
+      ).then(headersList => {
+        return Object.assign({}, ...headersList);
+      });
+    },
   };
 }

packages/core-app-api/src/apis/implementations/FetchApi/types.ts

@@ -27,4 +27,9 @@ export interface FetchMiddleware {
    *               call out to as part of the request cycle.
    */
   apply(next: typeof fetch): typeof fetch;
+
+  /**
+   * Returns optional headers to be applied on the fetch request.
+   */
+  headers?(): Promise<Record<string, string>>;
 }

packages/core-plugin-api/src/apis/definitions/FetchApi.ts

@@ -27,6 +27,7 @@ export type FetchApi = {
    * The `fetch` implementation.
    */
   fetch: typeof fetch;
+  headers?: () => Promise<Record<string, string>>;
 };
 
 /**

packages/test-utils/src/testUtils/apis/FetchApi/MockFetchApi.ts

@@ -106,6 +106,10 @@ export class MockFetchApi implements FetchApi {
   get fetch(): typeof crossFetch {
     return this.implementation.fetch;
   }
+
+  get headers() {
+    return this.implementation.headers;
+  }
 }
 
 //

plugins/techdocs/src/alpha.tsx

@@ -29,7 +29,6 @@ import {
   createApiFactory,
   discoveryApiRef,
   fetchApiRef,
-  identityApiRef,
 } from '@backstage/core-plugin-api';
 import {
   compatWrapper,
@@ -55,14 +54,12 @@ const techDocsStorageApi = createApiExtension({
     deps: {
       configApi: configApiRef,
       discoveryApi: discoveryApiRef,
-      identityApi: identityApiRef,
       fetchApi: fetchApiRef,
     },
-    factory: ({ configApi, discoveryApi, identityApi, fetchApi }) =>
+    factory: ({ configApi, discoveryApi, fetchApi }) =>
       new TechDocsStorageClient({
         configApi,
         discoveryApi,
-        identityApi,
         fetchApi,
       }),
   }),

plugins/techdocs/src/client.test.ts

@@ -51,7 +51,6 @@
     const storageApi = new TechDocsStorageClient({
       configApi,
       discoveryApi,
-      identityApi,
       fetchApi,
     });
 
@@ -72,7 +71,6 @@
     const storageApi = new TechDocsStorageClient({
       configApi,
       discoveryApi,
-      identityApi,
       fetchApi,
     });
 
@@ -88,7 +86,6 @@
       const storageApi = new TechDocsStorageClient({
         configApi,
         discoveryApi,
-        identityApi,
         fetchApi,
       });
 
@@ -113,7 +110,6 @@
       const storageApi = new TechDocsStorageClient({
         configApi,
         discoveryApi,
-        identityApi,
         fetchApi,
       });
 
@@ -130,15 +126,14 @@
 
       expect(MockedEventSource).toHaveBeenCalledWith(
         'http://backstage:9191/api/techdocs/sync/default/Component/test-component',
-        { withCredentials: true, headers: { Authorization: 'Bearer token' } },
+        { withCredentials: true, headers: { authorization: 'Bearer token' } },
       );
     });
 
     it('should resolve to cached', async () => {
       const storageApi = new TechDocsStorageClient({
         configApi,
         discoveryApi,
-        identityApi,
         fetchApi,
       });
 
@@ -160,7 +155,6 @@
       const storageApi = new TechDocsStorageClient({
         configApi,
         discoveryApi,
-        identityApi,
         fetchApi,
       });
 
@@ -182,7 +176,6 @@
       const storageApi = new TechDocsStorageClient({
         configApi,
         discoveryApi,
-        identityApi,
         fetchApi,
       });
 
@@ -212,7 +205,6 @@
       const storageApi = new TechDocsStorageClient({
         configApi,
         discoveryApi,
-        identityApi,
         fetchApi,
       });
 
@@ -239,7 +231,6 @@
       const storageApi = new TechDocsStorageClient({
         configApi,
         discoveryApi,
-        identityApi,
         fetchApi,
       });
 

plugins/techdocs/src/client.ts

@@ -16,11 +16,7 @@
 
 import { CompoundEntityRef } from '@backstage/catalog-model';
 import { Config } from '@backstage/config';
-import {
-  DiscoveryApi,
-  FetchApi,
-  IdentityApi,
-} from '@backstage/core-plugin-api';
+import { DiscoveryApi, FetchApi } from '@backstage/core-plugin-api';
 import { NotFoundError, ResponseError } from '@backstage/errors';
 import {
   SyncResult,
@@ -124,18 +120,15 @@ export class TechDocsClient implements TechDocsApi {
 export class TechDocsStorageClient implements TechDocsStorageApi {
   public configApi: Config;
   public discoveryApi: DiscoveryApi;
-  public identityApi: IdentityApi;
   private fetchApi: FetchApi;
 
   constructor(options: {
     configApi: Config;
     discoveryApi: DiscoveryApi;
-    identityApi: IdentityApi;
     fetchApi: FetchApi;
   }) {
     this.configApi = options.configApi;
     this.discoveryApi = options.discoveryApi;
-    this.identityApi = options.identityApi;
     this.fetchApi = options.fetchApi;
   }
 
@@ -213,13 +206,15 @@ export class TechDocsStorageClient implements TechDocsStorageApi {
 
     const apiOrigin = await this.getApiOrigin();
     const url = `${apiOrigin}/sync/${namespace}/${kind}/${name}`;
-    const { token } = await this.identityApi.getCredentials();
+    const headers: HeadersInit = this.fetchApi.headers
+      ? await this.fetchApi.headers()
+      : {};
 
     return new Promise((resolve, reject) => {
       // Polyfill is used to add support for custom headers and auth
       const source = new EventSourcePolyfill(url, {
         withCredentials: true,
-        headers: token ? { Authorization: `Bearer ${token}` } : {},
+        headers: headers,
       });
 
       source.addEventListener('log', (e: any) => {

plugins/techdocs/src/plugin.ts

@@ -55,11 +55,10 @@ export const techdocsPlugin = createPlugin({
         identityApi: identityApiRef,
         fetchApi: fetchApiRef,
       },
-      factory: ({ configApi, discoveryApi, identityApi, fetchApi }) =>
+      factory: ({ configApi, discoveryApi, fetchApi }) =>
         new TechDocsStorageClient({
           configApi,
           discoveryApi,
-          identityApi,
           fetchApi,
         }),
     }),