Merge pull request #1004 from zntemel/spotify-app

feat: implement Spotify app

packages/backend/src/apps/spotify/actions/create-playlist/index.ts

@@ -0,0 +1,57 @@
+import defineAction from '../../../../helpers/define-action';
+
+export default defineAction({
+  name: 'Create playlist',
+  key: 'createPlaylist',
+  description: `Create playlist on user's account.`,
+  arguments: [
+    {
+      label: 'Playlist name',
+      key: 'playlistName',
+      type: 'string' as const,
+      required: true,
+      description: 'Playlist name',
+      variables: true,
+    },
+    {
+      label: 'Playlist visibility',
+      key: 'playlistVisibility',
+      type: 'dropdown' as const,
+      required: true,
+      description: 'Playlist visibility',
+      variables: true,
+      options: [
+        { label: 'public', value: 'Public' },
+        { label: 'private', value: 'Private' },
+      ],
+    },
+    {
+      label: 'Playlist description',
+      key: 'playlistDescription',
+      type: 'string' as const,
+      required: false,
+      description: 'Playlist description',
+      variables: true,
+    },
+  ],
+
+  async run($) {
+    const playlistName = $.step.parameters.playlistName as string;
+    const playlistDescription = $.step.parameters.playlistDescription as string;
+    const playlistVisibility =
+      $.step.parameters.playlistVisibility === 'public'
+        ? true
+        : (false as boolean);
+
+    const response = await $.http.post(
+      `v1/users/${$.auth.data.userId}/playlists`,
+      {
+        name: playlistName,
+        public: playlistVisibility,
+        description: playlistDescription,
+      }
+    );
+
+    $.setActionItem({ raw: response.data });
+  },
+});

packages/backend/src/apps/spotify/actions/index.ts

@@ -0,0 +1,3 @@
+import cratePlaylist from './create-playlist';
+
+export default [cratePlaylist];

packages/backend/src/apps/spotify/assets/favicon.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="256px" viewBox="0 0 256 256" version="1.1" preserveAspectRatio="xMidYMid">
+    <title>Spotify</title>
+    <g>
+        <path d="M127.999236,0 C57.3087105,0 0,57.3085507 0,128.000764 C0,198.696035 57.3087105,256 127.999236,256 C198.697403,256 256,198.696035 256,128.000764 C256,57.3131363 198.697403,0.00611405337 127.997707,0.00611405337 L127.999236,0 Z M186.69886,184.613841 C184.406145,188.373984 179.48445,189.566225 175.724397,187.258169 C145.671485,168.900724 107.838626,164.743168 63.2835265,174.923067 C58.990035,175.901315 54.7102999,173.211132 53.7320747,168.916009 C52.7492641,164.620887 55.428684,160.34105 59.7328748,159.362801 C108.491286,148.222996 150.314998,153.019471 184.054595,173.639116 C187.814648,175.947171 189.00686,180.853699 186.69886,184.613841 L186.69886,184.613841 Z M202.365748,149.76068 C199.476927,154.456273 193.33245,155.938931 188.640026,153.050041 C154.234012,131.90153 101.787386,125.776777 61.0916907,138.130222 C55.8138602,139.724462 50.2395052,136.749975 48.6376614,131.481189 C47.0480455,126.203233 50.0239899,120.639444 55.2926496,119.034505 C101.778216,104.929384 159.568396,111.761839 199.079523,136.042273 C203.771946,138.931163 205.254569,145.075787 202.365748,149.762209 L202.365748,149.76068 Z M203.710807,113.467659 C162.457218,88.964062 94.394144,86.7110334 55.0068244,98.6655362 C48.6819873,100.58382 41.9933726,97.0132133 40.0766627,90.6882251 C38.1599527,84.3601798 41.7274177,77.675991 48.0568402,75.7531212 C93.2707135,62.0270714 168.433562,64.6790421 215.929451,92.8755277 C221.63067,96.2520136 223.495412,103.599577 220.117478,109.281061 C216.754829,114.970188 209.38757,116.845674 203.716921,113.467659 L203.710807,113.467659 Z" fill="#1ED760"/>
+    </g>
+</svg>

packages/backend/src/apps/spotify/auth/generate-auth-url.ts

@@ -0,0 +1,27 @@
+import { IField, IGlobalVariable } from '@automatisch/types';
+import { URLSearchParams } from 'url';
+import scopes from '../common/scopes';
+
+export default async function generateAuthUrl($: IGlobalVariable) {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+  const state = Math.random().toString() as string;
+
+  const searchParams = new URLSearchParams({
+    client_id: $.auth.data.clientId as string,
+    client_secret: $.auth.data.clientSecret as string,
+    grant_type: 'client_credentials',
+    redirect_uri: redirectUri,
+    response_type: 'code',
+    scope: scopes.join(','),
+    state: state,
+  });
+
+  const url = `https://accounts.spotify.com/authorize?${searchParams}`;
+
+  await $.auth.set({
+    url,
+  });
+}

packages/backend/src/apps/spotify/auth/index.ts

@@ -0,0 +1,47 @@
+import generateAuthUrl from './generate-auth-url';
+import verifyCredentials from './verify-credentials';
+import isStillVerified from './is-still-verified';
+import refreshToken from './refresh-token';
+
+export default {
+  fields: [
+    {
+      key: 'oAuthRedirectUrl',
+      label: 'OAuth Redirect URL',
+      type: 'string' as const,
+      required: true,
+      readOnly: true,
+      value: '{WEB_APP_URL}/app/spotify/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input an OAuth callback or redirect URL in Spotify OAuth, enter the URL above.',
+      clickToCopy: true,
+    },
+    {
+      key: 'clientId',
+      label: 'Client Id',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+    {
+      key: 'clientSecret',
+      label: 'Client Secret',
+      type: 'string' as const,
+      required: true,
+      readOnly: false,
+      value: null,
+      placeholder: null,
+      description: null,
+      clickToCopy: false,
+    },
+  ],
+  refreshToken,
+  generateAuthUrl,
+  verifyCredentials,
+  isStillVerified,
+};

packages/backend/src/apps/spotify/auth/is-still-verified.ts

@@ -0,0 +1,9 @@
+import { IGlobalVariable } from '@automatisch/types';
+import getCurrentUser from '../common/get-current-user';
+
+const isStillVerified = async ($: IGlobalVariable) => {
+  const user = await getCurrentUser($);
+  return !!user.id;
+};
+
+export default isStillVerified;

packages/backend/src/apps/spotify/auth/refresh-token.ts

@@ -0,0 +1,31 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const refreshToken = async ($: IGlobalVariable) => {
+  const response = await $.http.post(
+    'https://accounts.spotify.com/api/token',
+    null,
+    {
+      headers: {
+        Authorization: `Basic ${Buffer.from(
+          $.auth.data.clientId + ':' + $.auth.data.clientSecret
+        ).toString('base64')}`,
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      params: {
+        refresh_token: $.auth.data.refreshToken as string,
+        grant_type: 'refresh_token',
+      },
+      additionalProperties: {
+        skipAddingAuthHeader: true
+      }
+    }
+  );
+
+  await $.auth.set({
+    accessToken: response.data.access_token,
+    expiresIn: response.data.expires_in,
+    tokenType: response.data.token_type,
+  });
+};
+
+export default refreshToken;

packages/backend/src/apps/spotify/auth/verify-credentials.ts

@@ -0,0 +1,53 @@
+import { IGlobalVariable } from '@automatisch/types';
+import getCurrentUser from '../common/get-current-user';
+import { URLSearchParams } from 'url';
+
+const verifyCredentials = async ($: IGlobalVariable) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+  const params = new URLSearchParams({
+    code: $.auth.data.code as string,
+    redirect_uri: redirectUri,
+    grant_type: 'authorization_code',
+  });
+
+  const headers = {
+    Authorization: `Basic ${Buffer.from(
+      $.auth.data.clientId + ':' + $.auth.data.clientSecret
+    ).toString('base64')}`,
+    'Content-Type': 'application/x-www-form-urlencoded',
+  };
+
+  const response = await $.http.post(
+    'https://accounts.spotify.com/api/token',
+    params.toString(),
+    { headers }
+  );
+
+  const {
+    access_token: accessToken,
+    refresh_token: refreshToken,
+    expires_in: expiresIn,
+    scope: scope,
+    token_type: tokenType,
+  } = response.data;
+
+  await $.auth.set({
+    accessToken,
+    refreshToken,
+    expiresIn,
+    scope,
+    tokenType,
+  });
+
+  const user = await getCurrentUser($);
+
+  await $.auth.set({
+    userId: user.id,
+    screenName: user.display_name,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/spotify/common/add-auth-header.ts

@@ -0,0 +1,14 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
+  if (requestConfig.additionalProperties?.skipAddingAuthHeader) return requestConfig;
+
+  if ($.auth.data?.accessToken) {
+    const authorizationHeader = `Bearer ${$.auth.data.accessToken}`;
+    requestConfig.headers.Authorization = authorizationHeader;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/spotify/common/get-current-user.ts

@@ -0,0 +1,10 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+
+const getCurrentUser = async ($: IGlobalVariable): Promise<IJSONObject> => {
+  const response = await $.http.get('/v1/me');
+  const currentUser = response.data;
+
+  return currentUser;
+};
+
+export default getCurrentUser;

packages/backend/src/apps/spotify/common/scopes.ts

@@ -0,0 +1,13 @@
+const scopes = [
+  'user-follow-read',
+  'playlist-read-private',
+  'playlist-read-collaborative',
+  'user-library-read',
+  'playlist-modify-public',
+  'playlist-modify-private',
+  'user-library-modify',
+  'user-follow-modify',
+  'user-follow-read',
+];
+
+export default scopes;

packages/backend/src/apps/spotify/index.ts

@@ -0,0 +1,18 @@
+import defineApp from '../../helpers/define-app';
+import addAuthHeader from './common/add-auth-header';
+import actions from './actions';
+import auth from './auth';
+
+export default defineApp({
+  name: 'Spotify',
+  key: 'spotify',
+  iconUrl: '{BASE_URL}/apps/spotify/assets/favicon.svg',
+  authDocUrl: 'https://automatisch.io/docs/apps/spotify/connection',
+  supportsConnections: true,
+  baseUrl: 'https://spotify.com',
+  apiBaseUrl: 'https://api.spotify.com',
+  primaryColor: '000000',
+  beforeRequest: [addAuthHeader],
+  auth,
+  actions,
+});

packages/docs/pages/.vitepress/config.js

@@ -161,6 +161,15 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/smtp/connection' },
           ],
         },
+        {
+          text: 'Spotify',
+          collapsible: true,
+          collapsed: true,
+          items: [
+            { text: 'Actions', link: '/apps/spotify/actions' },
+            { text: 'Connection', link: '/apps/spotify/connection' },
+          ],
+        },
         {
           text: 'Stripe',
           collapsible: true,

packages/docs/pages/apps/spotify/actions.md

@@ -0,0 +1,12 @@
+---
+favicon: /favicons/spotify.svg
+items:
+  - name: Create playlist
+    desc: Create a playlist on user's account
+---
+
+<script setup>
+  import CustomListing from '../../components/CustomListing.vue'
+</script>
+
+<CustomListing />

packages/docs/pages/apps/spotify/connection.md

@@ -0,0 +1,20 @@
+# Spotify
+
+:::info
+This page explains the steps you need to follow to set up the Spotify connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [link](https://developer.spotify.com/dashboard/applications) to **create an app**
+   on Spotify API.
+1. Click login button if you're not logged in.
+1. Click **Create an app** button.
+1. Enter **App name** and **App description**.
+1. Click on **Create App** button.
+1. **Client ID** will be visible on the screen.
+1. Click **Show Client Secret** button to see client secret.
+1. Copy **Client ID** and **Client Secret** values and save them to use later.
+1. Click **Edit settings** button.
+1. Copy **OAuth Redirect URL** from Automatisch and add it in Redirect URLs. Don't forget to save it after adding it by clicking **Add** button!
+1. Paste **Client ID** and **Client Secret** values you have saved earlier and paste them into Automatisch as **Client Id** and **Client Secret**, respectively.
+1. Click **Submit** button on Automatisch.
+1. Now, you can start using the Spotify connection with Automatisch.

packages/docs/pages/guide/available-apps.md

@@ -20,6 +20,7 @@ Following integrations are currently supported by Automatisch.
 - [SignalWire](/apps/signalwire/triggers)
 - [Slack](/apps/slack/actions)
 - [SMTP](/apps/smtp/actions)
+- [Spotify](/apps/spotify/actions)
 - [Stripe](/apps/stripe/triggers)
 - [Telegram](/apps/telegram-bot/actions)
 - [Todoist](/apps/todoist/triggers)

packages/docs/pages/public/favicons/spotify.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="256px" height="256px" viewBox="0 0 256 256" version="1.1" preserveAspectRatio="xMidYMid">
+    <title>Spotify</title>
+    <g>
+        <path d="M127.999236,0 C57.3087105,0 0,57.3085507 0,128.000764 C0,198.696035 57.3087105,256 127.999236,256 C198.697403,256 256,198.696035 256,128.000764 C256,57.3131363 198.697403,0.00611405337 127.997707,0.00611405337 L127.999236,0 Z M186.69886,184.613841 C184.406145,188.373984 179.48445,189.566225 175.724397,187.258169 C145.671485,168.900724 107.838626,164.743168 63.2835265,174.923067 C58.990035,175.901315 54.7102999,173.211132 53.7320747,168.916009 C52.7492641,164.620887 55.428684,160.34105 59.7328748,159.362801 C108.491286,148.222996 150.314998,153.019471 184.054595,173.639116 C187.814648,175.947171 189.00686,180.853699 186.69886,184.613841 L186.69886,184.613841 Z M202.365748,149.76068 C199.476927,154.456273 193.33245,155.938931 188.640026,153.050041 C154.234012,131.90153 101.787386,125.776777 61.0916907,138.130222 C55.8138602,139.724462 50.2395052,136.749975 48.6376614,131.481189 C47.0480455,126.203233 50.0239899,120.639444 55.2926496,119.034505 C101.778216,104.929384 159.568396,111.761839 199.079523,136.042273 C203.771946,138.931163 205.254569,145.075787 202.365748,149.762209 L202.365748,149.76068 Z M203.710807,113.467659 C162.457218,88.964062 94.394144,86.7110334 55.0068244,98.6655362 C48.6819873,100.58382 41.9933726,97.0132133 40.0766627,90.6882251 C38.1599527,84.3601798 41.7274177,77.675991 48.0568402,75.7531212 C93.2707135,62.0270714 168.433562,64.6790421 215.929451,92.8755277 C221.63067,96.2520136 223.495412,103.599577 220.117478,109.281061 C216.754829,114.970188 209.38757,116.845674 203.716921,113.467659 L203.710807,113.467659 Z" fill="#1ED760"/>
+    </g>
+</svg>