From efec9ae36bcb03d66179d85ee9ac1eae7dc6ec2c Mon Sep 17 00:00:00 2001
From: Vincent <git@vincenttunru.com>
Date: Fri, 10 Nov 2023 14:05:00 +0100
Subject: [PATCH] Remove dynamic NEXT_PUBLIC_* environment variables

It's fine to use NEXT_PUBLIC_* environment variables that are
defined in `.env-dist` and are the same in every environment.
However, since they are inserted at build time, they cannot be
dynamically inserted at runtime, and trying to do so will instead
inject the value they have at build time.
---
 .env-dist                                     |  3 +-
 .eslintignore                                 |  3 +-
 sentry.client.config.ts                       | 35 +++++++++++++++++--
 .../(authenticated)/user/layout.tsx           |  2 +-
 .../(authenticated)/user/settings/page.tsx    |  2 +-
 .../components/client/toolbar/UserMenu.tsx    |  4 +--
 src/appConstants.js                           |  2 +-
 7 files changed, 41 insertions(+), 10 deletions(-)

diff --git a/.env-dist b/.env-dist
index 12c4cffbc..722c390d8 100755
--- a/.env-dist
+++ b/.env-dist
@@ -1,6 +1,5 @@
 # local, heroku, stage, production
 APP_ENV=local
-NEXT_PUBLIC_APP_ENV=local
 SERVER_URL=http://localhost:6060
 PORT=6060
 LOGOS_ORIGIN=
@@ -45,7 +44,7 @@ S3_BUCKET=
 # Firefox Accounts OAuth
 # leave FXA_ENABLED empty to disable FXA
 FXA_ENABLED=
-NEXT_PUBLIC_FXA_SETTINGS_URL=https://accounts.stage.mozaws.net/settings
+FXA_SETTINGS_URL=https://accounts.stage.mozaws.net/settings
 
 OAUTH_CLIENT_ID=edd29a80019d61a1
 OAUTH_CLIENT_SECRET=get-this-from-groovecoder-or-fxmonitor-engineering
diff --git a/.eslintignore b/.eslintignore
index eac16e27d..448553916 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 coverage
 dist
-scripts
\ No newline at end of file
+scripts
+sentry.*.config.ts
diff --git a/sentry.client.config.ts b/sentry.client.config.ts
index ff4478775..50a032358 100644
--- a/sentry.client.config.ts
+++ b/sentry.client.config.ts
@@ -9,7 +9,7 @@
 import * as Sentry from "@sentry/nextjs";
 
 Sentry.init({
-  environment: process.env.NEXT_PUBLIC_APP_ENV,
+  environment: getEnvironment(),
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
 
   // Adjust this value in production, or use tracesSampler for greater control
@@ -23,7 +23,7 @@ Sentry.init({
   // This sets the sample rate to be 10%. You may want this to be 100% while
   // in development and sample at a lower rate in production
   replaysSessionSampleRate: ["development", "heroku"].includes(
-    process.env.NODE_ENV
+    process.env.NODE_ENV,
   )
     ? 1.0
     : 0.1,
@@ -37,3 +37,34 @@ Sentry.init({
     }),
   ],
 });
+
+/**
+ * We use the same built artifacts in every environment. Since client-side
+ * environment variables get compiled in at build time, the only environment
+ * variables that are available are the ones that are available on the build
+ * server, which therefore do not necessarily represent the environment the code
+ * will eventually run in. Therefore, we have to dynamically determine the
+ * environment at runtime, which is what this function does.
+ */
+function getEnvironment() {
+  if (
+    document.location.origin === "https://monitor.firefox.com" ||
+    document.location.origin === "https://monitor.mozilla.com"
+  ) {
+    return "production";
+  }
+  if (
+    document.location.origin ===
+    "https://stage.firefoxmonitor.nonprod.cloudops.mozgcp.net"
+  ) {
+    return "stage";
+  }
+  if (document.location.origin === "https://fx-breach-alerts.herokuapp.com") {
+    return "heroku";
+  }
+  if (document.location.hostname === "localhost") {
+    return "local";
+  }
+
+  return "unknown";
+}
diff --git a/src/app/(nextjs_migration)/(authenticated)/user/layout.tsx b/src/app/(nextjs_migration)/(authenticated)/user/layout.tsx
index 2da30e47f..267c68b6f 100644
--- a/src/app/(nextjs_migration)/(authenticated)/user/layout.tsx
+++ b/src/app/(nextjs_migration)/(authenticated)/user/layout.tsx
@@ -105,7 +105,7 @@ const MainLayout = async (props: Props) => {
             </button>
             <UserMenu
               session={session}
-              fxaSettingsUrl={AppConstants.NEXT_PUBLIC_FXA_SETTINGS_URL}
+              fxaSettingsUrl={AppConstants.FXA_SETTINGS_URL}
               nonce={getNonce()}
               enabledFeatureFlags={enabledFeatureFlags}
             />
diff --git a/src/app/(nextjs_migration)/(authenticated)/user/settings/page.tsx b/src/app/(nextjs_migration)/(authenticated)/user/settings/page.tsx
index fbb723e21..f464d3dac 100644
--- a/src/app/(nextjs_migration)/(authenticated)/user/settings/page.tsx
+++ b/src/app/(nextjs_migration)/(authenticated)/user/settings/page.tsx
@@ -253,7 +253,7 @@ export default async function Settings() {
               </p>
               <a
                 className="settings-link-fxa"
-                href={AppConstants.NEXT_PUBLIC_FXA_SETTINGS_URL}
+                href={AppConstants.FXA_SETTINGS_URL}
                 target="_blank"
                 rel="noopener noreferrer"
               >
diff --git a/src/app/components/client/toolbar/UserMenu.tsx b/src/app/components/client/toolbar/UserMenu.tsx
index e57a8d40d..21f74ca48 100644
--- a/src/app/components/client/toolbar/UserMenu.tsx
+++ b/src/app/components/client/toolbar/UserMenu.tsx
@@ -76,7 +76,7 @@ export const UserMenu = (props: UserMenuProps) => {
         <b>{props.user.email}</b>
         <a
           className={styles.menuItemCta}
-          href={process.env.NEXT_PUBLIC_FXA_SETTINGS_URL}
+          href={process.env.FXA_SETTINGS_URL}
           ref={fxaItemRef}
           rel="noopener noreferrer"
           target="_blank"
@@ -105,7 +105,7 @@ export const UserMenu = (props: UserMenuProps) => {
       >
         <a
           className={styles.menuItemCta}
-          href={process.env.NEXT_PUBLIC_EXTERNAL_SUPPORT_URL}
+          href={process.env.NEXT_PUBLIC_MONITOR_SUPPORT_URL}
           ref={helpItemRef}
           rel="noopener noreferrer"
           target="_blank"
diff --git a/src/appConstants.js b/src/appConstants.js
index bade160d5..4bcbd35e6 100644
--- a/src/appConstants.js
+++ b/src/appConstants.js
@@ -25,7 +25,7 @@ const requiredEnvVars = [
   'MAX_NUM_ADDRESSES',
   'MOZLOG_FMT',
   'MOZLOG_LEVEL',
-  'NEXT_PUBLIC_FXA_SETTINGS_URL',
+  'FXA_SETTINGS_URL',
   'NODE_ENV',
   'OAUTH_ACCOUNT_URI',
   'OAUTH_AUTHORIZATION_URI',