feat: introduce reconnection support for Flickr

packages/backend/.env-example

@@ -2,6 +2,7 @@ HOST=localhost
 PROTOCOL=http
 PORT=3000
 CORS_PORT=3001
+CORS_PROTOCOL=https
 APP_ENV=development
 POSTGRES_DATABASE=automatisch_development
 POSTGRES_PORT=5432

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

@@ -3,12 +3,24 @@ import App from '../../models/app';
 import Field from '../../types/field';
 
 export default class Flickr {
+  oauthClient: any
   client: any
   connectionData: any
   appData: any
 
   constructor(connectionData: any) {
-    this.client = new FlickrApi.OAuth(connectionData.consumerKey, connectionData.consumerSecret);
+    this.oauthClient = new FlickrApi.OAuth(connectionData.consumerKey, connectionData.consumerSecret);
+
+    if (connectionData.accessToken && connectionData.accessSecret) {
+      this.client = new FlickrApi(
+        FlickrApi.OAuth.createPlugin(
+          connectionData.consumerKey,
+          connectionData.consumerSecret,
+          connectionData.accessToken,
+          connectionData.accessSecret,
+        )
+      );
+    }
 
     this.connectionData = connectionData;
     this.appData = App.findOneByKey('flickr');
@@ -18,8 +30,8 @@ export default class Flickr {
     const appFields = this.appData.fields.find((field: Field) => field.key == 'oAuthRedirectUrl')
     const callbackUrl = appFields.value;
 
-    const oauthData = (await this.client.request(callbackUrl)).body;
-    const url = await this.client.authorizeUrl(oauthData.oauth_token, 'delete');
+    const oauthData = (await this.oauthClient.request(callbackUrl)).body;
+    const url = await this.oauthClient.authorizeUrl(oauthData.oauth_token, 'delete');
 
     return {
       ...oauthData,
@@ -28,7 +40,7 @@ export default class Flickr {
   }
 
   async verifyCredentials() {
-    const verifiedCredentials = (await this.client.verify(
+    const verifiedCredentials = (await this.oauthClient.verify(
       this.connectionData.accessToken,
       this.connectionData.oauthVerifier,
       this.connectionData.accessSecret
@@ -43,4 +55,13 @@ export default class Flickr {
       screenName: verifiedCredentials.fullname
     }
   }
+
+  async isStillVerified() {
+    try {
+      await this.client.test.login();
+      return true;
+    } catch {
+      return false;
+    }
+  }
 }

packages/backend/src/apps/flickr/info.json

@@ -111,5 +111,75 @@
         }
       ]
     }
+  ],
+  "reconnectionSteps": [
+    {
+      "step": 1,
+      "type": "mutation",
+      "name": "updateConnection",
+      "fields": [
+        {
+          "name": "id",
+          "value": "{connection.id}"
+        },
+        {
+          "name": "data",
+          "value": null,
+          "fields": [
+            {
+              "name": "consumerKey",
+              "value": "{fields.consumerKey}"
+            },
+            {
+              "name": "consumerSecret",
+              "value": "{fields.consumerSecret}"
+            }
+          ]
+        }
+      ]
+    },
+    {
+      "step": 2,
+      "type": "mutation",
+      "name": "createAuthLink",
+      "fields": [
+        {
+          "name": "id",
+          "value": "{connection.id}"
+        }
+      ]
+    },
+    {
+      "step": 3,
+      "type": "openWithPopup",
+      "name": "openAuthPopup",
+      "fields": [
+        {
+          "name": "url",
+          "value": "{createAuthLink.url}"
+        }
+      ]
+    },
+    {
+      "step": 4,
+      "type": "mutation",
+      "name": "updateConnection",
+      "fields": [
+        {
+          "name": "id",
+          "value": "{connection.id}"
+        },
+        {
+          "name": "data",
+          "value": null,
+          "fields": [
+            {
+              "name": "oauthVerifier",
+              "value": "{openAuthPopup.oauth_verifier}"
+            }
+          ]
+        }
+      ]
+    }
   ]
 }

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

@@ -43,7 +43,7 @@ export default class Twitter {
     try {
       await this.client.currentUser();
       return true;
-    } catch (error) {
+    } catch {
       return false
     }
   }

packages/backend/src/apps/twitter/info.json

@@ -11,7 +11,7 @@
       "type": "string",
       "required": true,
       "readOnly": true,
-      "value": "http://localhost:3001/app/twitter/connections/add",
+      "value": "https://localhost:3001/app/twitter/connections/add",
       "placeholder": null,
       "description": "When asked to input an OAuth callback or redirect URL in Twitter OAuth, enter the URL above.",
       "docUrl": "https://automatisch.io/docs/twitter#oauth-redirect-url",

packages/backend/src/config/app.ts

@@ -6,6 +6,7 @@ type AppConfig = {
   protocol: string
   port: string,
   corsPort: string,
+  corsProtocol: string,
   appEnv: string,
   postgresDatabase: string,
   postgresPort: number,
@@ -21,6 +22,7 @@ const appConfig: AppConfig = {
   protocol: process.env.PROTOCOL || 'http',
   port: process.env.PORT || '3000',
   corsPort: process.env.CORS_PORT || '3001',
+  corsProtocol: process.env.CORS_PROTOCOL || 'http',
   appEnv: process.env.APP_ENV || 'development',
   postgresDatabase: process.env.POSTGRES_DATABASE || 'automatisch_development',
   postgresPort: parseInt(process.env.POSTGRES_PORT) || 5432,
@@ -29,7 +31,7 @@ const appConfig: AppConfig = {
   postgresPassword: process.env.POSTGRESS_PASSWORD,
 }
 
-const webAppUrl = `${appConfig.protocol}://${appConfig.host}:${appConfig.corsPort}`;
+const webAppUrl = `${appConfig.corsProtocol}://${appConfig.host}:${appConfig.corsPort}`;
 appConfig.webAppUrl = webAppUrl;
 
 const baseUrl = `${appConfig.protocol}://${appConfig.host}:${appConfig.port}`;

packages/backend/src/graphql/mutations/create-auth-link.ts

@@ -14,7 +14,10 @@ const createAuthLinkResolver = async (params: Params, req: RequestWithCurrentUse
 
   const appClass = (await import(`../../apps/${connection.key}`)).default;
 
-  const appInstance = new appClass({ consumerKey: connection.data.consumerKey, consumerSecret: connection.data.consumerSecret });
+  const appInstance = new appClass({
+    consumerKey: connection.data.consumerKey,
+    consumerSecret: connection.data.consumerSecret
+  });
   const authLink = await appInstance.createAuthLink();
 
   await connection.$query().patch({