Type in your question below and we'll check to see what answers we can find...
Loading article...
Submitting...
If you couldn't find any answers in the previous step then we need to post your question in the community and wait for someone to respond. You'll be notified when that happens.
Simply add some detail to your question and refine the title if needed, choose the relevant category, then post.
Before we can post your question we need you to quickly make an account (or sign in if you already have one).
Don't worry - it's quick and painless! Just click below, and once you're logged in we'll bring you right back here and post your question. We'll remember what you've already typed in so you won't have to do it again.
Please see below the most popular frequently asked questions.
Loading article...
Loading faqs...
Please see below the current ongoing issues which are under investigation.
Loading issue...
Loading ongoing issues...
From what I am reading it is a bad OAuth request, but I cannot identify what I am doing wrong. TIA!
import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";
function App() {
const CLIENT_ID = "501594440ad341babe6b49b9db06b908";
const REDIRECT_URI = "http://localhost:3002";
const AUTH_ENDPOINT = "https://accounts.spotify.com/authorize";
const RESPONSE_TYPE = "token";
const [token, setToken] = useState("");
const [data, setData] = useState([]);
// on login
useEffect(() => {
const hash = window.location.hash;
let token = window.localStorage.getItem("token");
if (!token && hash) {
token = hash
.substring(1)
.split("&")
.find((elem) => elem.startsWith("access_token"))
.split("=")[1];
window.location.hash = "";
window.localStorage.setItem("token", token);
}
setToken(token);
// getTopArtists();
}, []);
const getTopArtists = async () => {
console.log(token);
const { data } = await axios.get(
"https://api.spotify.com/v1/me/top/artists",
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
console.log(token);
console.log(data);
// setData(data);
};
return (
<div className="App">
<header className="App-header">
<h1>Spotify React</h1>
{!token && (
<a
href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}
>
Login to Spotify
</a>
)}
<button onClick={getTopArtists}>Get Top Artists</button>
</header>
</div>
);
}
export default App;
Solved! Go to Solution.
I was not setting the correct scope as referenced here:
https://community.spotify.com/t5/Spotify-for-Developers/Receiving-a-Only-valid-bearer-authentication...
Marking as done, cheers Ximzend.
A 403 status indicates that the server is refusing to fulfill the request. In this case, it could be because the OAuth request is missing or has invalid parameters.
One possible cause of this error is that the token variable is not being set correctly. In the code you provided, token is set to the value of the access_token query parameter in the URL hash, but this value is not being passed to the getTopArtists function.
To fix this, you can pass the token variable to the getTopArtists function as a parameter:
const getTopArtists = async (token) => {
const { data } = await axios.get(
"https://api.spotify.com/v1/me/top/artists",
{
headers: {
Authorization: `Bearer ${token}`,
},
}
);
console.log(token);
console.log(data);
// setData(data);
};
Then, when calling the getTopArtists function, you can pass the token variable as an argument:
<button onClick={() => getTopArtists(token)}>Get Top Artists</button>
This should ensure that the correct token value is passed to the getTopArtists function and included in the request to the Spotify API.
I tried your solution but am still experiencing a 403. I am setting the token in state and am not sure of the merit of putting that state value in the function as a parameter and argument. I am able to get a successful request when using the search endpoint which I have shared below.
import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";
function App() {
const CLIENT_ID = "501594440ad341babe6b49b9db06b908";
const REDIRECT_URI = "http://localhost:3002";
const AUTH_ENDPOINT = "https://accounts.spotify.com/authorize";
const RESPONSE_TYPE = "token";
const [token, setToken] = useState("");
const [data, setData] = useState([]);
// on login
useEffect(() => {
const hash = window.location.hash;
let token = window.localStorage.getItem("token");
if (!token && hash) {
token = hash
.substring(1)
.split("&")
.find((elem) => elem.startsWith("access_token"))
.split("=")[1];
window.location.hash = "";
window.localStorage.setItem("token", token);
}
setToken(token);
// getTopArtists();
}, []);
const getTopArtists = async () => {
const { data } = await axios.get("https://api.spotify.com/v1/search", {
headers: {
Authorization: `Bearer ${token}`,
},
params: {
q: "Childish Gambino",
type: "artist",
},
});
console.log(data);
};
return (
<div className="App">
<header className="App-header">
<h1>Spotify React</h1>
{!token && (
<a
href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}
>
Login to Spotify
</a>
)}
<button onClick={getTopArtists}>Get Top Artists</button>
</header>
</div>
);
}
export default App;
Receiving a 401 now with the original endpoint, added params for testing 😞
import { useEffect, useState } from "react";
import "./App.css";
import axios from "axios";
function App() {
const CLIENT_ID = "501594440ad341babe6b49b9db06b908";
const REDIRECT_URI = "http://localhost:3002";
const AUTH_ENDPOINT = "https://accounts.spotify.com/authorize";
const RESPONSE_TYPE = "token";
const [token, setToken] = useState("");
const [data, setData] = useState([]);
// on login
useEffect(() => {
const hash = window.location.hash;
let token = window.localStorage.getItem("token");
if (!token && hash) {
token = hash
.substring(1)
.split("&")
.find((elem) => elem.startsWith("access_token"))
.split("=")[1];
window.location.hash = "";
window.localStorage.setItem("token", token);
}
setToken(token);
getTopArtists();
}, []);
const getTopArtists = async () => {
const { data } = await axios.get("https://api.spotify.com/v1/me/top/type", {
headers: {
Authorization: `Bearer ${token}`,
"Content-Type": "application/json",
},
params: {
type: "artist",
limit: 20,
offset: 5,
time_range: "medium_term",
},
});
console.log(data);
};
return (
<div className="App">
<header className="App-header">
<h1>Spotify React</h1>
{!token && (
<a
href={`${AUTH_ENDPOINT}?client_id=${CLIENT_ID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}`}
>
Login to Spotify
</a>
)}
<button>Get Top Artists</button>
</header>
</div>
);
}
export default App;
After looking again, I see you are missing a step to get an Access Token. You can read how to get one here: https://developer.spotify.com/documentation/general/guides/authorization/code-flow/
I was not setting the correct scope as referenced here:
https://community.spotify.com/t5/Spotify-for-Developers/Receiving-a-Only-valid-bearer-authentication...
Marking as done, cheers Ximzend.
Hey there you, Yeah, you! 😁 Welcome - we're glad you joined the Spotify Community! While you here, let's have a fun game…