Getting Token From Spotify API

To get a token from the Spotify API, you will need to follow these steps:
- Go to the Spotify Developer website (developer.spotify.com) and sign up for a developer account.
- After you have created your developer account, you will need to create a new Spotify app. To do this, go to the "My Dashboard" section of the developer website and click the "Create an App" button.
- Follow the prompts to create a new Spotify app, including providing a name and description for your app.
- Once your app is created, you will be given a client ID and a client secret. These are the keys that will be used to authenticate your app and allow it to access the Spotify API.
- To get a token, you will need to use the client ID and client secret to authenticate your app and request a token. You can do this using the OAuth 2.0 authorization framework, which requires you to redirect the user to a Spotify login page and then handle the response from Spotify.
- Once you have received a token, you can use it to make authorized requests to the Spotify API on behalf of the user. Note that tokens have a limited lifespan and will need to be refreshed periodically.
  
  spotify.js
  
  Documentation
- Replace the client Id and redirectUri.
```
  //Spotify OAuth

  const authEndpoint = "https://accounts.spotify.com/authorize";
  const clientId = "your cliend Id";
  const redirectUri = "http://localhost:3000/";//your redirect url
  const scopes = [
    "user-read-currently-playing",
    "user-read-recently-played",
    "user-read-playback-state",
    "user-top-read",
    "user-modify-playback-state",
  ];
  export const getTokenFromUrl = () =>{
      return window.location.hash.substring(1).split('&').reduce( (initial,item) =>{
          var parts = item.split("=");
          initial[parts[0]] = decodeURIComponent(parts[1]);
          return initial;
      },{})
  }
  export const loginUrl = `${authEndpoint}?client_id=${clientId}&redirect_uri=${redirectUri}&scope=${scopes.join(
    "%20"
  )}&response_type=token&show_dialog=true`;
```
  App.js

The App Component looks like this.

  import React,{useEffect,useState} from 'react';
  import './App.css';
  import Login from './Login';
  import { getTokenFromUrl } from './spotify';
  import Player from './Player';
  function App() {
    const [token,setToken] = useState(null);
    useEffect(() =>{
      const hash = getTokenFromUrl();
      window.location.hash = "";
      const _token = hash.access_token;
      if(_token){
        setToken(_token);
        spotify.setAccessToken(_token);
      }
    },[]);
    return (
      <div className="App">
       { token ?<Player/> : <Login/>}
      </div>
    );
  }
  export default App;

Getting Token From Spotify API

spotify.js

App.js