diff --git a/apps/studio/components/interfaces/Home/Connect/content/react/supabasejs/content.tsx b/apps/studio/components/interfaces/Home/Connect/content/react/supabasejs/content.tsx
index 3a6e6e6a2f1..11c0702f741 100644
--- a/apps/studio/components/interfaces/Home/Connect/content/react/supabasejs/content.tsx
+++ b/apps/studio/components/interfaces/Home/Connect/content/react/supabasejs/content.tsx
@@ -20,8 +20,8 @@ const ContentFile = ({ projectKeys }: ContentFileProps) => {
       <ConnectTabContent value=".env.local">
         <SimpleCodeBlock className="bash" parentClassName="min-h-72">
           {`
-SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
-SUPABASE_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
+REACT_APP_SUPABASE_URL=${projectKeys.apiUrl ?? 'your-project-url'}
+REACT_APP_SUPABASE_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
         `}
         </SimpleCodeBlock>
       </ConnectTabContent>
@@ -31,8 +31,8 @@ SUPABASE_KEY=${projectKeys.anonKey ?? 'your-anon-key'}
           {`
 import { createClient } from "@supabase/supabase-js";
 
-const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
-const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
+const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
+const supabaseKey = process.env.REACT_APP_SUPABASE_ANON_KEY;
 
 export const supabase = createClient(supabaseUrl, supabaseKey);
         `}