How to Authenticate and use Spotify Web API

I needed to learn how to use the Spotify API in order to use it in one of my Maker At Play projects. Check out that project here: • My Project for Creativ...
Link to the Sample App: makeratplay.github.io/Spotify...
Source Code on GitHub: github.com/makeratplay/Spotif...
And here is the video where I put this code on esp32 microcontroller.
How to use Spotify API on ESP32 with NFC Reader to control Echo Dot
• How to use Spotify API...
Other Videos:
• How to Build a Retro C...
• Magical Alexa-Spotify-...
• How to Authenticate an...
00:00 intro
01:33 Register your app with Spotify
02:57 Spotify Docs
03:57 oAuth
14:37 API call to fetch device list
18:11 Refesh access token
19:33 more API examples
Want to support my projects and Diet Dr Pepper addiction?
/ makeratplay
buymeacoffee.com/makeratplay
MakerAtPlay.com/supportme
You can get $500 off a Glowforge pro: glowforge.us/r/HEHIHWLU
KZbin Channels:
Maker: / makeratplay
Coding: / @makeratplaycoding2666
Woodworking: / @makeratplaywoodworking
Follow MakerAtPlay:
/ makeratplay
MakerAtPlay.com/links/
Tools used to make my videos:
Video Editor Software: Davinci Resolve (blackmagicdesign.com)
Canon EOS M50 Mirrorless Camera (amzn.to/2Zmaz5U)
Movo WMX-1 2.4GHz Wireless Lavalier Microphone: (amzn.to/38AXlqM)
Rode Videomic Shotgun microphone with Rycote Lyre Suspension (amzn.to/2DFKRlh)
K&F Concept 62'' DSLR Tripod: (amzn.to/3eAXaj6)
GorillaPod Compact Tripod (amzn.to/339KpVl)
If you appreciate this content and would like to help give back FREE OF CHARGE, simply give this video a “thumbs up”, leave a positive comment, subscribe to my KZbin channel and share this video with someone who you think would enjoy it. Some of the links that I’ve provided are affiliate links. That means that when you make purchases through those links, I earn a small commission. I only list products or services that I believe in.
#coding #maker #spotify #alexa #oAuth

[@basmong]

Man, you're the only one who helped. There is no such authorization guide anywhere. This is a whole quest! The API guide on the Spotify website sucks. They really don't explain well how to make requests.

[@makeratplaycoding2666]

Thanks for the feedback.

[@joenagy8101]

Thank you SO much for this video! I'm doing a project for school and this is the first video I found that thoroughly explains everything that needs to happen and why to use the Spotify API. Couldn't have done it without your help!

[@makeratplaycoding2666]

Glad it was helpful.

[@vishalnarsinh1742]

Bro with which technology you made your project

[@gabrielahaas3043]

I've watched a bunch of tutorials on how to call the Spotify API and this is the best tutorial I've seen so far! I've been looking for a tutorial that doesn't make use of any external libraries and whatnot. Thank you!

[@makeratplaycoding2666]

Glad to be helpful.

[@asdfx26]

Thanks for the video, exactly was i was looking for, straight to the point and with readable code too! great job!

[@makeratplaycoding2666]

You are welcome. Glad it was helpful.

[@tylervandermate6818]

This is the best example of the OAuth 2 flow I can find! Thank you!

[@makeratplaycoding2666]

Glad it was helpful

[@iceunicorn3707]

I used your tutorial for my project. dude. you saved me sooooooooo much headache! i struggle always with web requests! your tutorial helped me A TON!

[@makeratplaycoding2666]

Glad it was helpful.

[@katherinerose7067]

Great tutorial! Helped with understanding some key concepts related to working with Spotify's API.

[@makeratplaycoding2666]

Glad it helped!

[@Lofausto66]

Best video on yt regarding Spotify API. Thanks man, really appreciated!

[@makeratplaycoding2666]

You're welcome and thanks for the kind words.

[@brockobama257]

I like you would pop the code up on the screen then explain it. Very efficient. Very clean.

[@makeratplaycoding2666]

Thanks for the feedback.

[@brockobama257]

@@makeratplaycoding2666 Thanks for not pointing out my grammar mistakes!

[@kieronb4459]

28 seconds in and I had to pause the video to praise you for such a cool project idea!

[@makeratplaycoding2666]

Thanks for the kind words.

[@erinkristine9110]

I love the project you're doing and appreciate the api help!

[@makeratplaycoding2666]

Thanks and you're welcome.

[@AungusMacgyver]

Thanks for the great tutorial! You did a good job of walking through the process.

[@makeratplaycoding2666]

You are welcome. Thanks for watching and subscribing to my channel. I just posted my full build video where I used the Spotify API my my Maker At Play channel. kzbin.info/www/bejne/fpCceWune9N3qJo

[@mikeonthebox]

Thanks for this video, helps a lot clarifying how this authorization workflows work. Specially with Spotify that has different methods.

[@makeratplaycoding2666]

Glad to be helpful.

[@cobebailey5907]

so so so so useful for helping me understand the authorization flow tysm

[@makeratplaycoding2666]

Glad it was helpful

[@nietzsche2363]

Hey sir, love the way you present things, have a good day !

[@makeratplaycoding2666]

Thanks for the feedback.

[@shadowstack]

Great video, I was struggling understanding the auth code process but got it working now!

[@makeratplaycoding2666]

Glad to be helpful.

[@tess8557]

Just wanted to say thank you! OAuth was a very imposing beast but you made tackling it easy! Proud to now have a "What I am currently listening to" tab on my homepage (though I think I may be the only one who cares ha).

[@makeratplaycoding2666]

Thanks for the feedback.

[@minoset6037]

Great job, simple and functional. Thanks a lot

[@makeratplaycoding2666]

You're welcome!

[@user-fs4vf1yp1c]

The best tutorial! Thank you!

[@makeratplaycoding2666]

You are welcome.

[@relistenclub5759]

Thank you very much for the video. It really explains the topic

[@makeratplaycoding2666]

Glad it was helpful!

[@Duhardoalvesworld]

Awesome video, very helpful

[@makeratplaycoding2666]

Glad to hear it!

[@harsha813]

Whoa this is amazing!

[@makeratplaycoding2666]

Thanks

[@FabioSpelta]

That idea is cool dude

[@makeratplaycoding2666]

Thanks

[@stancillousraymond]

This is great. Thanks man🙂

[@makeratplaycoding2666]

Glad you liked it!

[@maxklevebrand2640]

Very good tutorial!

[@makeratplaycoding2666]

Thanks

[@cagrkarakaya1110]

Really i am so appreciated u. Thank u its really beneficial for me.

[@makeratplaycoding2666]

Glad to be helpful.

[@emv9695]

Awesome content! thank you so much

[@makeratplaycoding2666]

My pleasure!

[@CandiceCatnipp]

thank u helped me a lotNice tutorial.... Very helpful

[@makeratplaycoding2666]

Glad to be helpful.

[@pieromerinocarpio1523]

Muchas gracias, un gran aporte justo lo que buscada, muy bien explicado el recorrido

[@makeratplaycoding2666]

Glad you found it helpful.

[@cormacgarvey3566]

Excellent video Thank you!

[@makeratplaycoding2666]

Thanks for the feedback.

[@pequlatv4814]

I was looking to get my JDA Discord bot work with spotify But i found this very very cooler projects

[@makeratplaycoding2666]

Thanks

[@sametkarakurt1616]

You helped a lot thanks

[@makeratplaycoding2666]

Glad to help.

[@AllKindzzzz]

God tier instructional

[@makeratplaycoding2666]

Thanks

[@AmbreMusk5598]

thank you so much , it worked :)

[@makeratplaycoding2666]

You are welcome

[@chicabomb5933]

Amazing video! but one thing to remember is all of that is happening client sided so if you for example want to deploy an app you would need and api layer to hide the client secret and other stuff

[@makeratplaycoding2666]

That is correct. Be smart and protect your secret keys.

[@djsnipa1]

Nice! Thank you!

[@makeratplaycoding2666]

You are welcome.

[@poornakabandara8087]

Absolute legend 👍👍

[@makeratplaycoding2666]

Thanks for the kind words.

[@TheDivoture]

Tutorial aside, that Reader Box is really fking awesome

[@makeratplaycoding2666]

Thanks for the kind words.

[@vanyas-g3178]

Unique video really liked the git repo I'm making a fm web app only to find the "currently playing" super useful for it! I have one question, at @20:33 does the response array contain track information such as - duration of song, thumbnail with album art and so on ? Thanks again

[@vanyas-g3178]

I think adding a resume button next to pause --- in app.js add --- function resume(){callApi( "PUT", PLAY + "?device_id=" + deviceId(), null, handleApiResponse );} this would also improve the app :)

[@makeratplaycoding2666]

Here is sample json for a track. { "added_at" : "2013-01-09T01:06:06Z", "is_local" : false, "primary_color" : null, "track" : { "album" : { "album_type" : "single", "artists" : [ { "external_urls" : { "spotify" : "open.spotify.com/artist/085pc2PYOi8bGKj0PNjekA" }, "href" : "api.spotify.com/v1/artists/085pc2PYOi8bGKj0PNjekA", "id" : "085pc2PYOi8bGKj0PNjekA", "name" : "will.i.am", "type" : "artist", "uri" : "spotify:artist:085pc2PYOi8bGKj0PNjekA" } ], "external_urls" : { "spotify" : "open.spotify.com/album/0Ok0IMC5NSUcPRsepUovzG" }, "href" : "api.spotify.com/v1/albums/0Ok0IMC5NSUcPRsepUovzG", "id" : "0Ok0IMC5NSUcPRsepUovzG", "images" : [ { "height" : 640, "url" : "i.scdn.co/image/ab67616d0000b2736b75f77eaefa014786c9ff6a", "width" : 640 }, { "height" : 300, "url" : "i.scdn.co/image/ab67616d00001e026b75f77eaefa014786c9ff6a", "width" : 300 }, { "height" : 64, "url" : "i.scdn.co/image/ab67616d000048516b75f77eaefa014786c9ff6a", "width" : 64 } ], "name" : "Scream & Shout", "release_date" : "2012-01-01", "release_date_precision" : "day", "total_tracks" : 1, "type" : "album", "uri" : "spotify:album:0Ok0IMC5NSUcPRsepUovzG" }, "artists" : [ { "external_urls" : { "spotify" : "open.spotify.com/artist/085pc2PYOi8bGKj0PNjekA" }, "href" : "api.spotify.com/v1/artists/085pc2PYOi8bGKj0PNjekA", "id" : "085pc2PYOi8bGKj0PNjekA", "name" : "will.i.am", "type" : "artist", "uri" : "spotify:artist:085pc2PYOi8bGKj0PNjekA" }, { "external_urls" : { "spotify" : "open.spotify.com/artist/26dSoYclwsYLMAKD3tpOr4" }, "href" : "api.spotify.com/v1/artists/26dSoYclwsYLMAKD3tpOr4", "id" : "26dSoYclwsYLMAKD3tpOr4", "name" : "Britney Spears", "type" : "artist", "uri" : "spotify:artist:26dSoYclwsYLMAKD3tpOr4" } ], "disc_number" : 1, "duration_ms" : 284413, "episode" : false, "explicit" : true, "external_ids" : { "isrc" : "USUM71215597" }, "external_urls" : { "spotify" : "open.spotify.com/track/054ue8u2erwwGNgSIZLEPq" }, "href" : "api.spotify.com/v1/tracks/054ue8u2erwwGNgSIZLEPq", "id" : "054ue8u2erwwGNgSIZLEPq", "is_local" : false, "name" : "Scream & Shout", "popularity" : 48, "preview_url" : "p.scdn.co/mp3-preview/2d18e80bbe5491c20a7ad471da6b5b8df23b6868?cid=5abf9ba15a6548d4bc2a500538bd900d", "track" : true, "track_number" : 1, "type" : "track", "uri" : "spotify:track:054ue8u2erwwGNgSIZLEPq" }, "video_thumbnail" : { "url" : null } }

[@adamcohen381]

THANK YOU SO MUCH HOLY CRAP

[@makeratplaycoding2666]

You're welcome.

[@chucklo7618]

Thanks a lot !

[@makeratplaycoding2666]

You are welcome!

[@Himavatmedia]

Great videos, love the channel! I do have a question regarding the subject at 4:43. Would I just put in my IP address for my home network? You mentioned visual studio code with the live server plugin? What is that? I do not have that, is there a workaround to make this project still work for me?

[@makeratplaycoding2666]

Thanks. The web address that you put into the redirect url has to be for your web page/app and must be accessible from your web browser. Unless you have setup a web server on your home network IP address, it would not work and I would not use that IP. Here is a link to live server marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer . It acts as a web server inside of Visual Studio Code. You could use another web server software if you like, doesn't have to live server.

[@Himavatmedia]

@@makeratplaycoding2666 Ok so keep in mind I have very little coding experience but I saw this video through the Mark Rober stuff and I love this project so I'm hell bent on making it work. I have now downloaded visual studio code, installed the live server extension and have it working smoothly with the code. It worked the first time but now when I enter my client ID and client secret, I keep getting an invalid client error now that I've logged out and logged back into Spotify. You had this same issue at 13:15 but I didn't really follow how I would change anything on my end. What would I have to do to make sure the request is persistent?

[@makeratplaycoding2666]

@@Himavatmedia The issue I had in the video was that I didn't send the client/secret id in the API call because the variables that held my client/secret ids were cleared when the web page refreshed.

[@ofirlevy3682]

when the levees is break ^_^ and thanks for the guide very helpful!!

[@makeratplaycoding2666]

You are welcome. Glad it was helpful.

[@anthonycortese6855]

Great video. I am able to get oauth to work with my Spotify account for a simple playlist creator script, but when I add authorized users, I am unable to run the script without an error. Is there something else I need to add for multiple users?

[@jannaklicki7800]

Saved the day

[@makeratplaycoding2666]

Glad it helped!

[@bermagot9238]

excellent excellent excellent

[@makeratplaycoding2666]

Thanks

[@trishgoeswesty8603]

I had a question: Is it required to provide scope if all you want to do is access artists and their albums and not spotify users' information with your app?

[@makeratplaycoding2666]

I would think you would still need some kind of scope since you are getting an auth token from the user. If want you want is not unique to the user, then maybe there are public APIs you can call to get it without an auto token.

[@A2plePie]

Is it possible to play multiple songs simultaneously? I have an idea of creating an app that play 2 or 3 mixed song (play them all at the same time) and let the user figure out each song's name. BTW, very detailed explanation, great vdo.

[@makeratplaycoding2666]

Thanks for the feedback. I have not seen a way to play multiple songs at once with Spotify.

[@vanyas-g3178]

This is possible with embeded playlists/tracks but only plays the track for 30 seconds. Within an embed it contains 'allow="encrypted-media"' if you remove it altogether it will allow multiple frames to play. Downside = full songs wont play :/

[@maishadisha5287]

can you help me please? I don't know what is jwt expire which my spotify web is showing on opera gx

[@jenso413]

I basically copied your code exactly, yet whenever I try to make an api call with my token, I get a 404 error. Do you know why that could happen?

[@abhinavanroy]

Hi Sir, i have been trying this with my angular app but i am facing CORS error when i am trying to hit the /authorize api endpoint

[@ishitadubey6334]

Hey. How did you define the devices list(17:16) and playlist (20:16) in Preview section?

[@makeratplaycoding2666]

The device list and playlist are returned from the Spotify API. The devices returned are my personally devices that I have linked to my Spotify account. The playlists returned are my playlists that I have created over time in the Spotify application.

[@bellan964]

Is there a way to play directly in the browser? I try to play to webplayer in another tab and it recognizes the device, playlist, tracks but wont interact with the playing buttons. I guess I don’t need the devices option but just the player in the current page. How can I go about this?

[@makeratplaycoding2666]

I have not tried that so not sure what to tell you.

[@mnordictz5752]

Thanks

[@makeratplaycoding2666]

You are welcome.

[@DarkHighTv]

Thanks! I have a questiom, its possible to create a pre-save function?

[@makeratplaycoding2666]

You can. Just a matter of what kind of user interface you want to create to trigger playing your pre-saves/favorites. For example you can see how I did it using NFC tags in this video. kzbin.info/www/bejne/fpCceWune9N3qJo The tags act as pre-saves for albums and playlists.

[@ReinAbrera]

Hi, I need to make a spotify web player for a website which plays a playlist for random users who enters the site, is this the right approach? Note that the users won't need any login to spotify. I already tried using the , but the problem is I cannot access the "play" button, the web player requires shuffle, play, next, previous, and it has specific styling. Meanwhile, another api is only for podcast, so can't really insert track or playlist here. :/

[@makeratplaycoding2666]

Using the Spotify API the way I did requires an authenticated users, so I don't think it would work for random users the visit your website.

[@ReinAbrera]

@@makeratplaycoding2666 Thanks for your reply, saves my time and effort.

[@rafaelverdant3679]

can you make a video demonstrating just the refresh_token in python?

[@ldpriice]

A fellow Led Zep fan, perfect.

[@makeratplaycoding2666]

😊

[@bryantomoregie6903]

Can you please explain how you knew how to make the requestAuthorization string? I dont see it anywhere in the docs.

[@makeratplaycoding2666]

The "Request User Authorization" section on page developer.spotify.com/documentation/general/guides/authorization/code-flow/ explains the details of the query parameters that can be passed to the GET request to /authorize end point. Note that this is not unique to Spotify, but is part of the OAuth 2.0 standard flow that many API sites use.

[@the_rainstation]

Is this the Authorization code with PKCE flow or just the normal Authorization code flow?

[@makeratplaycoding2666]

This is just the normal flow. It doesn't include PKCE.

[@raigeki.]

What if I want to automatically get the access token? How can I go about this without having to authenticate every time?

[@RWC-Ichigo]

how do I find an uri ?

[@hazyhayden2798]

how would you go about hiding your client secret from users?

[@TheLmfao221]

hey awesome vid and tutorial! little question not sure if you will have an answer but the only device being detected is my desktop. my phone, google homes, chromecasts are not... anyone know a fix for this?

[@makeratplaycoding2666]

Thanks. Some times, I have had to tell my smart speaker to play Spotify, but it would show up as a device.

[@ameeryarbrough8137]

what does line 8 indicate in the index.html? Is it needed?

[@makeratplaycoding2666]

You mean this line? This just includes the bootstrap (getbootstrap.com/) css for styling the webpage.

[@Thomass7878]

If you have an account already do you have to make a new account? Because I can not find my ID.

[@makeratplaycoding2666]

You shouldn't have to create a new account.

[@forest2208]

I am trying this whole thing in flutter web but as i get redirected after the login, there is no code in the url... just the redirect uri

[@makeratplaycoding2666]

I have not worked with flutter, so not sure how to trouble shoot this.

[@yanel0h]

3 times did not start, but then it worked

[@makeratplaycoding2666]

4th time is the charm?

[@nafisanwar640]

I am making spotify-clone and after Iclick on login with spotify its showing me illegal scope what should I do how can i fix the problem

[@makeratplaycoding2666]

Sorry, I can't really help with just that info. I would just double check that you are passing everything (query params, body, and header values) correctly.

[@JC-fd8ho]

do i need node js to be able to work with the spotfy Api ?

[@makeratplaycoding2666]

No. You can use the Spotify API in any programming language and platform that can make web calls.

[@JC-fd8ho]

@@makeratplaycoding2666 can I use it with vanilla js using the fetch method

[@makeratplaycoding2666]

The sample code I wrote for this video is vanilla js. You can find the GitHub link to the code in the video description.

[@JC-fd8ho]

@@makeratplaycoding2666 why didn't u use the fetch method instead of xhr to make the Request

[@amanjain1074]

Hey I am doing as same as you but getting error while accepting and hitting Spotify page. Please help me

[@makeratplaycoding2666]

Can you provide any more detail about your error? Would like to help but this isn't enough detail to help you.

[@amanjain1074]

Thanks for response... actually I was not providing complete uri that's why the issue was there. But I am doing in angular where router link doesn't contain .html path so how can I use it

[@mys8091]

My comment wont be original but thank you anyways. SOOOO healpful.

[@makeratplaycoding2666]

You're welcome!

[@ManoTomasito2000]

{"error":"invalid_grant","error_description":"Invalid authorization code"} ... I have this error, what can i do?

[@makeratplaycoding2666]

Sorry, I can't really help with just that info. I would just double check that you are passing everything (query params, body, and header values) correctly.

[@thecurious926]

where is the encodeURI function in your app.js?

[@makeratplaycoding2666]

encodeURI is part of JavaScript frame work and not a custom method in my code.

[@AnonymousAccount514]

why do we need that callback url....the url they give us appears to function just fine by itself

[@makeratplaycoding2666]

You don't have to use the callback url I created in the video. It is just an example. You can put in what every callback url works for you.

[@AnonymousAccount514]

@@makeratplaycoding2666 no...my question is why do we need a callback url at all?

[@makeratplaycoding2666]

Spotify will redirect the browser to that url after the user authenticates with a query param the contains the code you need to fetch an access token. This is standard oAuth workflow. I cover this at 8:39 in the video.

[@ronnynestares3831]

for Client Credentials Flow ?

[@makeratplaycoding2666]

I have not used Spotify's client credential flow, but it looks simpler than the OAuth flow. developer.spotify.com/documentation/general/guides/authorization/client-credentials/

[@GoldsHouseMusic]

Is there any way to search Spotify by song credits? Each song has their credits as a public info, but I don't understand why Spotify doesen't let us search by "produced by"? Can that be done somehow? Thanks :)

[@makeratplaycoding2666]

I have not seen a way to do that.

[@chrisa368]

how do you find your redirect url? i don't know how to find the port (:5500)

[@makeratplaycoding2666]

Not sure I understand the question. There is no preset redirect url. You create your own url.

[@warplotus]

nope.. if I have to jump through hoops like that, I'm not interested. not everyone is tech savvy and I was lost within the first 5 secs

[@makeratplaycoding2666]

Yep, it takes a little programming skill to use the Spotify API. Maybe try something like zapier.com or ifttt.com to use Spotify API without writing code.

[@brockobama257]

Awesome video! I had one issue regarding the refresh token. I got a 401 response from the XMLHttpRequest object before the callback, which means the 401 wasn't handled by the callback. I added this code to the callApi function which resolved the issue: let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 401) refreshAccessToken(); else if (xhr.status !== 200) alert(xhr.responseText); } } xhr.open(method, url, true); xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Authorization', 'Bearer ' + authorization.access_token); xhr.send(body); xhr.onload = callback;

[@makeratplaycoding2666]

Thanks for sharing