I'm building React/Redux/Node app that incorporates Spotify's API with authorization code flow. It's a SPA with React-Router that has three routes: Login, Timeline, and Results. When traversing from Timeline to Results, I get this error:

POST http://localhost:3001/login net::ERR_CONNECTION_REFUSED

Here is the Github repo.

Here is a video of the error with Chrome DevTools open.

useAuth.jsx (custom hook)

import { useState, useEffect } from 'react'

import axios from 'axios'



const useAuth = (code) => {



  const [accessToken, setAccessToken] = useState()



  useEffect(() => {

   axios.post('http://localhost:3001/login', {

       code,

   }).then(res => {

       setAccessToken(res.data.accessToken)

       window.history.pushState({}, null, '/')

   }).catch((err) => {

       console.log(err)

    })

 }, [code])



  return accessToken

}

export default useAuth

server.js

require('dotenv').config()

const express = require('express');

const SpotifyWebApi = require('spotify-web-api-node');

const cors = require('cors')

const bodyParser = require('body-parser')



const app = express();

app.use(cors())

app.use(bodyParser.json())



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(() => {

        res.sendStatus(400)

    })

})



app.listen(3001)

App.js

import {useState, useEffect} from 'react'

import { Login } from './Login'

import { Timeline } from './Timeline'

import { Results } from './Results'

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'

import './App.css'



const code = new URLSearchParams(window.location.search).get('code');



const App = () => {



  const [composers, setComposers] = useState([]);



  useEffect(() => {

    const fetchComposers = async () => {

      const response = await fetch('composers.json');

      const data = await response.json();

      const listofComposers = data.composers.map((composer) => composer)

      setComposers(listofComposers);

    }

    fetchComposers();

  }, []);



  return (



      <Router>

        <Routes>

          <Route path='/' element={<Login code={code} />} />

          <Route path='/timeline' element={<Timeline composerData={composers} />} />

          <Route path='/results' element={<Results code={code}  />} />

        </Routes>

      </Router>

  

  );

}



export default App;

Results.jsx

export const Results = ({ code }) => {

  const accessToken = useAuth(code)

  console.log(accessToken)

When I console.log(accessToken), it returns undefined.