Where to store secret keys when using Polymer + Firebase?

I'm developing a web application using Polymer + Firebase. In my app, I'm trying to integrate it to Slack. In order to obtain an access token from Slack, I need to make an api call to Slack with the client secret key (generated by Slack).

The question is, where/how should I store this client secret key? Hardcoding this key in my Polymer app sure sounds like a big security no no.

Thanks.

Secrets like API keys should only be accessible to your server code and if saved to a file, excluded from your source code using a .gitignore rule.

• Use firebase config:set to store your Firebase project API keys.
• Create yourself a serverless function that uses the API key for your browser client code to use.
• Secure access to your new serverless function API by checking authentication / role / permissions (optional / recommended)

Better ... just call Slack API from your serverless functions and don't expose the key at all to your browser client users.

Example:

$ firebase functions:config:set myapp.apikey=XXX

Then in local emulator or deployed code you can use:

const functions = require('firebase-functions');
const apikey = functions.config().myapp.apikey;
const url = `https://hooks.slack.com/services/${apikey}`
// call Slack API

Storing a secret in your client-side code sounds like a very bad idea. Any malicious user can get it there.

Any other way that requires access to the secret on the client is similarly flawed.

The only solution is one that doesn't require the secret to exist on the client, so one that involves running code in a trusted location. Typically this will be a server, but don't overestimate how much hardware you need to run such code on. Requiring a server in this case is about trust, not about bigger hardware.

See pattern 2 in this article about common application architectures on Firebase.