feat: Integrate dynamic API key injection (#1551)

* chore: inject GOOGLE_MAPS_API_KEY secret into deployment workflow and clean up legacy env variables

* feat: Updates workflows to use hidden API key values.

* feat: Updates workflows to use hidden API key values.

* feat: Updates workflows to use hidden API key values.

* feat: migrate all samples to dynamically injected API keys

* chore: lock down API key scope in test workflow

* fix: apply API key injection to JS/TS files in Vite

* chore: remove redundant project-level vite configs

* fix: explicitly pass root vite config path in sample package.json scripts

* fixes incorrect init statement

* fix: Enable e2e tests and rename prod api key

* chore: Rename development API key secret to JS_MAPS_DEV_KEY

* fix: replace hardcoded api key with placeholder in map-drawing-terradraw

* chore: enforce GOOGLE_MAPS_API_KEY placeholder in build-single.sh

* chore: require exact GOOGLE_MAPS_API_KEY placeholder

* chore: add 39-character regex check for raw API keys

* fix: refine 39-character regex to avoid base64 SVGs

Author: willum070

.github/workflows/release.yml

@@ -28,7 +28,7 @@ jobs:
       contents: write
       id-token: write
     env:
-      GOOGLE_MAPS_JS_SAMPLES_KEY: "${{ secrets.GOOGLE_MAPS_JS_SAMPLES_KEY }}"
+      GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_PROD_KEY }}"
     steps:
       - name: Checkout main
         uses: actions/checkout@v4

.github/workflows/tests.yml

@@ -35,6 +35,7 @@ on:
 
 env:
   SKIP_DIST: ${{ github.event_name == 'pull_request' || github.event_name == 'schedule' }}
+  GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV_KEY }}"
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.ref }}
@@ -149,6 +150,7 @@ jobs:
           done
         env:
           STEPS_GET_WORKSPACES_OUTPUTS_CHANGED_WORKSPACES: ${{ steps.get_workspaces.outputs.changed_workspaces }}
+          GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV_KEY }}"
 
       - name: Generate Index (Run Once After Builds)
         run: bash samples/generate-index.sh
@@ -163,6 +165,7 @@ jobs:
           # Pass the correct base reference for find-changes.sh when called by samples.spec.ts
           GIT_BASE_REF: ${{ github.event_name == 'pull_request' && format('origin/{0}', github.base_ref) || github.event.before }}
           CI: true
+          GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV_KEY }}"
 
       - name: Upload Test Report Artifact
         uses: actions/upload-artifact@v4
@@ -215,6 +218,8 @@ jobs:
 
       - name: Build All Projects
         run: npm run build-all
+        env:
+          GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV_KEY }}"
 
       - name: Generate Index (Run Once After Full Builds)
         run: bash samples/generate-index.sh
@@ -228,6 +233,7 @@ jobs:
         env:
           CI: true
           TEST_ALL_SAMPLES: "true"
+          GOOGLE_MAPS_API_KEY: "${{ secrets.JS_MAPS_DEV_KEY }}"
 
       - name: Upload Test Report Artifact
         uses: actions/upload-artifact@v4

dist/samples/map-drawing-terradraw/app/index.html

@@ -13,7 +13,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

dist/samples/map-drawing-terradraw/app/package.json

@@ -5,9 +5,9 @@
   "scripts": {
     "build": "bash ../build-single.sh",
     "test": "tsc && npm run build:vite --workspace=.",
-    "start": "tsc && vite build --base './' && vite",
-    "build:vite": "vite build --base './'",
-    "preview": "vite preview"
+    "start": "tsc && vite build --config ../../vite.config.js --base './' && vite --config ../../vite.config.js",
+    "build:vite": "vite build --config ../../vite.config.js --base './'",
+    "preview": "vite preview --config ../../vite.config.js"
   },
   "dependencies": {
     "terra-draw": "latest",

dist/samples/map-drawing-terradraw/docs/index.html

@@ -13,7 +13,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

dist/samples/map-drawing-terradraw/jsfiddle/demo.html

@@ -13,7 +13,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8"
+                key: "GOOGLE_MAPS_API_KEY"
             });
         </script>
     </head>

dist/samples/routes-compute-routes/app/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8" 
+                key: "GOOGLE_MAPS_API_KEY" 
             });
         </script>
     </head>

dist/samples/routes-compute-routes/app/package.json

@@ -4,11 +4,8 @@
   "scripts": {
     "build": "bash ../build-single.sh",
     "test": "tsc && npm run build:vite --workspace=.",
-    "start": "tsc && vite build --base './' && vite",
-    "build:vite": "vite build --base './'",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    
+    "start": "tsc && vite build --config ../../vite.config.js --base './' && vite --config ../../vite.config.js",
+    "build:vite": "vite build --config ../../vite.config.js --base './'",
+    "preview": "vite preview --config ../../vite.config.js"
   }
 }

dist/samples/routes-compute-routes/docs/index.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8" 
+                key: "GOOGLE_MAPS_API_KEY" 
             });
         </script>
     </head>

dist/samples/routes-compute-routes/jsfiddle/demo.html

@@ -14,7 +14,7 @@
         <script>
             // prettier-ignore
             (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
-                key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8" 
+                key: "GOOGLE_MAPS_API_KEY" 
             });
         </script>
     </head>