Add API key gate modal for browser-based key input - #136
Open
EnchantedBroccoliForest wants to merge 2 commits into
Open
Add API key gate modal for browser-based key input#136EnchantedBroccoliForest wants to merge 2 commits into
EnchantedBroccoliForest wants to merge 2 commits into
Conversation
…upplied key Vite inlines any VITE_-prefixed env var into the production bundle, so the public site at 42creator.space was shipping the contents of VITE_OPENAI_API_KEY in plain text. Drop all VITE_ key references from the browser path and have users paste their own OpenRouter key into a blocking gate at load time. The key is held only in module-level memory in src/api/openrouter.js — never written to localStorage, cookies, or any other persistence — so a refresh clears it. CLI / HTTP service paths keep reading OPENROUTER_API_KEY from process.env (no VITE_ fallback), and the README is updated to match.
Same fix as the OpenRouter key: stop reading VITE_-prefixed env vars in the browser path so Vite cannot inline an xAPI key into the public bundle. The key is now supplied through an optional, collapsed disclosure inside the existing ApiKeyGate modal and held only in module-level memory in src/pipeline/xapi.js. Node (CLI / eval / HTTP service) still reads process.env.XAPI_KEY and ~/.xapi/config.json as before.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Replaces environment variable-based API key configuration with a browser UI modal that prompts users to enter their OpenRouter API key at runtime. Keys are held in memory only and never persisted to disk, localStorage, or cookies, clearing on page refresh.
Key Changes
New
ApiKeyGatecomponent (src/components/ApiKeyGate.jsx): A blocking modal dialog that appears when no API key is present. Validates key format (sk-or-prefix) and includes an optional collapsible section for xAPI (X/Twitter enrichment) keys.In-memory key storage: Refactored
src/api/openrouter.jsandsrc/pipeline/xapi.jsto store user-supplied keys in module-level variables (_userApiKey,_userXapiKey) instead of reading from environment variables at build time. Eliminates the risk of accidentally embedding keys in the public bundle.New
useApiKeyhook (src/hooks/useApiKey.js): ExposeshasKey,setKey, andclearKeyviauseSyncExternalStore, allowing React components to subscribe to key state changes without exposing the actual key value to devtools.Removed VITE_ prefixed env vars: Stripped
VITE_OPENROUTER_API_KEY,VITE_OPENAI_API_KEY, andVITE_XAPI_KEYfallbacks from browser code. Node-only paths (CLI, eval harness, HTTP service) now read onlyOPENROUTER_API_KEYandXAPI_KEYfromprocess.env.Updated i18n strings: Added 10 new translation keys for the API key gate UI (title, body, placeholder, error messages, xAPI toggle, notice) in both English and Chinese.
Updated CLI/service docs: Simplified environment variable documentation in
bin/pm-tools.jsandbin/pm-tools-service.jsto reflect the singleOPENROUTER_API_KEYrequirement for Node environments.Styling: Added ~150 lines of CSS for the modal backdrop, panel, form inputs, error states, and collapsible details section with smooth transitions.
Implementation Details
isBrowser()) ensures Node code paths never attempt to readimport.meta.env, preventing accidental key leakage into bundles.https://claude.ai/code/session_01Lpf6vXKUaJp51385XZzWZz