How To Build A Better Spotify With React
Why Stack Overflow recommends it
Stack Overflow users link it when they are debugging a Spotify Web API and React app that they built by following this tutorial, especially login, token and StrictMode double-call problems.
Recommended by 0 people across 0 different months, 2022 to 2023.
What it is
A near one-hour tutorial from Web Dev Simplified that builds a Spotify clone in React with an Express backend. It covers Spotify OAuth login, a custom useAuth hook with automatic token refresh, track search, an in-browser song player and a lyrics lookup feature.
What people said
Cites BEGINNER · 2022-04 · Stack Overflow · on “Spotifty web api's giving error on ReactJS even after giving proper access tokens”
I'm using spotify-web-api-node package and following this tutorial [this video] . First I get my access token from my backend express js server then I pass it to to my reactjs application spotifyApi.setAccessToken(access_token); after setting the access token, I try to call the any methods that will let me use the web service helper functions it gives me the error in the screenshot. for example : spotifyApi.searchTracks(search).then((res) => console.log(res)).catch((err) => console.log(err)); but if I try to access this method using postman or from the express Js server using the same token it gives me no error and gives a correct response. I was following the clone spotify tutorial from youtube
Cites Myth Vince · 2022-08 · Stack Overflow · on “SpotifyAPI in spotifyplayer”
So I'm having a bit of struggle with the SpotifyPlayer since they made it premium. I wonder if anything that I can play the spotify player in other ways without using the react-spotify-web-playback ... Although this is the code... import React from 'react' import { useEffect } from 'react' import { useState } from 'react' import SpotifyPlayer from 'react-spotify-web-playback' function Player({accessToken,trackUri}) { const [play,setPlay] = useState(false) useEffect(() => setPlay(true),[trackUri]) if (!accessToken) return null return ( <SpotifyPlayer token={accessToken} showSaveIcon callback={state => { if (!state.isSaved) setPlay(false) }} play={true} uris = {trackUri ? [trackUri] : []} ></S
Cites Harrishun · 2022-08 · Stack Overflow · on “Spotify node web api - logs out immediately after logging in”
I was having a similar issue, having followed this [LINK] tutorial, and then this YouTube tutorial [this video] . What I realised was that my App component was being rendered twice, which was causing everything to be called twice, including the login endpoint. I was able to verify this using console.log in the endpoint and seeing if the log appeared twice. As the same Spotify code was being used twice in SpotifyWebApi.authorizationCodeGrant , this was what was causing the error. I was able to trace the issue to the React.StrictMode being enabled, which must have happened when using the create-react-app command. Verify whether the tags appear in your index.js file. For more information, check this
Cites Ken Malley · 2022-11 · Stack Overflow · on “WebapiAuthenticationError: An authentication error occurred while communicating with Spotify's Web API. Details: invalid_grant Invalid redirect URI”
With Create React App, your index.js file will most likely have StrictMode set by default with the <React.StrictMode> tag. In a development environment, React runs things twice in order to check for errors. See the React Strict Mode documentation [LINK] . It appeared that the Spotify Web API is trying to authenticate twice because of this side-effect, and doesn't like it. Removing the <React.StrictMode> tags fixed this issue for me. A user by the name of Taslim Raza Ansari was the original commenter that pointed me in the right direction for the fix. See this video solution [this video] .
Cites Tyler R · 2023-06 · Stack Overflow · on “Axios Post Error - Connection Refused for Spotify API”
Would very much appreciate help figuring out why i am receiving an error in my axios post request. New to using APIs and would also love to know how I can best error handle things like this. const express = require('express'); const spotifyWebApi = require('spotify-web-api-node'); const cors = require('cors'); const app = express(); const bodyParser = require('body-parser'); app.use(cors()) app.use(bodyParser.json()) app.post('/refresh', (req, res) => { const refreshToken = req.body.refreshToken; console.log(refreshToken) const spotifyApi = new spotifyWebApi({ redirectUri: ' [LINK] ', clientId: '34203c820a8a49b783fb4588f1b241df', clientSecret: '9343f7f9db05463cbf2c1b9532b9137e', refreshToken