Feature: added ability to compose with basic auth storybooks

code/lib/manager-api/src/modules/refs.ts

@@ -147,10 +147,27 @@ export const init: ModuleFn<SubAPI, SubState, void> = (
       const query = version ? `?version=${version}` : '';
       const credentials = isPublic ? 'omit' : 'include';
 
+      let headers: HeadersInit;
+      let cleanUrl = url;
+      const credentialsRegex = /https?:\/\/(.+:.+)@/;
+      const [, urlCredentials] = url.match(credentialsRegex) || [];
+      if (urlCredentials) {
+        cleanUrl = url.replace(`${urlCredentials}@`, '');
+        const base64Auth = btoa(`${urlCredentials}`);
+        headers = {
+          Accept: 'application/json',
+          Authorization: `Basic ${base64Auth}`,
+        };
+      } else {
+        headers = {
+          Accept: 'application/json',
+        };
+      }
+
       const [indexFetch, storiesFetch] = await Promise.all(
         ['index.json', 'stories.json'].map(async (file) =>
-          fetch(`${url}/${file}${query}`, {
-            headers: { Accept: 'application/json' },
+          fetch(`${cleanUrl}/${file}${query}`, {
+            headers,
             credentials,
           })
         )
@@ -160,10 +177,8 @@ export const init: ModuleFn<SubAPI, SubState, void> = (
         const [index, metadata] = await Promise.all([
           indexFetch.ok ? handleRequest(indexFetch) : handleRequest(storiesFetch),
           handleRequest(
-            fetch(`${url}/metadata.json${query}`, {
-              headers: {
-                Accept: 'application/json',
-              },
+            fetch(`${cleanUrl}/metadata.json${query}`, {
+              headers,
               credentials,
               cache: 'no-cache',
             }).catch(() => false)
@@ -180,7 +195,7 @@ export const init: ModuleFn<SubAPI, SubState, void> = (
             Error: Loading of ref failed
               at fetch (lib/api/src/modules/refs.ts)
 
-            URL: ${url}
+            URL: ${cleanUrl}
 
             We weren't able to load the above URL,
             it's possible a CORS error happened.
@@ -195,7 +210,7 @@ export const init: ModuleFn<SubAPI, SubState, void> = (
 
       await api.setRef(id, {
         id,
-        url,
+        url: cleanUrl,
         ...loadedData,
         ...(versions ? { versions } : {}),
         type: !loadedData.storyIndex ? 'auto-inject' : 'lazy',

code/lib/manager-api/src/tests/refs.test.js

@@ -508,6 +508,68 @@ describe('Refs API', () => {
       `);
     });
 
+    it('checks refs (basic-auth)', async () => {
+      // given
+      const { api } = initRefs({ provider, store }, { runCheck: false });
+
+      setupResponses({
+        indexPrivate: {
+          ok: true,
+          response: async () => ({ v: 4, entries: {} }),
+        },
+        storiesPrivate: {
+          ok: true,
+          response: async () => ({ v: 3, stories: {} }),
+        },
+        metadata: {
+          ok: true,
+          response: async () => ({ versions: {} }),
+        },
+      });
+
+      await api.checkRef({
+        id: 'fake',
+        url: 'https://user:[email protected]',
+        title: 'Fake',
+      });
+
+      expect(fetch.mock.calls).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            "https://example.com/index.json",
+            Object {
+              "credentials": "include",
+              "headers": Object {
+                "Accept": "application/json",
+                "Authorization": "Basic dXNlcjpwYXNz",
+              },
+            },
+          ],
+          Array [
+            "https://example.com/stories.json",
+            Object {
+              "credentials": "include",
+              "headers": Object {
+                "Accept": "application/json",
+                "Authorization": "Basic dXNlcjpwYXNz",
+              },
+            },
+          ],
+          Array [
+            "https://example.com/metadata.json",
+            Object {
+              "cache": "no-cache",
+              "credentials": "include",
+              "headers": Object {
+                "Accept": "application/json",
+                "Authorization": "Basic dXNlcjpwYXNz",
+              },
+            },
+          ],
+        ]
+      `);
+    });
+
     it('checks refs (mixed)', async () => {
       // given
       const { api } = initRefs({ provider, store }, { runCheck: false });