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: How to Fetch Spotify API Data with Credentials with Axios
description: Use axios to send a request to the Spotify Web API and render response data on the front end
privateVideoUrl: https://fullstack.wistia.com/medias/5se3ognr4s
isPublicLesson: true
code: https://gitlab.com/fullstackio/books/newline-course-apps/brittany-chiang-build-a-spotify-connected-app-app/-/tree/main/code/module_05/lesson_05.02/protected/src
---

Now that we've set up local storage, to keep our users "logged in" to Spotify in our app, let's try using the access token from local storage to fetch data from the Spotify API, and display it on the front end.

In this lesson, we'll update our React app to asynchronously fetch Spotify data in a `useEffect` hook and display that data in our template.

## Adding a function to fetch Spotify profile data

First, let's add some global axios defaults to our `spotify.js` file.

```js { actualFilename=./protected/src/client/spotify.js endLine=126 startLine=120 statedFilename=client/src/spotify.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.02/protected/src/client/spotify.js#L120 }
/**
 * Axios global request headers
 * https://github.com/axios/axios#global-axios-defaults
 */
axios.defaults.baseURL = 'https://api.spotify.com/v1';
axios.defaults.headers['Authorization'] = `Bearer ${accessToken}`;
axios.defaults.headers['Content-Type'] = 'application/json';
```

In the snippet above, we set the base URL and the HTTP request headers for every HTTP request we make with axios. These configs are super convenient for keeping our code clean — we won't have to worry about including them each time we make a request with axios. Note that the `accessToken` in the Authorization header is the OAuth access token we retrieved from local storage.

Next, we'll add a function that makes a `GET` request to the `https://api.spotify.com/v1/me` endpoint to get the current logged-in user's profile.

```js { actualFilename=./protected/src/client/spotify.js endLine=133 startLine=128 statedFilename=client/src/spotify.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.02/protected/src/client/spotify.js#L128 }
/**
 * Get Current User's Profile
 * https://developer.spotify.com/documentation/web-api/reference/#endpoint-get-current-users-profile
 * @returns {Promise}
 */
export const getCurrentUserProfile = () => axios.get('/me');
```

Note that since we set the base URL globally, the URL we use for our axios request only needs to be `/me`, not `https://api.spotify.com/v1/me`.

## Fetching and setting async data in useEffect

In our `App.js` file, we can then import the `getCurrentUserProfile()` function from our spotify.js file and add a `useState` hook to keep track of the data it returns.

```js { actualFilename=./protected/src/client/01/App.js endLine=22 startLine=1 statedFilename=client/src/App.js url=https&#x3A;//gitlab.com/fullstackio/books/build-a-spotify-connected-app/module_05/lesson_05.02/protected/src/client/01/App.js }
import { useState, useEffect } from 'react';
import { accessToken, logout, getCurrentUserProfile } from './spotify';
import './App.css';

Use axios to send a request to the Spotify Web API and render response data on the front end