401 authorization error when trying to fetch API key

Question

I am getting the following error when trying to fetch an API key from Spoonacular:

code: 401
message: "You are not authorized. Please read https://spoonacular.com/food-api/docs#Authentication"
status: "failure"

I have tried closing the browser and restarting it using npm start but still get the error. I have also tried a different API key from Spoonacular but still get the same error. I have also tried clearing my browser Cache but still get the same error.

Please advise on how I can fix this error.

My code:

import { useEffect } from 'react';

function Popular() {
  useEffect(() => {
    getPopular();
  }, []);

  const getPopular = async () => {
    const api = await fetch(
      'https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&NUMBER=9'
    );
    const data = await api.json();                 
    console.log(data);
  };
  return <div>Popular</div>;
}

export default Popular;

Answer 1

check if your env file is in the root folder and not in src folder Also don't give any space or , while asigning the API key in env file.

for me that was the mistake.