• Example code to callback the APi using .tsx: Spotify.tsx. But you can also use MDX or HTML format, read the documentation or Live Version.
• Example code for the frontend using .tsx: music.tsx.

Running on Vercel serverless function, store data in Firebase (store only access_token, refresh_token, token_expired_timestamp)

To develop locally, you need:

• A fork of this project as your repository
• A Vercel project connected with the forked repository
• A Firebase project with Cloud Firestore setup
• A Spotify developer account

• Create a new Vercel project by importing this repository.

• Create a new Firebase project
• Create a new Cloud Firestore in the project
• Download configuration JSON file from Project settings > Service accounts > Generate new private key
• Convert private key content as BASE64
  • You can use Encode/Decode extension in VSCode to do so
  • This key will be used in step explained below

• Login to developer.spotify.com
• Create a new project
• Edit settings to add Redirect URIs
  • add http://localhost:3000/api/callback

• Install Vercel command line with npm i -g vercel
• Create .env file at the root of the project and paste your keys in SPOTIFY_CLIENT_ID, SPOTIFY_SECRET_ID, and FIREBASE

BASE_URL='http://localhost:3000/api'
SPOTIFY_CLIENT_ID='____'
SPOTIFY_SECRET_ID='____'
FIREBASE='__BASE64_FIREBASE_JSON_FILE__'

• Run vercel dev

$ vercel dev
Vercel CLI 20.1.2 dev (beta) — https://vercel.com/feedback
> Ready! Available at http://localhost:3000

• Now try to access http://localhost:3000/api/login