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!