- Create a Spotify Application
- Take note of:
Client ID
Client Secret
- Click on Edit Settings
- In Redirect URIs:
- Add
http://localhost/callback/
- Add
- Navigate to the following URL:
https://accounts.spotify.com/authorize?client_id={SPOTIFY_CLIENT_ID}&response_type=code&scope=user-read-currently-playing,user-read-recently-played&redirect_uri=http://localhost/callback/
-
After logging in, save the {CODE} portion of:
http://localhost/callback/?code={CODE}
-
Create a string combining
{SPOTIFY_CLIENT_ID}:{SPOTIFY_CLIENT_SECRET}
(e.g.5n7o4v5a3t7o5r2e3m1:5a8n7d3r4e2w5n8o2v3a7c5
) and encode into Base64. -
Then run a curl command in the form of:
curl -X POST -H "Content-Type: application/x-www-form-urlencoded" -H "Authorization: Basic {BASE64}" -d "grant_type=authorization_code&redirect_uri=http://localhost/callback/&code={CODE}" https://accounts.spotify.com/api/token
-
Save the Refresh token
-
Watch video tutorial by API-University
-
Register on Vercel
-
Fork this repo, then create a vercel project linked to it
-
Add Environment Variables:
https://vercel.com/<YourName>/<ProjectName>/settings/environment-variables
REACT_APP_SPOTIFY_REFRESH_TOKEN
REACT_APP_SPOTIFY_CLIENT_ID
REACT_APP_SPOTIFY_CLIENT_SECRET
-
Deploy!