Getting an access token for a React app from the Spotify API using Node.js and Axios

spotify-axios-basic-auth.js

import axios from 'axios';
import qs from 'qs';

export const getAuth = async () => {
  const clientId = process.env.REACT_APP_BASIC_CLIENT_ID;
  const clientSecret = process.env.REACT_APP_BASIC_CLIENT_SECRET;
  
  const headers = {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    auth: {
      username: clientId,
      password: clientSecret,
    },
  };
  const data = {
    grant_type: 'client_credentials',
  };

  try {
    const response = await axios.post(
      'https://accounts.spotify.com/api/token',
      qs.stringify(data),
      headers
    );
    console.log(response.data.access_token);
    return response.data.access_token;
  } catch (error) {
    console.log(error);
  }
};

This saved my life. Thanks!

Thanks for the solution, Really helpful!

Thanks, helped me a lot!

Thanks, this helped!

Thanks for saving my time and also i don't think we need stringify for the small part we can also use {data: 'grant_type=client_credentials'}

Thank you so much for posting this! I spent so much time getting it to work and couldn't, your code helped me get it to work in literally one try!

Thanks! This is the format I was using for my Axios request - despite it working for others in the past, I kept getting 400 errors!

axios({
          url: 'https://accounts.spotify.com/api/token',
          method: 'post',
          params: {
            grant_type: 'client_credentials'
          },
          headers: {
            'Accept':'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          auth: {
            username: clientId,
            password: clientSecret
          }
      })

Thank you soo much !!

Amazing, thanks!

As of September, 2021, this code didn't work for me.

Remove auth and add BASE64_ENCODED_AUTH_CODE to put it into Authorization in headers.
It worked well for me.

import axios from 'axios';
import qs from 'qs';

export const getAuth = async () => {
  const BASE64_ENCODED_AUTH_CODE = "<your BASE64-Encoded Client ID/Client Secret >";
  const headers = {
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded',
      Authorization: `Basic ${BASE64_ENCODED_AUTH_CODE}`
    }
  };
  const data = {
    grant_type: 'client_credentials',
  };

  try {
    const response = await axios.post(
      'https://accounts.spotify.com/api/token',
      qs.stringify(data),
      headers
    );
    console.log(response.data.access_token);
    return response.data.access_token;
  } catch (error) {
    console.log(error);
  }
};

Thanks! :)

I ran into the problem where querystring has been deprecated so learned to use URLSearchParams. This code snippet also uses the grant type refresh_token. This was what worked for me, remember to return response.data.access_token if needed. Hope this helps someone

const getAccessToken = async () => {
    const basic = Buffer.from(`${client_id}:${client_secret}`).toString("base64");
    
    // header paremeter
    const config = {
      headers: {
        Authorization: `Basic ${basic}`,
        "Content-Type": "application/x-www-form-urlencoded",
      }
    }
    
    // request body parameter
    const data = new URLSearchParams([
      ['grant_type', 'refresh_token'],
      ['refresh_token',refresh_token]
    ]).toString()

    const response = await axios.post(TOKEN_ENDPOINT, data, config)
    return response.data;
};

That worked. Thanks

thank you ! saved me big time

Thanks, the code all the way to the top still works for 2024! Happy Debugging!