Help Wizard

Step 1

NEXT STEP

FAQs

Please see below the most popular frequently asked questions.

Loading article...

Loading faqs...

VIEW ALL

Ongoing Issues

Please see below the current ongoing issues which are under investigation.

Loading issue...

Loading ongoing issues...

VIEW ALL

API only working when I use sample data

API only working when I use sample data

Fenaz

Hi there,

I am using reactjs and trying get track using the web API but it only works when I use the track id from sample id that I got from 

https://developer.spotify.com/console/get-track/

which is - 11dFghVXANMlKmJXsNCbNl

Whenever I try different IDs like 

5HCyWlXZPP0y6Gqq8TgA20
it doesn't work and says
{
"error": {
"status": 400,
"message": "Only valid bearer authentication supported"
}
}
 
This is my code :
 

 

import React,{useState,useEffect} from "react";
import axios from "axios";


export default function TrackLoader(accessToken){

    //run useeffect with a state called number
    //change the state number in the return value
    //when number changes the useeffect will run again
    const [number, setNumber] = useState(0);
    const [track, setTrack] = useState([]);
    const [arrayOfTracks, setArrayOfTrack] = useState([]);
    const trackIds = ["11dFghVXANMlKmJXsNCbNl","5HCyWlXZPP0y6Gqq8TgA20","11dFghVXANMlKmJXsNCbNl","5SRqt66Dhv4yvKbvGbHQsF","0nbXyq5TXYPCO7pr3N8S4I","1qDrWA6lyx8cLECdZE7TV7"]
    //${trackIds[number]}/
    console.log(accessToken)
    useEffect(() =>{
        async function getData(){
            const response = await axios.get("https://api.spotify.com/v1/tracks/5HCyWlXZPP0y6Gqq8TgA20?market=ES",{
                headers:{
                    Authorization:"Bearer " + accessToken,
                },
            })
            let selectedTrack = response.data
            setTrack(selectedTrack)
            console.log(arrayOfTracks)
        }
        getData();
    },[number]);

    function handleClick(){
        addToList(track)
        setNumber(number+1)
    }

    function addToList(){
        arrayOfTracks.push(track)  
    };

    return(
        <div>
            <button onClick={() => handleClick()}>Number+1</button>
        </div>
    )


}



 

Reply
1 Reply

Hubo

Hey @Fenaz, thanks for posting here.

 

Hope things are well! I'm not 100% familiar with the coding language you're using, but I'll give it a shot if you don't mind.

 

Could you try to put Authorization between quotation marks, like so:

            const response = await axios.get("https://api.spotify.com/v1/tracks/5HCyWlXZPP0y6Gqq8TgA20?market=ES",{
                headers:{
                    'Authorization': 'Bearer ' + accessToken,
                },
            })

 

Let me know if that makes sense!

 

Have a great day,

Hubo

HuboSpotify Star
Help others find this answer and click "Accept as Solution".
If you appreciate my answer, maybe give me a Like.
Note: I'm not a Spotify employee.

Suggested posts