From 1f376fbc3dfb2b09a7e6e29c4968f6785945894a Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 17:26:11 +0100
Subject: [PATCH 1/5] Use EnvVariableInput

---
 .../settings/oauth2/OAuth2ConfigModalContent.svelte          | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/settings/oauth2/OAuth2ConfigModalContent.svelte b/packages/builder/src/pages/builder/app/[application]/settings/oauth2/OAuth2ConfigModalContent.svelte
index f215b58869..9aa566809c 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/oauth2/OAuth2ConfigModalContent.svelte
+++ b/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 {
@@ -195,13 +196,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..."

From ecbf42b47934e06214c8208a2808281984df1214 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 18:19:07 +0100
Subject: [PATCH 2/5] Populate env on fetch token

---
 packages/server/src/sdk/app/oauth2/utils.ts | 16 +++++++++
 packages/server/src/sdk/utils/index.ts      | 36 +++++++++++++++++++++
 2 files changed, 52 insertions(+)

diff --git a/packages/server/src/sdk/app/oauth2/utils.ts b/packages/server/src/sdk/app/oauth2/utils.ts
index 993fbe83b1..c426c08280 100644
--- a/packages/server/src/sdk/app/oauth2/utils.ts
+++ b/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
@@ -14,6 +15,19 @@ interface OAuth2LogDocument extends Document {
 
 const { DocWritethrough } = cache.docWritethrough
 
+async function resolveEnvironmentVariables(config: {
+  url: string
+  clientId: string
+  clientSecret: string
+  method: OAuth2CredentialsMethod
+  grantType: OAuth2GrantType
+}) {
+  config.clientId = await processEnvironmentVariable(config.clientId)
+  config.clientSecret = await processEnvironmentVariable(config.clientSecret)
+
+  return config
+}
+
 async function fetchToken(config: {
   url: string
   clientId: string
@@ -21,6 +35,8 @@ async function fetchToken(config: {
   method: OAuth2CredentialsMethod
   grantType: OAuth2GrantType
 }) {
+  config = await resolveEnvironmentVariables(config)
+
   const fetchConfig: RequestInit = {
     method: "POST",
     headers: {
diff --git a/packages/server/src/sdk/utils/index.ts b/packages/server/src/sdk/utils/index.ts
index 03599412a6..427bb76c4b 100644
--- a/packages/server/src/sdk/utils/index.ts
+++ b/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,38 @@ 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> {
+  // TODO: fetch only if needed
+  const envVariables = await getEnvironmentVariables()
+
+  if (typeof value !== "string") {
+    for (const key of Object.keys(value)) {
+      value[key] = await _processEnvironmentVariable(value[key], envVariables)
+    }
+    return value
+  }
+
+  const result = await _processEnvironmentVariable(value, envVariables)
+  return result as T
+}
+
+async function _processEnvironmentVariable(
+  str: string,
+  envVariables: Record<string, string> | null
+) {
+  if (!isEnvironmentVariableKey(str)) {
+    return str
+  }
+
+  const result = await processString(str, {
+    env: envVariables,
+  })
+  return result
+}

From 447eb8c5574095aed3ea209ef773221c55dd12bf Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 18:38:02 +0100
Subject: [PATCH 3/5] Process env variables

---
 packages/server/src/sdk/app/oauth2/utils.ts | 15 +--------------
 packages/server/src/sdk/utils/index.ts      | 20 ++++++++++++++------
 2 files changed, 15 insertions(+), 20 deletions(-)

diff --git a/packages/server/src/sdk/app/oauth2/utils.ts b/packages/server/src/sdk/app/oauth2/utils.ts
index c426c08280..9fb2b6b745 100644
--- a/packages/server/src/sdk/app/oauth2/utils.ts
+++ b/packages/server/src/sdk/app/oauth2/utils.ts
@@ -15,19 +15,6 @@ interface OAuth2LogDocument extends Document {
 
 const { DocWritethrough } = cache.docWritethrough
 
-async function resolveEnvironmentVariables(config: {
-  url: string
-  clientId: string
-  clientSecret: string
-  method: OAuth2CredentialsMethod
-  grantType: OAuth2GrantType
-}) {
-  config.clientId = await processEnvironmentVariable(config.clientId)
-  config.clientSecret = await processEnvironmentVariable(config.clientSecret)
-
-  return config
-}
-
 async function fetchToken(config: {
   url: string
   clientId: string
@@ -35,7 +22,7 @@ async function fetchToken(config: {
   method: OAuth2CredentialsMethod
   grantType: OAuth2GrantType
 }) {
-  config = await resolveEnvironmentVariables(config)
+  config = await processEnvironmentVariable(config)
 
   const fetchConfig: RequestInit = {
     method: "POST",
diff --git a/packages/server/src/sdk/utils/index.ts b/packages/server/src/sdk/utils/index.ts
index 427bb76c4b..bdb728600e 100644
--- a/packages/server/src/sdk/utils/index.ts
+++ b/packages/server/src/sdk/utils/index.ts
@@ -23,30 +23,38 @@ function isEnvironmentVariableKey(str: string) {
 export async function processEnvironmentVariable<
   T extends string | Record<string, string>
 >(value: T): Promise<T> {
-  // TODO: fetch only if needed
-  const envVariables = await getEnvironmentVariables()
+  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], envVariables)
+      value[key] = await _processEnvironmentVariable(
+        value[key],
+        getEnvVariables
+      )
     }
     return value
   }
 
-  const result = await _processEnvironmentVariable(value, envVariables)
+  const result = await _processEnvironmentVariable(value, getEnvVariables)
   return result as T
 }
 
 async function _processEnvironmentVariable(
   str: string,
-  envVariables: Record<string, string> | null
+  envVariables: () => Promise<Record<string, string>>
 ) {
   if (!isEnvironmentVariableKey(str)) {
     return str
   }
 
   const result = await processString(str, {
-    env: envVariables,
+    env: await envVariables(),
   })
   return result
 }

From 78b37414d7191829f1f07523455b6f91f1e98319 Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Mon, 24 Mar 2025 18:38:50 +0100
Subject: [PATCH 4/5] Display properly when using env variables

---
 .../settings/oauth2/OAuth2ConfigModalContent.svelte           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/builder/src/pages/builder/app/[application]/settings/oauth2/OAuth2ConfigModalContent.svelte b/packages/builder/src/pages/builder/app/[application]/settings/oauth2/OAuth2ConfigModalContent.svelte
index 9aa566809c..9ff68066fb 100644
--- a/packages/builder/src/pages/builder/app/[application]/settings/oauth2/OAuth2ConfigModalContent.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/settings/oauth2/OAuth2ConfigModalContent.svelte
@@ -134,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">

From c4ae3823ff16818aa627cca130f154c71cf02d9e Mon Sep 17 00:00:00 2001
From: Adria Navarro <adria@budibase.com>
Date: Tue, 25 Mar 2025 08:31:32 +0100
Subject: [PATCH 5/5] Fix display

---
 packages/bbui/src/Form/Core/EnvDropdown.svelte | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Form/Core/EnvDropdown.svelte b/packages/bbui/src/Form/Core/EnvDropdown.svelte
index 45a986f23f..70ade6ca4d 100644
--- a/packages/bbui/src/Form/Core/EnvDropdown.svelte
+++ b/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