Fontawesome giving 401 unauthorized error during build process - npm

Question

I've been using fontawesome with no issues for months. Today, I started seeing this error whenever I tried to push my app to production.
error An unexpected error occurred: "https://npm.fontawesome.com/#fortawesome/fontawesome-pro/-/6.1.1/fontawesome-pro-6.1.1.tgz: Request failed \"401 Unauthorized\"".
I've tried running yarn install, removing node_modules, removing yarn.lock, etc. and I still get 401 unauthorized. I even uninstalled and reinstalled all fontawesome packages.
I'm using Yarn, not NPM, so not sure if that has something to do with it. I do have a .npmrc file set up and that looks like:
// .npmrc
#fortawesome:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken="my-token"
I also have a .yarnrc.yml file
// .yarnrc.yml
npmScopes:
fortawesome:
npmRegistryServer: "https://npm.fontawesome.com/"
npmAlwaysAuth: true
npmAuthToken: "my-token"
Here's my package.json:
{
"name": "br-client",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"test": "jest",
"storybook": "start-storybook -p 6006 --quiet",
"build-storybook": "build-storybook",
"storybook:clean": "rm -rf node_modules/.cache/storybook",
"json-server": "json-server -p 5000 --host 0.0.0.0 --watch db.json",
"compile": "tsc --noEmit"
},
"dependencies": {
"#auth0/auth0-react": "^1.3.0",
"#fortawesome/fontawesome-common-types": "^6.1.1",
"#fortawesome/fontawesome-pro": "^6.1.1",
"#fortawesome/fontawesome-svg-core": "^6.1.1",
"#fortawesome/free-brands-svg-icons": "^6.1.1",
"#fortawesome/free-regular-svg-icons": "^6.1.1",
"#fortawesome/free-solid-svg-icons": "^6.1.1",
"#fortawesome/react-fontawesome": "^0.1.18",
"#joeattardi/emoji-button": "^4.6.0",
"#stripe/react-stripe-js": "^1.4.1",
"#stripe/stripe-js": "^1.15.2",
"#tailwindcss/forms": "^0.4.0",
"#typeform/embed": "^1.2.0",
"#types/auth0-js": "^9.14.2",
"#types/lodash-es": "^4.17.4",
"#types/react-dom": "^17.0.0",
"#types/react-modal": "^3.12.0",
"algoliasearch": "^4.9.3",
"auth0-js": "^9.19.0",
"axios": "^0.21.1",
"classnames": "^2.2.6",
"date-fns": "^2.16.1",
"firebase": "^8.2.4",
"lodash-es": "^4.17.20",
"next": "10.0.5",
"next-transpile-modules": "^6.0.0",
"qs": "^6.9.6",
"rc-slider": "^9.7.1",
"rc-switch": "^3.2.2",
"react": "17.0.1",
"react-datepicker": "^3.4.1",
"react-dom": "17.0.1",
"react-easy-crop": "^3.3.2",
"react-functional-select": "^2.9.5",
"react-ga": "^3.3.0",
"react-helmet": "^6.1.0",
"react-hotjar": "^5.0.0",
"react-modal": "^3.12.1",
"react-player": "^2.9.0",
"react-query": "^3.5.16",
"react-typeform-embed": "^0.2.1",
"react-window": "^1.8.6",
"recoil": "^0.1.2",
"sharp": "^0.30.3",
"styled-components": "^5.2.1",
"styled-jsx-plugin-postcss": "^4.0.0"
},
"devDependencies": {
"#babel/core": "^7.12.10",
"#next/bundle-analyzer": "^10.0.5",
"#storybook/addon-actions": "^6.1.18",
"#storybook/addon-essentials": "^6.1.18",
"#storybook/addon-links": "^6.1.18",
"#storybook/react": "^6.1.18",
"#tailwindcss/postcss7-compat": "^2.0.3",
"#testing-library/jest-dom": "^5.11.8",
"#testing-library/react": "^11.2.3",
"#types/node": "^14.14.20",
"#types/react": "^17.0.0",
"#types/react-datepicker": "^3.1.7",
"autoprefixer": "^10.4.4",
"babel-jest": "^26.6.3",
"babel-loader": "^8.2.2",
"husky": "^5.1.3",
"import-sort-style-module": "^6.0.0",
"jest": "^26.6.3",
"json-server": "^0.16.3",
"lint-staged": ">=10",
"postcss": "^8.4.12",
"prettier": "^2.2.1",
"prettier-plugin-import-sort": "^0.0.6",
"tailwindcss": "^3.0.23",
"tsconfig-paths-webpack-plugin": "^3.3.0",
"typescript": "^4.1.3"
},
"importSort": {
".js, .jsx, .ts, .tsx": {
"style": "module",
"parser": "typescript"
}
},
"husky": {
"hooks": {
"pre-commit": "lint-staged",
"pre-push": "tsc --noEmit"
}
},
"lint-staged": {
"*.{js,jsx,ts,tsx,css,scss,md,json}": "prettier --write"
}
}

Answer 1

Answering my own question. The issue ended up being with my dockerfile. According to the fontawesome installation instructions you need to run these two commands in your terminal:
npm config set "#fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" "your token here"
But, if you use docker you'll need to add these two commands to your dockerfile:
RUN npm config set "#fortawesome:registry" https://npm.fontawesome.com/
RUN npm config set "//npm.fontawesome.com/:_authToken" "your token here"
That way, the config gets set when you deploy.
So my whole dockerfile now looks like...
FROM node:14-alpine
WORKDIR /usr/src/app
RUN npm config set "#fortawesome:registry" https://npm.fontawesome.com/
RUN npm config set "//npm.fontawesome.com/:_authToken" "my token"
COPY package*.json ./
COPY yarn.lock ./
RUN yarn install
COPY . .
RUN yarn build
EXPOSE 3000
CMD [ "yarn", "start" ]