starred/hoppscotch

Fork 0

mirror of https://github.com/hoppscotch/hoppscotch.git synced 2026-04-26 01:06:00 +03:00

[GH-ISSUE #2000] [feature]: Api Key based authentication #646

New issue

Closed

opened 2026-03-16 16:30:41 +03:00 by kerem · 4 comments

kerem commented

2026-03-16 16:30:41 +03:00

Owner

Originally created by @mcroissant on GitHub (Dec 7, 2021).
Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/2000

Originally assigned to: @EdwinFajardoBarrera on GitHub.

Is there an existing issue for this?

I have searched the existing issues

Summary

Hello,

We see many apis and api gateways using api key as a standard authentication mechanism, it would be awesome to support this authentication method in hoppscotch. This would require the ability to specificy the place where to set the api key (header or path) and under which name (different vendor and implementation use different header name).

Why should this be worked on?

Currently APIs using API Keys passed through headers have their authentication specified as any other header when they actually concern Authentication. To have a consistent handling of Authentication it should be made possible to specify API Key as an autentication method in hoppscotch

Originally created by @mcroissant on GitHub (Dec 7, 2021). Original GitHub issue: https://github.com/hoppscotch/hoppscotch/issues/2000 Originally assigned to: @EdwinFajardoBarrera on GitHub. ### Is there an existing issue for this? - [X] I have searched the existing issues ### Summary Hello, We see many apis and api gateways using api key as a standard authentication mechanism, it would be awesome to support this authentication method in hoppscotch. This would require the ability to specificy the place where to set the api key (header or path) and under which name (different vendor and implementation use different header name). ### Why should this be worked on? Currently APIs using API Keys passed through headers have their authentication specified as any other header when they actually concern Authentication. To have a consistent handling of Authentication it should be made possible to specify API Key as an autentication method in hoppscotch

kerem

2026-03-16 16:30:41 +03:00

closed this issue
added the
feature
label

kerem commented

2026-03-16 16:30:56 +03:00

Author

Owner

@EdwinFajardoBarrera commented on GitHub (Dec 16, 2021):

I would like to work on this issue, can you assign it to me?

@EdwinFajardoBarrera commented on GitHub (Dec 16, 2021): I would like to work on this issue, can you assign it to me?

kerem commented

2026-03-16 16:31:02 +03:00

Author

Owner

@EdwinFajardoBarrera commented on GitHub (Dec 17, 2021):

Hello @liyasthomas, I have some questions about the implementation:

I've implemented the capability of adding API_KEY-based authentication, adding it in the specified header or by query params.

In the first case, I used the effectiveFinalHeaders function in EffectiveURL.ts

In the second case, I'm pushing a new element to params. I tried many options but those have many issues:

Adding new param by request.param attribute
request.params.pop() request.params.push({ active: true, key, value: parseTemplateString(value, envVariables), })
In this way, I need to remove the last param (empty one) and push the new one. This is the way it works better but it haves inconsistency in the Params tab: Activate/Deactivate and delete buttons don't work properly.
Adding new param by addRESTParam method in store
It doesn't set the param before the request is sent.

I really would like to read your comments of architectonical guidelines. Thanks in advance

@EdwinFajardoBarrera commented on GitHub (Dec 17, 2021): Hello @liyasthomas, I have some questions about the implementation: I've implemented the capability of adding API_KEY-based authentication, adding it in the specified header or by query params. In the first case, I used the `effectiveFinalHeaders` function in `EffectiveURL.ts` In the second case, I'm pushing a new element to params. I tried many options but those have many issues: - Adding new param by request.param attribute `request.params.pop() request.params.push({ active: true, key, value: parseTemplateString(value, envVariables), })` In this way, I need to remove the last param (empty one) and push the new one. This is the way it works better but it haves inconsistency in the Params tab: Activate/Deactivate and delete buttons don't work properly. - Adding new param by addRESTParam method in store It doesn't set the param before the request is sent. I really would like to read your comments of architectonical guidelines. Thanks in advance

kerem commented

2026-03-16 16:31:07 +03:00

Author

Owner

@liyasthomas commented on GitHub (Dec 17, 2021):

Hi @EdwinFajardoBarrera, can you open a draft PR so that we can understand your code better.

We have an Authorization tab that already supports multiple types of Authorization. We could add one more type 'API KEYS' and append its key-value pair to 'effectiveFinalHeaders'. For the URL query mechanism, I guess it's up to the user to add its entry in either the 'Parameters' tab or in the URL box.

Here's the UI I expect:

The authorization headers can be generated based on the type of selected Authorization method. And yes, the API key-value pair can be added to effectiveFinalHeaders at the time of sending the request.

Let me know if you need any help.

@liyasthomas commented on GitHub (Dec 17, 2021): Hi @EdwinFajardoBarrera, can you open a draft PR so that we can understand your code better. We have an Authorization tab that already supports multiple types of Authorization. We could add one more type 'API KEYS' and append its key-value pair to 'effectiveFinalHeaders'. For the URL query mechanism, I guess it's up to the user to add its entry in either the 'Parameters' tab or in the URL box. Here's the UI I expect: <img width="1440" alt="Screenshot 2021-12-17 at 6 28 24 AM" src="https://user-images.githubusercontent.com/10395817/146471528-104297ac-c4f9-469c-9e1e-9d8ba05222c5.png"> <img width="1440" alt="Screenshot 2021-12-17 at 6 30 20 AM" src="https://user-images.githubusercontent.com/10395817/146471540-c2177178-cc6c-46bd-a3e2-d4c76c9bf2b3.png"> The authorization headers can be generated based on the type of selected Authorization method. And yes, the API key-value pair can be added to `effectiveFinalHeaders` at the time of sending the request. Let me know if you need any help.

kerem commented

2026-03-16 16:31:12 +03:00

Author

Owner

@EdwinFajardoBarrera commented on GitHub (Dec 17, 2021):

@liyasthomas I see, this so is helpful!, I've just created a PR (#2021), I'll wait for your comments to make the changes.

@EdwinFajardoBarrera commented on GitHub (Dec 17, 2021): @liyasthomas I see, this so is helpful!, I've just created a PR (#2021), I'll wait for your comments to make the changes.

kerem referenced this issue

2026-03-17 00:26:29 +03:00

[PR #646] [MERGED] Even #2763

kerem referenced this issue

2026-03-17 00:26:29 +03:00

[PR #647] [MERGED] Refactor/ui #2764