Does percy storybook use the authorization config settings?

[benedfit]

I'm currently trying to access an instance of Storybook that is secured with basic authentication headers.

I have followed the instructions listed at https://docs.percy.io/docs/capturing-assets-protected-with-authentication-cli, but am still getting a 401 Unauthorized when I run percy storybook against the URL with either of the authorization techniques documented

Here is the verbose output of my first attempt:

[percy:config] Found config file: .percy.yml (0ms)
[percy:config] Using config:
{
  version: 2,
  snapshot: {
    percyCSS: '[data-hide-from-percy] {\n  display: none;\n}\n'
  },
  discovery: {
    disableCache: true,
    authorization: {
      username: 'SECRET',
      password: 'SECRET'
    }
  }
} (14ms)
[percy:cli:storybook] Get stories: https://deploy-preview-9058--storybook.netlify.app/iframe.html (245ms)
[percy:core:page] Page created (16ms)
[percy:cli:storybook] Get Storybook version: https://deploy-preview-9058--storybook.netlify.app/?path=/settings/about (296ms)
[percy:core:page] Navigate to: https://deploy-preview-9058--storybook.netlify.app/?path=/settings/about (0ms)
[percy:core:page] Page navigated (603ms)
[percy:cli:storybook] Error: 401 Unauthorized

[wwilsman]

Hey @benedfit!

You would think that would work, but internally those discovery options are meant for asset discovery, which happens later on during the snapshot capturing phase. In this initial phase of the Storybook SDK, a page is borrowed from the discovery browser to probe for the Storybook version as well as scrape for Storybook stories. During this phase network interception is not enabled, and as such the authentication credentials cannot be provided to requests.

However looking at how the network is implemented, you can probably use the discovery.requestHeaders option. While the authorization option can only be used during request interception, requestHeaders are set for the entire page session. The downside of using requestHeaders is you'll have to encode the Authorization header yourself.

# .percy.yml
version: 2
snapshot:
  percy-css: ...
discovery:
  request-headers:
    # replace <...> with a base64 encoded "username:password"
    Authorization: "Basic <...>"

If you don't want to check in a base64 string, you can generate it within a JavaScript config file

// .percy.js
module.exports = {
  version: 2,
  snapshot: {
    percyCSS: "..."
  },
  discovery: {
    requestHeaders: {
      // replace "username:password" with the real username and password
      Authorization: `Basic ${Buffer.from('username:password').toString('base64')}`
    }
  }
}

[benedfit]

@wwilsman unfortunately discovery.requestHeaders is not working as expected either. I still receive the 401 Unauthorized error when trying to get the Storybook version

[wwilsman]

Hey @benedfit, sorry for the late reply on this. Looks like we don't actually pass along request headers to the initial browser page used to gather stories. I've opened an issue (#425) and will try to ship a fix for it this week.

[benedfit]

Awesome, thanks

[wwilsman]

Hey @benedfit!

I just released v4.1.0 which should supply discovery request headers as expected. It should automatically transform authorization credentials into a basic-auth header as well, so you can continue to use that option.

[benedfit]

@wwilsman thanks for solving this so quickly. It is now working as expected with requestHeaders (as I preferred your .percy.js example above to the less secure config I had previously), but I have not checked using authorization