Learn the basics of OAuth and how it works  in the context of Spotify’s OAuth flow.

If you’re interested in working with the Spotify API, you’ll need an OAuth token in order to access most of its data. In this blog post, we’ll explain what OAuth is, how it works, and break down each step in the context of Spotify’s OAuth flow.

OAuth (Open Authorization) is a secure, industry-standard protocol that allows you to approve one application interacting with another on your behalf 

. Instead of passing user credentials from app to app, OAuth lets you pass authorization between apps over HTTPS with 

OAuth lets you pass authorization between apps with access tokens instead of passing around sensitive information like your username and password.

For example, you can tell Facebook that it’s okay for Spotify to access your profile or post updates to your timeline without having to give Spotify your Facebook password. This way it's less risky for both you and Facebook — in the event Spotify suffers a breach, your Facebook password remains safe.

Similarly, when a user authorizes an app to access their Spotify account data, that app shouldn’t be storing their username or password anywhere. As developers, we don’t want to be responsible for sensitive information like this, so instead, we rely on the secure OAuth protocol to take care of the authorization flow with access tokens.

When trying to understand OAuth, it's important to remember that it's about 

 is about proving you are the correct person by providing credentials like a username or password.

OAuth scenarios almost always represent two unrelated sites or services trying to accomplish something on behalf of users or their software. All three have to work together, with multiple approvals, for the completed transaction to get 

Since OAuth is a way to authorize an app without giving away your username and password, you can picture it like a 

. If all handshakes are completed, then your reward is a unique access token that only your app can use to access resources from a service.

 that need to "shake hands" to get that token.

In addition to these four roles, there is also the concept of 

 in OAuth. Scopes are used to specify exactly which resources should be available to the client that is asking for authorization.

They provide users of third-party apps with the confidence that only the information they choose to share will be shared, and nothing more. The resource server (e.g. the Spotify API) is in charge of defining these scope values, and which resources they relate to.

The Spotify API has many scopes for many different purposes. For example, the 

 scope is for read access to a user's subscription details and is required if you want to access the 

 endpoint to get the currently logged-in user's profile information. There is also a scope called 

 that is required if you need write access to a user's private playlists. This scope allows you to do things like add items to a playlist or upload a custom playlist cover image.

Check out all of the available scopes for the Spotify API 

As we mentioned before, all of the back and forth hand-shaking that OAuth requires us to do is for one thing: 

You can think of access tokens like the two-factor authentication codes that some services send you via text message for you to log in. Just like two-factor auth codes, OAuth tokens have a limited time in which they are valid. After a while, all tokens expire, and you'll need to request another one (or refresh it). In the end, this is all for security — in case someone gets hold of your unique access token, they can only access your private data for a limited amount of time before they're locked out.

Now that we've gone over OAuth roles, scopes, and tokens, let's look at how they all tie together in the context of Spotify’s OAuth flow.

Step 0: Client obtains client ID and client secret

Before any client or server requests are even made, there are two things the client (your app) needs in order to kick off the OAuth flow: the 

. These are two strings that are used to identify and authenticate your specific app when requesting an access token.

With Spotify, your app's unique client ID and client secret can be found in the 

Once we have these two values, we're ready to initiate the OAuth flow.

Step 1: Client requests authorization to access data from Spotify

First, the client (your app) sends an authorization request containing the client ID and secret to the authorization server (the Spotify Accounts Service). This request also includes any scopes the client needs and a redirect URI which the authorization server should send the access token to.

Step 2: Spotify authorizes access to client

Second, the authorization server (Spotify) authenticates the client (your app) using the client ID and secret, then verifies that the requested scopes are permitted.

Step 3: User grants app access to their Spotify data

After step 2, the user is redirected to a page on the Spotify authorization server where they can grant the app access to their Spotify account. In our case, the user will have been sent to a page that belongs to the Spotify accounts service (note the 

 URL in the screenshot below), where they can log in to Spotify.

Step 4: Client receives access token from Spotify

Once the user grants access by logging into Spotify, the authorization server redirects the user back to the client (your app) with an access token. Sometimes, a refresh token is also returned with the access token.

Step 5: Client uses access token to request data from Spotify

Finally, the client can use the access token to access resources from the resource server (the Spotify API).

If all of this feels like a lot, don't worry, it's because it is! OAuth is super tricky, but for a good reason — security! All you really need to remember is this:

 that lets you approve one application interacting with another on your behalf without giving away sensitive user credentials like your username and password. Instead, it uses 

The five basic steps of the Spotify OAuth flow:

 yourself! It’s not as daunting as you might think — the documentation describes everything you need to implement the flow.

Be sure to check out our new course being released soon, 

, where we apply these concepts to build a real-world, full stack web app!

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Breaking Down OAuth with Spotify</h1><div data-node-type="summary" class="summary-block">Learn the basics of OAuth and how it works  in the context of Spotify’s OAuth flow.</div><p>If you’re interested in working with the Spotify API, you’ll need an OAuth token in order to access most of its data. In this blog post, we’ll explain what OAuth is, how it works, and break down each step in the context of Spotify’s OAuth flow.</p><h2 class="heading-anchor-text" id="what-is-oauth-and-why-do-we-need-it?"><span>What is OAuth and why do we need it?</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#what-is-oauth-and-why-do-we-need-it?">#</a></h2><p>OAuth (Open Authorization) is a secure, industry-standard protocol that allows you to approve one application interacting with another on your behalf <strong>without giving away your password</strong>. Instead of passing user credentials from app to app, OAuth lets you pass authorization between apps over HTTPS with <strong>access tokens</strong> (kind of like a special code).</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>OAuth lets you pass authorization between apps with access tokens instead of passing around sensitive information like your username and password.</p></div></div><p>For example, you can tell Facebook that it’s okay for Spotify to access your profile or post updates to your timeline without having to give Spotify your Facebook password. This way it's less risky for both you and Facebook — in the event Spotify suffers a breach, your Facebook password remains safe.</p><p>Similarly, when a user authorizes an app to access their Spotify account data, that app shouldn’t be storing their username or password anywhere. As developers, we don’t want to be responsible for sensitive information like this, so instead, we rely on the secure OAuth protocol to take care of the authorization flow with access tokens.</p><h2 class="heading-anchor-text" id="authorization,-not-authentication"><span>Authorization, not authentication</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#authorization,-not-authentication">#</a></h2><p>When trying to understand OAuth, it's important to remember that it's about <strong>authorization</strong>, not authentication.</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>OAuth is about <strong>authorization</strong>, not authentication.</p></div></div><p><strong>Authorization</strong> is asking for permission to do things. <strong>Authentication</strong> is about proving you are the correct person by providing credentials like a username or password.</p><p>OAuth scenarios almost always represent two unrelated sites or services trying to accomplish something on behalf of users or their software. All three have to work together, with multiple approvals, for the completed transaction to get <strong>authorized</strong>.</p><h2 class="heading-anchor-text" id="roles"><span>Roles</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#roles">#</a></h2><p>Since OAuth is a way to authorize an app without giving away your username and password, you can picture it like a <strong>series of handshakes</strong>. If all handshakes are completed, then your reward is a unique access token that only your app can use to access resources from a service.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210725022600370_handshake.jpg" attachmentid="2b3f6e06-f0d6-46eb-9712-50b526e306ea" contenteditable="false" data-width="612" data-height="612"><div></div></figure><p></p><p>There are four main <strong>roles</strong> that need to "shake hands" to get that token.</p><ol><li><p><strong>Resource Server:</strong> The API which stores data the application wants to access <em>(e.g. the Spotify API)</em></p></li><li><p><strong>Resource Owner:</strong> Owns the data in the resource server <em>(e.g. the user who wants to log into your app with Spotify is the owner of their Spotify account)</em></p></li><li><p><strong>Client:</strong> The application that wants to access your data <em>(e.g. your app)</em></p></li><li><p><strong>Authorization Server:</strong> The server that receives requests from the client for access tokens and issues them upon successful authentication and consent by the resource owner <em>(e.g. Spotify Accounts Service)</em></p></li></ol><h2 class="heading-anchor-text" id="scopes"><span>Scopes</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#scopes">#</a></h2><p>In addition to these four roles, there is also the concept of <strong>scopes</strong> in OAuth. Scopes are used to specify exactly which resources should be available to the client that is asking for authorization.</p><p>They provide users of third-party apps with the confidence that only the information they choose to share will be shared, and nothing more. The resource server (e.g. the Spotify API) is in charge of defining these scope values, and which resources they relate to.</p><p>The Spotify API has many scopes for many different purposes. For example, the <code><a href="https://developer.spotify.com/documentation/general/guides/scopes/#user-read-private" rel="noopener noreferrer nofollow">user-read-private</a></code> scope is for read access to a user's subscription details and is required if you want to access the <code>https://api.spotify.com/v1/me</code> endpoint to get the currently logged-in user's profile information. There is also a scope called <code><a href="https://developer.spotify.com/documentation/general/guides/scopes/#playlist-modify-private" rel="noopener noreferrer nofollow">playlist-modify-private</a></code> that is required if you need write access to a user's private playlists. This scope allows you to do things like add items to a playlist or upload a custom playlist cover image.</p><p>Check out all of the available scopes for the Spotify API <a href="https://developer.spotify.com/documentation/general/guides/scopes/" rel="noopener noreferrer nofollow">here</a>.</p><p></p><h2 class="heading-anchor-text" id="tokens"><span>Tokens</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#tokens">#</a></h2><p>As we mentioned before, all of the back and forth hand-shaking that OAuth requires us to do is for one thing: <strong>an access token</strong>.&nbsp;</p><p>You can think of access tokens like the two-factor authentication codes that some services send you via text message for you to log in. Just like two-factor auth codes, OAuth tokens have a limited time in which they are valid. After a while, all tokens expire, and you'll need to request another one (or refresh it). In the end, this is all for security — in case someone gets hold of your unique access token, they can only access your private data for a limited amount of time before they're locked out.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210725023119692_two-factor.jpg" attachmentid="bf2012c8-16fc-475f-888e-4ebcc1a4843f" contenteditable="false" data-width="1024" data-height="512"><div></div></figure><p></p><h2 class="heading-anchor-text" id="the-oauth-flow"><span>The OAuth flow</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#the-oauth-flow">#</a></h2><p>Now that we've gone over OAuth roles, scopes, and tokens, let's look at how they all tie together in the context of Spotify’s OAuth flow.</p><h3 class="heading-anchor-text" id="step-0-client-obtains-client-id-and-client-secret"><span>Step 0:&nbsp;Client obtains client ID and client secret</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#step-0-client-obtains-client-id-and-client-secret">#</a></h3><p>Before any client or server requests are even made, there are two things the client (your app) needs in order to kick off the OAuth flow: the <strong>client ID</strong> and the <strong>client secret</strong>. These are two strings that are used to identify and authenticate your specific app when requesting an access token.</p><p>With Spotify, your app's unique client ID and client secret can be found in the <a href="https://developer.spotify.com/dashboard/login" rel="noopener noreferrer nofollow">developer dashboard</a>.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210725023250941_dev-dashboard.png" attachmentid="8f4131d1-d64e-4c39-8e53-61ed7d5b42f4" contenteditable="false" data-width="1104" data-height="664"><div></div></figure><p>Once we have these two values, we're ready to initiate the OAuth flow.</p><h3 class="heading-anchor-text" id="step-1-client-requests-authorization-to-access-data-from-spotify"><span>Step 1: Client requests authorization to access data from Spotify</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#step-1-client-requests-authorization-to-access-data-from-spotify">#</a></h3><p>First, the client (your app) sends an authorization request containing the client ID and secret to the authorization server (the Spotify Accounts Service). This request also includes any scopes the client needs and a redirect URI which the authorization server should send the access token to.</p><h3 class="heading-anchor-text" id="step-2-spotify-authorizes-access-to-client"><span>Step 2: Spotify authorizes access to client</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#step-2-spotify-authorizes-access-to-client">#</a></h3><p>Second, the authorization server (Spotify) authenticates the client (your app) using the client ID and secret, then verifies that the requested scopes are permitted.</p><h3 class="heading-anchor-text" id="step-3-user-grants-app-access-to-their-spotify-data"><span>Step 3: User grants app access to their Spotify data</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#step-3-user-grants-app-access-to-their-spotify-data">#</a></h3><p>After step 2, the user is redirected to a page on the Spotify authorization server where they can grant the app access to their Spotify account. In our case, the user will have been sent to a page that belongs to the Spotify accounts service (note the <code>accounts.spotify.com</code> URL in the screenshot below), where they can log in to Spotify.</p><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210725023523848_oauth-page.png" attachmentid="ef5bd132-a707-4f24-a468-a302dff8266c" contenteditable="false" data-width="1600" data-height="1192"><div></div></figure><h3 class="heading-anchor-text" id="step-4-client-receives-access-token-from-spotify"><span>Step 4: Client receives access token from Spotify</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#step-4-client-receives-access-token-from-spotify">#</a></h3><p>Once the user grants access by logging into Spotify, the authorization server redirects the user back to the client (your app) with an access token. Sometimes, a refresh token is also returned with the access token.</p><h3 class="heading-anchor-text" id="step-5-client-uses-access-token-to-request-data-from-spotify"><span>Step 5: Client uses access token to request data from Spotify</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#step-5-client-uses-access-token-to-request-data-from-spotify">#</a></h3><p>Finally, the client can use the access token to access resources from the resource server (the Spotify API).</p><p></p><h2 class="heading-anchor-text" id="summing-it-up"><span>Summing It Up</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#summing-it-up">#</a></h2><p>If all of this feels like a lot, don't worry, it's because it is! OAuth is super tricky, but for a good reason — security! All you really need to remember is this:</p><div data-panel-type="info" data-panel-position="inline" class="panel panel-type-info panel-position-inline"><div class="panel-container lolwut"><p>OAuth is an <strong>authorization protocol</strong> that lets you approve one application interacting with another on your behalf without giving away sensitive user credentials like your username and password. Instead, it uses <strong>access tokens</strong> to ensure an application is authorized.</p></div></div><p>The five basic steps of the Spotify OAuth flow:</p><ol><li><p>Client requests authorization to access data from Spotify</p></li><li><p>Spotify authorizes access to client</p></li><li><p>User grants app access their Spotify data</p></li><li><p>Client receives access token from Spotify</p></li><li><p>Client uses access token to request data from Spotify</p></li></ol><figure class="photo figure-position-inline"><img src="https://s3.amazonaws.com/assets.fullstack.io/n/20210725023634345_oauth-flow.png" attachmentid="3a93d417-e532-4952-b4a9-87c24a2e1fcd" contenteditable="false" data-width="1700" data-height="1170"><div></div></figure><p></p><h2 class="heading-anchor-text" id="next-steps"><span>Next Steps</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#next-steps">#</a></h2><p>Try out implementing <a href="https://developer.spotify.com/documentation/general/guides/authorization-guide/#authorization-code-flow" rel="noopener noreferrer nofollow">Spotify’s OAuth flow</a> yourself! It’s not as daunting as you might think — the documentation describes everything you need to implement the flow.</p><h3 class="heading-anchor-text" id="coming-soon"><span>Coming Soon!</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#coming-soon">#</a></h3><p>Be sure to check out our new course being released soon, <strong>Build a Spotify Connected App</strong>, where we apply these concepts to build a real-world, full stack web app!</p><h2 class="heading-anchor-text" id="sources"><span>Sources</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#sources">#</a></h2><ul><li><p><a href="https://oauth.net/articles/authentication/" rel="noopener noreferrer nofollow">https://oauth.net/articles/authentication/</a></p></li><li><p><a href="https://www.varonis.com/blog/what-is-oauth/" rel="noopener noreferrer nofollow">https://www.varonis.com/blog/what-is-oauth/</a></p></li><li><p><a href="https://developer.okta.com/blog/2017/06/21/what-the-heck-is-oauth" rel="noopener noreferrer nofollow">https://developer.okta.com/blog/2017/06/21/what-the-heck-is-oauth</a></p></li><li><p><a href="https://auth0.com/intro-to-iam/what-is-oauth-2/#principles-of-oauth20" rel="noopener noreferrer nofollow">https://auth0.com/intro-to-iam/what-is-oauth-2/#principles-of-oauth20</a></p></li><li><p><a href="https://www.csoonline.com/article/3216404/what-is-oauth-how-the-open-authorization-framework-works.html" rel="noopener noreferrer nofollow">https://www.csoonline.com/article/3216404/what-is-oauth-how-the-open-authorization-framework-works.html</a></p></li><li><p><a href="https://developer.spotify.com/documentation/general/guides/authorization-guide/" rel="noopener noreferrer nofollow">https://developer.spotify.com/documentation/general/guides/authorization-guide/</a></p></li></ul><p></p><p></p><p></p>

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Breaking Down OAuth with Spotify

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript