Have you ever been curious to see what your Spotify data looks like? How a round-up of your listening habits gets compiled every year? Or even wanted to see metadata of your favorite tracks? Luckily, Spotify makes a ton of interesting data like this accessible via the Spotify API. For example, there is data available for every users’ [top tracks and artists](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-users-top-artists-and-tracks) of all time and [audio features](https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-several-audio-features) like danceability and tempo for every single track.

## Why this course

If you're interested in accessing personalized Spotify data like we mentioned above, Spotify requires your app to be authorized. And to get authorization, you'll need to implement something called OAuth. This course will walk you through every step of the OAuth flow in a concise, easy to follow way. Unlike YouTube tutorials that only cover a few concepts and leave you with half-baked GitHub repositories, we'll cover everything from explaining what REST APIs are to implementing Spotify's OAuth flow to fetching data from the Spotify API in React hooks. Split into seven modules, each lesson includes clear, detailed explanations and complete code examples. By the end of the course, you'll have an app deployed to the internet that you can share with your friends and add to your portfolio.

## What we’ll build

**On the front end**, we’ll build out a professional, responsive user interface with [React](https://reactjs.org/), React Hooks, and the popular CSS-in-JS library, [Styled Components](https://styled-components.com/). We’ll pull in data from the Spotify API using modern ES6 [async/await](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await) methods and display that data in an engaging way.

**On the back end**, we’ll learn the basics of [REST APIs](https://en.wikipedia.org/wiki/Representational_state_transfer), [HTTP requests](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods), and [OAuth](https://oauth.net/). We'll lift the veil on how to [authorize an app with Spotify](https://developer.spotify.com/documentation/general/guides/authorization-guide/), and then build a Node server with the [Express framework](https://expressjs.com/) to handle our authentication requests. Finally, we’ll deploy our app to the internet using [Heroku](https://www.heroku.com/).

![Top Artists](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-1.png)

![Top Tracks](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-2.png)

![Playlist tracks sorted by tempo](https://d2uusema5elisf.cloudfront.net/courses/build-a-spotify-connected-app/module_00/lesson_00.00/public/assets/screenshot-3.png)

Learn how to build a full stack web app to visualize personalized Spotify data with the help of Node.js, React, Styled Components, and the Spotify Web API.

Build a Spotify Connected App

---
title: What is OAuth and How Does it Work? [with examples]
description: Learn how OAuth works and how it will work with the Spotify API
privateVideoUrl: https://fullstack.wistia.com/medias/gj2njlhn5v
isPublicLesson: true
---

We're planning on building an app where a user can log in to Spotify and give us access to their user data through the Spotify API. We'll need to use something called **OAuth** to do that.

## What is OAuth and why do we need it?

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

Instead of passing user credentials from app to app, OAuth lets you pass authorization between apps over HTTPS with **access tokens** (kind of like a special code).

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 our app to access their Spotify account data, we won't be storing their username or password anywhere. We don't want to be responsible for sensitive information like this, so instead, we'll rely on the secure OAuth protocol to take care of the authorization flow with access tokens.

As you'll learn below, the OAuth authorization flow is a bit tricky. It requires some back and forth between client and server to be completely secure, but never fear! We'll go through how to handle this with our Node server step-by-step. First, let's try to grasp the OAuth flow.

## Authorization, not authentication

When trying to understand OAuth, it's important to remember that it's about **authorization**, not authentication.

**Authorization** is asking for permission to do things. **Authentication** 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 **authorized**.

## Roles

Since OAuth is a way to authorize an app without giving away your username and password, you can picture it like a series of handshakes. 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.

There are four main **roles** that need to "shake hands" to get that token.

-   **Resource Server:** The API which stores data the application wants to access _(Spotify API)_
-   **Resource Owner:** Owns the data in the resource server _(the user who wants to log into our app with Spotify is the owner of their Spotify account)_
-   **Client:** The application that wants to access your data _(our app)_
-   **Authorization Server:** The server that receives requests from the client for access tokens and issues them upon successful authentication and consent by the resource owner _(Spotify Accounts Service)_

## Scopes

In addition to these four roles, there is also the concept of **scopes** 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 (in our case, 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 `user-read-private` scope is for read access to a user's subscription details and is required if you want to access the `https://api.spotify.com/v1/me` endpoint to get the currently logged-in user's profile information. There is also a scope called `playlist-modify-private` 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.

Learn how OAuth works and how it will work with the Spotify API