bchiang7 / spotify-profile

A web app for visualizing personalized Spotify data built with React, Express, and the Spotify API

Spotify Profile

A web app for visualizing personalized Spotify data

Built with a bunch of things, but to name a few:

• Spotify Web API
• Create React App
• Express
• Reach Router
• Styled Components

Setup

1. Register a Spotify App and add http://localhost:8888/callback as a Redirect URI in the app settings
2. Create an .env file in the root of the project based on .env.example
3. nvm use
4. yarn && yarn client:install
5. yarn dev

Deploying to Heroku

1. Create new heroku app

   heroku create app-name

2. Set Heroku environment variables

   heroku config:set CLIENT_ID=XXXXX
   heroku config:set CLIENT_SECRET=XXXXX
   heroku config:set REDIRECT_URI=https://app-name.herokuapp.com/callback
   heroku config:set FRONTEND_URI=https://app-name.herokuapp.com

3. Push to Heroku

   git push heroku master

4. Add http://app-name.herokuapp.com/callback as a Redirect URI in the spotify application settings

5. Once the app is live on Heroku, hitting http://app-name.herokuapp.com/login should be the same as hitting http://localhost:8888/login

spotify-profile's Issues

Should LocalStorage be used to store api tokens?

Noticed that localStorage is being used to store access and refresh tokens, and Local Storage can be vulnerable to XSS attacks. An alternative could be using http-only cookies.

See:

• https://codeburst.io/localstorage-vs-cookies-all-you-need-to-know-about-storing-jwt-tokens-securely-in-the-front-end-70dc0a9b3ad3
• https://www.ducktypelabs.com/is-localstorage-bad/
• https://pragmaticwebsecurity.com/articles/oauthoidc/localstorage-xss.html

Ofc, there are limitations (time + complexity) for deciding how the tokens can be stored. I mainly wanted to open up discussion on possible solutions and considerations.

Fetching the API instead of opening a new tab.

Would be easy to implement with the https://api.spotify.com/v1/me/player/play endpoint.

App fails to logout with access_token in url

After logging in, the user is brought to the <Profile /> component and the url is set to something like https://spotify-profile.herokuapp.com/#access_token=BQBkftL1q6csOOMYZojUD...

Hitting 'Logout' from here refreshes the page with the profile still loaded. To get around this, one can navigate to any page and back to their profile to have the url reset without the access_token query present. When it's gone, the Logout button works again.

I think it's because in the server's index.js there is:

 res.redirect(
            `${FRONTEND_URI}/#${querystring.stringify({
              access_token,
              refresh_token,
            })}`,
          );

and the only path back to / is in the Nav.js component:

<NavLink to="/">
    <IconUser />
    <div>Profile</div>
</NavLink>

Web

Only

Missing license

I noticed that there is no license for this project. I suggest that a license be added such MIT to allow people to make use of the project without worrying about legal complications.

I hope that you take this into consideration in the spirit of open source.

Thank you.