403 Error returned from Create Playlist

[jamestw18]

Plan

Premium

Country

UK

Device

MacBook Pro 2020

Operating System

BigSur 11

My Question or Issue

Hi Everyone,

I am creating an app that uses Spotify's API within a react app, where you sign in with your spotify account using OAuth, from which I receive my access token.

From there the user then searches for 20 songs based on a keyword or phrase, preferrably based on your mood eg happy. sad, etc. From there using the embedded iframe you can play any one of these songs.

Finally I want the user to then be able to create a playlist on their account using the songs that have been returned by the search, with the search term being the name of the playlist and a short string being the description. 

Below is some of the code I have however if you are able to provide any guidance, the link to my public repo for the project which is on Github. - https://github.com/JamesWordie/spotify-mood-playlist

Code from react/redux;

// action function within redux to create the playlist

export const createPlaylist = () => async (dispatch, getState) => {

const { spotifyToken } = getState().auth;

const { id } = getState().auth.userData;

const { search } = getState().search.searchTerm;

const description = "A playlist created by TuneSense";

const body = {

"name": `${search} songs`,

"description": description,

"public": true

};

try {

const response = await spotifyCreate.post(`${id}/playlists`, body, {

headers: {

"Authorization": "Bearer " + spotifyToken,

"Content-Type": "application/json"

}

});

console.log(response);

} catch (error) {

console.log(error);

}

}

// axios api base url where it is mentioned above in the async request

import axios from 'axios';

export default axios.create({

baseURL: "https://api.spotify.com/v1/users/"

});

// initial code for login/authorise with spotify from which I obtain the access token

logIn() {

const baseURL = "https://accounts.spotify.com/authorize";

const clientId = process.env.REACT_APP_CLIENT_ID;

const redirectURI = "http://localhost:3000";

const scopes = ["user-read-private", "playlist-modify-private", "user-read-email", "streaming", "user-read-currently-playing", "playlist-modify-public"].join("%20")

const params = "response_type=token&show_dialog=true";

const request = `${baseURL}?client_id=${clientId}&redirect_uri=${redirectURI}&scopes=${scopes}&${params}`;

window.open(request, "_self");

}

// error message returned from post request

Error: Request failed with status code 403
at createError (vendors~main.chunk.js:14162)
at settle (vendors~main.chunk.js:14396)
at XMLHttpRequest.handleLoad (vendors~main.chunk.js:13636)

// network response via chrome inspector 

1. Request URL:
   https://api.spotify.com/v1/users/jamestw18/playlists
2. Request Method:
   POST
3. Status Code:
   403
4. Remote Address:
   [2600:1901:1:c36::]:443
5. Referrer Policy:
   strict-origin-when-cross-origin
1. Response Headers
1. access-control-allow-credentials:
   true
2. access-control-allow-headers:
   Accept, App-Platform, Authorization, Content-Type, Origin, Retry-After, Spotify-App-Version, X-Cloud-Trace-Context, client-token, content-access-token
3. access-control-allow-methods:
   GET, POST, OPTIONS, PUT, DELETE, PATCH
4. access-control-allow-origin:
   *
5. access-control-max-age:
   604800
6. alt-svc:
   clear
7. cache-control:
   private, max-age=0
8. content-encoding:
   gzip
9. content-length:
   96
10. content-type:
    application/json; charset=utf-8
11. date:
    Wed, 11 Aug 2021 07:26:33 GMT
12. server:
    envoy
13. strict-transport-security:
    max-age=31536000
14. via:
    HTTP/2 edgeproxy, 1.1 google
15. x-content-type-options:
    nosniff
16. x-robots-tag:
    noindex, nofollow
2. Request Headers
1. :authority:
   api.spotify.com
2. :method:
   POST
3. :path:
   /v1/users/jamestw18/playlists
4. :scheme:
   https
5. accept:
   application/json, text/plain, */*
6. accept-encoding:
   gzip, deflate, br
7. accept-language:
   en-US,en;q=0.9
8. authorization:
   Bearer BQDufHyTztTH_tI4ETHdhwyXIKjt0ZPi7OYLxy600zCGVNDxnUKzjOAAUzVncsr1uCzdi8MVN3MWu_o5qglj2jUcSjPz-FMoZ-cbyJ6Epw0JCmLDARYr3cU78YYPqOA_GVIHrJtSOZlBqw
9. content-length:
   84
10. content-type:
    application/json
11. origin:
    http://localhost:3000
12. referer:
    http://localhost:3000/
13. sec-ch-ua:
    "Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92"
14. sec-ch-ua-mobile:
    ?0
15. sec-fetch-dest:
    empty
16. sec-fetch-mode:
    cors
17. sec-fetch-site:
    cross-site
18. user-agent:
    Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36
3. Request Payloadview source
1. {name: "happy songs", description: "A playlist created by TuneSense", public: true}
1. description: "A playlist created by TuneSense"
2. name: "happy songs"
3. public: true

Thank you to anyone who is able to help.

James

[fireswan]

Hey! were you able to solve this?