Merge pull request #15803 from Budibase/BUDI-9127/use-env-secrets-on-oauth2

Allow using env secrets on oauth2

packages/bbui/src/Form/Core/EnvDropdown.svelte

@@ -25,11 +25,10 @@
   let iconFocused = false
   let open = false
 
-  //eslint-disable-next-line
-  const STRIP_NAME_REGEX = /(\w+?)(?=\ })/g
+  const STRIP_NAME_REGEX = /{{\s*env\.([^\s]+)\s*}}/g
 
   // Strips the name out of the value which is {{ env.Variable }} resulting in an array like ["Variable"]
-  $: hbsValue = String(value)?.match(STRIP_NAME_REGEX) || []
+  $: hbsValue = (String(value) && STRIP_NAME_REGEX.exec(String(value))) || []
 
   const updateValue = (newValue: any) => {
     if (readonly) {
@@ -125,7 +124,7 @@
       disabled={!!hbsValue.length || disabled}
       {readonly}
       {id}
-      value={(hbsValue.length ? `{{ ${hbsValue[0]} }}` : value) ?? ""}
+      value={(hbsValue.length ? `{{ ${hbsValue[1]} }}` : value) ?? ""}
       placeholder={placeholder || ""}
       on:click
       on:blur

packages/builder/src/pages/builder/app/[application]/settings/oauth2/OAuth2ConfigModalContent.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import EnvVariableInput from "@/components/portal/environment/EnvVariableInput.svelte"
   import { oauth2 } from "@/stores/builder"
   import type { OAuth2Config } from "@/types"
   import {
@@ -133,7 +134,9 @@
 
   $: hasBeenSubmitted && validateConfig(data)
 
-  $: isProtectedPassword = config?.clientSecret === PASSWORD_REPLACEMENT
+  $: isProtectedPassword =
+    config?.clientSecret === PASSWORD_REPLACEMENT ||
+    config?.clientSecret.match(/{{\s*env\.[^\s]+\s*}}/)
 </script>
 
 <ModalContent onConfirm={saveOAuth2Config} size="M">
@@ -195,13 +198,13 @@
       full URL.
     </Body>
   </div>
-  <Input
+  <EnvVariableInput
     label="Client ID*"
     placeholder="Type here..."
     bind:value={data.clientId}
     error={errors.clientId}
   />
-  <Input
+  <EnvVariableInput
     type={!isProtectedPassword ? "password" : "text"}
     label="Client secret*"
     placeholder="Type here..."

packages/server/src/sdk/app/oauth2/utils.ts

@@ -7,6 +7,7 @@ import {
   OAuth2GrantType,
 } from "@budibase/types"
 import { cache, context, docIds } from "@budibase/backend-core"
+import { processEnvironmentVariable } from "../../utils"
 
 interface OAuth2LogDocument extends Document {
   lastUsage: number
@@ -21,6 +22,8 @@ async function fetchToken(config: {
   method: OAuth2CredentialsMethod
   grantType: OAuth2GrantType
 }) {
+  config = await processEnvironmentVariable(config)
+
   const fetchConfig: RequestInit = {
     method: "POST",
     headers: {

packages/server/src/sdk/utils/index.ts

@@ -1,6 +1,7 @@
 import { environmentVariables } from "@budibase/pro"
 import { context, db as dbCore } from "@budibase/backend-core"
 import { AppEnvironment } from "@budibase/types"
+import { processString } from "@budibase/string-templates"
 
 export async function getEnvironmentVariables() {
   let envVars = context.getEnvironmentVariables()
@@ -14,3 +15,46 @@ export async function getEnvironmentVariables() {
   }
   return envVars
 }
+
+function isEnvironmentVariableKey(str: string) {
+  return str.match(/{{\s*env\.[^\s]+\s*}}/)
+}
+
+export async function processEnvironmentVariable<
+  T extends string | Record<string, string>
+>(value: T): Promise<T> {
+  let envVariables: Record<string, string>
+  const getEnvVariables = async () => {
+    if (!envVariables) {
+      envVariables = await getEnvironmentVariables()
+    }
+    return envVariables
+  }
+
+  if (typeof value !== "string") {
+    for (const key of Object.keys(value)) {
+      value[key] = await _processEnvironmentVariable(
+        value[key],
+        getEnvVariables
+      )
+    }
+    return value
+  }
+
+  const result = await _processEnvironmentVariable(value, getEnvVariables)
+  return result as T
+}
+
+async function _processEnvironmentVariable(
+  str: string,
+  envVariables: () => Promise<Record<string, string>>
+) {
+  if (!isEnvironmentVariableKey(str)) {
+    return str
+  }
+
+  const result = await processString(str, {
+    env: await envVariables(),
+  })
+  return result
+}