topic Error when trying to create access token in Spotify for Developers

Error when trying to create access token

gijutaku23 — Thu, 16 Nov 2023 21:46:09 GMT

Plan: Free

Country: United States

Operating System: Windows 10

My Question or Issue

For my music app, I'm trying to create an access token and use it to fetch my online profile using the Spotify API but I keep getting an error message saying 'Failed to load resource: the server responded with a status of 400 ()'. I get this error when trying to create the access token. Could anyone tell me what could be going on?

Here's a TypeScript code snippet that shows what I'm trying to do:

export async function getAccessToken(clientId: string, code: string): Promise<string | void> { const verifier = localStorage.getItem("verifier"); const params = new URLSearchParams(); params.append("client_id", clientId); params.append("grant_type", "authorization_code"); params.append("code", code); params.append("redirect_uri", "http://localhost:5173/profile"); params.append("code_verifier", verifier!); try { const result = await fetch("https://accounts.spotify.com/api/token", { method: "POST", headers: { "Content-Type": "application/x-www-form-urlencoded" }, body: params }); const { access_token } = await result.json(); return access_token; } catch (error) { console.log("No access token created: " + error) throw error } } export async function fetchProfile(token: string | void): Promise<UserProfileObject | string> { if (token) { const result = await fetch("https://api.spotify.com/v1/me", { method: "GET", headers: { Authorization: `Bearer ${token}` } }); return await result.json(); } else { return "No profile fetched" } }

Also, here's a link to my app project:

https://drive.google.com/drive/folders/1z11P4kmI_D3dhWijQGTCl2oV9B7B9XpD?usp=drive_link

Re: Error when trying to create access token

the-cellist — Sat, 18 Nov 2023 22:09:16 GMT

Hello @gijutaku23,

the issue you are experiencing is maybe linked to the authorized redirect URIs you added for your app (you can change that in your app's settings > Redirect URIs). Maybe make sure you added the correct one.

I am assuming you are trying to use authentification by authorization code with PCKE, but I am not quite sure you are providing all the required parameters (I feel there should be a code_challenge parameter somewhere), maybe consider reading or re-reading this page https://developer.spotify.com/documentation/web-api/tutorials/code-pkce-flow it could help it is quite clear.

Hope this helps

Re: Error when trying to create access token

gijutaku23 — Mon, 20 Nov 2023 18:07:04 GMT

@the-cellist Thank you for responding.

I have the same redirect URI added across all of my project files and within my app's settings, and yes I am using the PCKE method for authentication. I have provided the link to my project folder in the original post. All of the functions, specifically the ones used for authentication, are in the `utilities.ts` file.