diff --git a/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts b/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts
index d0f8ddbddf0..cf36929dee6 100644
--- a/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/__tests__/url.test.ts
@@ -21,25 +21,39 @@ describe('Construct URL for Storyshots', () => {
 
   it('can use a url without path and with query params', () => {
     expect(constructUrl('http://localhost:9001?hello=world', id)).toEqual(
-      'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
+      'http://localhost:9001/iframe.html?hello=world&id=somekind--somestory'
     );
   });
 
   it('can use a url without path (buth slash) and with query params', () => {
     expect(constructUrl('http://localhost:9001/?hello=world', id)).toEqual(
-      'http://localhost:9001/iframe.html?id=somekind--somestory&hello=world'
+      'http://localhost:9001/iframe.html?hello=world&id=somekind--somestory'
     );
   });
 
   it('can use a url with some path and query params', () => {
     expect(constructUrl('http://localhost:9001/nice-path?hello=world', id)).toEqual(
-      'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
+      'http://localhost:9001/nice-path/iframe.html?hello=world&id=somekind--somestory'
     );
   });
 
   it('can use a url with some path (slash) and query params', () => {
     expect(constructUrl('http://localhost:9001/nice-path/?hello=world', id)).toEqual(
-      'http://localhost:9001/nice-path/iframe.html?id=somekind--somestory&hello=world'
+      'http://localhost:9001/nice-path/iframe.html?hello=world&id=somekind--somestory'
+    );
+  });
+
+  it('can use a url with username and password and query params', () => {
+    expect(
+      constructUrl('http://username:password@localhost:9001/nice-path/?hello=world', id)
+    ).toEqual(
+      'http://username:password@localhost:9001/nice-path/iframe.html?hello=world&id=somekind--somestory'
+    );
+  });
+
+  it('can use a url with username and query params', () => {
+    expect(constructUrl('http://username@localhost:9001/nice-path/?hello=world', id)).toEqual(
+      'http://username@localhost:9001/nice-path/iframe.html?hello=world&id=somekind--somestory'
     );
   });
 
diff --git a/addons/storyshots/storyshots-puppeteer/src/url.ts b/addons/storyshots/storyshots-puppeteer/src/url.ts
index f9f75a90cff..036fc76200c 100644
--- a/addons/storyshots/storyshots-puppeteer/src/url.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/url.ts
@@ -1,9 +1,8 @@
 import { URL } from 'url';
 
 export const constructUrl = (storybookUrl: string, id: string) => {
-  const storyUrl = `/iframe.html?id=${id}`;
-  const { protocol, host, pathname, search } = new URL(storybookUrl);
-  const pname = pathname.replace(/\/$/, ''); // removes trailing /
-  const query = search.replace('?', '&'); // convert leading ? to &
-  return `${protocol}//${host}${pname}${storyUrl}${query}`;
+  const url = new URL(storybookUrl);
+  url.pathname = url.pathname.replace(/\/$/, '').concat('/iframe.html');
+  url.searchParams.append('id', id);
+  return url.toString();
 };