Authentication

Authentication Methods

• Authorization Code Flow with PKCE
• Client Credentials Flow
• Implicit Grant Flow
• Mixed Server and Client Side Authentication

We do auto-token refresh when expired and a refresh token is available.

Picking an Authentication Method

If you’re building a browser based application, you should use Authorization Code Flow with PKCE. This is the most secure way to authenticate your users and handles the redirection from your app to Spotify and back. Your server side code will not have access to the Spotify API with user access scopes, but you can use the SDK to perform client side requests with the users access token.

Calling any of the methods on the SDK will automatically perform any redirects/refreshes that are necessary.

const sdk = SpotifyApi.withUserAuthorization(
  "client-id",
  "https://localhost:3000",
  ["scope1", "scope2"]
);
const user = await sdk.currentUser.profile();

If you’re building a server side application, you should use Client Credentials Flow, and is the correct choice when you have both your Client ID and Client Secret available. This flow is not available in the browser (as you should not embed your Client Secret in Client Side web applications), so should only be used from Node.js.

Mixed Server and Client Side Authentication is a special case, and is covered in the section below. This is useful if you want to perform requests with a users access token from your server side code.

Mixed Server and Client Side Authentication

There’s capabilities in the client if you want to interact with Spotify from your Node.js server, but perform a client side Authorization Code Flow with PKCE. You might want to do this if you want your server side SDK instance to be authorized “as a specific user” to interact with user data.

You’ll need to do three things.

1. Perform Authorization Code Flow with PKCE using some special helper functions
2. Expose a URL from your Node.js application that accepts a token post-back
3. Initilise an instance of the SDK with the posted-back token

Setup:

Client Side

SpotifyApi.performUserAuthorization(
  "client-id",
  "https://localhost:3000",
  ["scope1", "scope2"],
  "https://your-backend-server.com/accept-user-token"
);
// Alternatively if you want to perform your own custom post-back
SpotifyApi.performUserAuthorization(
  "client-id",
  "https://localhost:3000",
  ["scope1", "scope2"],
  (accessToken) => {
    /* do postback here */
  }
);

These functions will work as usual, triggering a client side redirect to grant permissions, along with verifying the response and performing token exchange.

Server Side

const { SpotifyApi } = require("@fostertheweb/spotify-web-sdk");

const express = require("express");
const bodyParser = require("body-parser");
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

let sdk;

app.post("/accept-user-token", (req, res) => {
  let data = req.body;
  sdk = SpotifyApi.withAccessToken("client-id", data); // SDK now authenticated as client-side user
});

app.listen(3000, () => {
  console.log("Example app listening on port 3000!");
});

Check out the blog post for more examples using ES Modules or CommonJS