Trouble with displaying public artist info on NextJS/Typescript App

[rickyhaswifi]

Plan

Free/Premium

Country

Device

(iPhone 8, Samsung Galaxy 9, Macbook Pro late 2016)

Operating System

(iOS 10, Android Oreo, Windows 10,etc.)

My Question or Issue

I'm trying to display a list of artist albums by artist ID - with this code snippet & a client ID from the dashboard, I keep getting 401 errors. Not sure what I am doing wrong. 

I don't need users to login, just display public information of all albums from an artist ID

 

import React, { useEffect, useState } from "react";
import SpotifyWebApi from "spotify-web-api-js";

const spotifyApi = new SpotifyWebApi();

interface ArtistInfoProps {
  clientId: string;
  artistId: string;
}

const ArtistInfo: React.FC<ArtistInfoProps> = ({ clientId, artistId }) => {
  const [artist, setArtist] = useState<any>();

  useEffect(() => {
    // Initialize the Spotify API client with your client ID
    spotifyApi.setAccessToken(clientId);

    // Fetch artist information
    spotifyApi
      .getArtist(artistId)
      .then((data) => {
        setArtist(data);
      })
      .catch((error) => {
        console.error("Error fetching artist information:", error);
      });
  }, [clientId, artistId]);
  console.log(artist);
  return (
    <div>
      {artist && (
        <div>
          <h2>{artist.name}</h2>
          <p>Followers: {artist.followers.total}</p>
          {/* Add more artist information as needed */}
        </div>
      )}
    </div>
  );
};

export default ArtistInfo;
​

[Ximzend]

https://developer.spotify.com/documentation/web-api/tutorials/client-credentials-flow