Getting authentication error when accessing Spotify Web API

Other Questions Spotify
1

I’m trying to fetch artist information from Spotify’s Web API but keep running into an authentication issue. The error message I’m getting is:

error:{status: 401, message: "No token provided"}

I know this is related to authentication but I can’t figure out how to properly set up the token. Here’s what I have so far:

import React, { Component } from 'react'
import SpotifyWebApi from 'spotify-web-api-node'

const SpotifyAPI = require('spotify-web-api-node');
const musicApi = new SpotifyAPI({
  clientId: 'my_client_id_here',
  clientSecret: 'my_client_secret_here'
});

class MusicSearch extends Component {
  componentDidMount() {
    fetch('https://api.spotify.com/v1/search?q=artist&type=artist&limit=10', musicApi)
      .then(response => response.json())
      .then(data => {
        console.log(data)
      })
  }
  
  render() {
    return (
      <div>
        <h1>Music Search</h1>
      </div>
    )
  }
}

What am I missing to make this work properly?

2

you’re mixing the library with raw fetch calls - that won’t work. get a token first, then pass it in the headers like Authorization: Bearer ${token}. or just use the spotify library methods after calling clientCredentialsGrant() to authenticate properly.

3

You’re mixing two different approaches - that’s what’s causing the confusion. The spotify-web-api-node library handles API calls for you, so don’t use fetch() directly with it. You need to authenticate first, then use the library’s methods. Get an access token using client credentials flow since you’re just searching public data. Add this before your component mounts: musicApi.clientCredentialsGrant().then(function(data) { musicApi.setAccessToken(data.body[‘access_token’]); }, function(err) { console.log(‘Something went wrong when retrieving an access token’, err); }); Then in componentDidMount, use the library’s search method instead of fetch: musicApi.searchArtists(‘artist’, {limit: 10}).then(function(data) { console.log(data.body); }); This fixes the token header issues because the library handles authentication internally once you set the access token.

4

You’re missing the authorization header in your fetch request. Spotify’s API needs a Bearer token for auth. First, get an access token using client credentials flow by sending a POST request to https://accounts.spotify.com/api/token with your client credentials (base64 encoded). Then, include it in your headers like this: headers: { 'Authorization': 'Bearer ' + your_access_token }. Additionally, you’ve imported the spotify-web-api-node library but aren’t utilizing it in your fetch call. Choose one method—either stick with the library’s methods or use fetch, but ensure you authenticate first and include the token in each request.

5

Had this exact problem when I started with Spotify’s API. You’re creating the spotify-web-api-node instance but not actually using it - just passing it to fetch as a second parameter, which does nothing. Fetch needs proper headers with the Bearer token. What fixed it for me: ditch the mixed approach and use the library properly. Set up your SpotifyAPI instance, call clientCredentialsGrant() to authenticate, then use the built-in methods like searchArtists(). The library handles all the header formatting and token stuff automatically once you’re authenticated. Way cleaner than building fetch requests with auth headers manually.

6

Your fetch call is missing the auth headers Spotify needs. I ran into this same issue - you’ve got to get an access token first using the client credentials flow before hitting their API. Right now you’re creating the SpotifyAPI instance but never actually authenticating it or using that token in your fetch. Since you’re just searching public data, grab a token with the client credentials grant, then add ‘Authorization’: ‘Bearer YOUR_TOKEN’ to your fetch headers. Or just use the spotify-web-api-node library for everything - authenticate once with clientCredentialsGrant(), then use searchArtists() which handles all the auth stuff for you.