Unable to connect zeplin to storybook with authentication (401 Error)
nitoloz opened this issue · 4 comments
Thank you for the great Zeplin plugins! It's really a pleasure to use them just by following easy steps from documentation.
However one thing that doesn't work for me is a connection to the Storybook.
When I add storybook plugin to my components.json file and run zeplin connect I get following error:
% zeplin connect
Zeplin CLI - v1.0.4
Detected Storybook at https://storybook.MY_COMPANY.io/iframe.html
Connecting components to Zeplin components failed.
401 - {"type":"Buffer","data":[60,104,116,109,108,62,13,10,60,104,101,97,100,62,60,116,105,116,108,101,62,52,48,49,32,65,117,116,104,111,114,105,122,97,116,105,111,110,32,82,101,113,117,105,114,101,100,60,47,116,105,116,108,101,62,60,47,104,101,97,100,62,13,10,60,98,111,100,121,62,13,10,60,99,101,110,116,101,114,62,60,104,49,62,52,48,49,32,65,117,116,104,111,114,105,122,97,116,105,111,110,32,82,101,113,117,105,114,101,100,60,47,104,49,62,60,47,99,101,110,116,101,114,62,13,10,60,104,114,62,60,99,101,110,116,101,114,62,110,103,105,110,120,47,49,46,49,56,46,48,60,47,99,101,110,116,101,114,62,13,10,60,47,98,111,100,121,62,13,10,60,47,104,116,109,108,62,13,10]}
Please check /Users/@USERNAME/.zeplin/cli.log for details.
where cli.log says following:
2020-09-28 10:17:32 - info - Zeplin CLI - v1.0.4
2020-09-28 10:17:32 - debug - connect options: {"configFiles":[".zeplin/components.json"],"devMode":false,"devModePort":9756,"devModeWatch":true,"plugins":[]}
2020-09-28 10:17:32 - debug - .zeplin/components.json content: {"plugins":[{"name":"@zeplin/cli-connect-angular-plugin","config":{"useFullSnippet":true,"useFullDescription":true}},{"name":"@zeplin/cli-connect-storybook-plugin","config":{"url":"https://storybook.MY_COMPANY.io/"}}],"projects":["PROJECT_ID"],"styleguides":[],"components":[{"path":"projects/common/src/lib/components/notification-toast-content/notification-toast-content.component.ts","zeplinNames":["Toast/success"]},{"path":"projects/common/src/lib/components/buttons-and-Indicators/buttons/button/button.component.ts","zeplinNames":["PrimaryButton/default"]}],"gitlab":{"repository":"MY_COMPANY/REPO_NAME","branch":"develop"}}
2020-09-28 10:17:32 - debug - component config files: [{"plugins":[{"name":"@zeplin/cli-connect-angular-plugin","config":{"useFullSnippet":true,"useFullDescription":true}},{"name":"@zeplin/cli-connect-storybook-plugin","config":{"url":"https://storybook.MY_COMPANY.io/"}}],"projects":["PROJECT_ID"],"styleguides":[],"components":[{"path":"projects/common/src/lib/components/notification-toast-content/notification-toast-content.component.ts","zeplinNames":["Toast/success"]},{"path":"projects/common/src/lib/components/buttons-and-Indicators/buttons/button/button.component.ts","zeplinNames":["PrimaryButton/default"]}],"gitlab":{"repository":"MY_COMPANY/REPO_NAME","branch":"develop"}}]
2020-09-28 10:17:35 - debug - Initializing @zeplin/cli-connect-angular-plugin.
2020-09-28 10:17:35 - debug - @zeplin/cli-connect-angular-plugin has init method. Initializing with {"useFullSnippet":true,"useFullDescription":true}
2020-09-28 10:17:35 - debug - Initializing @zeplin/cli-connect-storybook-plugin.
2020-09-28 10:17:35 - debug - @zeplin/cli-connect-storybook-plugin has init method. Initializing with {"url":"https://storybook.MY_COMPANY.io/"}
2020-09-28 10:17:36 - error - Connecting components to Zeplin components failed. 401 - {"type":"Buffer","data":[60,104,116,109,108,62,13,10,60,104,101,97,100,62,60,116,105,116,108,101,62,52,48,49,32,65,117,116,104,111,114,105,122,97,116,105,111,110,32,82,101,113,117,105,114,101,100,60,47,116,105,116,108,101,62,60,47,104,101,97,100,62,13,10,60,98,111,100,121,62,13,10,60,99,101,110,116,101,114,62,60,104,49,62,52,48,49,32,65,117,116,104,111,114,105,122,97,116,105,111,110,32,82,101,113,117,105,114,101,100,60,47,104,49,62,60,47,99,101,110,116,101,114,62,13,10,60,104,114,62,60,99,101,110,116,101,114,62,110,103,105,110,120,47,49,46,49,56,46,48,60,47,99,101,110,116,101,114,62,13,10,60,47,98,111,100,121,62,13,10,60,47,104,116,109,108,62,13,10]}
2020-09-28 10:17:36 - debug - StatusCodeError: Connecting components to Zeplin components failed. 401 - {"type":"Buffer","data":[60,104,116,109,108,62,13,10,60,104,101,97,100,62,60,116,105,116,108,101,62,52,48,49,32,65,117,116,104,111,114,105,122,97,116,105,111,110,32,82,101,113,117,105,114,101,100,60,47,116,105,116,108,101,62,60,47,104,101,97,100,62,13,10,60,98,111,100,121,62,13,10,60,99,101,110,116,101,114,62,60,104,49,62,52,48,49,32,65,117,116,104,111,114,105,122,97,116,105,111,110,32,82,101,113,117,105,114,101,100,60,47,104,49,62,60,47,99,101,110,116,101,114,62,13,10,60,104,114,62,60,99,101,110,116,101,114,62,110,103,105,110,120,47,49,46,49,56,46,48,60,47,99,101,110,116,101,114,62,13,10,60,47,98,111,100,121,62,13,10,60,47,104,116,109,108,62,13,10]} at new StatusCodeError (/Users/@USERNAME/.config/yarn/global/node_modules/request-promise-core/lib/errors.js:32:15) at Request.plumbing.callback (/Users/@USERNAME/.config/yarn/global/node_modules/request-promise-core/lib/plumbing.js:104:33) at Request.RP$callback [as _callback] (/Users/@USERNAME/.config/yarn/global/node_modules/request-promise-core/lib/plumbing.js:46:31) at Request.self.callback (/Users/@USERNAME/.config/yarn/global/node_modules/request/request.js:185:22) at Request.emit (events.js:198:13) at Request.<anonymous> (/Users/@USERNAME/.config/yarn/global/node_modules/request/request.js:1154:10) at Request.emit (events.js:198:13) at IncomingMessage.<anonymous> (/Users/@USERNAME/.config/yarn/global/node_modules/request/request.js:1076:12) at Object.onceWrapper (events.js:286:20) at IncomingMessage.emit (events.js:203:15)
2020-09-28 10:17:36 - info - Please check /Users/@USERNAME/.zeplin/cli.log for details.
My storybook instance is protected with authentication, so may this be a problem? Is there any way to pass credentials to zeplin plugin or have it connected same way as with Gitlab where it just uses the code path?
Here is my configuration.json file.
{
"plugins": [
{
"name": "@zeplin/cli-connect-angular-plugin",
"config": {
"useFullSnippet": true,
"useFullDescription": true
}
},
{
"name": "@zeplin/cli-connect-storybook-plugin",
"config": {
"url": "https://storybook.MY_COMPANY.io/"
}
}
],
"projects": [
"PROJECT_ID"
],
"styleguides": [],
"components": [
{
"path": "projects/common/src/lib/components/notification-toast-content/notification-toast-content.component.ts",
"zeplinNames": [
"Toast/success"
]
},
{
"path": "projects/common/src/lib/components/buttons-and-Indicators/buttons/button/button.component.ts",
"zeplinNames": [
"PrimaryButton/default"
]
}
],
"gitlab": {
"repository": "MY_COMPANY/REPO_NAME",
"branch": "develop"
}
}
Hey,
I think we can add the ability to pass headers to be used for HTTP authentication. I'll be working on it in a short time.
In the meantime, I would suggest you to use startScript or command parameters if you can locally start the Storybook on your project.
I should mention that, as of now, the plugin cannot automatically match stories with Angular components. Check out this section for more info. We are currently evaluating possible improvements for better support.
@yuqu do you have any progress on this issue? We're using external link feature now, but really looking forward toward this kind of integration. Thanks again for an amazing product!
Hey @nitoloz! Sorry for the delay. Incidentally we've just started to work on a new CLI feature, I think I can arrange sometime to resolve this issue until the next week.
I've just found out that JSDOM does not allow to use custom headers. jsdom/jsdom#2699 (comment)
@nitoloz Do you need HTTP Basic authentication? If so, you could set the url as https://<username>:<password>@storybook.MY_COMPANY.io/ to authenticate. I'll add this info into the readme. If you use another type of authentication, the only way would be to use a local Storybook setup for now as I mentioned.
If you want to just disable connecting to a Storybook instance (to use manual Storybook configuration) #35 will allow you to disable it. Check it out.