diff --git a/studio/components/to-be-cleaned/Docs/Pages/Authentication.js b/studio/components/to-be-cleaned/Docs/Pages/Authentication.js
index 54bc1c25f54..4ad66d322f3 100644
--- a/studio/components/to-be-cleaned/Docs/Pages/Authentication.js
+++ b/studio/components/to-be-cleaned/Docs/Pages/Authentication.js
@@ -2,7 +2,13 @@ import Link from 'next/link'
 import Snippets from '../Snippets'
 import CodeSnippet from '../CodeSnippet'
 
-export default function Authentication({ autoApiService, selectedLang }) {
+export default function Authentication({ autoApiService, selectedLang, showApiKey }) {
+  // [Joshen] ShowApiKey should really be a boolean, its confusing
+  const defaultApiKey =
+    showApiKey !== 'SUPABASE_KEY' ? autoApiService.defaultApiKey : 'SUPABASE_CLIENT_API_KEY'
+  const serviceApiKey =
+    showApiKey !== 'SUPABASE_KEY' ? autoApiService.serviceApiKey : 'SUPABASE_SERVICE_KEY'
+
   return (
     <>
       <h2 className="doc-heading">Authentication</h2>
@@ -44,19 +50,13 @@ export default function Authentication({ autoApiService, selectedLang }) {
         <article className="code">
           <CodeSnippet
             selectedLang={selectedLang}
-            snippet={Snippets.authKey(
-              'CLIENT API KEY',
-              'SUPABASE_KEY',
-              autoApiService.defaultApiKey
-            )}
+            snippet={Snippets.authKey('CLIENT API KEY', 'SUPABASE_KEY', defaultApiKey)}
           />
           <CodeSnippet
             selectedLang={selectedLang}
-            snippet={Snippets.authKeyExample(
-              autoApiService.defaultApiKey,
-              autoApiService.endpoint,
-              { showBearer: false }
-            )}
+            snippet={Snippets.authKeyExample(defaultApiKey, autoApiService.endpoint, {
+              showBearer: false,
+            })}
           />
         </article>
       </div>
@@ -84,15 +84,13 @@ export default function Authentication({ autoApiService, selectedLang }) {
         <article className="code">
           <CodeSnippet
             selectedLang={selectedLang}
-            snippet={Snippets.authKey('SERVICE KEY', 'SERVICE_KEY', autoApiService.serviceApiKey)}
+            snippet={Snippets.authKey('SERVICE KEY', 'SERVICE_KEY', serviceApiKey)}
           />
           <CodeSnippet
             selectedLang={selectedLang}
-            snippet={Snippets.authKeyExample(
-              autoApiService.serviceApiKey,
-              autoApiService.endpoint,
-              { keyName: 'SERVICE_KEY' }
-            )}
+            snippet={Snippets.authKeyExample(serviceApiKey, autoApiService.endpoint, {
+              keyName: 'SERVICE_KEY',
+            })}
           />
         </article>
       </div>
diff --git a/studio/pages/project/[ref]/api/index.tsx b/studio/pages/project/[ref]/api/index.tsx
index d6b9480a285..6653b8d1d3f 100644
--- a/studio/pages/project/[ref]/api/index.tsx
+++ b/studio/pages/project/[ref]/api/index.tsx
@@ -243,7 +243,13 @@ const GeneralContent = ({ autoApiService, selectedLang, page, showApiKey }: any)
   if (selected == 'intro' || selected == null)
     return <Introduction autoApiService={autoApiService} selectedLang={selectedLang} />
   if (selected == 'auth')
-    return <Authentication autoApiService={autoApiService} selectedLang={selectedLang} />
+    return (
+      <Authentication
+        autoApiService={autoApiService}
+        selectedLang={selectedLang}
+        showApiKey={showApiKey}
+      />
+    )
   if (selected == 'users')
     return (
       <UserManagement