Keep API secrets secret with Gitlab CI and Webpack

A local config file

module.exports = {
CLIENT_ID: "<YOUR_CLIENT_ID>",
CLIENT_SECRET: "<YOUR_CLIENT_SECRET"
}

Gitlab secrets

Configure Gitlab CI

image: node:9.10cache:
paths:
- node_modules/
pages:
script:
- npm install
- npm run prod
- mv dist public
artifacts:
paths:
- public

only:
- master

Setup webpack

// Indicates we're building in the CI environment
const isCiBuild = !!process.env.CI;
let clientId;
let clientSecret;
if(isCiBuild) {
clientId = process.env.CLIENT_ID;
clientSecret = process.env.CLIENT_SECRET;
} else {
const config = require("./config");
clientId = config.clientId;
clientSecret = config.clientSecret;
}
// webpack config stuff...
plugins: [
// other plugins...
new webpack.DefinePlugin({
CLIENT_ID: JSON.stringify(clientId),
CLIENT_SECRET: JSON.stringify(clientSecret)
})
]

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Tim Barclay

Tim Barclay

More from Medium

Authentication made easy with NestJS — part 4 of how to build a GraphQL + MongoDB…

How does NodeJS require modules?

how does nodejs require modules — directory structure

Unit testing TypeScript with Jest: Part One

Securing Tokens (JWTs, etc.) in Browsers (trying to be novel)