JSON: Use Pexels API key

Question

I'm starting to learn JSON, and on my entire journey I haven't come across API keys when working with APIs. I'm trying to work the pexels API, found here https://www.pexels.com/api/documentation/?language=javascript . I was given an API key, how do I use it in JSON. I know this is a ridiculous question, but I haven't been able to find out how. Thanks for any help.

Answer 1

If you go through the documentation they have given how to use your API_KEY.

you can check docs here .

You have to pass API_KEY in request header as Authorization .

curl -H "Authorization: YOUR_API_KEY" \
  "https://api.pexels.com/v1/search?query=people"

JS

fetch("https://api.pexels.com/v1/search?query=people", {
  headers: {
    Authorization: 'YOUR_API_KEY'
  })
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(err => console.log(err))

Answer 2

First I'll recommend you create an env file in the root of your project called .env.local

Afterwards add the Key to this env file

YOUR_API_KEY = '1232123123123123123'  <== your key insted of these random numbers

then you safely use your key to make fetch calls, then reach for some pexels endopint like this

export const getDataFromApi = async () => {
  const res = await fetch(
  ENDPOINT_URL,
  {
    headers: {
      Authorization: API_KEY,
    },
  }
);
  const responseJson = await res.json();
  return responseJson.photos;
};