Userless Authentication Foursquare API "Missing access credentials" - 400 error

Question

Bit of a weird one. I'm building a React js app interacting with the Foursquare API, mainly just to learn about React js and APIs.

I'm using Foursquare to get Venue information, that works fine. I also want to use it to get venue photos which is where the fun starts.

The method that processes the original call to venues is as follows. I'm just putting this here for to provide a control as this works fine. It returns the venue information which i process within the app with no problem:

getVenues: (searchTerm) => {

    const urlToFetch = 

${urlExplore}${searchTerm}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180602;

    return fetch(urlToFetch).then( response => {
         return response.json();
    }).then( jsonResponse => {
        if (jsonResponse.response.groups[0].items) {
            return jsonResponse.response.groups[0].items.map(item => (
                {
                    id: item.venue.id,
                    name: item.venue.name,
                    // blah
                }
            ));                

        } else {
            return [];
        }

    })

}

So far, so good, it works fine. However, when I try the same approach accessing the photos endpoint, the method returns a series of objects containing meta which says:

​ code: 400 ​​ errorDetail: "Missing access credentials. See https://developer.foursquare.com/docs/api/configuration/authentication for details." ​​errorType: "invalid_auth"

Suffice to say the information at the link provided doesn't actually give much help :-(

The method I'm using to get the photo information is:

getVenuePhotos: (venueId) => {

    const fetchPhotosURL = `${urlPhotos}${venueId}/photos&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180602`;

    return fetch(fetchPhotosURL).then( response => {
         return response.json();
    }).then( jsonResponse => {
        console.log(jsonResponse);
        //blah - removed to save space - see method above, it's pretty much the same
    })

}

...both are stored in an object in a separate file which the react component imports.

The url vars resolve as follows (asterisks are my addition):

fetchVenuesURL: https://api.foursquare.com/v2/venues/explore?near=london&limit=10&client_id=**** &client_secret=****&v=20180602

fetchPhotosURL: https://api.foursquare.com/v2/venues/4ac518eff964a52064ad20e3/photos&limit=10&client_id=**** &client_secret=****&v=20180602

Does anyone have any idea why this might be happening?

thanks in advance

Answer 1

I think there is a typo in your URL.

Replace

${urlPhotos}${venueId}/photos&limit=10&client...

with

${urlPhotos}${venueId}/photos?limit=10&client...