Securely store and access API keys in a JavaScript snippet

API & Customization Ask Developers
1

I want to make an API call to an external application from my knack application.

I can write my JavaScript snippet here Settings → API & Code.
The API I am accessing requires authentication, which means I need to supply an API key with the request. I am proficient in JavaScript.

My concern is how can I secure my API key.
The JavaScript is loaded on the client side (user’s web browser), so hard coding the API key in the code would be a security breach.

I came across this JavaScript code in the documentation.

Knack.getUserAttributes().values.field_1;

That gave me an idea that a solution might be to allow the user to store the API key as part of his profile, and then I access the API key from the user object (Knack.getUserAttributes().values.field_1;).

I have searched the forum to check if this case has been solved, but I haven’t found anything. Please advice me if there is an existing thread covering this topic. Thank you

What are your ideas to securely store and access API keys in a JavaScript snippet?

2

Hi,

Personally, I think secret keys should always be stored in server-side code, ideally in environment variables.

If you don’t want to manage a server, you can use a third-party tool like Pipedream, write your code there, and then invoke it from Knack.

So the flow would go: Knack → Pipedream → Pipedream to External Application → Pipedream receives response from External Application and sends back to Knack.

Please note that users could execute Knack.getUserAttributes().values from the browser console and view the API key if stored there.

3

Yes, I agree, the server side should contain secret keys. That is the challenge when using a client side solution such as Knack.

Your suggestion of using Pipedream is great so that I dont have to maintain a server myself. I am using Zapier (an alternative to Pipedream as far as I understand Pipedream). That could work.