rsa

react-spotify-auth

Easy Spotify Authentication, written in React

Showing:

Popularity

Downloads/wk

50

GitHub Stars

17

Maintenance

Last Commit

6d ago

Contributors

6

Package

Dependencies

1

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Reviews

Top Feedback

1Great Documentation
1Easy to Use

Readme

react-spotify-auth

Easy Spotify Authentication, written in React

NPM JavaScript Style Guide Build Status GitHub stars FOSSA Status

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.

NameRequiredDefaultDescription
redirectUrihttp://localhost:3000Spotify redirect URI. In most cases, this is the URL of your webpage. It must be set in your Developer Console.
clientIDSpotify app Client ID. Can be found from the Spotify Developer Console.
scopes['user-read-private', 'user-read-email']Array of camelCased equivalent for the scopes you are requesting. For example, if you wanted the scope user-read-recently-played you can enter [Scopes.userReadRecentlyPlayed].
onAccessToken(token) => {}Function that gets triggered when the component recognizes an access token after an auth grant. Is called with the parameter accessToken.
title"Continue with Spotify"Message inside the button.
btnClassNamestyle included in packageClass(es) that is given to the button.
logoClassNamestyle included in packageClass(es) given to the svg that draws the Spotify logo. Make sure to add a width if you use a custom class, otherwise it will not appear.
noLogofalseRemoves the Spotify logo from the button.
localStoragefalseUses window.localStorage as a method to store the token. Note that localstorage does not have an expiry.
noCookiefalseWhen true, it does not store the auth token in a cookie named SpotifyAuthToken
showDialogfalseWhether or not to force the user to approve the app again if they’ve already done so. If false (default), a user who has already approved the application may be automatically redirected to the URI specified by redirect_uri. If true, the user will not be automatically redirected and will have to approve the app again.

SpotifyAuthListener

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

NameRequiredDefaultDescription
onAccessToken(token) => {}Function that gets called when an access token is found
localStoragefalseWhen true, it will also store the token in window.localStorage under spotifyAuthToken.
noCookiefalseWhen true, it does not store the auth token in a cookie named SpotifyAuthToken
// 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

  • 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

FOSSA Status

Rate & Review

Great Documentation1
Easy to Use1
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100
Kevin Jiang1 Rating0 Reviews
Why use Node.js when you can use no JS? Student @uWaterloo.
1 year ago
Great Documentation
Easy to Use