Sabbatical dev

sabbatical devtechnical blog
 

Chromatic Storybook

Secure your project token in Next.js

When adding a GitHub action to build Storybook on deployment, I read that I should be placing my project token in a secret - I then realised I had been exposing mine to the outside world.

Whilst going through the setup of Storybook I followed the instructions and placed the project token in the npm script like so.

"chromatic": "npx chromatic --project-token 10b98f027b91"


Unfortunately I didn't give this much thought to this at the time and committed to my GitHub repo

This isn't too bad if your repo is private, but if you are sharing your repo publicly like me this is a bit of a booboo.

It took me a little while to find that you can also set the token in the .env file, as it's a little hidden away on the CLI page.

It didn't quite work with Next.JS's set up of .env.local and config, but i just added a .env file

.env

CHROMATIC_PROJECT_TOKEN="10b98f027b91"

added .env also to my gitignore

and it worked like a charm ready for a commit and hidden from prying eyes : )

(Unfortunately I had to start a completely new storybook as my key had been comprised and seemingly Chromatic does not provide a token refresh)


Comments

Add a comment