#30 error 400 code_verifier was incorrect

stagehq · Feb 17, 2023 · 3cf4911 · 3cf4911
1 parent 1ce8f9f
commit 3cf4911
Show file tree

Hide file tree

Showing 5 changed files with 74 additions and 75 deletions.
diff --git a/src/client/api/service/spotify.ts b/src/client/api/service/spotify.ts
@@ -22,7 +22,7 @@ export const authorize = async () => {
     endpoint: "https://accounts.spotify.com/authorize",
     clientId: process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID as string,
     scope:
-      "user-read-currently-playing user-top-read user-read-recently-played",
+      "user-top-read user-read-recently-played user-read-currently-playing",
   };
   const authRequest = await spotify.authorizationRequest(request);
   const { authorizationCode } = await spotify.authorize(request);

diff --git a/src/client/blocks/spotify_Music.tsx b/src/client/blocks/spotify_Music.tsx
@@ -1,4 +1,3 @@
-import { Block, Card, List } from "@stagehq/ui";
 import { FC, useEffect, useState } from "react";
 import { useChangeBlockTitle } from "../components/studio/hooks/useChangeBlockTitle";
 import { useChangeExtensionSize } from "../components/studio/hooks/useChangeSize";
@@ -42,58 +41,60 @@ const Spotify: FC<BlockProps> = ({ gridRef, extension, size, isEditable }) => {
       }
 
       setData(favoriteTracks);
+      console.log(data);
     }
   }, [extension]);
 
   return (
-    <Block
-      title={extension.title ? extension.title : "Top tracks"}
-      size={size}
-      isEditable={isEditable}
-      handleTitleChange={
-        isEditable
-          ? (title) => changeBlockTitle(extension.id, title)
-          : undefined
-      }
-      handleSizeChange={
-        isEditable
-          ? (size) => changeExtensionSize(extension.id, size, gridRef)
-          : undefined
-      }
-      handleDelete={
-        isEditable ? () => deleteExtension(extension.id) : undefined
-      }
-      imagePath={"https://avatars.githubusercontent.com/u/357098?s=200&v=4"}
-    >
-      <Card
-        type="horizontal"
-        title={data[0].title}
-        subtitle={data[0].subtitle}
-        image={data[0].image}
-        icon="PlayIcon"
-        actions={{ link: { url: data[0].link } }}
-      />
-      <List>
-        {data
-          .filter((track, index) => index !== 0)
-          .map((track: any, index) => (
-            <List.Item
-              index={index + 1}
-              type={track.type}
-              title={track.title}
-              subtitle={track.subtitle}
-              image={track.image}
-              count={
-                track.count && {
-                  // value: track.count.value,
-                  icon: "PlayCircleIcon",
-                }
-              }
-              key={track.title + index}
-            />
-          ))}
-      </List>
-    </Block>
+    <pre>{data}</pre>
+    // <Block
+    //   title={extension.title ? extension.title : "Top tracks"}
+    //   size={size}
+    //   isEditable={isEditable}
+    //   handleTitleChange={
+    //     isEditable
+    //       ? (title) => changeBlockTitle(extension.id, title)
+    //       : undefined
+    //   }
+    //   handleSizeChange={
+    //     isEditable
+    //       ? (size) => changeExtensionSize(extension.id, size, gridRef)
+    //       : undefined
+    //   }
+    //   handleDelete={
+    //     isEditable ? () => deleteExtension(extension.id) : undefined
+    //   }
+    //   imagePath={"https://avatars.githubusercontent.com/u/357098?s=200&v=4"}
+    // >
+    //   <Card
+    //     type="horizontal"
+    //     title={data[0].title}
+    //     subtitle={data[0].subtitle}
+    //     image={data[0].image}
+    //     icon="PlayIcon"
+    //     actions={{ link: { url: data[0].link } }}
+    //   />
+    //   <List>
+    //     {data
+    //       .filter((track, index) => index !== 0)
+    //       .map((track: any, index) => (
+    //         <List.Item
+    //           index={index + 1}
+    //           type={track.type}
+    //           title={track.title}
+    //           subtitle={track.subtitle}
+    //           image={track.image}
+    //           count={
+    //             track.count && {
+    //               // value: track.count.value,
+    //               icon: "PlayCircleIcon",
+    //             }
+    //           }
+    //           key={track.title + index}
+    //         />
+    //       ))}
+    //   </List>
+    // </Block>
   );
 };
 

diff --git a/src/pages/api/oauth/spotify/access_token.ts b/src/pages/api/oauth/spotify/access_token.ts
@@ -1,4 +1,3 @@
-import { URLSearchParams } from "url";
 import wretch from "wretch";
 import FormUrlAddon from "wretch/addons/formUrl";
 // nextjs api route for spotify
@@ -9,31 +8,22 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
   try {
     const { authCode, codeVerifier, redirectURI } = req.body;
 
-    const data = new URLSearchParams();
-    // data.append("grant_type", "client_credentials");
-    data.append("code", authCode);
-    data.append("code_verifier", codeVerifier);
-    data.append("redirect_uri", redirectURI);
-    data.append(
-      "client_id",
-      process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID
-        ? process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID
-        : ""
-    );
-
-    const response = await wretch(
-      "https://accounts.spotify.com/api/token?grant_type=client_credentials"
-    )
+    const response = await wretch("https://accounts.spotify.com/api/token")
       .addon(FormUrlAddon)
-      .headers({
-        "Content-Type": "application/x-www-form-urlencoded",
-      })
       .auth(
         `Basic ${Buffer.from(
           `${process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID}:${process.env.SPOTIFY_CLIENT_SECRET}`
         ).toString("base64")}`
       )
-      .formUrl(data)
+      .headers({
+        "Content-Type": "application/x-www-form-urlencoded",
+      })
+      .formUrl({
+        grant_type: "authorization_code",
+        code: authCode,
+        redirect_uri: redirectURI,
+        code_verifier: codeVerifier,
+      })
       .post()
       .json();
 

diff --git a/src/pages/api/oauth/spotify/refresh_token.ts b/src/pages/api/oauth/spotify/refresh_token.ts
@@ -1,17 +1,26 @@
 import type { NextApiRequest, NextApiResponse } from "next";
 import wretch from "wretch";
+import FormUrlAddon from "wretch/addons/formUrl";
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
   try {
     const { refreshToken, grantType } = req.body;
 
     const response = await wretch("https://accounts.spotify.com/api/token")
-      .post({
-        client_id: process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID,
-        client_secret: process.env.SPOTIFY_CLIENT_SECRET,
-        refresh_token: refreshToken,
+      .addon(FormUrlAddon)
+      .auth(
+        `Basic ${Buffer.from(
+          `${process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID}:${process.env.SPOTIFY_CLIENT_SECRET}`
+        ).toString("base64")}`
+      )
+      .headers({
+        "Content-Type": "application/x-www-form-urlencoded",
+      })
+      .formUrl({
         grant_type: grantType,
+        refresh_token: refreshToken,
       })
+      .post()
       .json();
 
     res.status(200).json(response);

diff --git a/src/pages/api/oauth/spotify/update.ts b/src/pages/api/oauth/spotify/update.ts
@@ -12,7 +12,6 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
       .headers({
         "Content-Type": "application/json",
         Accept: "application/json",
-        // Authorization: `Bearer ${token}`,
       })
       .get()
       .json();