API Key not being read in react app

[wicked horizon]

I am using node js and I used create-react-app to make my react project. i created an .env file in my project directory with my api key: REACT_APP_API_KEY=*my api key* and then in app.js, I have:

  const configuration = new Configuration({
    apiKey: process.env.REACT_APP_API_KEY,
  });

However, the api key doesn't work when I run my app locally and I get a 401 authorization error. Any help would be appreciated.

Here is my full code;

import './App.css';
import {Configuration, OpenAIApi} from "openai"
import {useState} from "react"
import logo from './logo.svg';
import axios from 'axios';

function App() {
  const [text, setText] = useState("" );
  const [summarizedText, setSummarizedText] = useState("")
  const [loading, setLoading] = useState(false)
  const API_KEY = process.env.REACT_APP_API_KEY;

  const configuration = new Configuration({
    apiKey: process.env.REACT_APP_API_KEY,
  });

  const openai = new OpenAIApi(configuration)
  
  const ButtonSubmit = (event) => {
    var data = JSON.stringify({
      "model": "text-davinci-003",
      "prompt": generatePrompt(text),
      "max_tokens": 1024,
      "temperature": 0
    });
    
    var config = {
      method: 'post',
      url: 'https://api.openai.com/v1/completions',
      headers: { 
        'Content-Type': 'application/json', 
        'Authorization': "Bearer" + API_KEY, 
      },
      data : data
    };

    axios(config)
    .then(function (response) {
      setSummarizedText(JSON.stringify(response.data.choices[0]?.text));
    })
    .catch(function (error) {
      console.log(error);
    });

  };


  
 function generatePrompt(text) {
    return `Summarize this ${text}`
  }
     
  );
}


export default App;

When I manually add the API_KEY in the config variable (after Bearer), the code works, but I don't want to push my api key to github.

[still zealot]

Hi! It seems that you haven't properly configured your dotenv module. First, make sure you have it installed in your environment with

npm install dotenv

And then you have to put

require('dotenv').config();

at the beginning of your code. Hope this helps, good luck!

[formal cipher]

I have the same problem,
I am sure that the API_Key is sent with request,
here is the response from API
and I tried it in node js backend it's working, but not in react-app !!
any help please ?

[woven shard]

Hi, did you solve the problem? If not, please follow these step:
401 error is occured by GPT Server.
const { Configuration, OpenAIApi } = require("openai");
... ... ...
const configuration = new Configuration({
apiKey: process.env.OPENAI_API_KEY,
});
... ...
let strquery = []
let resfromBot = []
const completion = await openai.createCompletion({
model: "text-davinci-003",
prompt: strquery,
});
Hope your are doing well.
Thx.

[summer escarp]

use process.env.REACT_APP_OPENAI_API_KEY,

[summer escarp]

^^^ delete dotenv from your react app, it already includes in CRA

[formal cipher]

already used it

the issue not will getting the api key, because I can see it in the api request, and response clearly saying Incorrect API key and reponse with it

[summer escarp]

you don't have to add dotenv in CRA, it already exists and works

[summer escarp]

try headers: { "Authorization": Bearer ${API_KEY} }

[wicked horizon]

a bit late but i got it to work. thx @summer escarp @woven shard