feat: replace nextjs-config with environment variables (#632)

* chore: remove nextjs-config

* build fix

* update readme

* explicit nextjs env vars + remove feature-unrelated things and obsolete vars from config

* full config removal

* remove force-dynamic from pages

* compile fix

* restore claude-deleted tests

* better .env.example

---------

Co-authored-by: Igor Loskutov <igor.loskutoff@gmail.com>

CLAUDE.md

@@ -66,7 +66,6 @@ pnpm install
 
 # Copy configuration templates
 cp .env_template .env
-cp config-template.ts config.ts
 ```
 
 **Development:**

README.md

@@ -99,11 +99,10 @@ Start with `cd www`.
 
 ```bash
 pnpm install
-cp .env_template .env
+cp .env.example .env
-cp config-template.ts config.ts
 ```
 
-Then, fill in the environment variables in `.env` and the configuration in `config.ts` as needed. If you are unsure on how to proceed, ask in Zulip.
+Then, fill in the environment variables in `.env` as needed. If you are unsure on how to proceed, ask in Zulip.
 
 **Run in development mode**
 
@@ -168,3 +167,34 @@ You can manually process an audio file by calling the process tool:
 ```bash
 uv run python -m reflector.tools.process path/to/audio.wav
 ```
+
+
+## Feature Flags
+
+Reflector uses environment variable-based feature flags to control application functionality. These flags allow you to enable or disable features without code changes.
+
+### Available Feature Flags
+
+| Feature Flag | Environment Variable |
+|-------------|---------------------|
+| `requireLogin` | `NEXT_PUBLIC_FEATURE_REQUIRE_LOGIN` |
+| `privacy` | `NEXT_PUBLIC_FEATURE_PRIVACY` |
+| `browse` | `NEXT_PUBLIC_FEATURE_BROWSE` |
+| `sendToZulip` | `NEXT_PUBLIC_FEATURE_SEND_TO_ZULIP` |
+| `rooms` | `NEXT_PUBLIC_FEATURE_ROOMS` |
+
+### Setting Feature Flags
+
+Feature flags are controlled via environment variables using the pattern `NEXT_PUBLIC_FEATURE_{FEATURE_NAME}` where `{FEATURE_NAME}` is the SCREAMING_SNAKE_CASE version of the feature name.
+
+**Examples:**
+```bash
+# Enable user authentication requirement
+NEXT_PUBLIC_FEATURE_REQUIRE_LOGIN=true
+
+# Disable browse functionality
+NEXT_PUBLIC_FEATURE_BROWSE=false
+
+# Enable Zulip integration
+NEXT_PUBLIC_FEATURE_SEND_TO_ZULIP=true
+```

www/.env.example

@@ -0,0 +1,34 @@
+# Environment
+ENVIRONMENT=development
+NEXT_PUBLIC_ENV=development
+
+# Site Configuration
+NEXT_PUBLIC_SITE_URL=http://localhost:3000
+
+# Nextauth envs
+# not used in app code but in lib code
+NEXTAUTH_URL=http://localhost:3000
+NEXTAUTH_SECRET=your-nextauth-secret-here
+# / Nextauth envs
+
+# Authentication (Authentik OAuth/OIDC)
+AUTHENTIK_ISSUER=https://authentik.example.com/application/o/reflector
+AUTHENTIK_REFRESH_TOKEN_URL=https://authentik.example.com/application/o/token/
+AUTHENTIK_CLIENT_ID=your-client-id-here
+AUTHENTIK_CLIENT_SECRET=your-client-secret-here
+
+# Feature Flags
+# NEXT_PUBLIC_FEATURE_REQUIRE_LOGIN=true
+# NEXT_PUBLIC_FEATURE_PRIVACY=false
+# NEXT_PUBLIC_FEATURE_BROWSE=true
+# NEXT_PUBLIC_FEATURE_SEND_TO_ZULIP=true
+# NEXT_PUBLIC_FEATURE_ROOMS=true
+
+# API URLs
+NEXT_PUBLIC_API_URL=http://127.0.0.1:1250
+NEXT_PUBLIC_WEBSOCKET_URL=ws://127.0.0.1:1250
+NEXT_PUBLIC_AUTH_CALLBACK_URL=http://localhost:3000/auth-callback
+
+# Sentry
+# SENTRY_DSN=https://your-dsn@sentry.io/project-id
+# SENTRY_IGNORE_API_RESOLUTION_ERROR=1

www/.gitignore

@@ -40,7 +40,6 @@ next-env.d.ts
 # Sentry Auth Token
 .sentryclirc
 
-config.ts
 
 # openapi logs
 openapi-ts-error-*.log

www/app/(app)/layout.tsx

@@ -1,5 +1,5 @@
 import { Container, Flex, Link } from "@chakra-ui/react";
-import { getConfig } from "../lib/edgeConfig";
+import { featureEnabled } from "../lib/features";
 import NextLink from "next/link";
 import Image from "next/image";
 import UserInfo from "../(auth)/userInfo";
@@ -11,8 +11,6 @@ export default async function AppLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const config = await getConfig();
-  const { requireLogin, privacy, browse, rooms } = config.features;
   return (
     <Container
       minW="100vw"
@@ -58,7 +56,7 @@ export default async function AppLayout({
           >
             Create
           </Link>
-          {browse ? (
+          {featureEnabled("browse") ? (
             <>
               &nbsp;·&nbsp;
               <Link href="/browse" as={NextLink} className="font-light px-2">
@@ -68,7 +66,7 @@ export default async function AppLayout({
           ) : (
             <></>
           )}
-          {rooms ? (
+          {featureEnabled("rooms") ? (
             <>
               &nbsp;·&nbsp;
               <Link href="/rooms" as={NextLink} className="font-light px-2">
@@ -78,7 +76,7 @@ export default async function AppLayout({
           ) : (
             <></>
           )}
-          {requireLogin ? (
+          {featureEnabled("requireLogin") ? (
             <>
               &nbsp;·&nbsp;
               <UserInfo />

www/app/(app)/transcripts/[transcriptId]/_components/TopicList.tsx

@@ -3,10 +3,11 @@ import ScrollToBottom from "../../scrollToBottom";
 import { Topic } from "../../webSocketTypes";
 import useParticipants from "../../useParticipants";
 import { Box, Flex, Text, Accordion } from "@chakra-ui/react";
-import { featureEnabled } from "../../../../domainContext";
 import { TopicItem } from "./TopicItem";
 import { TranscriptStatus } from "../../../../lib/transcript";
 
+import { featureEnabled } from "../../../../lib/features";
+
 type TopicListProps = {
   topics: Topic[];
   useActiveTopic: [

www/app/(app)/transcripts/new/page.tsx

@@ -9,7 +9,6 @@ import { useRouter } from "next/navigation";
 import useCreateTranscript from "../createTranscript";
 import SelectSearch from "react-select-search";
 import { supportedLanguages } from "../../../supportedLanguages";
-import { featureEnabled } from "../../../domainContext";
 import {
   Flex,
   Box,
@@ -21,10 +20,9 @@ import {
   Spacer,
 } from "@chakra-ui/react";
 import { useAuth } from "../../../lib/AuthProvider";
-import type { components } from "../../../reflector-api";
+import { featureEnabled } from "../../../lib/features";
 
 const TranscriptCreate = () => {
-  const isClient = typeof window !== "undefined";
   const router = useRouter();
   const auth = useAuth();
   const isAuthenticated = auth.status === "authenticated";
@@ -176,7 +174,7 @@ const TranscriptCreate = () => {
                     placeholder="Choose your language"
                   />
                 </Box>
-                {isClient && !loading ? (
+                {!loading ? (
                   permissionOk ? (
                     <Spacer />
                   ) : permissionDenied ? (

www/app/(app)/transcripts/shareAndPrivacy.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useState } from "react";
-import { featureEnabled } from "../../domainContext";
 
 import { ShareMode, toShareMode } from "../../lib/shareMode";
 import type { components } from "../../reflector-api";
@@ -24,6 +23,8 @@ import ShareCopy from "./shareCopy";
 import ShareZulip from "./shareZulip";
 import { useAuth } from "../../lib/AuthProvider";
 
+import { featureEnabled } from "../../lib/features";
+
 type ShareAndPrivacyProps = {
   finalSummaryRef: any;
   transcriptResponse: GetTranscript;

www/app/(app)/transcripts/shareLink.tsx

@@ -1,8 +1,9 @@
 import React, { useState, useRef, useEffect, use } from "react";
-import { featureEnabled } from "../../domainContext";
 import { Button, Flex, Input, Text } from "@chakra-ui/react";
 import QRCode from "react-qr-code";
 
+import { featureEnabled } from "../../lib/features";
+
 type ShareLinkProps = {
   transcriptId: string;
 };

www/app/(app)/transcripts/shareZulip.tsx

@@ -1,5 +1,4 @@
 import { useState, useEffect, useMemo } from "react";
-import { featureEnabled } from "../../domainContext";
 import type { components } from "../../reflector-api";
 
 type GetTranscript = components["schemas"]["GetTranscript"];
@@ -25,6 +24,8 @@ import {
   useTranscriptPostToZulip,
 } from "../../lib/apiHooks";
 
+import { featureEnabled } from "../../lib/features";
+
 type ShareZulipProps = {
   transcriptResponse: GetTranscript;
   topicsResponse: GetTranscriptTopic[];

www/app/(app)/transcripts/useMp3.ts

@@ -1,7 +1,7 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
-import { DomainContext } from "../../domainContext";
 import { useTranscriptGet } from "../../lib/apiHooks";
 import { useAuth } from "../../lib/AuthProvider";
+import { API_URL } from "../../lib/apiClient";
 
 export type Mp3Response = {
   media: HTMLMediaElement | null;
@@ -19,7 +19,6 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
     null,
   );
   const [audioDeleted, setAudioDeleted] = useState<boolean | null>(null);
-  const { api_url } = useContext(DomainContext);
   const auth = useAuth();
   const accessTokenInfo =
     auth.status === "authenticated" ? auth.accessToken : null;
@@ -78,7 +77,7 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
 
     // Audio is not deleted, proceed to load it
     audioElement = document.createElement("audio");
-    audioElement.src = `${api_url}/v1/transcripts/${transcriptId}/audio/mp3`;
+    audioElement.src = `${API_URL}/v1/transcripts/${transcriptId}/audio/mp3`;
     audioElement.crossOrigin = "anonymous";
     audioElement.preload = "auto";
 
@@ -110,7 +109,7 @@ const useMp3 = (transcriptId: string, waiting?: boolean): Mp3Response => {
         if (handleError) audioElement.removeEventListener("error", handleError);
       }
     };
-  }, [transcriptId, transcript, later, api_url]);
+  }, [transcriptId, transcript, later]);
 
   const getNow = () => {
     setLater(false);

www/app/(app)/transcripts/useWebSockets.ts

@@ -1,13 +1,12 @@
-import { useContext, useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 import { Topic, FinalSummary, Status } from "./webSocketTypes";
 import { useError } from "../../(errors)/errorContext";
-import { DomainContext } from "../../domainContext";
 import type { components } from "../../reflector-api";
 type AudioWaveform = components["schemas"]["AudioWaveform"];
 type GetTranscriptSegmentTopic =
   components["schemas"]["GetTranscriptSegmentTopic"];
 import { useQueryClient } from "@tanstack/react-query";
-import { $api } from "../../lib/apiClient";
+import { $api, WEBSOCKET_URL } from "../../lib/apiClient";
 
 export type UseWebSockets = {
   transcriptTextLive: string;
@@ -37,7 +36,6 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
   const [status, setStatus] = useState<Status | null>(null);
   const { setError } = useError();
 
-  const { websocket_url: websocketUrl } = useContext(DomainContext);
   const queryClient = useQueryClient();
 
   const [accumulatedText, setAccumulatedText] = useState<string>("");
@@ -328,7 +326,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
 
     if (!transcriptId) return;
 
-    const url = `${websocketUrl}/v1/transcripts/${transcriptId}/events`;
+    const url = `${WEBSOCKET_URL}/v1/transcripts/${transcriptId}/events`;
     let ws = new WebSocket(url);
 
     ws.onopen = () => {
@@ -494,7 +492,7 @@ export const useWebSockets = (transcriptId: string | null): UseWebSockets => {
     return () => {
       ws.close();
     };
-  }, [transcriptId, websocketUrl]);
+  }, [transcriptId]);
 
   return {
     transcriptTextLive,

www/app/domainContext.tsx

@@ -1,49 +0,0 @@
-"use client";
-import { createContext, useContext, useEffect, useState } from "react";
-import { DomainConfig } from "./lib/edgeConfig";
-
-type DomainContextType = Omit<DomainConfig, "auth_callback_url">;
-
-export const DomainContext = createContext<DomainContextType>({
-  features: {
-    requireLogin: false,
-    privacy: true,
-    browse: false,
-    sendToZulip: false,
-  },
-  api_url: "",
-  websocket_url: "",
-});
-
-export const DomainContextProvider = ({
-  config,
-  children,
-}: {
-  config: DomainConfig;
-  children: any;
-}) => {
-  const [context, setContext] = useState<DomainContextType>();
-
-  useEffect(() => {
-    if (!config) return;
-    const { auth_callback_url, ...others } = config;
-    setContext(others);
-  }, [config]);
-
-  if (!context) return;
-
-  return (
-    <DomainContext.Provider value={context}>{children}</DomainContext.Provider>
-  );
-};
-
-// Get feature config client-side with
-export const featureEnabled = (
-  featureName: "requireLogin" | "privacy" | "browse" | "sendToZulip",
-) => {
-  const context = useContext(DomainContext);
-
-  return context.features[featureName] as boolean | undefined;
-};
-
-// Get config server-side (out of react) : see lib/edgeConfig.

www/app/layout.tsx

@@ -3,9 +3,7 @@ import { Metadata, Viewport } from "next";
 import { Poppins } from "next/font/google";
 import { ErrorProvider } from "./(errors)/errorContext";
 import ErrorMessage from "./(errors)/errorMessage";
-import { DomainContextProvider } from "./domainContext";
 import { RecordingConsentProvider } from "./recordingConsentContext";
-import { getConfig } from "./lib/edgeConfig";
 import { ErrorBoundary } from "@sentry/nextjs";
 import { Providers } from "./providers";
 
@@ -68,12 +66,9 @@ export default async function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const config = await getConfig();
-
   return (
     <html lang="en" className={poppins.className} suppressHydrationWarning>
       <body className={"h-[100svh] w-[100svw] overflow-x-hidden relative"}>
-        <DomainContextProvider config={config}>
         <RecordingConsentProvider>
           <ErrorBoundary fallback={<p>"something went really wrong"</p>}>
             <ErrorProvider>
@@ -82,7 +77,6 @@ export default async function RootLayout({
             </ErrorProvider>
           </ErrorBoundary>
         </RecordingConsentProvider>
-        </DomainContextProvider>
       </body>
     </html>
   );

www/app/lib/apiClient.tsx

@@ -6,10 +6,14 @@ import createFetchClient from "openapi-react-query";
 import { assertExistsAndNonEmptyString } from "./utils";
 import { isBuildPhase } from "./next";
 
-const API_URL = !isBuildPhase
+export const API_URL = !isBuildPhase
   ? assertExistsAndNonEmptyString(process.env.NEXT_PUBLIC_API_URL)
   : "http://localhost";
 
+// TODO decide strict validation or not
+export const WEBSOCKET_URL =
+  process.env.NEXT_PUBLIC_WEBSOCKET_URL || "ws://127.0.0.1:1250";
+
 export const client = createClient<paths>({
   baseUrl: API_URL,
 });

www/app/lib/auth.ts

@@ -1,3 +1,5 @@
+import { assertExistsAndNonEmptyString } from "./utils";
+
 export const REFRESH_ACCESS_TOKEN_ERROR = "RefreshAccessTokenError" as const;
 // 4 min is 1 min less than default authentic value. here we assume that authentic won't be set to access tokens < 4 min
 export const REFRESH_ACCESS_TOKEN_BEFORE = 4 * 60 * 1000;

www/app/lib/edgeConfig.ts

@@ -1,54 +0,0 @@
-import { get } from "@vercel/edge-config";
-import { isBuildPhase } from "./next";
-
-type EdgeConfig = {
-  [domainWithDash: string]: {
-    features: {
-      [featureName in
-        | "requireLogin"
-        | "privacy"
-        | "browse"
-        | "sendToZulip"]: boolean;
-    };
-    auth_callback_url: string;
-    websocket_url: string;
-    api_url: string;
-  };
-};
-
-export type DomainConfig = EdgeConfig["domainWithDash"];
-
-// Edge config main keys can only be alphanumeric and _ or -
-export function edgeKeyToDomain(key: string) {
-  return key.replaceAll("_", ".");
-}
-
-export function edgeDomainToKey(domain: string) {
-  return domain.replaceAll(".", "_");
-}
-
-// get edge config server-side (prefer DomainContext when available), domain is the hostname
-export async function getConfig() {
-  if (process.env.NEXT_PUBLIC_ENV === "development") {
-    try {
-      return require("../../config").localConfig;
-    } catch (e) {
-      // next build() WILL try to execute the require above even if conditionally protected
-      // but thank god it at least runs catch{} block properly
-      if (!isBuildPhase) throw new Error(e);
-      return require("../../config-template").localConfig;
-    }
-  }
-
-  const domain = new URL(process.env.NEXT_PUBLIC_SITE_URL!).hostname;
-  let config = await get(edgeDomainToKey(domain));
-
-  if (typeof config !== "object") {
-    console.warn("No config for this domain, falling back to default");
-    config = await get(edgeDomainToKey("default"));
-  }
-
-  if (typeof config !== "object") throw Error("Error fetching config");
-
-  return config as DomainConfig;
-}

www/app/lib/features.ts

@@ -0,0 +1,55 @@
+export const FEATURES = [
+  "requireLogin",
+  "privacy",
+  "browse",
+  "sendToZulip",
+  "rooms",
+] as const;
+
+export type FeatureName = (typeof FEATURES)[number];
+
+export type Features = Readonly<Record<FeatureName, boolean>>;
+
+export const DEFAULT_FEATURES: Features = {
+  requireLogin: false,
+  privacy: true,
+  browse: false,
+  sendToZulip: false,
+  rooms: false,
+} as const;
+
+function parseBooleanEnv(
+  value: string | undefined,
+  defaultValue: boolean = false,
+): boolean {
+  if (!value) return defaultValue;
+  return value.toLowerCase() === "true";
+}
+
+// WARNING: keep process.env.* as-is, next.js won't see them if you generate dynamically
+const features: Features = {
+  requireLogin: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_REQUIRE_LOGIN,
+    DEFAULT_FEATURES.requireLogin,
+  ),
+  privacy: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_PRIVACY,
+    DEFAULT_FEATURES.privacy,
+  ),
+  browse: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_BROWSE,
+    DEFAULT_FEATURES.browse,
+  ),
+  sendToZulip: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_SEND_TO_ZULIP,
+    DEFAULT_FEATURES.sendToZulip,
+  ),
+  rooms: parseBooleanEnv(
+    process.env.NEXT_PUBLIC_FEATURE_ROOMS,
+    DEFAULT_FEATURES.rooms,
+  ),
+};
+
+export const featureEnabled = (featureName: FeatureName): boolean => {
+  return features[featureName];
+};

www/app/lib/types.ts

@@ -72,3 +72,7 @@ export const assertCustomSession = <S extends Session>(s: S): CustomSession => {
   // no other checks for now
   return r as CustomSession;
 };
+
+export type Mutable<T> = {
+  -readonly [P in keyof T]: T[P];
+};

www/app/lib/utils.ts

@@ -171,5 +171,6 @@ export const assertNotExists = <T>(
 
 export const assertExistsAndNonEmptyString = (
   value: string | null | undefined,
+  err?: string,
 ): NonEmptyString =>
-  parseNonEmptyString(assertExists(value, "Expected non-empty string"));
+  parseNonEmptyString(assertExists(value, err || "Expected non-empty string"));

www/app/providers.tsx

@@ -2,8 +2,8 @@
 
 import { ChakraProvider } from "@chakra-ui/react";
 import system from "./styles/theme";
+import dynamic from "next/dynamic";
 
-import { WherebyProvider } from "@whereby.com/browser-sdk/react";
 import { Toaster } from "./components/ui/toaster";
 import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { QueryClientProvider } from "@tanstack/react-query";
@@ -11,6 +11,14 @@ import { queryClient } from "./lib/queryClient";
 import { AuthProvider } from "./lib/AuthProvider";
 import { SessionProvider as SessionProviderNextAuth } from "next-auth/react";
 
+const WherebyProvider = dynamic(
+  () =>
+    import("@whereby.com/browser-sdk/react").then((mod) => ({
+      default: mod.WherebyProvider,
+    })),
+  { ssr: false },
+);
+
 export function Providers({ children }: { children: React.ReactNode }) {
   return (
     <NuqsAdapter>

www/config-template.ts

@@ -1,13 +0,0 @@
-export const localConfig = {
-  features: {
-    requireLogin: true,
-    privacy: true,
-    browse: true,
-    sendToZulip: true,
-    rooms: true,
-  },
-  api_url: "http://127.0.0.1:1250",
-  websocket_url: "ws://127.0.0.1:1250",
-  auth_callback_url: "http://localhost:3000/auth-callback",
-  zulip_streams: "", // Find the value on zulip
-};

www/middleware.ts

@@ -1,5 +1,5 @@
 import { withAuth } from "next-auth/middleware";
-import { getConfig } from "./app/lib/edgeConfig";
+import { featureEnabled } from "./app/lib/features";
 import { NextResponse } from "next/server";
 import { PROTECTED_PAGES } from "./app/lib/auth";
 
@@ -19,13 +19,12 @@ export const config = {
 
 export default withAuth(
   async function middleware(request) {
-    const config = await getConfig();
     const pathname = request.nextUrl.pathname;
 
     // feature-flags protected paths
     if (
-      (!config.features.browse && pathname.startsWith("/browse")) ||
+      (!featureEnabled("browse") && pathname.startsWith("/browse")) ||
-      (!config.features.rooms && pathname.startsWith("/rooms"))
+      (!featureEnabled("rooms") && pathname.startsWith("/rooms"))
     ) {
       return NextResponse.redirect(request.nextUrl.origin);
     }
@@ -33,10 +32,8 @@ export default withAuth(
   {
     callbacks: {
       async authorized({ req, token }) {
-        const config = await getConfig();
-
         if (
-          config.features.requireLogin &&
+          featureEnabled("requireLogin") &&
           PROTECTED_PAGES.test(req.nextUrl.pathname)
         ) {
           return !!token;

www/package.json

@@ -20,7 +20,6 @@
     "@sentry/nextjs": "^7.77.0",
     "@tanstack/react-query": "^5.85.9",
     "@types/ioredis": "^5.0.0",
-    "@vercel/edge-config": "^0.4.1",
     "@whereby.com/browser-sdk": "^3.3.4",
     "autoprefixer": "10.4.20",
     "axios": "^1.8.2",
@@ -63,8 +62,7 @@
     "jest": "^30.1.3",
     "openapi-typescript": "^7.9.1",
     "prettier": "^3.0.0",
-    "ts-jest": "^29.4.1",
+    "ts-jest": "^29.4.1"
-    "vercel": "^37.3.0"
   },
   "packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748"
 }