Best practice to store API keys?

sage
1

Hello all, I have a question about managing API keys.

Currently I store my single Google Maps API key in a JS file as plain text.
In future, I am planning to have multiple keys, one per environment:

  • Dev-API-key for my local environment
  • Prod-API-key for my prod environment

I’d like to use my Dev-API-key when I develop on local. I’d like to inject my Prod-API-key into my site when I deploy to remote.

Question
What’s the best way to manage unique per environment Google Maps API keys? Thanks

2

.env files are a generally accepted Good Way to accomplish this: https://www.npmjs.com/package/dotenv

2 Likes
3

And on production with Trellis you can store the API keys like the secrets they are in the vault yml file.

1 Like
4

I just ran into this issue/need and was able to easily integrate dotenv into a Sage 9 theme using dotenv-webpack.

Install:

yarn add dotenv-webpack

Then in webpack.config.js add the following to the top:

const Dotenv = require('dotenv-webpack');

and add the plugin:

plugins: [
    new Dotenv(),
    ...

The .env file path defaults to the theme folder, but you can config it elsewhere if you need.

1 Like
6

Thanks all for bringing up .env to the conversation. I have found an existing .env file at /site level.
Is there better way to point at site/.env inside webpack.config.js file?

my webpack.config.js:

plugins: [
    new Dotenv({
      path: '../../../../.env',
    }),

I need to point from site/web/app/themes/my-theme to site/.env

8

@ethicka did you add two different keys to your .env files, on key to each environment?

9

This topic was automatically closed after 42 days. New replies are no longer allowed.