403 Error returned from Create Playlist

jamestw18 — Wed, 11 Aug 2021 07:28:14 GMT

Plan

Premium

Country

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

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

Request URL:
https://api.spotify.com/v1/users/jamestw18/playlists
Request Method:
POST
Status Code:
403
Remote Address:
[2600:1901:1:c36::]:443
Referrer Policy:
strict-origin-when-cross-origin

Response Headers

access-control-allow-credentials:
true
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
access-control-allow-methods:
GET, POST, OPTIONS, PUT, DELETE, PATCH
access-control-allow-origin:
*
access-control-max-age:
604800
alt-svc:
clear
cache-control:
private, max-age=0
content-encoding:
gzip
content-length:
96
content-type:
application/json; charset=utf-8
date:
Wed, 11 Aug 2021 07:26:33 GMT
server:
envoy
strict-transport-security:
max-age=31536000
via:
HTTP/2 edgeproxy, 1.1 google
x-content-type-options:
nosniff
x-robots-tag:
noindex, nofollow

Request Headers

:authority:
api.spotify.com
:method:
POST
:path:
/v1/users/jamestw18/playlists
:scheme:
https
accept:
application/json, text/plain, */*
accept-encoding:
gzip, deflate, br
accept-language:
en-US,en;q=0.9
authorization:
Bearer BQDufHyTztTH_tI4ETHdhwyXIKjt0ZPi7OYLxy600zCGVNDxnUKzjOAAUzVncsr1uCzdi8MVN3MWu_o5qglj2jUcSjPz-FMoZ-cbyJ6Epw0JCmLDARYr3cU78YYPqOA_GVIHrJtSOZlBqw
content-length:
84
content-type:
application/json
origin:
http://localhost:3000
referer:
http://localhost:3000/
sec-ch-ua:
"Chromium";v="92", " Not A;Brand";v="99", "Google Chrome";v="92"
sec-ch-ua-mobile:
?0
sec-fetch-dest:
empty
sec-fetch-mode:
cors
sec-fetch-site:
cross-site
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

Request Payloadview source

{name: "happy songs", description: "A playlist created by TuneSense", public: true}

description: "A playlist created by TuneSense"
name: "happy songs"
public: true

Thank you to anyone who is able to help.

James

Re: 403 Error returned from Create Playlist

fireswan — Fri, 23 Jun 2023 00:55:22 GMT

Hey! were you able to solve this?

topic Re: 403 Error returned from Create Playlist in Spotify for Developers

403 Error returned from Create Playlist

Re: 403 Error returned from Create Playlist