Once this package is installed, let’s use it in App.js. So let’s open a new terminal and type the following command to install the package. To use that, we need to install a package. Now we are going to use the Spotify Web API to get all the details we need from Spotify. Then while rendering, we are checking if a token exists, if one exists, that means the user is logged in and should be shown a player, which we will make soon, or else the person should see the login screen.

We are setting the state with the token in it.It’s always a good practice to hide access tokens.

For security purposes, we reset the URL bar to NOT show the access token so that only the app knows the access token.

We have used the getTokenFromUrl function which we made in our Spotify Configuration file.

We have used an useEffect block so that the set of code runs only once the page is loaded.

So, your code should now look at this and should link to the loginUrl. Now let’s bring this loginUrl into our Login component so that we can enable our users to Login through the app. This URL contains the Client ID and all the permissions so that Spotify knows about our app and allows user authentication.

The loginUrl is the final URL which needs to be called in order to authorize an user for our Spotify Clone app.

More such permissions are available on Spotify API Documentation.

scopes are basically permissions which you need to ask Spotify for.

The clientId is the Client ID provided to you by the Spotify Web API and you need to mention it here.

The redirectUri is the one which we gave in the Spotify Web API settings, this states where to take back the user if the Spotify login was successful.

All Spotify Authentication requests must be passed through this URL.

The authEndpoint is the URL where we need to authenticate using Spotify.

Here’s the logic behind the Spotify configuration file: If you see this, we are ready to move on.

You know that it is finished when you see “Happy Hacking” on your terminal. create-react-app is the name of the remote script and “.” specifies that we want the script to make a React project in the SAME FOLDER and not make a new folder for it, if you had to make a new folder name, you could just provide the name of folder instead of “.” and it would make a folder for you. This is done so that you always have the latest version of React installed in your project. npx is a part of npm (Node Package Manager) except npx runs a remote script instead of installing it locally. This will take time so till then you can read what the script actually does below. To use this script, just type the following in the terminal and press Enter. So Facebook, the creator of React made a script which installs and sets up React for you without any type of headache. And this is usually a headache when doing manually. Now that you’re in the terminal, we can now install and setup React app.

Web player spotify login