react-spotify-auth

Easy Spotify Authentication, written in React

Install

yarn add react-spotify-auth

npm install --save react-spotify-auth

Demos

User's top tracks (all user accounts)

Spotify Web Player (Premium Spotify accounts only, must be listening to a track prior to using)

Got something to add, or a feature you want? Send a PR or create an issue!

Quickstart

import { SpotifyAuth, Scopes } from 'react-spotify-auth'
import 'react-spotify-auth/dist/index.css' // if using the included styles

function App = () => {
  <SpotifyAuth
    redirectUri='http://localhost:3000/callback'
    clientID='your client id from spotify here'
    scopes={[Scopes.userReadPrivate, Scopes.userReadEmail]}
  />
}

Usage

import React from 'react'
import { SpotifyApiContext } from 'react-spotify-api'
import Cookies from 'js-cookie'

import { SpotifyAuth, Scopes } from 'react-spotify-auth'
import 'react-spotify-auth/dist/index.css'

const App = () => {
    const [token, setToken] = React.useState(Cookies.get("spotifyAuthToken"))
  return (
    <div className='app'>
      {token ? (
        <SpotifyApiContext.Provider value={token}>
          {/* Your Spotify Code here */}
          <p>You are authorized with token: {token}</p>
        </SpotifyApiContext.Provider>
      ) : (
        // Display the login page
        <SpotifyAuth
          redirectUri='http://localhost:3000/callback'
          clientID='1a70ba777fec4ffd9633c0c418bdcf39'
          scopes={[Scopes.userReadPrivate, 'user-read-email']} // either style will work
          onAccessToken={(token) => setToken(token)}
        />
      )}
    </div>
  )
}
export default App

API

SpotifyAuth

Here's some props that can be used to customize the button. Please enter your own values for redirectUri and clientID, otherwise your project may not work correctly.

SpotifyAuthListener

A simplified version of the SpotifyAuth component, returning nothing but still listening for any tokens that it might get.

// place this on a page that you will redirect to
// if a <SpotifyAuth /> component isn't there already.
<SpotifyAuthListener />

Scopes

As indicated in the table above, scopes are accessible by the camelCased name given by Spotify. A full list can be found here along with their descriptions. These are included in the package mainly to help autocomplete and prevent annoying typos.

import { Scopes } from 'react-spotify-auth'

console.log(Scopes.appRemoteControl) // -> 'app-remote-control'

Persistence

Logging in every time a user wants to use your service is annoying.

To solve that problem, an entry is added to the user's cookies under spotifyAuthToken. As per Spotify docs, it has an expiration time of 2 hours after which the token will stop working. If you want to disable the cookie, you can pass in the prop noCookie.

You can access it directly through cookies.get() or through a library like js-cookie.

If you prefer working with the localStorage API, a prop of localStorage can be passed into the component, which can be accessed at spotifyAuthToken. Keep in mind however, that this does not offer the 2h expiry window.

Changelog

1.4.2 - 1.4.3

• Dependency upgrades

1.4.1

• Allowed to be used in iframe (thanks @ffleandro !)

1.3.2 - 1.3.5

• Dependency upgrades

1.3.1

• Add show dialogue parameter to url

1.2.1

• Move to React 17

1.1.0 - 1.1.4

• Dependency upgrades

1.1.0

• The real 1.0 update!

• Added SpotifyAuthListener for multipage applications. This means you don't have to render a SpotifyAuth button on every page that you want to redirect to, or otherwise aquire Spotify credentials.

• Scopes.all now gives you all the permissions available. Use with caution.

• Clear up localstorage code to be up to date with documentation

  1.0.1

• Update readme to remove warning

  1.0.0

• Added button logo classes

  0.5.3

• Bump deps for security

  0.5.1

• Potentially breaking changes by changing the values of default props, and adding new ones. Also better docs woo!

• Default props:

  • clientID: 1a70ba777fec4ffd9633c0c418bdcf39 -> nothing
  • redirectUri: http://localhost:3000/callback -> http://localhost:3000
  • onAccessToken: (token) => console.log('Access token: ', token) -> (token) => {}

• Added props:

  • localStorage, noCookie

License & Attribution

MIT © kevin51jiang

Inspired by this StackOverflow question