{"componentChunkName":"component---src-templates-post-js","path":"/blog/2019/02/15/npm-publish-issue/","result":{"data":{"post":{"html":"<p>Recently I created a small library with <a href=\"https://angular.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Angular</a> which I wanted to publish to <code class=\"language-text\">npm</code> (the node package manager). However, when I had everything in place from a build perspective using <a href=\"https://travis-ci.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Travis CI</a> in my GitHub repo, it was failing to publish the package with a <code class=\"language-text\">401</code> login error.</p>\n<!--more-->\n<h2 id=\"background\" style=\"position:relative;\"><a href=\"#background\" aria-label=\"background permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Background</h2>\n<p>I guess I used a lot of terms and concepts you might not be familiar with. So let’s take a step back and see what are those.</p>\n<p>I have a GitHub repository where the code is kept. You can setup a build for your repository using <a href=\"https://travis-ci.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Travis CI</a> if you enable Travic CI on your repo and create a file named <code class=\"language-text\">.travis.yml</code> in root directory, with each push to your branch the code is built and even published.</p>\n<p>I am not going to explain how to setup a build pipeline using Travic CI. You can find instructions on <a href=\"https://docs.travis-ci.com\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">their documentation here</a>. The docs are very comprehensive and detailed with examples on some of the most common project types.</p>\n<p>The build is very simple and doesn’t require any special steps. However, when you want to publish it (to <code class=\"language-text\">npm</code> in my case), I had to generate a authentication token and encrypt it using Travic CI CLI so I can put it in my build file.</p>\n<p><strong>Note</strong>: Do not put the token as is in your build file, since anyone can use it when you commit your code and push it up stream.</p>\n<p>I followed <a href=\"https://docs.travis-ci.com/user/deployment/npm/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">the instructions here</a> to setup deploy steps for my project.</p>\n<p>However, when I pushed my code, although the build was successful, I was getting an <code class=\"language-text\">401</code> error during deployment:</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/4fc9b8a67b6d51ff584cc7417f7c37a5/7f09e/npm-401.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 26.296296296296294%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAFABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABy5AD/8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQABBQJ//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAwEBPwE//8QAFBEBAAAAAAAAAAAAAAAAAAAAEP/aAAgBAgEBPwE//8QAFBABAAAAAAAAAAAAAAAAAAAAEP/aAAgBAQAGPwJ//8QAFxABAAMAAAAAAAAAAAAAAAAAAQAQQf/aAAgBAQABPyHCNf/aAAwDAQACAAMAAAAQ+C//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAYEAEBAQEBAAAAAAAAAAAAAAABABEhYf/aAAgBAQABPxAVDXhIFMt8v//Z'); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"error 401 deploying to npm\"\n        title=\"\"\n        src=\"/static/4fc9b8a67b6d51ff584cc7417f7c37a5/47311/npm-401.jpg\"\n        srcset=\"/static/4fc9b8a67b6d51ff584cc7417f7c37a5/6f81f/npm-401.jpg 270w,\n/static/4fc9b8a67b6d51ff584cc7417f7c37a5/09d21/npm-401.jpg 540w,\n/static/4fc9b8a67b6d51ff584cc7417f7c37a5/47311/npm-401.jpg 1080w,\n/static/4fc9b8a67b6d51ff584cc7417f7c37a5/7f09e/npm-401.jpg 1156w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<h2 id=\"why-it-happens\" style=\"position:relative;\"><a href=\"#why-it-happens\" aria-label=\"why it happens permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Why it happens</h2>\n<p>So it seems a while back Travis has moved away from <code class=\"language-text\">.org</code> domain and uses <code class=\"language-text\">.com</code>. However, the CLI is still defaulting to <code class=\"language-text\">.org</code> as so when you encrypt your API key, it will be for wrong domain.</p>\n<h2 id=\"solution\" style=\"position:relative;\"><a href=\"#solution\" aria-label=\"solution permalink\" class=\"anchor before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Solution</h2>\n<p>Fortunately you can easily fix this using <code class=\"language-text\">--com</code> flag when you’re encrypting your key. So from the root of your project just use these commands to re-encrypt your key with right domain:</p>\n<div\n              class=\"gatsby-code-button-container\"\n              data-toaster-id=\"19175619855188630000\"\n              data-toaster-class=\"gatsby-code-button-toaster\"\n              data-toaster-text-class=\"gatsby-code-button-toaster-text\"\n              data-toaster-text=\"Copied to clipboard ✅\"\n              data-toaster-duration=\"3500\"\n              onClick=\"copyToClipboard(`travis login --com\r\ntravis encrypt --com <token> --add 'deploy.api_key'`, `19175619855188630000`)\"\n            >\n              <div\n                class=\"gatsby-code-button\"\n                data-tooltip=\"\"\n              >\n                Copy<svg class=\"gatsby-code-button-icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"><path fill=\"none\" d=\"M0 0h24v24H0V0z\"/><path d=\"M16 1H2v16h2V3h12V1zm-1 4l6 6v12H6V5h9zm-1 7h5.5L14 6.5V12z\"/></svg>\n              </div>\n            </div>\n<div class=\"gatsby-highlight\" data-language=\"bash\"><pre style=\"counter-reset: linenumber NaN\" class=\"language-bash line-numbers\"><code class=\"language-bash\">travis login <span class=\"token parameter variable\">--com</span>\r\ntravis encrypt <span class=\"token parameter variable\">--com</span> <span class=\"token operator\">&lt;</span>token<span class=\"token operator\">></span> <span class=\"token parameter variable\">--add</span> <span class=\"token string\">'deploy.api_key'</span></code><span aria-hidden=\"true\" class=\"line-numbers-rows\" style=\"white-space: normal; width: auto; left: 0;\"><span></span><span></span></span></pre></div>\n<p><strong>Tip</strong>: If you’re a windows user like me, you can use <a href=\"https://docs.microsoft.com/en-us/windows/wsl/install-win10\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><em>Windows 10 WSL</em></a> (windows subsystem for Linux) and it works like a charm.</p>\n<p>Once you’ve applied the commands, simply commit and push your code up.</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 1080px; \"\n    >\n      <a\n    class=\"gatsby-resp-image-link\"\n    href=\"/static/fa999739109d7fb667eefdac2c63ddf1/934bb/npmdeployok.jpg\"\n    style=\"display: block\"\n    target=\"_blank\"\n    rel=\"noopener\"\n  >\n    <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 31.851851851851855%; position: relative; bottom: 0; left: 0; background-image: url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAGABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAIF/8QAFAEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEAMQAAABzIAD/8QAFRABAQAAAAAAAAAAAAAAAAAAEEH/2gAIAQEAAQUCh//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAABD/2gAIAQEABj8Cf//EABcQAAMBAAAAAAAAAAAAAAAAAAABESH/2gAIAQEAAT8huUMp/9oADAMBAAIAAwAAABD4L//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8QP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8QP//EABkQAQEBAQEBAAAAAAAAAAAAAAERAJFBYf/aAAgBAQABPxAuGT3JGIcz8HN//9k='); background-size: cover; display: block;\"\n  ></span>\n  <img\n        class=\"gatsby-resp-image-image\"\n        alt=\"successful deployment to npm\"\n        title=\"\"\n        src=\"/static/fa999739109d7fb667eefdac2c63ddf1/47311/npmdeployok.jpg\"\n        srcset=\"/static/fa999739109d7fb667eefdac2c63ddf1/6f81f/npmdeployok.jpg 270w,\n/static/fa999739109d7fb667eefdac2c63ddf1/09d21/npmdeployok.jpg 540w,\n/static/fa999739109d7fb667eefdac2c63ddf1/47311/npmdeployok.jpg 1080w,\n/static/fa999739109d7fb667eefdac2c63ddf1/934bb/npmdeployok.jpg 1089w\"\n        sizes=\"(max-width: 1080px) 100vw, 1080px\"\n        style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n        loading=\"lazy\"\n        decoding=\"async\"\n      />\n  </a>\n    </span></p>\n<p>Hope this helps you save some time and have a great weekend.</p>","timeToRead":2,"frontmatter":{"unformattedDate":"2019-02-15 16:00","date":"February 15, 2019","title":"Fixing: unable to deploy to npm: 'you must be logged in'","subtitle":null,"id":null,"author":"Yaser Adel Mehraban","gravatar":null,"canonical_url":null,"tags":["npm","publish","issue"],"thumbnail":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAICAYAAAD5nd/tAAAACXBIWXMAAAsTAAALEwEAmpwYAAACB0lEQVR42nVSQWsTURBeUPwZ6r2pJinZNI2yB00Fvam1MWelh17Eo0LBU7GCgghKq7WCpCA9KGl7UVgKSbObbo3mpTVdQ5KmaZJ1NQmlycakb8b3NrT04sAwH/N98zHvMYI25EPtgh81/1AvGV4b9B7ho8p0a77BHj7eP5xhlc8J5bm31CqVoKlvgVXagYai0K+XL0E9GoVWPg/N7E9oGwbsvHoJqVs3wdrepk1dZ1yOcdkeXylDeXaWqi4nCuZiBJBFIx7H0vS0PZy8MoxWocDbWH43Z5uby8tAQre5Fmi3i7nJSeCLVMJhqK2sQE2WQel3oPDr00fbsBp+jyQUhHa1Yhu2cjnbkJsUph7jny+fgQRHbcMDqwWadBH2SAr0+/ew+OI51GNRUBx9fMNFykXGwgJs3r1D/5omPb4h43E/nQZzaYmSUIhrKXY69Nu1q7SZydDswwew++Y1bayu0rijDwTj2VM42NjAKtsiGxzFvUgEkoEAWsWibbifY3+VTEL1yRToN65jW1WwJcu4ORzA+vw85sfGcHdiAn/PzEDK7UJBdbsIeztR3K60KopEOefIrEsSrcdi0KnV6Nb4OEbPnjFUj+d7QhTTyvl+wpNj1ekkqmeAqANuoricJOH1poUPIyMneMqSdFJgofn9pxNesb3eO5PuD3YSqs/7iHNMd+pQ/7/8BxDBueiN6h2uAAAAAElFTkSuQmCC"},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/0d6619f2cf9e725963707f3a9dea0437/cb0ef/npm.png","srcSet":"/static/0d6619f2cf9e725963707f3a9dea0437/d6261/npm.png 750w,\n/static/0d6619f2cf9e725963707f3a9dea0437/cbb96/npm.png 1080w,\n/static/0d6619f2cf9e725963707f3a9dea0437/cb0ef/npm.png 1200w","sizes":"(min-width: 1200px) 1200px, 100vw"},"sources":[{"srcSet":"/static/0d6619f2cf9e725963707f3a9dea0437/3e150/npm.webp 750w,\n/static/0d6619f2cf9e725963707f3a9dea0437/18eb9/npm.webp 1080w,\n/static/0d6619f2cf9e725963707f3a9dea0437/9ef46/npm.webp 1200w","type":"image/webp","sizes":"(min-width: 1200px) 1200px, 100vw"}]},"width":1200,"height":467}}},"cover":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","placeholder":{"fallback":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAKCAIAAAA7N+mxAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB8UlEQVR42h3OyW7bMAAEUP1zgX5FjwVy6qWnIqcURZMiSZM2dixFpiLbUW1ro1bK2khqX+gFpQM8DAYghqSw8oiedkbW6Wnr4C6gQ0B7H3c+HVzSu7hHxbCrRp6IDnHJy8iPomJwk1JQonIZUtXL36JKi8p1gA1EYdaYcWkmFcx7mHd2UgWkD3DrZzXvRlQg0oWkF2YhvdXg9wm4BevHV/16ojzImqjBy5s/V/fTX5P5najeSQvFRJOFPlsZT6/rR1lbWsjDvSCGhYrZEu83+ejQg18dw/psujSvn+TpygRmGDQnrzo45cGvj6g9Bc3RKo/ruBFEVIC4nbvFHFLV5z9vjKx3KUPNMelPcX/i10HKOJswC/MHRgMPW8y0HR/bmQLp3CTAKYBXKW6l+vVb2Bhpb+UDZ2SjjplOmU7YBrMtYQYdeX87j7eJ6tCFjYFTShae6cnzNpVhOfdqDngN8BuAWpAOSs5ec/bijyIc/mE+rgXJpvKzuLi9Umxyr8BrafNDXM9srAQN4ML3PKsB6lQ8fP22//Bx/xyOyq4SgFv+/C1efL6QrIyTPfriEskhfKyE73hBrRK1IGwXaXf5wD59YfNolFwqTLVwpmd/N6lk5SJn5yIfm6m03Ul6LG14JiLEokPOrFz2coCwBMlkE/8HK5EMOEdh2eQAAAAASUVORK5CYII="},"backgroundColor":"transparent","images":{"fallback":{"src":"/static/275bb8ab49973ff6db90df070d20a29e/a2195/socialpreview.png","srcSet":"/static/275bb8ab49973ff6db90df070d20a29e/cadb4/socialpreview.png 750w,\n/static/275bb8ab49973ff6db90df070d20a29e/a2195/socialpreview.png 800w","sizes":"(min-width: 800px) 800px, 100vw"},"sources":[{"srcSet":"/static/275bb8ab49973ff6db90df070d20a29e/11ba1/socialpreview.webp 750w,\n/static/275bb8ab49973ff6db90df070d20a29e/5f042/socialpreview.webp 800w","type":"image/webp","sizes":"(min-width: 800px) 800px, 100vw"}]},"width":800,"height":400}}},"img":{"publicURL":"/static/0d6619f2cf9e725963707f3a9dea0437/npm.png"},"socialPreview":{"publicURL":"/static/275bb8ab49973ff6db90df070d20a29e/socialpreview.png"}}}},"pageContext":{"title":"Fixing: unable to deploy to npm: 'you must be logged in'","postPath":"/blog/2019/02/15/npm-publish-issue","nextPost":"/blog/2019/04/14/webperf-statistics-inforgraphic","previousPost":"/blog/2019/02/12/angular-ga-tagmanager"}},"staticQueryHashes":[],"slicesMap":{}}