I'm attempting to create a Spotify Web Player clone. I successfully have the authentication set up and am able to login to my site with my Spotify account and view the dashboard and play music. However, when it comes to setting up a second page within the site to navigate to, I'm having trouble.
My code from App.js is not being passed down to the Bunk component. I am able to successfully console.log myCode from App.js and view the code when I get to the dashboard, so I know that the useEffect is working and myCode is being passed to state.
I'm assuming that the issue lies within the useAuth function. When I console.log accessToken in the Bunk component, I get { code: null }. I assume there is some functionality/call to my server I need to set up to process the code that is being passed into the useAuth in the Bunk component, but I'm not sure what that might be.
Any help would be greatly appreciated. Trying to expand this site.
const code = new URLSearchParams(window.location.search).get("code")
function App() {
const [myCode, setCode] = useState("")
useEffect(() => {
setCode(code)
}, [])
console.log(myCode)
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Login />} />
<Route path="/dashboard" element={<Dashboard code={code} />} />
<Route path="/bunk" element={<Bunk code={myCode} />} />
</Routes>
</BrowserRouter>
)
}
export default App
const spotifyApi = new SpotifyWebApi({
clientId: "0d9db2e4d65f42eb980fa66c84c5f970",
})
export default function Bunk({ code }) {
const accessToken = useAuth(code)
const [search, setSearch] = useState("")
const [searchResults, setSearchResults] = useState([])
const [playingTrack, setPlayingTrack] = useState()
const [playingAlbum, setPlayingAlbum] = useState()
const [lyrics, setLyrics] = useState("")
const [midwestAlbums, setMidwestAlbums] = useState([])
const [hipHopAlbums, setHipHopAlbums] = useState([])
const [recentRatings, setRecentRatings] = useState([])
const [filmGrab, setFilmGrab] = useState([])
console.log(accessToken)
export default function useAuth(code) {
const [accessToken, setAccessToken] = useState()
const [refreshToken, setRefreshToken] = useState()
const [expiresIn, setExpiresIn] = useState()
useEffect(() => {
axios
.post("http://localhost:3001/login", {
code,
})
.then(res => {
setAccessToken(res.data.accessToken)
setRefreshToken(res.data.refreshToken)
setExpiresIn(res.data.expiresIn)
})
.catch(() => {
window.location = "/dashboard"
})
}, [code])
useEffect(() => {
if (!refreshToken || !expiresIn) return
const interval = setInterval(() => {
axios
.post("http://localhost:3001/refresh", {
refreshToken,
})
.then(res => {
setAccessToken(res.data.accessToken)
setExpiresIn(res.data.expiresIn)
})
.catch(() => {
window.location = "/dashboard"
})
}, (expiresIn - 60) * 1000)
return () => clearInterval(interval)
}, [refreshToken, expiresIn])
return accessToken
}
require("dotenv").config()
const express = require("express")
const cors = require("cors")
const bodyParser = require("body-parser")
const lyricsFinder = require("lyrics-finder")
const SpotifyWebApi = require("spotify-web-api-node")
const app = express()
app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.post("/refresh", (req, res) => {
const refreshToken = req.body.refreshToken
const spotifyApi = new SpotifyWebApi({
redirectUri: process.env.REDIRECT_URI,
clientId: process.env.CLIENT_ID,
clientSecret: process.env.CLIENT_SECRET,
refreshToken,
})
spotifyApi
.refreshAccessToken()
.then(data => {
res.json({
accessToken: data.body.accessToken,
expiresIn: data.body.expiresIn,
})
})
.catch(err => {
console.log(err)
res.sendStatus(400)
})
})
app.post("/login", (req, res) => {
const code = req.body.code
const spotifyApi = new SpotifyWebApi({
redirectUri: process.env.REDIRECT_URI,
clientId: process.env.CLIENT_ID,
clientSecret: process.env.CLIENT_SECRET,
})
spotifyApi
.authorizationCodeGrant(code)
.then(data => {
res.json({
accessToken: data.body.access_token,
refreshToken: data.body.refresh_token,
expiresIn: data.body.expires_in,
})
})
.catch(err => {
res.sendStatus(400)
})
})
app.get("/lyrics", async (req, res) => {
const lyrics =
(await lyricsFinder(req.query.artist, req.query.track)) || "No Lyrics Found"
res.json({ lyrics })
})
app.listen(3001)
