Laravel & the Spotify API

Over the past few years, I worked extensively with the Spotify API while integrating features that utilized it into my side project songrank.dev. Song Rank is a web app that enables Spotify users to search & create ranked lists of artists' albums, and tracks. When I first set out to build this project, I had already worked extensively with Laravel Socialite and integrating third party APIs into Laravel apps in the past so I didn't expect this time to be any different.

I got started by installing laravel/socialite & socialiteproviders/spotify into my project. I retrieved my application keys & secrets, set up the authentication redirects and wrote up a basic controller to allow for authentication into my app. Everything was working with no issues and I went about developing the rest of the application over the next few weeks.

It was only after I first deployed my application to Laravel Vapor & updated my application authentication redirect URLs that I noticed my first issue: no one besides myself could log into the application. For the Spotify API veterans out there, many of you probably already know the issue I ran into. In order for any Spotify user to interact with your application, you must register each user as an approved user in the Spotify development application dashboard. When I first hit this roadblock, I was really confused. But then it did come back to me that a part of the spotify sign up process when initially retrieving my app keys & secrets was to register my account as an approved user.

I then did some further reading and learned that third party applications that interface with Spotify's API are limited to 25 manually registered users within the app's dashboard. This means that no random user who would stumble across song rank would be able to use it. This defeated the entire point of the app and if I had RTFM before I started building song rank, I would have tried to plan for this before hand.

Regardless, Spotify allows for third party developers to submit "extension requests" to allow for any Spotify user to log in without being manually registered; exactly what I needed. I began the lengthy extension request application process. This process involved filling out several pages of questions about my app's purpose, if it was a game, how it used assets, if the domain of the application infringed on their trademark, if there were AI integrations with the app etc. It took several hours but I worked through the entire form. I provided images of every page, an entire screencast tour of the application, how it worked and its source code. Song Rank is not a for profit application, so I was as thorough as possible outlining that the application was entirely for fun, and was not for profit in any regard.

I then re-reviewed my entire application form and submitted it for review. In the meantime, no one could use my song rank even though it was live on the internet. I also couldn't take it down to save money because the production ready app had to be made available for the Spotify application review team to be able to visit the site, confirm what was sent in my application and log in and use it themselves. A week went by, then 2, then 4. Then another month, and another and another. I had song rank online for over 4 months before getting a response back from Spotify. Since originally submitting my extension request application, 50 organic users had found song rank and were unable to log in. It was devastating to see.

However, I did finally hear back from Spotify, just to have my app rejected for an extension request. Their automated email response (which is lost to time at this point) gave no useful insights as to what led them to decline my request. Just one sentence "misuse of asset". I didn't really understand what this meant. I browsed reddit to see if anyone else had the same issue and I reread the entire Spotify Developer Policy. What I eventually found after hours of nitpicking my application was that the Spotify logos which I was required to include to be able to use assets from spotify was incorrectly implemented. I had utilized just the Spotify "icon" in places where the "full logo" should have been used when linking back to artists and tracks. This caused Spotify to decline my request. These asset guidelines are very picky and thorough and you can view them here: guidelines

After finding this out, I abstracted Spotify's Logo into its own Vue component based off of what they would approve, replaced it in my app, and re-submitted the extension request. Below is a snippet of the exact markup. The markup below leverages TailwindCSS & FontAwesome Icons.

<template>
    <a 
        :href="link"
        target="_blank"
        class="inline-flex items-center gap-2"
        style="border-bottom: 2px solid #06D6A0; padding-bottom: 2px;"
    >
        <p class="inline text-[#06D6A0]">
            <img 
                src="/spotify-logo.png" 
                class="inline w-auto h-3.5 sm:h-4"
                style="aspect-ratio: 3.15"
                alt="Spotify"
            >
        </p>
        <i class="fa-solid fa-arrow-up-right-from-square text-xs"></i>
    </a>
</template>

This next extension request took just as long as the first. Overall, it took 8 months of waiting for the Spotify App review team to review song rank. The entire time I had to keep paying for the app to be hosted even though no one could use it. Luckily, this next time it was approved and people have been able to start using song rank.

While I was happy people could finally use song rank, I was pretty disappointed with Spotify's review process, the lack of communication during it and the length it took for the app to get approved. As a solo developer, I had no contacts or reach within Spotify like large companies might have to expedite the review. This process was very discouraging and there were a few times where I debated abandoning this project because of it. If I knew what a headache it would be and the length it would take, I probably would have not built the application. I believe that Spotify knows this and architected their review process to be difficult to deter solo developers from building great tools with their services. Any scope changes also require the submission of another extension request and because of this, I have not expanded the feature set of song rank.

There are many tutorials online for using and learning how to interact with the Spotify API but none that I have seen go into the details of what you can and can't build in relation to Spotify's TOS & the process in actually shipping an app with Spotify integration. This article was written in context to my challenges shipping song rank, but hopefully if you ever have an idea that hinges on Spotify integration for it to be successful, you'll have a better understanding of the roadmap to launching an app that uses Spotify's API.