Error when trying to create access token

[gijutaku23]

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

[the-cellist]

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

[gijutaku23]

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