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;

Alì Shadman · Accepted Answer · 2022-06-22 08:10:09Z

1

You need to use template literals with backsticks ` .

Wrong:

const api = await fetch(
      'https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&NUMBER=9'
    );

Correct

const api = await fetch(
      `https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&NUMBER=9`
    );

answered Jun 22, 2022 at 8:10

Alì Shadman

2421 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Lizzy Over a year ago

Hi Ali, thank you for your help. I have tried using literals with backsticks and even tried copying your code and using it but still get the same error

Alì Shadman Over a year ago

@Lizzy can you check in the Network tab in the console what is the url that you are calling?

Lizzy Over a year ago

I think it is this but not sure if I am sending you the right thing? api.spoonacular.com/recipes/…

ISHIMWE Henriette · Accepted Answer · 2022-06-27 17:04:00Z

0

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.

answered Jun 27, 2022 at 17:04

ISHIMWE Henriette

16

Comments

Ahmad · Accepted Answer · 2022-06-22 09:12:17Z

0

You should always call the API in Try catch, so that you can log the error and check if there is an error. 401 Status Unauthorized you must pass a Authorization token in the API 'Headers'.

const getPopular = async () => {
    const api = await fetch(
      `https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_API_KEY}&NUMBER=9`, {
  headers: {
    'Authorization': // pass your token here
    }
     }
    );
    try {
      const data = await api.json();                 
      console.log(data);
    } catch (error) {
       console.log(error.response) 
    }
  };

answered Jun 22, 2022 at 9:12

Ahmad

1,5191 gold badge6 silver badges12 bronze badges

3 Comments

Lizzy Over a year ago

Hi Ahmad, thank you for your help. Where do I get an authorization token from?

Ahmad Over a year ago

You get authorization token from login API. :)

Lizzy Over a year ago

I am very new to all this. Could you please list the steps to obtaining the authorization token? When I google spoonacular API login I can't find much on it.

Junu Brahma · Accepted Answer · 2022-08-20 14:51:53Z

0

Check if your env file is in root folder. I deleted the .env file and created it again and it worked.

answered Aug 20, 2022 at 14:51

Junu Brahma

112 bronze badges

Comments

Brian Tompsett - 汤莱恩 · Accepted Answer · 2023-06-04 22:45:51Z

0

Try this this; it works for me:

import { useEffect } from "react";

const Popular = () => {
  useEffect(() => {
    getpopular();
  }, []);

  const getpopular = async () => {
    const api = await fetch(
      `https://api.spoonacular.com/recipes/random?number=10&apiKey=YOUR API KEY`
    );
    const data = await api.json();
    console.log(data);
  };
  return <div>Popular</div>;
};

export default Popular;

edited Jun 4, 2023 at 22:45

Brian Tompsett - 汤莱恩

5,92772 gold badges63 silver badges135 bronze badges

answered Jun 4, 2023 at 18:04

Moaiz-ul-islam

11 bronze badge

1 Comment

DSDmark Over a year ago

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.

Ibrahim Faisal · Accepted Answer · 2024-03-30 11:01:24Z

0

please add the "apiKey" parameter at the end of your API endpoint. Be sure to prefix it with "?".

answered Mar 30, 2024 at 11:01

Ibrahim Faisal

1

2 Comments

Yunnosch Over a year ago

Welcome to StackOverflow. Please, edit and try for How to Answer, describe the effect of what you propose and explain why it helps to solve the problem, make the additional insight more obvious which you contribute beyond existing answers, the relevant advantage which your solution achieves, especially if the difference is so small and non-obvious. Consider taking the tour.

Community Over a year ago

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.

Collectives™ on Stack Overflow

401 authorization error when trying to fetch API key

6 Answers 6

3 Comments

Comments

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

3 Comments

Comments

3 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related