spotify-web-api-node | A Node.js wrapper for Spotify 's Web API | Runtime Evironment library

This helped:

Passport-Spotify Passport strategy for authenticating with Spotify using the OAuth 2.0 API.

This module lets you authenticate using Spotify in your Node.js applications. By plugging into Passport, Spotify authentication can be easily and unobtrusively integrated into any application or framework that supports Connect-style middleware, including Express.

For more information about Spotify's OAuth 2.0 implementation, check their Web API Authorization Guide.

Installation $ npm install passport-spotify

http://www.passportjs.org/packages/passport-spotify/

In a desktop app it is recommended to open the system browser, and the Spotify login page will render there, as part of creating a promise. The opener library can be used to invoke the browser.

When the user has finished logging in, the technique is to receive the response via a Private URI Scheme / File Protocol, then to resolve the promise, get an authorization code, then swap it for tokens. It is tricky though.

RESOURCES OF MINE

I have some blog posts on this, which you may be able to borrow some ideas from, and a couple of code samples you can run on your PC:

• Initial Desktop Sample
• Final Desktop Sample

The second of these is a React app and uses a Private URI scheme, so is fairly similar to yours. I use the AppAuth-JS library and not Spotify though.

You can use console.log(JSON.stringify(data.body, null, 2)).

That prints JSON in tree without losing its content like you see in [Object].

In SingerBox component you are trying to make get on http://localhost:4000/${id} there is not such API in your server.js file. that's why you encounter a 404 error which means not found

The variable bearerToken is out of scope since it is scoped within your function.

if you return resolve(bearerToken) within your function then accessToken should equal your bearerToken.

Side note, you can rewrite your function like so.

I could be wrong but I don't think that you need the promise.

It is likely that the server code isn't running as you expect it to. Think about what commands you run to get that localhost server running on your machine, compared to the build command you provided o Netlify to build your site.

Netlify is primarily for hosting static sites, so will not automatically provide a backend server for you to use.

You can either host the server part of your app on something like Heroku (and then have to hard-code the URL of that server instance into your app), or you can use Netlify Functions to handle your basic post request, which will let you use the relative URLs as in your question.

Your server side routes should be configured once, not on the fly. When you call app.post and app.get you are configuring a route and providing a callback that will be used every time a request comes in that matches that route. In your code, you create a post route, and then inside the handler you create a get route. Don't do that.

HTTP Servers are meant to be stateless. This means each request (post, get) know nothing about one another. If you want to share information between, you do it via a database (in-memory, redis, nosql, sql, etc...), where each route is using only the parameters passed to it.

For example, the POST route creates an id for the search results. The POST route returns this id. The GET route when called, should receive this same id and look up the results. Of course, this is only necessary for really long processes, typically job queues. For your specific case, you only need one route.

add onSubmit={e => e.preventDefault()} on your

It's generally fine to use recursive promises, but there's a few things you're missing in your implementation. Each call to addPlaylistsToList() creates a new promise, but only one call will create a new promise that actually resolves: the very last one. All the other created promises will be pending infinitely.

You can rewrite the function in a more typical recursive style, something like this: