Help Wizard

Step 1


Error when trying to create access token

Error when trying to create access token

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("", {
      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("", {
      method: "GET", headers: { Authorization: `Bearer ${token}` }
    return await result.json();
  } else {
    return "No profile fetched"




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

2 Replies

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 it could help it is quite clear.

Hope this helps

@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.

Suggested posts