From 11a14ee8dc2df83c2f5cdf4bfd0a2efca0feb9aa Mon Sep 17 00:00:00 2001
From: Ivan Kiral <kiralivan@gmail.com>
Date: Thu, 30 Apr 2026 14:06:16 +0200
Subject: [PATCH] fix: allow npm run dev without Auth0 env vars

Move Auth0 env reads from AuthProviderWithRedirect into main.tsx and pass
domain, clientId, redirectUri as props. When any of VITE_AUTH_DOMAIN /
VITE_AUTH_CLIENT_ID / VITE_AUTH_REDIRECT_URL is missing, the /:envId
route is no longer registered and a console warning names the missing
vars, so the dev server can boot without a populated .env.
---
 .../auth/AuthProviderWithRedirect.tsx         | 19 +++--
 src/main.tsx                                  | 81 ++++++++++++-------
 2 files changed, 64 insertions(+), 36 deletions(-)

diff --git a/src/components/auth/AuthProviderWithRedirect.tsx b/src/components/auth/AuthProviderWithRedirect.tsx
index 772c645..659b65b 100644
--- a/src/components/auth/AuthProviderWithRedirect.tsx
+++ b/src/components/auth/AuthProviderWithRedirect.tsx
@@ -2,15 +2,18 @@ import { Auth0Provider } from "@auth0/auth0-react";
 import type { FC, PropsWithChildren } from "react";
 import { useNavigate } from "react-router-dom";
 
-const domain = import.meta.env.VITE_AUTH_DOMAIN as string | undefined;
-const clientId = import.meta.env.VITE_AUTH_CLIENT_ID as string | undefined;
-const redirectUri = import.meta.env.VITE_AUTH_REDIRECT_URL as string | undefined;
-
-if (!domain || !clientId || !redirectUri) {
-  throw new Error("Missing environment variables");
-}
+type Props = {
+  domain: string;
+  clientId: string;
+  redirectUri: string;
+};
 
-const Auth0ProviderWithRedirect: FC<PropsWithChildren<object>> = ({ children }) => {
+const Auth0ProviderWithRedirect: FC<PropsWithChildren<Props>> = ({
+  children,
+  domain,
+  clientId,
+  redirectUri,
+}) => {
   const navigate = useNavigate();
 
   const onRedirectCallback = async () => {
diff --git a/src/main.tsx b/src/main.tsx
index a8359bc..8bf73be 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -10,6 +10,23 @@ import LandingPage from "./pages/LandingPage.tsx";
 
 const queryClient = new QueryClient();
 
+const domain = import.meta.env.VITE_AUTH_DOMAIN as string | undefined;
+const clientId = import.meta.env.VITE_AUTH_CLIENT_ID as string | undefined;
+const redirectUri = import.meta.env.VITE_AUTH_REDIRECT_URL as string | undefined;
+
+if (!domain || !clientId || !redirectUri) {
+  const missing = [
+    !domain && "VITE_AUTH_DOMAIN",
+    !clientId && "VITE_AUTH_CLIENT_ID",
+    !redirectUri && "VITE_AUTH_REDIRECT_URL",
+  ]
+    .filter(Boolean)
+    .join(", ");
+  console.warn(
+    `Missing ${missing}. Auth0 is disabled for this dev session — routes requiring auth will not work. See .env.template.`,
+  );
+}
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -21,35 +38,43 @@ const router = createBrowserRouter([
       </QueryClientProvider>
     ),
   },
-  {
-    path: "/:envId",
-    element: (
-      <Auth0ProviderWithRedirect>
-        <QueryClientProvider client={queryClient}>
-          <ErrorBoundary
-            fallbackRender={({ error }) => (
-              <div>
-                There was an error!{" "}
-                <pre>{error instanceof Error ? error.message : String(error)}</pre>
-              </div>
-            )}
-          >
-            <Suspense
-              fallback={
-                <div className="flex w-screen h-screen justify-center">
-                  <Loader />
-                </div>
-              }
+  ...(domain && clientId && redirectUri
+    ? [
+        {
+          path: "/:envId",
+          element: (
+            <Auth0ProviderWithRedirect
+              domain={domain}
+              clientId={clientId}
+              redirectUri={redirectUri}
             >
-              <AppContextComponent>
-                <LandingPage />
-              </AppContextComponent>
-            </Suspense>
-          </ErrorBoundary>
-        </QueryClientProvider>
-      </Auth0ProviderWithRedirect>
-    ),
-  },
+              <QueryClientProvider client={queryClient}>
+                <ErrorBoundary
+                  fallbackRender={({ error }) => (
+                    <div>
+                      There was an error!{" "}
+                      <pre>{error instanceof Error ? error.message : String(error)}</pre>
+                    </div>
+                  )}
+                >
+                  <Suspense
+                    fallback={
+                      <div className="flex w-screen h-screen justify-center">
+                        <Loader />
+                      </div>
+                    }
+                  >
+                    <AppContextComponent>
+                      <LandingPage />
+                    </AppContextComponent>
+                  </Suspense>
+                </ErrorBoundary>
+              </QueryClientProvider>
+            </Auth0ProviderWithRedirect>
+          ),
+        },
+      ]
+    : []),
 ]);
 
 const root = document.getElementById("root");