topic Re: 401 Error in API Call. in Spotify for Developers

401 Error in API Call.

sickleandsycthe — Tue, 09 Jun 2020 03:59:31 GMT

I'm a design trying to learn to code through the Spotify API. I'm having a heck of a time getting my access_tokens saved to state and wondering if anyone has any advice. The code below will return a 401 but when I console.log(accessToken) it appears to be correct. Am I missing a syntax error here or something obvious?

const [user, setUser] = useState(); const [accessToken, setaccessToken] = useState(); const [refreshToken, setrefreshToken] = useState(); useEffect(() => { extractTokens(); spotifyAuth(); }, []); //Parse URL sring to get the access token from Spotify const hashparam = window.location.hash .substring(1) .split("&") .reduce(function(initial, item) { if (item) { var parts = item.split("="); initial[parts[0]] = decodeURIComponent(parts[1]); } return initial; }, {}); //Extract access_token from hashparam const extractTokens = () => { setaccessToken(hashparam.access_token); setrefreshToken(hashparam.refresh_token); } console.log(accessToken); //Fetch data from the Spotify Endpoint const spotifyAuth = async () => { const settings = { headers: {'Authorization': 'Bearer ' + accessToken} } const response = await fetch('https://api.spotify.com/v1/me', settings); const data = await response.json(); setUser(data); }

Re: 401 Error in API Call.

sickleandsycthe — Wed, 10 Jun 2020 22:24:38 GMT

If any other novices else end up here, I solved the problem like this. The API request was being made before the accessToken had been set, so I separated the useEffect (among other things) to ensure the API call wouldn't trigger before accessToken was set. I'll probably consolidate some but the code below works:

//Fetch data from the Spotify Endpoint const getUserData = async (token) => { const settings = { headers: {'Authorization': 'Bearer ' + token} } const response = await fetch('https://api.spotify.com/v1/me', settings); const data = await response.json() return data; } const App = () => { const [showNavPanel, setShowNavPanel] = useState(false) const closeNavPanel = () => {setShowNavPanel(false)} const [user, setUser] = useState(); const [accessToken, setaccessToken] = useState(null); const [refreshToken, setrefreshToken] = useState(null); //Parse URL sring to get the access token from Spotify const hashparam = window.location.hash .substring(1) .split("&") .reduce(function(initial, item) { if (item) { var parts = item.split("="); initial[parts[0]] = decodeURIComponent(parts[1]); } return initial; }, {}); //Set accessToken and refreshToken from URL returned from Server Auth useEffect(() => { setaccessToken(hashparam.access_token); setrefreshToken(hashparam.refresh_token); }, []); // Get User data from Spotify endpoint once accessToken is set. useEffect(() => { async function fetchData() { if(accessToken != null) { setUser(await getUserData(accessToken)); } } fetchData(); }, [accessToken]);

Re: 401 Error in API Call.

Liz994 — Fri, 20 Oct 2023 18:42:06 GMT

You have helped me so much!!! I had a very similar problem, and reading this clarified the issue for me, Thank you!!