Fetching analytics userId, when api_key entered

packages/builder/src/analytics.js

@@ -1,5 +1,6 @@
 import * as Sentry from "@sentry/browser"
 import posthog from "posthog-js"
+import api from "builderStore/api"
 
 function activate() {
   Sentry.init({ dsn: process.env.SENTRY_DSN })
@@ -9,6 +10,30 @@ function activate() {
   })
 }
 
+function identify(id) {
+  if (!id) return
+  posthog.identify(id)
+  Sentry.configureScope(scope => {
+    scope.setUser({ id: id })
+  })
+}
+
+async function identifyByApiKey(apiKey) {
+  const response = await fetch(
+    `https://03gaine137.execute-api.eu-west-1.amazonaws.com/prod/account/id?api_key=${apiKey.trim()}`
+  )
+
+  if (response.status === 200) {
+    const id = await response.json()
+
+    await api.put("/api/keys/userId", { value: id })
+    identify(id)
+    return true
+  }
+
+  return false
+}
+
 function captureException(err) {
   Sentry.captureException(err)
 }
@@ -20,6 +45,8 @@ function captureEvent(event) {
 
 export default {
   activate,
+  identify,
+  identifyByApiKey,
   captureException,
   captureEvent,
 }

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -3,13 +3,21 @@
   import { store } from "builderStore"
   import api from "builderStore/api"
   import posthog from "posthog-js"
+  import analytics from "../../../analytics"
 
   let keys = { budibase: "", sendGrid: "" }
 
   async function updateKey([key, value]) {
+    if (key === "budibase") {
+      const isValid = await analytics.identifyByApiKey(value)
+      if (!isValid) {
+        // TODO: add validation message
+        keys = { ...keys }
+        return
+      }
+    }
     const response = await api.put(`/api/keys/${key}`, { value })
     const res = await response.json()
-    if (key === "budibase") posthog.identify(value)
     keys = { ...keys, ...res }
   }
 
@@ -17,6 +25,8 @@
   async function fetchKeys() {
     const response = await api.get(`/api/keys/`)
     const res = await response.json()
+    // dont want this to ever be editable, as its fetched based on Api Key
+    if (res.userId) delete res.userId
     keys = res
   }
 

packages/builder/src/components/start/CreateAppModal.svelte

@@ -22,12 +22,31 @@
 
   export let hasKey
 
+  let isApiKeyValid
+  let lastApiKey
+  let fetchApiKeyPromise
+  const validateApiKey = async apiKey => {
+    if (!apiKey) return false
+
+    // make sure we only fetch once
+    if (isApiKeyValid === undefined || apiKey !== lastApiKey) {
+      if (!fetchApiKeyPromise) {
+        fetchApiKeyPromise = analytics.identifyByApiKey(apiKey)
+      }
+      isApiKeyValid = await fetchApiKeyPromise
+      fetchApiKeyPromise = undefined
+    }
+    return isApiKeyValid
+  }
+
   let submitting = false
   let errors = {}
   let validationErrors = {}
   let validationSchemas = [
     {
-      apiKey: string().required("Please enter your API key."),
+      apiKey: string()
+        .required("Please enter your API key.")
+        .test("valid-apikey", "This API key is invalid", validateApiKey),
     },
     {
       applicationName: string().required("Your application must have a name."),
@@ -160,6 +179,7 @@
   }
 
   function extractErrors({ inner }) {
+    if (!inner) return {}
     return inner.reduce((acc, err) => {
       return { ...acc, [err.path]: err.message }
     }, {})

packages/builder/src/pages/index.svelte

@@ -9,6 +9,7 @@
   import Spinner from "components/common/Spinner.svelte"
   import CreateAppModal from "components/start/CreateAppModal.svelte"
   import { Button } from "@budibase/bbui"
+  import analytics from "../analytics"
 
   let promise = getApps()
 
@@ -36,6 +37,7 @@
     const apps = await getApps()
     if (key) {
       hasKey = true
+      analytics.identify(key.userId)
     } else {
       showCreateAppModal()
     }