Unable to refresh Spotify access_token with Auth.js v5

[frbarbre]

I'm trying to make a Spotify Clone using the Spotify API. For this im using Auth.js v5, where im trying to automatically refresh the access token when it expires (for testing purposes it does it every 30 seconds in my code for now).

I found this Reddit post, where someone has made something that seemingly worked for him with an older version of the next-auth library:
https://www.reddit.com/r/nextjs/comments/10o6aup/next_auth_spotify_reauthentication_access_token/

However the problem with this is that when you call the Spotify refresh endpoint, it invalidates your refresh_token after using it. And since the callback in the auth.js file is called like 6 times on every render (can someone also explain why this happens), it fails of the last 5 attempts and return this:

Succesful response:

{
    "access_token": "BQC43r2tSRitLXGADCJq74HCi-lAwZfedsffB2laYgyS-XeJcrU9Fw65mr4KbJYO3buTCOwoQY3lM0qpgmogc-W46z5BjXeTEBLd3PRNPerTErfqJVSSyR6vkzkcFwlJ_sKCmReN7A2InEbDQ7S3Hn23_Uf1J4x778mvDk04EQ4En6L0UtZgu8jSsUBLGQpmIzT4iz3pAu7w2oYiIher_kQpt3N6btj7U",
    "token_type": "Bearer",
    "expires_in": 3600,
    "refresh_token": "AQDrtotUrQTUWU2OodoHceBQbGgQMhpnq8MDI8PzC-YS-LIV_TDTdfsdfMXQANfAgi6zBxSpcY8z-n5i-_Q-2Is2OROR8EQZgpzrnKmaLySVZMt3fNhdjNfc_pTKuj49GkGOc8ZCA",
    "scope": "playlist-read-private playlist-read-collaborative user-modify-playback-state user-library-read user-read-playback-state user-read-email user-read-private"
}

Error response:

{
    "error": "invalid_grant",
    "error_description": "Refresh token revoked"
}

I tried using Supabase Auth instead, and i notices that when i use the access_token i get back from them, i'm not getting a new refresh_token in the response when refreshing the token, and i can keep using the same refresh token.

Response when using access token with Supabase Auth:

{
    "access_token": "BQCb2bfIavCQMA_a2AJlZmkktdc0bMFa-2EwKvY1ue3etglpj2a2MvOwRyE73IF6KTffTW__XxgCtHW4uP23423LF4sCLh0_Ob7N0idOuG6YFld8SgJTYiK2Vv2p317_EMcEUHaUug80WOHyCBmS6tsYmeuzI5BIF2Fv1Tbb6sJIfTmh5LogkcprHQVrLw5ySeyQKWB7WiBkTonO3NvMHmYvldYANzJi3G",
    "token_type": "Bearer",
    "expires_in": 3600,
    "scope": "playlist-read-private playlist-read-collaborative user-modify-playback-state user-library-read user-read-playback-state user-read-email user-read-private"
}

I believe that getting this behaviour with Auth.js would resolve my issue. Does any of you know what Supabase Auth is doing for getting an infinitely reusable refresh_token?

My current code looks like this:

SignIn function:

await signIn(
    "spotify",
    {},
    {
      scope:
        "user-read-email user-read-private playlist-read-private playlist-read-collaborative user-modify-playback-state user-read-playback-state",
      response_type: "code",
    }
  );

auth.js file:

import NextAuth from "next-auth";
import SpotifyProvider from "next-auth/providers/spotify";

const CLIENT_ID = process.env.AUTH_SPOTIFY_ID;
const CLIENT_SECRET = process.env.AUTH_SPOTIFY_SECRET;

async function refreshAccessToken(
token
) {
  try {
    const basicAuth = Buffer.from(`${CLIENT_ID}:${CLIENT_SECRET}`).toString(
      "base64"
    );

    const urlencoded = new URLSearchParams();
    urlencoded.append("grant_type", "refresh_token");
    urlencoded.append("refresh_token", 
token
.refreshToken);

    const response = await fetch("https://accounts.spotify.com/api/token", {
      headers: {
        Authorization: `Basic ${basicAuth}`,
        "Content-Type": "application/x-www-form-urlencoded",
      },
      cache: "no-cache",
      method: "POST",
      body: urlencoded,
    });

    const data = await response.json();

    console.log("refresh data", data);

    if (data?.error) {
      return {
        ...token,
        error: "RefreshAccessTokenError",
      };
    }

    return {
      ...token,
      refreshToken: data.refresh_token,
      accessToken: data.access_token,
      accessTokenExpires: Date.now() + data.expires_in * 1000,
    };
  } catch (error) {
    return {
      ...token,
      error: "RefreshAccessTokenError",
    };
  }
}

export const { handlers, signIn, signOut, auth } = NextAuth((
req
) => {
  return {
    providers: [SpotifyProvider],
    debug: process.env.NODE_ENV === "development",
    callbacks: {
      async jwt({ token, account, user }) {
        // Initial sign in
        if (account && user) {
          return {
            accessToken: account.access_token,
            refreshToken: account.refresh_token,
            accessTokenExpires: account.expires_at * 1000, // Convert to ms
            user,
          };
        }

        const xBeforeExpiration = token.accessTokenExpires - 59.5 * 60 * 1000;

        // Check if the access token has expired
        const isTokenExpired = Date.now() > xBeforeExpiration;

        // If the token is still valid, return it
        if (!isTokenExpired) {
          return token;
        }

        // Refresh the token if it's expired
        const newToken = await refreshAccessToken(token);
        return {
          ...token,
          ...newToken,
        };
      },
      async session({ session, token }) {
        session.accessToken = token.accessToken;
        session.refreshToken = token.refreshToken;
        session.accessTokenExpires = token.accessTokenExpires;
        session.error = token.error;
        session.user = token.user;

        return session;
      },
    },
  };
});