Writing a Custom React Hook for Spotify's Web API (Implicit Grant Flow)

As one of the most popular music streaming services, 

 encourages developers to craft new and engaging experiences for music lovers around the world. With over seventy endpoints, 

 allows external applications to access Spotify's vast catalog of albums, artists, playlists, tracks and podcasts and detailed profile information about the current authorized user. All of this data opens the door to building applications that explore and analyze the data, generate new insights from the data or present the data in exciting new ways.

Want to discover new artists based on the artists of the tracks in your playlists? Use the 

GET https://api.spotify.com/v1/artists/{artist_id}/related-artists

 endpoint to fetch artists related to an artist based on the analysis of other users' listening histories. Want to re-imagine the user interface for searching and displaying tracks that match a query? Use the 

 endpoint to query and retrieve results from Spotify's tracks catalog.

If you decide to create a Spotify-connected application with 

, then centralizing all Spotify-related logic inside of a single, reusable custom hook, named 

, eases the integration of Spotify into the application. This organizes everything Spotify-related in one place. For a component to communicate with Spotify's Web API, just import the 

 hook and call the hook within the component. Whenever Spotify updates its API with new endpoints or modified response objects, you edit one single file in the codebase: 

. The hook enables all components to get the authorization status of the user and interact with Spotify's Web API.

Imagine building a dashboard that features a view for searching tracks from Spotify's catalog, a view for managing the current authorized user's saved albums and tracks, etc.

 to support this type of application, it must handle:

To begin, let's briefly recap React hooks and how they work. 

 provide us a way to reuse stateful logic. When multiple components use the same hook, the state within the hook is not shared by those components. Therefore, we will need a 

 to wrap the application and make the hook's object available to any child component that calls the hook with context. 

Anytime the user decides to "log in" or "log out" (represented as having or not having a valid access token respectively), the changes to the hook's state will cause those components to re-render.

Here's the base template of the hook, which exports the provider component 

 and a hook that returns the current context value, which comes from the object passed to the 

import { createContext, useContext } from "react";

const spotifyContext = createContext();

export const SpotifyProvider = ({ children }) => {
  const spotify = useProvideSpotify();

  return (
    <spotifyContext.Provider value={spotify}>
      {children}
    </spotifyContext.Provider>
  );
};

export const useSpotify = () => {
  return useContext(spotifyContext);
};

const useProvideSpotify = () => {
  return {};
};

All of the Spotify-related logic will reside within the 

 object that's fed to the provider component, exposes methods for working with Spotify's Web API and manages state variables like 

Authorization with the Implicit Grant Flow

To obtain authorization, the hook will implement methods for facilitating the 

. Although the Implicit Grant Flow does not provide a refresh token, it requires only the client-side application to carry out the entire authorization flow. No additional backend code needed!

Upon being granted authorization, Spotify issues a short-lived access token that expire within 3600 seconds (1 hour). Once the token expires and is no longer valid, you must complete the entire flow again to obtain a new access token.

 method that opens a popup that prompts the user to...

Upon authorization, the user is redirected to the redirect URI (e.g. 

) within the popup. The redirect URI contains a hash fragment with the access token, its type, its expiration time period and state (e.g. 

http://localhost:3000/callback#access_token=xxxx&expires_in=3600&token_type=Bearer&state=xxxx

) encoded as a query string. When this page loads and its component is mounted, extract the access token and its metadata from the query string and store the token and its expiration timestamp in local storage. Then, call the main window's 

 method, which was registered back in the 

 method, to close the popup and update the hook's state with these values.

const [token, setToken] = useState(null);
const [tokenExp, setTokenExp] = useState(null);

const storeTokenAtRedirect = () => {
  const searchParams = new URLSearchParams(window.location.hash.substring(1));

  try {
    const accessToken = searchParams.get("access_token");
    const expiresIn = parseInt(searchParams.get("expires_in"), 10);
    const tokenType = searchParams.get("token_type");

    const expTimestamp = Math.floor(Date.now() / 1000 + expiresIn); // In seconds.

    window.localStorage.setItem(LS_KEYS.ACCESS_TOKEN, accessToken);
    window.localStorage.setItem(LS_KEYS.EXP_TIMESTAMP, expTimestamp);
    window.localStorage.setItem(LS_KEYS.TOKEN_TYPE, tokenType);

    window.opener.spotifyAuthCallback(accessToken, expTimestamp);
  } catch (err) {
    console.error(err);

    throw new Error(`Could not store token information in local storage.`);
  }
};

By storing the token in local storage, we don't need to constantly ask the user to re-authorize themself if they decide to close the browser, reopen it and revisit the application less than an hour later. And, if the user does revisit the application more than an hour later, then knowing the expiration timestamp makes it possible to invalidate the token and ask agains for authorization.

: Any value stored in local storage is stringified and must be converted back to its appropriate typing.

: Yes, it's not recommended to store access tokens in local storage due to cross-site scripting (XSS) and possibly being read by malicious JavaScript code. Only do this for demos. For production-grade applications, I recommend going with a 

 (one that involves the server-side and setting the token within an HTTP-only cookie). 

Anytime the user decides to "log out," invalidate the token and reload the page so that it automatically redirects them to the homepage.

const logout = () => {
  invalidateToken();

  window.location.reload();
};

To restrict the redirect URL to only be visited within the popup by Spotify, let's write a method to check whether the redirect occurs within a "valid" popup that originated from the application itself.

 instance to verify its length is at least two (one entry for Spotify, the other for the redirect).

Once the token and expiration timestamp state variables are updated, the hook should automatically fetch the current authorized user's information from Spotify and update the state with this information.

const [user, setUser] = useState(null);

const loadCurrentUser = async () => {
  try {
    const user = await fetchCurrentUserInfo();

    setUser(user);
  } catch (err) {
    console.error(err);

    history.push("/");
  }
};

useEffect(() => {
  if (!user && token && tokenExp) {
    loadCurrentUser();
  }
}, [token, tokenExp, user]);

For the user to be considered "logged in," the hook's state must the token and user's information, and the token cannot be expired.

const hasLoggedIn = () => {
  return !!token && !!user && !hasTokenExpired();
};

To get data from Spotify's Web API, define a method for each endpoint. For this hook, we will only define two methods: one for the 

Any request sent to the API must have the access token added to its 

 header to allow Spotify to identify the user and know that the requesting application has permission from the user to access to their data.

 method serves as a helper method that keeps the endpoint methods' definitions DRY. 

For more endpoints, visit Spotify's Web API reference 

When the user performs a full-page refresh of the application, it takes time for the application to fetch the user's information. The hook should provide a flag that notifies components when the application is "loading" so that they can present a loading indicator to the user.

The application is in a loading state when the hook is initialized, and it is finished loading when it has successfully (or unsuccessfully) fetched the user's information from Spotify.

const [isLoading, setIsLoading] = useState(true);

useEffect(() => {
  try {
    const accessToken = window.localStorage.getItem(LS_KEYS.ACCESS_TOKEN);
    const expTimestamp = parseInt(
      window.localStorage.getItem(LS_KEYS.EXP_TIMESTAMP),
      10
    );

    if (accessToken && expTimestamp && Number.isInteger(expTimestamp)) {
      setToken(accessToken);
      setTokenExp(expTimestamp);
    } else {
      setIsLoading(false);
    }
  } catch (err) {
    console.error(err);

    setIsLoading(false);
  }
}, []);

useEffect(() => {
  if (token && tokenExp) {
    if (!user) {
      loadCurrentUser();
    } else {
      setIsLoading(false);
    }
  }
}, [token, tokenExp, user]);

The hook will expose the following state variables and methods to child components that call it:

return {
  user,
  login,
  logout,
  isLoading,
  get hasLoggedIn() {
    return hasLoggedIn();
  },
  get hasRedirectedFromValidPopup() {
    return hasRedirectedFromValidPopup();
  },
  storeTokenAtRedirect,
  fetchCurrentUserInfo,
  fetchSearchResults,
};

Using getters allows the component to reference the method call like a flag. So instead of calling 

export const generateState = (length) => {
  let text = "";

  const possible =
    "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (let i = 0; i < length; i++) {
    text += possible.charAt(Math.floor(Math.random() * possible.length));
  }

  return text;
};

export const buildQueryString = (queryParams) => {
  return Object.keys(queryParams)
    .filter((key) => {
      const value = queryParams[key];

      return typeof value !== "undefined" && value !== null;
    })
    .map((key) => {
      const value = queryParams[key];

      if (Array.isArray(value)) {
        return value
          .map((valueItem) => `${key}=${encodeURIComponent(valueItem)}`)
          .join("&");
      }

      return `${key}=${encodeURIComponent(value)}`;
    })
    .join("&");
};

REACT_APP_SPOTIFY_CLIENT_ID="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx";
REACT_APP_SPOTIFY_REDIRECT_URI="http://localhost:3000/callback/";
REACT_APP_SPOTIFY_SCOPES="user-read-private user-read-email";

import { createContext, useContext, useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { buildQueryString, generateState } from "../utils/spotify";

const { REACT_APP_SPOTIFY_CLIENT_ID, REACT_APP_SPOTIFY_REDIRECT_URI, REACT_APP_SPOTIFY_SCOPES } = process.env;

const BASE_API_URL = "https://api.spotify.com/v1";

const LS_KEYS = {
  ACCESS_TOKEN: "SPOTIFY_ACCESS_TOKEN",
  EXP_TIMESTAMP: "SPOTIFY_TOKEN_EXPIRE_TIMESTAMP",
  TOKEN_TYPE: "SPOTIFY_TOKEN_TYPE",
};

const spotifyContext = createContext();

export const SpotifyProvider = ({ children }) => {
  const spotify = useProvideSpotify();

  return (
    <spotifyContext.Provider value={spotify}>
      {children}
    </spotifyContext.Provider>
  );
};

export const useSpotify = () => {
  return useContext(spotifyContext);
};

const useProvideSpotify = () => {
  const [isLoading, setIsLoading] = useState(true);
  const [user, setUser] = useState(null);
  const [token, setToken] = useState(null);
  const [tokenExp, setTokenExp] = useState(null);

  const history = useHistory();

  const callEndpoint = async ({ path, method = "GET" }) => {
    if (hasTokenExpired()) {
      invalidateToken();

      throw new Error("Token has expired.");
    }

    return await (
      await fetch(`${BASE_API_URL}${path}`, {
        headers: {
          Authorization: `Bearer ${token}`,
        },
        method,
      })
    ).json();
  };

  const fetchCurrentUserInfo = async () => {
    return await callEndpoint({ path: "/me", token });
  };

  const fetchSearchResults = async ({
    query,
    type = "album,artist,playlist,track,show,episode",
    limit = 20,
  }) => {
    const qs = buildQueryString({
      q: query,
      type,
      limit,
    });

    return await callEndpoint({ path: `/search?${qs}`, token });
  };

  const login = () => {
    const popup = window.open(
      `https://accounts.spotify.com/authorize?client_id=${REACT_APP_SPOTIFY_CLIENT_ID}&redirect_uri=${encodeURIComponent(
        REACT_APP_SPOTIFY_REDIRECT_URI
      )}&scope=${encodeURIComponent(
        REACT_APP_SPOTIFY_SCOPES
      )}&response_type=token&state=${generateState(16)}&show_dialog=true`,
      "Login with Spotify",
      "width=600,height=800"
    );

    window.spotifyAuthCallback = async (accessToken, expTimestamp) => {
      popup.close();

      setToken(accessToken);
      setTokenExp(expTimestamp);
    };
  };

  const storeTokenAtRedirect = () => {
    const searchParams = new URLSearchParams(window.location.hash.substring(1));

    try {
      const accessToken = searchParams.get("access_token");
      const expiresIn = parseInt(searchParams.get("expires_in"), 10);
      const tokenType = searchParams.get("token_type");

      const expTimestamp = Math.floor(Date.now() / 1000 + expiresIn); // In seconds.

      window.localStorage.setItem(LS_KEYS.ACCESS_TOKEN, accessToken);
      window.localStorage.setItem(LS_KEYS.EXP_TIMESTAMP, expTimestamp);
      window.localStorage.setItem(LS_KEYS.TOKEN_TYPE, tokenType);

      window.opener.spotifyAuthCallback(accessToken, expTimestamp);
    } catch (err) {
      console.error(err);

      throw new Error(`Could not store token information in local storage.`);
    }
  };

  const invalidateToken = () => {
    try {
      Object.values(LS_KEYS).forEach((key) => {
        window.localStorage.removeItem(key);
      });
    } catch (err) {
      console.error(err);
    }

    setUser(null);
    setToken(null);
    setTokenExp(null);
  };

  const logout = () => {
    invalidateToken();

    window.location.reload();
  };

  const hasTokenExpired = () => {
    try {
      const accessToken =
        token || window.localStorage.getItem(LS_KEYS.ACCESS_TOKEN);
      const expTimestamp =
        tokenExp ||
        parseInt(window.localStorage.getItem(LS_KEYS.EXP_TIMESTAMP), 10);

      if (!accessToken || !expTimestamp || isNaN(expTimestamp)) {
        return false;
      }

      return Date.now() / 1000 > expTimestamp;
    } catch (err) {
      console.error(err);

      return true;
    }
  };

  const hasLoggedIn = () => {
    return !!token && !!user && !hasTokenExpired();
  };

  const hasRedirectedFromValidPopup = () => {
    if (window.opener === null) {
      return false;
    }

    const { hostname: openerHostname } = new URL(window.opener.location.href);
    const { hostname } = new URL(window.location.href);

    return (
      window.opener &&
      window.opener !== window &&
      !!window.opener.spotifyAuthCallback &&
      openerHostname === hostname &&
      history.length >= 2
    );
  };

  const loadCurrentUser = async () => {
    try {
      const user = await fetchCurrentUserInfo();

      setUser(user);
    } catch (err) {
      console.error(err);

      history.push("/");
    }
  };

  useEffect(() => {
    try {
      const accessToken = window.localStorage.getItem(LS_KEYS.ACCESS_TOKEN);
      const expTimestamp = parseInt(
        window.localStorage.getItem(LS_KEYS.EXP_TIMESTAMP),
        10
      );

      if (accessToken && expTimestamp && Number.isInteger(expTimestamp)) {
        setToken(accessToken);
        setTokenExp(expTimestamp);
      } else {
        setIsLoading(false);
      }
    } catch (err) {
      console.error(err);

      setIsLoading(false);
    }
  }, []);

  useEffect(() => {
    if (token && tokenExp) {
      if (!user) {
        loadCurrentUser();
      } else {
        setIsLoading(false);
      }
    }
  }, [token, tokenExp, user]);

  return {
    user,
    login,
    logout,
    isLoading,
    get hasLoggedIn() {
      return hasLoggedIn();
    },
    get hasRedirectedFromValidPopup() {
      return hasRedirectedFromValidPopup();
    },
    storeTokenAtRedirect,
    fetchCurrentUserInfo,
    fetchSearchResults,
  };
};

Want to see how this hook works in an actual application? Clone the demo application 

Try using this hook for your next Spotify-connected application!

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Writing a Custom React Hook for Spotify's Web API (Implicit Grant Flow)

Tags

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript