Yarn with .npmrc and authentication

Question

I have encountered an issue that I'm not sure how to resolve in the best way possible. Here it is:

We have recently started using private NPM packages, and are trying to figure out how to tie our local development loop with CI and a Deployment pipeline.

I've looked and started leveraging the NPM_TOKEN variable. In CI, we are doing the following:

echo "//registry.yarnpkg.com/:_authToken=$NPM_TOKEN" >> ~/.npmrc

This works well, but during deployment on Heroku, we don't have access to home. So to make it work on Heroku we added an .npmrc file to the project directory. This worked well since npm uses environment variables to fill this in.

The problem is that locally, all yarn commands fail with a missing variable. The suggested way on the NPM website (https://blog.npmjs.org/post/118393368555/deploying-with-npm-private-modules) is to add the token to the environment in a .profile. This doesn't seem like the best solution, since the setting is now global, and should be kept per repository.

I've found a similar question here that uses npm but it does not seem to work with yarn. Using auth tokens in .npmrc A comment there also mentions that it does not work for npm and there is no documentation that mention a dotenv file.

Is there a better way to deal with this? Seems like a common issue that should be resolved a long time ago...

Solution

Faced this issue today with Azure Artifacts.

Following their documented project setup, the auto-generated code on Azure DevOps encodes the @ symbol to %40 in the <FEED_NAME> which caused yarn add artifacts_package_name to return a 401 Unauthorized error:

# .npmrc doc example
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<FEED_NAME>/npm/registry/
# .npmrc auto generated code on AzureDevOps
//pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<ORGANIZATION_NAME%40Local>/npm/registry/

Issue was fixed by replacing all occurrences of %40 with @ like:

//pkgs.dev.azure.com/<ORGANIZATION_NAME>/_packaging/<ORGANIZATION_NAME@Local>/npm/registry/

source