Error when trying to create access token
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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
Labels:
- Labels:
-
Question
Reply
Topic Options
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page