0

Whenever I am trying to invoke the "btoa" method, I am not able to use this within my script. I created a variable to store the client id: client_secret in base64. The id and secrets are being retrieved from the ".env" file. I have also tried to use the Buffer method, but unable to use this as well. I am getting the error "invalid from" in Buffer.

can someone help me?

Please look at the full code,

const client_id = process.env.SPOTIFY_CLIENT_ID;
const client_secret = process.env.SPOTIFY_CLIENT_SECRET;
const refresh_token = process.env.SPOTIFY_REFRESH_TOKEN;

const basic = btoa(`${client_id}:${client_secret}`);
const NOW_PLAYING_ENDPOINT = `https://api.spotify.com/v1/me/player/currently-playing`;
const TOP_TRACKS_ENDPOINT = `https://api.spotify.com/v1/me/top/tracks`;
const TOKEN_ENDPOINT = `https://accounts.spotify.com/api/token`;

const getAccessToken = async () => {
  const response = await fetch(TOKEN_ENDPOINT, {
    method: 'POST',
    headers: {
      Authorization: `Basic ${basic}`,
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    body: new URLSearchParams({
      grant_type: 'refresh_token',
      refresh_token
    })
  });

  return response.json();
};

export const getNowPlaying = async () => {
  const { access_token } = await getAccessToken();

  return fetch(NOW_PLAYING_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  });
};

export const getTopTracks = async () => {
  const { access_token } = await getAccessToken();

  return fetch(TOP_TRACKS_ENDPOINT, {
    headers: {
      Authorization: `Bearer ${access_token}`
    }
  });
};

Using the above script I am trying to embed the customized Spotify play on my site. This wrapper is intended to display the top track as well.

Also, whenever I am trying to run the wrapper used to display the top tracks, it displays the following error,

enter image description here

Full code for displaying the top tracks:


import { type NextRequest } from 'next/server';
import { getTopTracks } from 'lib/spotify';

export const config = {
  runtime: 'experimental-edge'
};

export default async function handler(req: NextRequest) {
  const response = await getTopTracks();
  const { items } = await response.json();

  const tracks = items.slice(0, 10).map((track) => ({
    artist: track.artists.map((_artist) => _artist.name).join(', '),
    songUrl: track.external_urls.spotify,
    title: track.name
  }));

  return new Response(JSON.stringify({ tracks }), {
    status: 200,
    headers: {
      'content-type': 'application/json',
      'cache-control': 'public, s-maxage=86400, stale-while-revalidate=43200'
    }
  });
}
juliomalves
  • 42,130
  • 20
  • 150
  • 146
codewithdev
  • 46
  • 7
  • 3
    PLEASE be careful with your spelling. The API is `btoa`, not `btao`. The name stands for "bytes to ASCII". And you haven't told us what actually DOES happen when you use this. Did you print the value of `basic` to see what you get? And who do you think is substituting those `${...}` strings? – Tim Roberts Aug 06 '22 at 19:01
  • 2
    Yeah, please include the line of code you try to run followed by a comment detailing the error logged. Do this for both variants (btoa and Buffer.from(str).toString('base64') – dasfacc Aug 06 '22 at 19:04
  • Thanks @TimRoberts I have updated the question title. But still I am using the same API and it is getting struck. – codewithdev Aug 06 '22 at 21:50

1 Answers1

-1

The problem is that you misspelled the Bytes to ASCII function, it is btoa, not btao.

If you are looking to do it the other way around, spell it atob.

TypicalOOFers
  • 1
  • 1