feat(twitch): add new live streams trigger

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

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

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

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" overflow="visible" width="40" height="40" version="1.1" viewBox="0 0 40 40" x="0px" y="0px" class="ScSvg-sc-mx5axi-2 iAAiAK"><g fill="#5C16C5"><polygon points="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animate dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate><animate dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate></polygon><polygon points="26 25 30 21 30 10 14 10 14 25 18 25 18 29 22 25" class="ScFace-sc-mx5axi-4 fDFkyX" fill="#FFFFFF"><animateTransform dur="150ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></polygon><g class="ScEyes-sc-mx5axi-5 fAMMxB" fill="#5C16C5"><path d="M20,14 L22,14 L22,20 L20,20 L20,14 Z M27,14 L27,20 L25,20 L25,14 L27,14 Z" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animateTransform dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></path></g></g></svg>

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

@@ -0,0 +1,22 @@
+import { IField, IGlobalVariable } from '@automatisch/types';
+import { URLSearchParams } from 'url';
+import authScope from '../common/auth-scope';
+
+export default async function generateAuthUrl($: IGlobalVariable) {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+  const searchParams = new URLSearchParams({
+    client_id: $.auth.data.clientId as string,
+    redirect_uri: redirectUri,
+    response_type: 'code',
+    scope: authScope.join(' '),
+  });
+
+  const url = `https://id.twitch.tv/oauth2/authorize?${searchParams.toString()}`;
+
+  await $.auth.set({
+    url,
+  });
+}

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

@@ -0,0 +1,50 @@
+import generateAuthUrl from './generate-auth-url';
+import verifyCredentials from './verify-credentials';
+import refreshToken from './refresh-token';
+import isStillVerified from './is-still-verified';
+import verifyWebhook from './verify-webhook';
+
+export default {
+  fields: [
+    {
+      key: 'oAuthRedirectUrl',
+      label: 'OAuth Redirect URL',
+      type: 'string' as const,
+      required: true,
+      readOnly: true,
+      value: '{WEB_APP_URL}/app/twitch/connections/add',
+      placeholder: null,
+      description:
+        'When asked to input a redirect URL in Twitch, 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,
+    },
+  ],
+
+  generateAuthUrl,
+  verifyCredentials,
+  isStillVerified,
+  refreshToken,
+  verifyWebhook,
+};

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

@@ -0,0 +1,8 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const isStillVerified = async ($: IGlobalVariable) => {
+  const { data } = await $.http.get('https://id.twitch.tv/oauth2/validate');
+  return !!data.login;
+};
+
+export default isStillVerified;

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

@@ -0,0 +1,27 @@
+import { URLSearchParams } from 'node:url';
+import { IGlobalVariable } from '@automatisch/types';
+import authScope from '../common/auth-scope';
+
+const refreshToken = async ($: IGlobalVariable) => {
+  const params = new URLSearchParams({
+    client_id: $.auth.data.clientId as string,
+    client_secret: $.auth.data.clientSecret as string,
+    grant_type: 'refresh_token',
+    refresh_token: $.auth.data.refreshToken as string,
+  });
+
+  const { data } = await $.http.post(
+    'https://id.twitch.tv/oauth2/token',
+    params.toString()
+  );
+
+  await $.auth.set({
+    accessToken: data.access_token,
+    refreshToken: data.refresh_token,
+    expiresIn: data.expires_in,
+    scope: authScope.join(' '),
+    tokenType: data.token_type,
+  });
+};
+
+export default refreshToken;

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

@@ -0,0 +1,63 @@
+import { IField, IGlobalVariable } from '@automatisch/types';
+import getCurrentUser from '../common/get-current-user';
+
+const verifyCredentials = async ($: IGlobalVariable) => {
+  const oauthRedirectUrlField = $.app.auth.fields.find(
+    (field: IField) => field.key == 'oAuthRedirectUrl'
+  );
+  const redirectUri = oauthRedirectUrlField.value as string;
+  const headers = {
+    'Content-Type': 'application/x-www-form-urlencoded',
+  };
+  const userParams = {
+    client_id: $.auth.data.clientId,
+    client_secret: $.auth.data.clientSecret,
+    code: $.auth.data.code,
+    grant_type: 'authorization_code',
+    redirect_uri: redirectUri,
+  };
+
+  const { data } = await $.http.post(
+    `https://id.twitch.tv/oauth2/token`,
+    null,
+    { headers, params: userParams }
+  );
+
+  await $.auth.set({
+    userAccessToken: data.access_token,
+  });
+
+  const currentUser = await getCurrentUser($);
+
+  const screenName = [currentUser.display_name, currentUser.email]
+    .filter(Boolean)
+    .join(' @ ');
+
+  await $.auth.set({
+    clientId: $.auth.data.clientId,
+    clientSecret: $.auth.data.clientSecret,
+    scope: $.auth.data.scope,
+    userExpiresIn: data.expires_in,
+    userRefreshToken: data.refresh_token,
+    screenName,
+  });
+
+  const appParams = {
+    client_id: $.auth.data.clientId,
+    client_secret: $.auth.data.clientSecret,
+    grant_type: 'client_credentials',
+  };
+
+  const response = await $.http.post(
+    `https://id.twitch.tv/oauth2/token`,
+    null,
+    { headers, params: appParams }
+  );
+
+  await $.auth.set({
+    appAccessToken: response.data.access_token,
+    appExpiresIn: response.data.expires_in,
+  });
+};
+
+export default verifyCredentials;

packages/backend/src/apps/twitch/auth/verify-webhook.ts

@@ -0,0 +1,35 @@
+import crypto from 'crypto';
+import { IGlobalVariable } from '@automatisch/types';
+import appConfig from '../../../config/app';
+
+const verifyWebhook = async ($: IGlobalVariable) => {
+  const signature = $.request.headers[
+    'twitch-eventsub-message-signature'
+  ] as string;
+  const twitchMessageId = $.request.headers[
+    'twitch-eventsub-message-id'
+  ] as string;
+  const twitchMessageTimestamp = $.request.headers[
+    'twitch-eventsub-message-timestamp'
+  ] as string;
+  const rawBody = $.request.rawBody.toString();
+  const hmacMessage = twitchMessageId + twitchMessageTimestamp + rawBody;
+  const hash = crypto
+    .createHmac('sha256', appConfig.webhookSecretKey)
+    .update(hmacMessage)
+    .digest('hex');
+  const hmac = `sha256=${hash}`;
+
+  const isValid = verifySignature(signature, hmac);
+
+  return isValid;
+};
+
+const verifySignature = function (receivedSignature: string, payload: string) {
+  return crypto.timingSafeEqual(
+    Buffer.from(payload),
+    Buffer.from(receivedSignature)
+  );
+};
+
+export default verifyWebhook;

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

@@ -0,0 +1,20 @@
+import { TBeforeRequest } from '@automatisch/types';
+
+const addAuthHeader: TBeforeRequest = ($, requestConfig) => {
+  const clientId = $.auth.data.clientId as string;
+  let token;
+  if (requestConfig.additionalProperties?.appAccessToken) {
+    token = $.auth.data.appAccessToken;
+  } else {
+    token = $.auth.data.userAccessToken;
+  }
+
+  if (token && clientId) {
+    requestConfig.headers.Authorization = `Bearer ${token}`;
+    requestConfig.headers['Client-Id'] = clientId;
+  }
+
+  return requestConfig;
+};
+
+export default addAuthHeader;

packages/backend/src/apps/twitch/common/auth-scope.ts

@@ -0,0 +1,3 @@
+const authScope: string[] = ['user:read:email', 'user:read:follows'];
+
+export default authScope;

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

@@ -0,0 +1,8 @@
+import { IGlobalVariable } from '@automatisch/types';
+
+const getCurrentUser = async ($: IGlobalVariable) => {
+  const { data: currentUser } = await $.http.get('/helix/users');
+  return currentUser.data[0];
+};
+
+export default getCurrentUser;

packages/backend/src/apps/twitch/dynamic-data/index.ts

@@ -0,0 +1,3 @@
+import listBroadcasters from './list-broadcasters';
+
+export default [listBroadcasters];

packages/backend/src/apps/twitch/dynamic-data/list-broadcasters/index.ts

@@ -0,0 +1,33 @@
+import { IGlobalVariable, IJSONObject } from '@automatisch/types';
+import getCurrentUser from '../../common/get-current-user';
+
+export default {
+  name: 'List broadcasters',
+  key: 'listBroadcasters',
+
+  async run($: IGlobalVariable) {
+    const Broadcasters: {
+      data: IJSONObject[];
+    } = {
+      data: [],
+    };
+    const currentUser = await getCurrentUser($);
+
+    const params = {
+      user_id: currentUser.id,
+    };
+
+    const { data } = await $.http.get('/helix/channels/followed', { params });
+
+    if (data.data?.length) {
+      for (const broadcaster of data.data) {
+        Broadcasters.data.push({
+          value: broadcaster.broadcaster_id,
+          name: broadcaster.broadcaster_name,
+        });
+      }
+    }
+
+    return Broadcasters;
+  },
+};

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

@@ -0,0 +1,20 @@
+import defineApp from '../../helpers/define-app';
+import addAuthHeader from './common/add-auth-header';
+import auth from './auth';
+import triggers from './triggers';
+import dynamicData from './dynamic-data';
+
+export default defineApp({
+  name: 'Twitch',
+  key: 'twitch',
+  baseUrl: 'https://www.twitch.tv',
+  apiBaseUrl: 'https://api.twitch.tv',
+  iconUrl: '{BASE_URL}/apps/twitch/assets/favicon.svg',
+  authDocUrl: 'https://automatisch.io/docs/apps/twitch/connection',
+  primaryColor: '5C16C5',
+  supportsConnections: true,
+  beforeRequest: [addAuthHeader],
+  auth,
+  triggers,
+  dynamicData,
+});

packages/backend/src/apps/twitch/triggers/index.ts

@@ -0,0 +1,3 @@
+import newLiveStreams from './new-live-streams';
+
+export default [newLiveStreams];

packages/backend/src/apps/twitch/triggers/new-live-streams/index.ts

@@ -0,0 +1,108 @@
+import Crypto from 'crypto';
+import isEmpty from 'lodash/isEmpty';
+import defineTrigger from '../../../../helpers/define-trigger';
+import appConfig from '../../../../config/app';
+
+type Response = {
+  data: {
+    data: [
+      {
+        id: string;
+      }
+    ];
+  };
+};
+
+export default defineTrigger({
+  name: 'New live streams',
+  key: 'newLiveStreams',
+  type: 'webhook',
+  description:
+    'Triggers when a new live stream starts, regardless of the specific game or language it involves. To include a streamer you are not currently following, input the username of the streamer you want to add.',
+  arguments: [
+    {
+      label: 'Broadcaster',
+      key: 'broadcasterId',
+      type: 'dropdown' as const,
+      required: true,
+      description: '',
+      variables: true,
+      source: {
+        type: 'query',
+        name: 'getDynamicData',
+        arguments: [
+          {
+            name: 'key',
+            value: 'listBroadcasters',
+          },
+        ],
+      },
+    },
+  ],
+
+  async run($) {
+    const dataItem = {
+      raw: $.request.body,
+      meta: {
+        internalId: Crypto.randomUUID(),
+      },
+    };
+
+    $.pushTriggerItem(dataItem);
+  },
+
+  async testRun($) {
+    const lastExecutionStep = await $.getLastExecutionStep();
+
+    if (!isEmpty(lastExecutionStep?.dataOut)) {
+      $.pushTriggerItem({
+        raw: lastExecutionStep.dataOut,
+        meta: {
+          internalId: '',
+        },
+      });
+    }
+  },
+
+  async registerHook($) {
+    const broadcasterId = $.step.parameters.broadcasterId as string;
+
+    const payload = {
+      type: 'stream.online',
+      version: '1',
+      condition: {
+        broadcaster_user_id: broadcasterId,
+      },
+      transport: {
+        method: 'webhook',
+        callback: $.webhookUrl,
+        secret: appConfig.webhookSecretKey,
+      },
+    };
+
+    const response: Response = await $.http.post(
+      '/helix/eventsub/subscriptions',
+      payload,
+      {
+        additionalProperties: {
+          appAccessToken: true,
+        },
+      }
+    );
+
+    await $.flow.setRemoteWebhookId(response.data.data[0].id);
+  },
+
+  async unregisterHook($) {
+    const params = {
+      id: $.flow.remoteWebhookId,
+    };
+
+    await $.http.delete('/helix/eventsub/subscriptions', {
+      params,
+      additionalProperties: {
+        appAccessToken: true,
+      },
+    });
+  },
+});

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

@@ -392,6 +392,12 @@ export default defineConfig({
             { text: 'Connection', link: '/apps/twilio/connection' },
           ],
         },
+        {
+          text: 'Twitch',
+          collapsible: true,
+          collapsed: true,
+          items: [{ text: 'Connection', link: '/apps/twitch/connection' }],
+        },
         {
           text: 'Twitter',
           collapsible: true,

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

@@ -0,0 +1,19 @@
+# Twitch
+
+:::info
+This page explains the steps you need to follow to set up the Twitch
+connection in Automatisch. If any of the steps are outdated, please let us know!
+:::
+
+1. Go to the [developer console](https://dev.twitch.tv/console) to register an app.
+2. Select on the **Applications** tab and click on the **Register Your Application**.
+3. Enter a name for your app.
+4. Copy **OAuth Redirect URL** from Automatisch to **OAuth Redirect URLs** field.
+5. Select a **Category** and click on the **Create** button.
+6. Go back to **Applications** tab and choose your app under **Developer Applications**.
+7. Click the **Manage**.
+8. Copy the **Your Client ID** value from the following popup to the `Client ID` field on Automatisch.
+9. Click on the **New Secret** and generate your client secret key.
+10. Copy the **Your Client Secret** value from the following popup to the `Client Secret` field on Automatisch.
+11. Click **Submit** button on Automatisch.
+12. Congrats! Start using your new Twitch connection within the flows.

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

@@ -0,0 +1 @@
+<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" overflow="visible" width="40" height="40" version="1.1" viewBox="0 0 40 40" x="0px" y="0px" class="ScSvg-sc-mx5axi-2 iAAiAK"><g fill="#5C16C5"><polygon points="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animate dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate><animate dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8" from="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5"></animate><animate dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="points" to="16 5 8 13 8 31 14 31 14 36 19 31 23 31 35 19 35 5" from="13 8 8 13 8 31 14 31 14 36 19 31 23 31 32 22 32 8"></animate></polygon><polygon points="26 25 30 21 30 10 14 10 14 25 18 25 18 29 22 25" class="ScFace-sc-mx5axi-4 fDFkyX" fill="#FFFFFF"><animateTransform dur="150ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#FFFFFF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></polygon><g class="ScEyes-sc-mx5axi-5 fAMMxB" fill="#5C16C5"><path d="M20,14 L22,14 L22,20 L20,20 L20,14 Z M27,14 L27,20 L25,20 L25,14 L27,14 Z" class="ScBody-sc-mx5axi-3 dosCbL" fill="#9147FF"><animateTransform dur="150ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform><animateTransform dur="250ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="50ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="3 -3" to="0 0"></animateTransform><animateTransform dur="75ms" begin="indefinite" fill="#9147FF" calcMode="spline" keyTimes="0; 1" keySplines="0.25 0.1 0.25 1" attributeName="transform" type="translate" from="0 0" to="3 -3"></animateTransform></path></g></g></svg>