Easy Spotify Authentication, written in React
npm install --save react-spotify-auth
yarn add react-spotify-auth
Not recommended for production for versions <1.0.0
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]}
/>
}
User's top tracks (all user accounts)
Spotify Web Player (Premium Spotify accounts only, must be listening to a track prior to using)
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 = 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
/>
)}
</div>
)
}
export default App
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.
Name | Required | Default | Description |
---|---|---|---|
redirectUri |
✅ | http://localhost:3000 |
Spotify redirect URI. In most cases, this is the URL of your webpage. It must be set in your Developer Console. |
clientID |
✅ | Spotify 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. | |
btnClassName |
style included in package | Class(es) that is given to the button. | |
noLogo |
false |
Removes the Spotify logo from the button. | |
localStorage |
false |
Uses window.localStorage as a method to store the token. Note that localstorage does not have an expiry. |
|
noCookie |
false |
Does not store the auth token in a cookie named SpotifyAuth |
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'
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.
- 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
MIT © kevin51jiang
Inspired by this StackOverflow question