1

I'm building a webpage using openai gpt api in reactjs. I saved my api key on .env file then gitignored it. And I deployed my code with gh-pages, but openai detects it and rotate the key automatically. How can I use api key properly?

const DEFAULT_PARAMS = {
            model: "gpt-3.5-turbo",
            messages: [{"role": "user",
                        "content": message
            }],
            temperature: 1,
            max_tokens: 1000
        };
        const params_ = {...DEFAULT_PARAMS};
        const result = await fetch('https://api.openai.com/v1/chat/completions', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Bearer ' + String(process.env.REACT_APP_OPENAI_API_KEY)
            },
            body: JSON.stringify(params_)
        });
        const data = await result.json()
tworiver
  • 25
  • 3

2 Answers2

0

You can refer to this question regarding securing secrets on static websites hosted on GitHub Pages.

Short answer: it's impossible because everything is exposed in the code.

You need to use another way to deploy your website. For example, frameworks like NextJS.

picsoung
  • 6,314
  • 1
  • 18
  • 35
0

I use nestjs framework, the apiKey also rotated.. enter image description here

lrabbit
  • 1
  • 1
  • Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – devpolo Apr 03 '23 at 08:04