Creating a Simple Spotify Authorization Popup in Javascript

Using Implicit Grant Flow

Image for post

I’m currently building a client campaign which can create playlists on both Spotify and Apple Music. Yesterday, I shared how I was approaching matching tracks between the two services using ISRC. Today, I’d like to quickly share how I’m handling the Spotify authentication so it better mimics the popup authentication that is part of Apple’s MusicKit JS.

I was actually pretty excited to find Spotify covering Implicit Grant Flow in their documentation and here’s how they describe it:

Implicit grant flow is for clients that are implemented entirely using JavaScript and running in the resource owner’s browser. You do not need any server-side code to use it. Rate limits for requests are improved but there is no refresh token provided.

Very cool. For whatever reason, I have almost always used server-side implementations to authenticate my users. However, for the sake of a simple “Save as Playlist” function, something that simply passes through the browser makes much more sense. My only issue with Spotify’s Glitch example is that it requires that the current page redirect to authorization which causes my user to lose their spot in my application’s flow. What I would like to do is popup the authorization dialog and once the user has successfully logged in, send the access token back to the parent window and close the popup.

Here’s a Codepen of this technique in action which I will break down below.

First, we’ll want to popup the authorization flow. You can read Spotify’s documentation on building out your authorization request url using their query parameters. (Where you redirect users to is up to you but for the sake of this example I’ll be redirecting to the exact same Codepen page.) Then, simply popup that URL from a window.open function, storing a reference to the popped up window.

popup = window.open(
AUTHORIZATION_URL,
'Login with Spotify',
'width=800,height=600'
)

Next, we’ll register a global function on the window which will receive the access token as a payload, close the popup, and fetch the user’s profile from Spotify.

window.spotifyCallback = (payload) => {
popup.close()
fetch('https://api.spotify.com/v1/me', {
headers: {
'Authorization': `Bearer ${payload}`
}
}).then(response => {
return response.json()
}).then(data => {
// do something with data
})
}

When Spotify successfully authenticates a user, they are redirected back to your redirect_uri. In our case, they are redirected right back to the same Codepen page. Included in this url redirection is a hash fragment which includes our user’s access token. So, when our view gets initialized, we can simply check for this token and call our spotifyCallback function.

token = window.location.hash.substr(1).split('&')[0].split("=")[1]if (token) {
window.opener.spotifyCallback(token)
}

I wasn’t able to easily find this solution so I hope it’s helpful to those of you looking for a simple and clean Spotify authentication solution for your web apps. This should certainly be evolved to check if a user denies access as well. Happy hacking!

Written by

I develop websites for rock 'n' roll bands and get paid in sex and drugs. Previously Silva Artist Management, SoundCloud, and Songkick. Currently: Available

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store