CODEWITHSUNDEEP
javascriptjavaapi
Aisyah
Aisyah

Reputation: 51

Spotify API: Error 401, "no token provided"

I'm trying to follow a tutorial on Youtube to get used to Spotify API, but I keep on getting the same error despite having checked the documents if I made a typo. I compared my code to the one that's being shared in the video and they look exactly them same, but I keep on getting this error:

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

For reference, my js is here

const app = {};
app.apiUrl = 'https://api.spotify.com/v1';

//Allow user to enter some names
app.events = function() {
    $('form').on('submit', function(e){
        e.preventDefault();
        let artists = $('input[type=search]').val();
        artists = artists.split(',');
        let search = artists.map(artistName => app.searchArtist(artistName));

        $.when(...search)
            .then((...results) => {
                console.log(results);
            });
    });
};

//Go to spotify to get the artist name
app.searchArtist = (artistName) => $.ajax({
    url: `${app.apiUrl}/search`,
    method:'GET',
    dataType: 'json',
    data: {
        q: artistName,
        type: 'artist'
    }
});

//Using the IDs, get the albums

//Get tracks

//Build playlist

app.init = function() {
    app.events();
};

$(app.init);

I am aware that the video was posted 4 years ago, but I have also checked the endpoint's documentation and there seems to be no change since 4 years ago.

Further reference, my HTML code:

<body>
    <main class="main-container">
        <section>
            <div class="form">
                <img src="images/note.svg" alt="">
                <form action="">
                    <input type="search" value="muse,ghost">
                    <input type="submit" value="Create">
                </form>
                <p>Icon created by unlimicon from the Noun Project</p>
            </div>
            <div class="playlist">
                <div class="loader">
                    <div class="inner-circle"></div>
                </div>
            </div>
        </section>
    </main>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="script.js"></script>
</body>

Upvotes: 1

Views: 20847

Answers (3)

Sumit Zamadar
Sumit Zamadar

Reputation: 328

Go to https://developer.spotify.com/console/get-search-item/ to generate a OAuth Token and use the same token in your API call as Authorization Bearer token.

enter image description here

Upvotes: 2

Mike Fallesen
Mike Fallesen

Reputation: 23

It looks like you are missing your API key or not passing it properly.

Upvotes: 1

Ganjar.GinginT
Ganjar.GinginT

Reputation: 11

Are you already define a spotify access token ?

https://developer.spotify.com/

app.searchArtist = (artistName) => $.ajax({
    url: `${app.apiUrl}/search`,
    method:'GET',
    dataType: 'json',
    data: {
        q: artistName,
        type: 'artist'
    },
    headers: {
      "Authorization": `Bearer ${yourToken}`
    }
});

Upvotes: 1

Related Questions