I'm trying to pull some data using react js, axios and the Spotify API. When the user logs in, an access token is grabbed through the URL, but whenever I try to grab data through one of the API's endpoint, it gives me a status 400. It was working before but now it doesn't.
const [profile, setProfile] = useState()
const [token, setToken] = useState("")
const navigate = useNavigate()
useEffect(() => {
const hash = window.location.hash
let token = window.localStorage.getItem("token")
if(!token && hash){
token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1]
window.location.hash = ""
window.localStorage.setItem("token", token)
}
setToken(token)
}, [])
const logout = () => {
setToken("")
window.localStorage.removeItem("token")
navigate("/")
}
useEffect(() => {
Axios.get("https://api.spotify.com/v1/me", {
headers: {
Authorization: `Bearer ${token}`
},
}).then((response) => {
console.log(response.data)
setProfile(response.data)
})
}, [])
I do realise this has nothing to do with axios and more to do with the API itself but I'm not sure what the problem is.