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

@@ -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

.eslintignore

@@ -1,3 +1,4 @@
 coverage
 dist
-scripts
+scripts
+sentry.*.config.ts

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";
+}

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}
             />

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"
               >

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"

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',