How To Use The Spotify API In Your React JS App

In this video you will learn how to use the Spotify API in your React JS Application to authenticate with your Spotify Account and to fetch data from the Spotify API.
Enjoy this video and if like what you see please hit the Like and the Subscribe button.
I am happy for every feedback I get, so i can improve my content.
If you have any suggestions feel free to drop a comment.
0:00 - Intro
0:05 - Create Spotify App
1:15 - Create React App
1:46 - Authenticate with Spotify
11:36 - Fetch Data from Spotify
15:50 - Fix local storage issue
18:11 - Render Data in Frontend
_____________________________________________________________
Ressources
GitHub Files: github.com/dom-the-dev/spotif...
Spotify Developer Dashboard: developer.spotify.com/
_____________________________________________________________
Follow me on Twitter: / dom_thedev
Subscribe at my Channel: / @domthedeveloper
______________________________________________________________
Support:
Buy me a coffee: ko-fi.com/domthedev
PayPal: paypal.me/domiderdude

[@michaelchan6144]

Thanks for the great video. Is there an easier way to get the access token from hash? Does Spotify really expect us to feed the hash into such a function just to get the access token.

[@Domthedeveloper]

Hi Michael, thank you, glad you liked the video. And I am glad you asked, since I am using now a different approach. You can use URLSearchParams like that: let urlParams = new URLSearchParams(window.location.hash.replace("#","?")); let token = urlParams.get('access_token'); I hope this is a bit clearer and easier to use.

[@michaelchan6144]

@@Domthedeveloper Will try this tmr. THANK YOU SO MUCH!!

[@Domthedeveloper]

@@michaelchan6144 You are welcome!

[@jefmitchell7868]

@@Domthedeveloper Can you give the example of doing this? Typescript is screaming about if (!token && hash) { token = hash.substring(1).split("&").find(elem => elem.startsWith("access_token")).split("=")[1] window.location.hash = "" window.localStorage.setItem("token", token) } being undefined. I try const getToken = () => { let urlParams = new URLSearchParams(window.location.hash.replace("#","?")); let token = urlParams.get('access_token'); } useEffect(() => { getToken(); setToken(token); }, []); and it never redirects. Thanks for the awesome tutorial and thanks in advance for the help.

[@Domthedeveloper]

@@jefmitchell7868 Hey Jeff, not easy to find the problem here.. have you compared yours with mine? Check this file (the second appraoch is commented out) : github.com/dom-the-dev/spotify-with-react/blob/main/src/App.js

[@Aly-uv1pk]

Thanks for this! Working on a project in Vue using this API, and your video was the only one that actually demonstrated clearly how to properly consume the API.

[@ammuubisht]

You made this seem wayy easier, Kudos man!👏👏

[@riantopera]

Thank you man! I was struggling a lot with this API, helped a lot!

[@annageisenberger3433]

Very well explained!

[@MyJoao321]

Just what I was looking for, thanks Dom!

[@Domthedeveloper]

Glad to help!

[@AbhishekSingh-mh2fg]

smoothest explanation Dom.

[@samyrrakoto3784]

Thanks for this, actually helped me out :) ! cheers

[@nimapourmohammadi4854]

Very useful and I learned so much thank you

[@shahinazizi4782]

dude you are awesome! hope you keep on the great work! and also hope you will use next js in ur next videos! much more efficient! lots of love 🌹

[@ohlordjohnsonxx150]

That’s really helpful 👍🏻👌🏻

[@Domthedeveloper]

Glad to hear that

[@ArepaZombie]

Thanks for this great video!! I was looking for something like this. Just an advice... make your code font bigger, so we can see it easily

[@Tony-me3cu]

Awesome Vid, thanks!

[@Domthedeveloper]

Thanks Tony!

[@paras5197]

awesome video thanks so much

[@ligaming3325]

this helps a lot thanks bro

[@ibelachichinedu9716]

Thanks Dom

[@vitaliykaminskiy4583]

Wow very impressive

[@mathiasburg242]

Nice work Bro.

[@Domthedeveloper]

Thank you!

[@smellingyou]

Ty bro

[@dinarfairussalsabillah1696]

thank you so much 😍

[@Domthedeveloper]

You are welcome 🙏

[@sasc7107]

Mega !

[@angelangelov3225]

Hello, if I want to add a player that streams my own playlists on my website, is this approach secure? I mean, it would be really easy for someone to get the Client ID and secret from Chrom Devtools if they inspect the request, right?

[@user-mr3hl9ix3s]

thanks, broo

[@stalan7404]

I want to make a game with Spotify's album cover images, in React. is your tutorial okay with this? thank you

[@orlandoleija9382]

Hi Dom, nice video, thanks for the info. What is the name of that extension that marks things for you? like effect, initialState, separator, key, etc.. seems useful

[@sirdalus]

i'd love to know as well

[@aadargupta]

I'm having some issues - I get an error saying too many re-renders

[@lanijey6481]

can you upload how to make a playlist of the Spotify where user can listen to it

[@himike3278]

Great video! How does the refresh token work with a post request? Thanks!

[@Domthedeveloper]

Can you maybe describe a bit more what you need to do?

[@legoghetto2689]

Thank you so much for the video, but is it possible to do the same without token? So there will be no authorization required. Would I still be able to make these requests etc.?

[@Domthedeveloper]

No, you need a token to verify your account

[@victoranyadiegwu7999]

Can I do this but without the submit button?

[@Ant-yq5ze]

dude pls use better theme next time, also larger font, it helps

[@alicek9660]

if i were to make a website that asks user rto enter their spotify username to fetch their data whill that still require an access token ?

[@JM-hf9bl]

Have you found an aswer?

[@DiamondBack502]

baba gemacht bruder

[@Domthedeveloper]

Danke spicy!!

[@andreyclown6389]

How I can add scopes? Because as soon as I tried to create a playlist, the token received in this way no longer matches. I need to add scopes, but I can't figure out how to do it correctly.

[@ModernCombatLP1909]

you can simply add "&scope=scope1,scope2,..." to the href url

[@T3Kiwi]

I keep getting CORS error, any fix for this?

[@kaystrings]

me too have you been able to fix this?

[@messerefrankfurter]

don't work, I'm still receive a message "been blocked by cors policy

[@kaystrings]

me too have you been able to fix this?

[@MoltenCreeper]

Does anybody know why adding more to the REDIRECT_URI like "/spotify" at the end (for a separate page) causes an error for "Invalid redirect URI"? I even added the new "/spotify" route to developer.spotify website under the Redirect URI section.