openai api key automatically rotating when deployed

Question

I'm building a web page 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()

Answer 1

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.