debug

package.json

@@ -16,7 +16,6 @@
     "bootstrap-icons": "^1.9.1",
     "core-js": "^3.8.3",
     "localforage": "^1.10.0",
-    "querystring": "^0.2.1",
     "register-service-worker": "^1.7.2",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3"

src/views/AuthCallbackPage.vue

@@ -7,7 +7,10 @@ import PromiseResolver from "@/components/PromiseResolver.vue";
     <h1>Connect to Spotify</h1>
     <div class="card">
       <div class="card-body">
-        <PromiseResolver :promise="$api.auth({ code, state })">
+        <PromiseResolver :promise="$api.auth({
+          code: $route.query.code,
+          state: $route.query.state,
+        })">
           <div class="alert alert-success">
             Authorization completed
           </div>

src/views/AuthPage.vue

@@ -1,6 +1,4 @@
 <script setup>
-import querystring from "querystring";
-
 const randomString = (length) => {
   const characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
   let result = '';
@@ -9,15 +7,16 @@ const randomString = (length) => {
   return result;
 }
 
-const authUrl = 'https://accounts.spotify.com/authorize?' + querystring.stringify({
-  response_type: 'code',
+const params = new URLSearchParams();
+params.append('response_type', 'code');
 // eslint-disable-next-line
-  client_id: process.env.VUE_APP_SPOTIFY_CLIENT_ID,
+params.append('client_id', process.env.VUE_APP_SPOTIFY_CLIENT_ID);
 // eslint-disable-next-line
-  redirect_uri: process.env.VUE_APP_SPOTIFY_REDIRECT_URI,
-  scope: 'user-read-email app-remote-control user-read-playback-state user-read-currently-playing user-modify-playback-state',
-  state: randomString(16),
-});
+params.append('redirect_uri', process.env.VUE_APP_SPOTIFY_REDIRECT_URI);
+params.append('scope', 'user-read-email app-remote-control user-read-playback-state user-read-currently-playing user-modify-playback-state');
+params.append('state', randomString(16));
+
+const authUrl = 'https://accounts.spotify.com/authorize?' + params.toString();
 </script>
 
 <template>