#30 fix connector flow with Spotify Block

src/client/api/connector.ts

@@ -84,7 +84,8 @@ export namespace OAuth {
  }
 
  authorizationRequest = async (
- options: AuthorizationRequestOptions
+ options: AuthorizationRequestOptions,
+ codeVerifier?: string
  ): Promise<AuthorizationRequest> => {
  const { endpoint, clientId, scope, extraParameters } = options;
 
@@ -120,7 +121,9 @@ export namespace OAuth {
  return `${protocol}//${host}/service/authenticated`;
  };
 
- const codeVerifier = generateCodeVerifier();
+ if (!codeVerifier) {
+ codeVerifier = generateCodeVerifier();
+ }
  const codeChallenge = generateCodeChallenge(codeVerifier);
  const state = generateState();
  const redirectURI = getRedirectURI();
@@ -147,12 +150,16 @@ export namespace OAuth {
  };
 
  authorize = async (
- options: AuthorizationRequestOptions
+ options: AuthorizationRequestOptions,
+ codeVerifier: string
  ): Promise<AuthorizationResponse> => {
  let authorizationRequest: AuthorizationRequest;
  if ("endpoint" in options) {
  // options is an AuthorizationRequestOptions object
- authorizationRequest = await this.authorizationRequest(options);
+ authorizationRequest = await this.authorizationRequest(
+ options,
+ codeVerifier
+ );
  } else {
  // options is an AuthorizationRequest object
  authorizationRequest = options;

src/client/api/service/github.ts

@@ -25,7 +25,10 @@ export const authorize = async () => {
  scope: "read:user,repo",
  };
  const authRequest = await github.authorizationRequest(request);
- const { authorizationCode } = await github.authorize(request);
+ const { authorizationCode } = await github.authorize(
+ request,
+ authRequest.codeVerifier
+ );
  await github.setTokens(await fetchTokens(authRequest, authorizationCode));
 };
 

src/client/api/service/gitlab.ts

@@ -23,7 +23,10 @@ export const authorize = async () => {
  scope: "read_api read_user read_repository profile",
  };
  const authRequest = await gitlab.authorizationRequest(options);
- const { authorizationCode } = await gitlab.authorize(options);
+ const { authorizationCode } = await gitlab.authorize(
+ options,
+ authRequest.codeVerifier
+ );
  await gitlab.setTokens(await fetchTokens(authRequest, authorizationCode));
 };
 

src/client/api/service/spotify.ts

@@ -25,7 +25,10 @@ export const authorize = async () => {
  "user-top-read user-read-recently-played user-read-currently-playing",
  };
  const authRequest = await spotify.authorizationRequest(request);
- const { authorizationCode } = await spotify.authorize(request);
+ const { authorizationCode } = await spotify.authorize(
+ request,
+ authRequest.codeVerifier
+ );
  await spotify.setTokens(await fetchTokens(authRequest, authorizationCode));
 };
 

src/client/blocks/spotify_Music.tsx

@@ -1,3 +1,4 @@
+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";
@@ -6,6 +7,7 @@ import { BlockProps } from "./type";
 
 const Spotify: FC<BlockProps> = ({ gridRef, extension, size, isEditable }) => {
  const [data, setData] = useState<any[]>([]);
+ const [render, setRender] = useState(false);
 
  const changeBlockTitle = useChangeBlockTitle();
  const changeExtensionSize = useChangeExtensionSize();
@@ -41,61 +43,62 @@ const Spotify: FC<BlockProps> = ({ gridRef, extension, size, isEditable }) => {
  }
 
  setData(favoriteTracks);
- console.log(data);
+ setRender(true);
  }
  }, [extension]);
 
- return (
- <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>
- );
+ return render
+ ? data && (
+ <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/251374?s=200&v=4"}
+ >
+ <Card
+ type="horizontal"
+ title={data[0].title}
+ subtitle={data[0].subtitle}
+ image={data[0].image}
+ icon="PlayIcon"
+ actions={{ open: { 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,
+ }
+ }
+ actions={{ open: { url: track.link } }}
+ key={track.title + index}
+ />
+ ))}
+ </List>
+ </Block>
+ )
+ : null;
 };
 
 export default Spotify;

src/client/components/Login.tsx

@@ -14,7 +14,8 @@ interface Errors {
 const errors: Errors = {
  Signin: "Try to sign-in with a different account.",
  OAuthSignin: "OAuthSignin Error: Try to sign-in with a different account.",
- OAuthCallback: "OAuthCallback Error: Try to sign-in with a different account.",
+ OAuthCallback:
+ "OAuthCallback Error: Try to sign-in with a different account.",
  OAuthCreateAccount:
  "OAuthCreateAccount Error: Try to sign-in with a different account.",
  EmailCreateAccount:
@@ -213,7 +214,9 @@ const Login: FC<LoginProps> = ({ csrfToken }) => {
  d="M21.456 10.154c.123.659.19 1.348.19 2.067 0 5.624-3.764 9.623-9.449 9.623A9.841 9.841 0 012.353 12a9.841 9.841 0 019.844-9.844c2.658 0 4.879.978 6.583 2.566l-2.775 2.775V7.49c-1.033-.984-2.344-1.489-3.808-1.489-3.248 0-5.888 2.744-5.888 5.993 0 3.248 2.64 5.998 5.888 5.998 2.947 0 4.953-1.685 5.365-3.999h-5.365v-3.839h9.26z"
  ></path>
  </svg>
- <span className="ml-2 hover:cursor-default">Continue with Google</span>
+ <span className="ml-2 hover:cursor-default">
+ Continue with Google
+ </span>
  </span>
  </div>
  </div>

src/pages/api/oauth/spotify/access_token.ts

@@ -1,8 +1,7 @@
-import wretch from "wretch";
-import FormUrlAddon from "wretch/addons/formUrl";
 // nextjs api route for spotify
-
 import type { NextApiRequest, NextApiResponse } from "next";
+import wretch from "wretch";
+import FormUrlAddon from "wretch/addons/formUrl";
 
 export default async (req: NextApiRequest, res: NextApiResponse) => {
  try {
@@ -22,6 +21,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
  grant_type: "authorization_code",
  code: authCode,
  redirect_uri: redirectURI,
+ client_id: process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID,
  code_verifier: codeVerifier,
  })
  .post()

src/pages/api/oauth/spotify/refresh_token.ts

@@ -19,6 +19,7 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
  .formUrl({
  grant_type: grantType,
  refresh_token: refreshToken,
+ client_id: process.env.NEXT_PUBLIC_SPOTIFY_CLIENT_ID,
  })
  .post()
  .json();