moved all web envs to next runtime env (#3146)

web/components/templates/welcome/steps/codeSnippets/anthropic-proxy.tsx

@@ -7,8 +7,6 @@ interface AnthropicProxyProps {
   apiKey: string;
 }
 
-const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";
-
 const CODE_CONVERTS = {
   curl: (key: string) => `
 curl --request POST \\

web/components/templates/welcome/steps/providerIntegrations.tsx/anthropicSnippets.tsx

@@ -3,8 +3,6 @@ import { DiffHighlight } from "../../diffHighlight";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
-const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";
-
 const CODE_CONVERTS = {
   typescript: (key: string) => `import Anthropic from "@anthropic-ai/sdk";
 

web/components/templates/welcome/steps/providerIntegrations.tsx/azureSnippets.tsx

@@ -3,8 +3,6 @@ import { DiffHighlight } from "../../diffHighlight";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
 
-const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";
-
 const CODE_CONVERTS = {
   typescript: (key: string) => `import OpenAI from "openai";
 

web/components/templates/welcome/steps/providerIntegrations.tsx/openAISnippets.tsx

@@ -2,8 +2,8 @@ import { useState } from "react";
 import { DiffHighlight } from "../../diffHighlight";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-
-const BASE_PATH = process.env.NEXT_PUBLIC_BASE_PATH || "";
+import { env } from "next-runtime-env";
+const BASE_PATH = env("NEXT_PUBLIC_BASE_PATH");
 
 const CODE_CONVERTS = {
   curl: (key: string) => `curl "${BASE_PATH}/chat/completions" \\

web/lib/api/organization/hasAccess.ts

@@ -1,4 +1,4 @@
-import { supabaseServer } from "../../supabaseServer";
+import { getSupabaseServer } from "../../supabaseServer";
 import { dbExecute } from "../db/dbExecute";
 
 async function _checkAccessToOrg(
@@ -23,7 +23,7 @@ export async function checkAccessToMutateOrg(
   orgId: string,
   userId: string
 ): Promise<boolean> {
-  const orgToCheck = await supabaseServer
+  const orgToCheck = await getSupabaseServer()
     .from("organization")
     .select("*")
     .eq("id", orgId)

web/lib/clients/jawn.ts

@@ -4,6 +4,7 @@ import { ORG_ID_COOKIE_KEY } from "../constants";
 import { getHeliconeCookie } from "../cookies";
 import type { paths as publicPaths } from "./jawnTypes/public";
 import type { paths as privatePaths } from "./jawnTypes/private";
+import { env } from "next-runtime-env";
 
 export type JawnFilterNode = any;
 
@@ -22,7 +23,7 @@ export function getJawnClient(orgId?: string | "none") {
       : {};
 
   return createClient<publicPaths & privatePaths>({
-    baseUrl: process.env.NEXT_PUBLIC_HELICONE_JAWN_SERVICE,
+    baseUrl: env("NEXT_PUBLIC_HELICONE_JAWN_SERVICE"),
     headers,
   });
 }

web/lib/clients/settings.ts

@@ -1,7 +1,7 @@
-import { supabaseServer } from "../supabaseServer";
+import { getSupabaseServer } from "../supabaseServer";
 
 export async function getOpenAIKeyFromAdmin(): Promise<string | undefined> {
-  const { data } = await supabaseServer
+  const { data } = await getSupabaseServer()
     .from("helicone_settings")
     .select("*")
     .eq("name", "openai:apiKey");
@@ -10,7 +10,7 @@ export async function getOpenAIKeyFromAdmin(): Promise<string | undefined> {
 }
 
 export async function getAnthropicKeyFromAdmin(): Promise<string | undefined> {
-  const { data } = await supabaseServer
+  const { data } = await getSupabaseServer()
     .from("helicone_settings")
     .select("*")
     .eq("name", "anthropic:apiKey");

web/lib/supabaseServer.ts

@@ -5,11 +5,5 @@ export const supabaseUrl =
   process.env.SUPABASE_URL ?? process.env.NEXT_PUBLIC_SUPABASE_URL ?? "";
 const supabaseServiceKey = process.env.SUPABASE_SERVICE_KEY ?? "n/a";
 
-if (supabaseUrl === "" || supabaseServiceKey === "") {
-  throw new Error(`URL or Anon ENV not set for Server - ${supabaseServiceKey}`);
-}
-
-export const supabaseServer = createClient<Database>(
-  supabaseUrl,
-  supabaseServiceKey
-);
+export const getSupabaseServer = () =>
+  createClient<Database>(supabaseUrl, supabaseServiceKey);

web/next.config.js

@@ -2,6 +2,10 @@ const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });
 
+const { configureRuntimeEnv } = require("next-runtime-env/build/configure");
+
+configureRuntimeEnv();
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,

web/package.json

@@ -80,6 +80,7 @@
     "moment": "^2.29.4",
     "monaco-editor": "^0.52.0",
     "next": "^14.2.13",
+    "next-runtime-env": "^1.7.1",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.3.0",
     "octokit": "^3.1.2",

web/pages/_app.tsx

@@ -1,5 +1,5 @@
 import { createBrowserSupabaseClient } from "@supabase/auth-helpers-nextjs";
-import { SessionContextProvider } from "@supabase/auth-helpers-react";
+import { Session, SessionContextProvider } from "@supabase/auth-helpers-react";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { AppProps } from "next/app";
 import { ReactElement, ReactNode, useState } from "react";
@@ -21,6 +21,7 @@ import Script from "next/script";
 import { PostHogProvider } from "posthog-js/react";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { Inter } from "next/font/google";
+import { env } from "next-runtime-env";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -53,23 +54,51 @@ export function PHProvider({ children }: { children: React.ReactNode }) {
   return <PostHogProvider client={posthog}>{children}</PostHogProvider>;
 }
 
+export function SupabaseProvider({
+  children,
+  initialSession,
+}: {
+  children: React.ReactNode;
+  initialSession?: Session | null;
+}) {
+  const [supabaseClient] = useState(() => {
+    if (
+      env("NEXT_PUBLIC_SUPABASE_URL") &&
+      env("NEXT_PUBLIC_SUPABASE_ANON_KEY")
+    ) {
+      return createBrowserSupabaseClient({
+        supabaseUrl: env("NEXT_PUBLIC_SUPABASE_URL"),
+        supabaseKey: env("NEXT_PUBLIC_SUPABASE_ANON_KEY"),
+      });
+    }
+    return null;
+  });
+
+  if (!supabaseClient) {
+    return <>{children}</>;
+  }
+
+  return (
+    <SessionContextProvider
+      supabaseClient={supabaseClient}
+      initialSession={initialSession}
+    >
+      {children}
+    </SessionContextProvider>
+  );
+}
+
 export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   const queryClient = new QueryClient();
 
-  // Create a new supabase browser client on every first render.
-  const [supabaseClient] = useState(() => createBrowserSupabaseClient());
-
   const getLayout = Component.getLayout ?? ((page) => page);
 
   const trackingEnabled = process.env.NEXT_PUBLIC_TRACKING_ENABLED || false;
 
   return (
     <>
       <PHProvider>
-        <SessionContextProvider
-          supabaseClient={supabaseClient}
-          initialSession={pageProps.initialSession}
-        >
+        <SupabaseProvider>
           <QueryClientProvider client={queryClient}>
             <NotificationProvider>
               <DndProvider backend={HTML5Backend}>
@@ -86,7 +115,7 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
               </DndProvider>
             </NotificationProvider>
           </QueryClientProvider>
-        </SessionContextProvider>
+        </SupabaseProvider>
       </PHProvider>
       {trackingEnabled && <Analytics />}
       {trackingEnabled && (

web/pages/_document.tsx

@@ -18,7 +18,10 @@ class MyDocument extends Document {
 
     return (
       <Html className={isOpenStatsPage ? "open-stats-html" : ""}>
-        <Head />
+        <Head>
+          {/* eslint-disable-next-line @next/next/no-sync-scripts */}
+          <script src="/__ENV.js" />
+        </Head>
         <body className={isOpenStatsPage ? "open-stats-body" : ""}>
           <Main />
           <NextScript />

web/pages/admin/feature-flags.tsx

@@ -2,7 +2,7 @@ import { User } from "@supabase/auth-helpers-nextjs";
 import { ReactElement } from "react";
 import AdminLayout from "../../components/layout/admin/adminLayout";
 import { withAuthSSR } from "../../lib/api/handlerWrappers";
-import { supabaseServer } from "../../lib/supabaseServer";
+import { getSupabaseServer } from "../../lib/supabaseServer";
 import { AdminFeatureFlags } from "../../components/templates/admin/adminFeatureFlags";
 
 interface AdminProps {
@@ -28,7 +28,7 @@ export const getServerSideProps = withAuthSSR(async (options) => {
 
   // const { data } = await jawn.GET("/v1/admin/admins/query");
 
-  const { data, error } = await supabaseServer.from("admins").select("*");
+  const { data, error } = await getSupabaseServer().from("admins").select("*");
 
   const admins = data?.map((admin) => admin.user_id || "") || [];
 

web/pages/admin/governance-orgs.tsx

@@ -2,7 +2,7 @@ import { User } from "@supabase/auth-helpers-nextjs";
 import { ReactElement } from "react";
 import AdminLayout from "../../components/layout/admin/adminLayout";
 import { withAuthSSR } from "../../lib/api/handlerWrappers";
-import { supabaseServer } from "../../lib/supabaseServer";
+import { getSupabaseServer } from "../../lib/supabaseServer";
 import { AdminGovernanceOrgsPage } from "@/components/templates/admin/onPrem/GovernanceOrgs";
 
 interface AdminProps {
@@ -28,7 +28,7 @@ export const getServerSideProps = withAuthSSR(async (options) => {
 
   // const { data } = await jawn.GET("/v1/admin/admins/query");
 
-  const { data, error } = await supabaseServer.from("admins").select("*");
+  const { data, error } = await getSupabaseServer().from("admins").select("*");
 
   const admins = data?.map((admin) => admin.user_id || "") || [];
 

web/pages/admin/index.tsx

@@ -3,7 +3,7 @@ import { ReactElement } from "react";
 import { withAuthSSR } from "../../lib/api/handlerWrappers";
 import AdminLayout from "../../components/layout/admin/adminLayout";
 import AdminPage from "../../components/templates/admin/adminPage";
-import { supabaseServer } from "../../lib/supabaseServer";
+import { getSupabaseServer } from "../../lib/supabaseServer";
 
 interface AdminProps {
   user: User;
@@ -28,7 +28,7 @@ export const getServerSideProps = withAuthSSR(async (options) => {
 
   // const { data } = await jawn.GET("/v1/admin/admins/query");
 
-  const { data, error } = await supabaseServer.from("admins").select("*");
+  const { data, error } = await getSupabaseServer().from("admins").select("*");
 
   const admins = data?.map((admin) => admin.user_id || "") || [];
 

web/pages/admin/metrics.tsx

@@ -2,7 +2,7 @@ import { User } from "@supabase/auth-helpers-nextjs";
 import { ReactElement } from "react";
 import AdminLayout from "../../components/layout/admin/adminLayout";
 import { withAuthSSR } from "../../lib/api/handlerWrappers";
-import { supabaseServer } from "../../lib/supabaseServer";
+import { getSupabaseServer } from "../../lib/supabaseServer";
 import AdminMetrics from "../../components/templates/admin/adminMetrics";
 
 interface AdminProps {
@@ -28,7 +28,7 @@ export const getServerSideProps = withAuthSSR(async (options) => {
 
   // const { data } = await jawn.GET("/v1/admin/admins/query");
 
-  const { data, error } = await supabaseServer.from("admins").select("*");
+  const { data, error } = await getSupabaseServer().from("admins").select("*");
 
   const admins = data?.map((admin) => admin.user_id || "") || [];
 

web/pages/admin/on-prem.tsx

@@ -3,7 +3,7 @@ import { ReactElement } from "react";
 import AdminLayout from "../../components/layout/admin/adminLayout";
 import { AdminOnPremPage } from "../../components/templates/admin/onPrem/adminOnPrem";
 import { withAuthSSR } from "../../lib/api/handlerWrappers";
-import { supabaseServer } from "../../lib/supabaseServer";
+import { getSupabaseServer } from "../../lib/supabaseServer";
 
 interface AdminProps {
   user: User;
@@ -28,7 +28,7 @@ export const getServerSideProps = withAuthSSR(async (options) => {
 
   // const { data } = await jawn.GET("/v1/admin/admins/query");
 
-  const { data, error } = await supabaseServer.from("admins").select("*");
+  const { data, error } = await getSupabaseServer().from("admins").select("*");
 
   const admins = data?.map((admin) => admin.user_id || "") || [];
 

web/pages/admin/stats.tsx

@@ -2,7 +2,7 @@ import { User } from "@supabase/auth-helpers-nextjs";
 import { ReactElement } from "react";
 import AdminLayout from "../../components/layout/admin/adminLayout";
 import { withAuthSSR } from "../../lib/api/handlerWrappers";
-import { supabaseServer } from "../../lib/supabaseServer";
+import { getSupabaseServer } from "../../lib/supabaseServer";
 import AdminStats from "../../components/templates/admin/adminStats";
 
 interface AdminProps {
@@ -28,7 +28,7 @@ export const getServerSideProps = withAuthSSR(async (options) => {
 
   // const { data } = await jawn.GET("/v1/admin/admins/query");
 
-  const { data, error } = await supabaseServer.from("admins").select("*");
+  const { data, error } = await getSupabaseServer().from("admins").select("*");
 
   const admins = data?.map((admin) => admin.user_id || "") || [];
 

web/pages/api/alerts/index.ts

@@ -3,24 +3,25 @@ import {
   withAuth,
 } from "../../../lib/api/handlerWrappers";
 import { Result } from "../../../lib/result";
-import { supabaseServer } from "../../../lib/supabaseServer";
+import { getSupabaseServer } from "../../../lib/supabaseServer";
 
 async function handler({
   req,
   res,
   userData: { orgId },
 }: HandlerWrapperOptions<Result<any, string>>) {
-  let { data: alert, error: alertError } = await supabaseServer
+  let { data: alert, error: alertError } = await getSupabaseServer()
     .from("alert")
     .select("*")
     .eq("org_id", orgId)
     .not("soft_delete", "eq", true);
 
-  let { data: alertHistory, error: alertHistoryError } = await supabaseServer
-    .from("alert_history")
-    .select("*")
-    .eq("org_id", orgId)
-    .not("soft_delete", "eq", true);
+  let { data: alertHistory, error: alertHistoryError } =
+    await getSupabaseServer()
+      .from("alert_history")
+      .select("*")
+      .eq("org_id", orgId)
+      .not("soft_delete", "eq", true);
 
   if (alertError || !alert) {
     res.status(500).json({ error: alertError?.message || "", data: null });

web/pages/api/contact/index.ts

@@ -1,5 +1,5 @@
 import type { NextApiRequest, NextApiResponse } from "next";
-import { supabaseServer } from "../../../lib/supabaseServer";
+import { getSupabaseServer } from "../../../lib/supabaseServer";
 
 export default async function handler(
   req: NextApiRequest,
@@ -12,14 +12,16 @@ export default async function handler(
   const { firstName, lastName, email, companyName, companyDescription, tag } =
     req.body;
 
-  const { error } = await supabaseServer.from("contact_submissions").insert({
-    first_name: firstName,
-    last_name: lastName,
-    email_address: email,
-    company_name: companyName,
-    company_description: companyDescription,
-    tag: tag,
-  });
+  const { error } = await getSupabaseServer()
+    .from("contact_submissions")
+    .insert({
+      first_name: firstName,
+      last_name: lastName,
+      email_address: email,
+      company_name: companyName,
+      company_description: companyDescription,
+      tag: tag,
+    });
 
   if (error) {
     console.error("Failed to submit contact form");