Wanderlust project: invalid auth of Foursquare API

Hi,
I am stuck in this project, it seems that there is something in my client secret or client ID in foursquare. The console said:

" * meta: {
  * code: 400,

  * errorType: "invalid_auth",

  * errorDetail: "Missing access credentials. See https://developer.foursquare.com/docs/api/configuration/authentication for details.",

  * requestId: "5e94d55eb4b684001b7d7de5"},

* response: { }

}"

I don’t understand, because these are the credentials I created in Foursquare.

Best regards, Kimmo

https://www.codecademy.com/courses/introduction-to-javascript/projects/wanderlust?action=resume_content_item

Here is my code until step 14:

// Foursquare API Info
const clientId = 'TDCA2NYAM2P5QTQAHT1YAAVNZEAY4BTQXS1T04QQGLQQCZRF';
const clientSecret = 'FHROLKQ5IKLIIPV3GJFFBMY4EG0USS5HNMNRLVI2AWS0RCND';
const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info
const openWeatherKey = '90e16e1d7e2cfa3f144cd6ca1effd84f';
const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather';

// Page Elements
const $input = $('#city');
const $submit = $('#button');
const $destination = $('#destination');
const $container = $('.container');
const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];
const $weatherDiv = $("#weather1");
const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// Add AJAX functions here:
const getVenues = async () => {
const city = $input.val();
const urlToFetch = url + city + '&limit=10&client_id=' + clientId + 'client_secret=' + clientSecret + '&v=20200413';

try {
const response = await fetch(urlToFetch);
if (response.ok) {
console.log(response);
};
}
catch (error) {
console.log(error);
}
}
;

const getForecast = () => {

}


// Render functions
const renderVenues = (venues) => {
  $venueDivs.forEach(($venue, index) => {
    // Add your code here:

    let venueContent = '';
    $venue.append(venueContent);
  });
  $destination.append(`<h2>${venues[0].location.city}</h2>`);
}

const renderForecast = (day) => {
  // Add your code here:
  
	let weatherContent = '';
  $weatherDiv.append(weatherContent);
}

const executeSearch = () => {
  $venueDivs.forEach(venue => venue.empty());
  $weatherDiv.empty();
  $destination.empty();
  $container.css("visibility", "visible");
  getVenues()
  getForecast()
  return false;
}

$submit.click(executeSearch)

Welcome back to the forums. :slight_smile:

Without doing any in depth testing… your urlToFetch variable is missing an & (ampersand)… :slight_smile:

Hi, thank you very much for your reply. I had a short break here :slight_smile:

I corrected it, but I still get the same message.

Best regards, Kimmo

Are the client ID and secret definitely right?

Yes, I copypasted them from foursquare app settings, and reseted also the client secret but it did not work,

Now I created a new account in foursquare and tried that, but I still get the same:
{

}

My code is:

// Foursquare API Info

const clientId = 'V4E4NYNGOZXRTSKGF451QSDZKWQ3XU5PDHXH2JSRVW4L255J';

const clientSecret = '5PRD4WKPSAXOQOBNOI4URWX3HDX5ACXVQ1SYWWNQSCSVCVCP';

const url = 'https://api.foursquare.com/v2/venues/explore?near=';

// OpenWeather Info

const openWeatherKey = '7c2526f1a3e3cc3ee641d149ea8dbdc2';

const weatherUrl = 'https://api.openweathermap.org/data/2.5/weather';

// Page Elements

const $input = $('#city');

const $submit = $('#button');

const $destination = $('#destination');

const $container = $('.container');

const $venueDivs = [$("#venue1"), $("#venue2"), $("#venue3"), $("#venue4")];

const $weatherDiv = $("#weather1");

const weekDays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];

// Add AJAX functions here:

const getVenues = async() => {

const city = $input.val();

const urlToFetch = `${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20200415`;

try {

const response = await fetch(urlToFetch);

if (response.ok) {

console.log(response);

}

}

catch (error) {

console.log(error);

}

}

;

I’ve formatted your code so that the forum retains the formatting. You can edit the post to see how I did it. :slight_smile:

Only thing I can think to suggest is that you do a console.log of your interpolated urlToFetch and check that it is correctly inserting those variables…

Admittedly, this code might not make much sense to you (as it's written in Python) but I can query the API successfully using the client ID and client secret you posted...
import requests

target_uri = "https://api.foursquare.com/v2/venues/explore"

payload = {
    "client_id" : "(your client ID)",
    "client_secret" : "(your client ID)",
    "near" : "London,UK",
    "v" : "20200415",
    }

req = requests.get(target_uri, params=payload)

print(req.url) # output: https://api.foursquare.com/v2/venues/explore?client_id=(your client ID)&client_secret=(your client secret)&near=London%2CUK&v=20200415

print(req.text) # output: a JSON response from the API endpoint...

It works as well if I go direct to the URI in my browser; I get the JSON rendered nicely by Firefox…

I’d definitely double-check whether that URL is being processed correctly during interpolation as a starting point…

1 Like

Hi!t

Thanks for helping, it’s very important to learn this exercise and get forward :slight_smile:

Do you mean I should type console.log(urlToFetch); or what? Cause I typed that but I get nothing in the console.

Yes, that is what I meant. :slight_smile:

If you’re not getting anything back to the console, I’m not sure why…

(JavaScript isn’t a language I’m especially great with… but there’s others here on the forum like @janneslohmeijer, @midlindner or @ktsotras who might be able to help.)

The exercise doesn’t have a console pane like most. It has a browser window where the console would normally be. You’ll need to open your own browser’s console if you haven’t already.

Hi!
Yes I have done that all the way. But when I tried to console.log the urlToFetch nothing appeared in the console. But I did reset the exercise and did it again to the point 14 right from the beginning and didn’t get error message again, so it seems there was something else wrong than the code itself. @thepitycoder
So far everything ok :slight_smile:

Best regards, Kimmo

2 Likes

@midlindner @thepitycoder Hi again!

I don’t get it. How do I log the jsonResponse to the console? It shows nothing in the chrome console. The code is:

// Foursquare API Info

const clientId = ‘V4E4NYNGOZXRTSKGF451QSDZKWQ3XU5PDHXH2JSRVW4L255J’;

const clientSecret = ‘5PRD4WKPSAXOQOBNOI4URWX3HDX5ACXVQ1SYWWNQSCSVCVCP’;

const url = ‘https://api.foursquare.com/v2/venues/explore?near=’;

// OpenWeather Info

const openWeatherKey = ‘7c2526f1a3e3cc3ee641d149ea8dbdc2’;

const weatherUrl = ‘https://api.openweathermap.org/data/2.5/weather’;

// Page Elements

const input = (’#city’);

const submit = (’#button’);

const destination = (’#destination’);

const container = (’.container’);

const venueDivs = [("#venue1"), ("#venue2"), ("#venue3"), $("#venue4")];

const weatherDiv = ("#weather1");

const weekDays = [‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’];

// Add AJAX functions here:

const getVenues = async () => {

const city = $input.val;

const urlToFetch = ${url}${city}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20200419;

try {

const response = await fetch(urlToFetch);

if (response.ok) {

const jsonResponse = await response.json();

console.log(jsonResponse);

}

}

catch (error) {

console.log (error);

}

}

;

Best regards,

Kimmo