code · pull · Oct 16, 2025 · Oct 16, 2025 · Oct 16, 2025 · Oct 16, 2025
diff --git a/apps/docs/app/contributing/content.mdx b/apps/docs/app/contributing/content.mdx
@@ -354,11 +354,13 @@ Some guides and tutorials will require that users copy their Supabase project UR
 
 ```mdx
 <ProjectConfigVariables variable="url" />
-<ProjectConfigVariables variable="publishableKey" />
+<ProjectConfigVariables variable="publishable" />
+<ProjectConfigVariables variable="anon" />
 ```
 
 <ProjectConfigVariables variable="url" />
-<ProjectConfigVariables variable="publishableKey" />
+<ProjectConfigVariables variable="publishable" />
+<ProjectConfigVariables variable="anon" />
 
 ### Step Hike
 

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -94,7 +94,7 @@ export function NavigationMenuGuideListWrapper({
       key={id}
       type="single"
       value={firstLevelRoute}
-      className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150"
+      className="transition-all duration-150 ease-out opacity-100 ml-0 delay-150 w-full"
     >
       {children}
     </Accordion.Root>

diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -1,6 +1,7 @@
 import * as Accordion from '@radix-ui/react-accordion'
 import { usePathname } from 'next/navigation'
 import { useTheme } from 'next-themes'
+import { ChevronDown } from 'lucide-react'
 import Image from 'next/legacy/image'
 import Link from 'next/link'
 import React, { useEffect, useRef } from 'react'
@@ -33,6 +34,9 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
   const activeItem = props.subItem.url === pathname
   const activeItemRef = useRef<HTMLLIElement>(null)
 
+  const isChildActive =
+    props.subItem.items && props.subItem.items.some((child: any) => child.url === pathname)
+
   const LinkContainer = (props) => {
     const isExternal = props.url.startsWith('https://')
 
@@ -67,7 +71,62 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
           </span>
         </>
       )}
-      <Accordion.Item key={props.subItem.label} value={props.subItem.url}>
+      {props.subItem.items && props.subItem.items.length > 0 ? (
+        <Accordion.Root
+          collapsible
+          type="single"
+          className="space-y-0.5"
+          defaultValue={isChildActive ? props.subItem.url : undefined}
+        >
+          <Accordion.Item key={props.subItem.url || props.subItem.name} value={props.subItem.url}>
+            <Accordion.Trigger
+              className={[
+                'flex items-center gap-2 w-full',
+                'cursor-pointer transition text-sm',
+                activeItem
+                  ? 'text-brand-link font-medium'
+                  : 'hover:text-foreground text-foreground-lighter',
+              ].join(' ')}
+            >
+              <span className="flex items-center justify-between w-full">
+                <div className="flex items-center gap-2">
+                  {props.subItem.icon && (
+                    <Image
+                      alt={props.subItem.name}
+                      src={`${props.subItem.icon}${!resolvedTheme?.includes('dark') ? '-light' : ''}.svg`}
+                      width={15}
+                      height={15}
+                    />
+                  )}
+                  {props.subItem.name}
+                </div>
+                <ChevronDown className="w-4 h-4 transition-transform data-open-parent:rotate-180" />
+              </span>
+            </Accordion.Trigger>
+            <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2">
+              {props.subItem.items
+                .filter((subItem) => subItem.enabled !== false)
+                .map((subSubItem) => {
+                  return (
+                    <li key={`${props.subItem.name}-${subSubItem.url}`}>
+                      <Link
+                        href={`${subSubItem.url}`}
+                        className={[
+                          'cursor-pointer transition text-sm',
+                          subSubItem.url === pathname
+                            ? 'text-brand-link'
+                            : 'hover:text-brand-link text-foreground-lighter',
+                        ].join(' ')}
+                      >
+                        {subSubItem.name}
+                      </Link>
+                    </li>
+                  )
+                })}
+            </Accordion.Content>
+          </Accordion.Item>
+        </Accordion.Root>
+      ) : (
         <li key={props.subItem.name} ref={activeItem ? activeItemRef : null}>
           <LinkContainer
             url={props.subItem.url}
@@ -80,42 +139,20 @@ const ContentAccordionLink = React.memo(function ContentAccordionLink(props: any
             ].join(' ')}
             parent={props.subItem.parent}
           >
-            {props.subItem.icon && (
-              <Image
-                alt={props.subItem.name}
-                src={`${props.subItem.icon}${!resolvedTheme?.includes('dark') ? '-light' : ''}.svg`}
-                width={15}
-                height={15}
-              />
-            )}
-            {props.subItem.name}
+            <div className="flex items-center gap-2">
+              {props.subItem.icon && (
+                <Image
+                  alt={props.subItem.name}
+                  src={`${props.subItem.icon}${!resolvedTheme?.includes('dark') ? '-light' : ''}.svg`}
+                  width={15}
+                  height={15}
+                />
+              )}
+              {props.subItem.name}
+            </div>
           </LinkContainer>
         </li>
-
-        {props.subItem.items && props.subItem.items.length > 0 && (
-          <Accordion.Content className="transition data-open:animate-slide-down data-closed:animate-slide-up ml-2">
-            {props.subItem.items
-              .filter((subItem) => subItem.enabled !== false)
-              .map((subSubItem) => {
-                return (
-                  <li key={props.subItem.name}>
-                    <Link
-                      href={`${subSubItem.url}`}
-                      className={[
-                        'cursor-pointer transition text-sm',
-                        subSubItem.url === pathname
-                          ? 'text-brand-link'
-                          : 'hover:text-brand-link text-foreground-lighter',
-                      ].join(' ')}
-                    >
-                      {subSubItem.name}
-                    </Link>
-                  </li>
-                )
-              })}
-          </Accordion.Content>
-        )}
-      </Accordion.Item>
+      )}
     </>
   )
 })

diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx
@@ -6,7 +6,7 @@ import type {
   Project,
   Variable,
 } from '~/components/ProjectConfigVariables/ProjectConfigVariables.utils'
-import type { ProjectApiData } from '~/lib/fetch/projectApi'
+import type { ProjectKeys, ProjectSettings } from '~/lib/fetch/projectApi'
 
 import { Check, Copy } from 'lucide-react'
 import Link from 'next/link'
@@ -34,7 +34,7 @@ import { useCopy } from '~/hooks/useCopy'
 import { useBranchesQuery } from '~/lib/fetch/branches'
 import { useOrganizationsQuery } from '~/lib/fetch/organizations'
 import { type SupavisorConfigData, useSupavisorConfigQuery } from '~/lib/fetch/pooler'
-import { useProjectApiQuery } from '~/lib/fetch/projectApi'
+import { useProjectSettingsQuery, useProjectKeysQuery } from '~/lib/fetch/projectApi'
 import { isProjectPaused, useProjectsQuery } from '~/lib/fetch/projects'
 import { retrieve, storeOrRemoveNull } from '~/lib/storage'
 import { useOnLogout } from '~/lib/userAuth'
@@ -274,14 +274,25 @@ function VariableView({ variable, className }: { variable: Variable; className?:
   const hasBranches = selectedProject?.is_branch_enabled ?? false
   const ref = hasBranches ? selectedBranch?.project_ref : selectedProject?.ref
 
-  const needsApiQuery = variable === 'publishableKey' || variable === 'url'
+  const needsApiQuery = variable === 'publishable' || variable === 'anon' || variable === 'url'
   const needsSupavisorQuery = variable === 'sessionPooler'
 
   const {
-    data: apiData,
-    isPending: isApiPending,
-    isError: isApiError,
-  } = useProjectApiQuery(
+    data: apiSettingsData,
+    isPending: isApiSettingsPending,
+    isError: isApiSettingsError,
+  } = useProjectSettingsQuery(
+    {
+      projectRef: ref,
+    },
+    { enabled: isLoggedIn && !!ref && !projectPaused && needsApiQuery }
+  )
+
+  const {
+    data: apiKeysData,
+    isPending: isApiKeysPending,
+    isError: isApiKeysError,
+  } = useProjectKeysQuery(
     {
       projectRef: ref,
     },
@@ -299,15 +310,6 @@ function VariableView({ variable, className }: { variable: Variable; className?:
     { enabled: isLoggedIn && !!ref && !projectPaused && needsSupavisorQuery }
   )
 
-  function isInvalidApiData(apiData: ProjectApiData) {
-    switch (variable) {
-      case 'url':
-        return !apiData.app_config?.endpoint
-      case 'publishableKey':
-        return !apiData.service_api_keys?.some((key) => key.tags === 'anon')
-    }
-  }
-
   function isInvalidSupavisorData(supavisorData: SupavisorConfigData) {
     return supavisorData.length === 0
   }
@@ -320,24 +322,29 @@ function VariableView({ variable, className }: { variable: Variable; className?:
         ? 'loggedIn.noSelectedProject'
         : projectPaused
           ? 'loggedIn.selectedProject.projectPaused'
-          : (needsApiQuery ? isApiPending : isSupavisorPending)
+          : (needsApiQuery ? isApiSettingsPending || isApiKeysPending : isSupavisorPending)
             ? 'loggedIn.selectedProject.dataPending'
             : (
                   needsApiQuery
-                    ? isApiError || isInvalidApiData(apiData!)
+                    ? isApiSettingsError || isApiKeysError
                     : isSupavisorError || isInvalidSupavisorData(supavisorConfig!)
                 )
               ? 'loggedIn.selectedProject.dataError'
               : 'loggedIn.selectedProject.dataSuccess'
 
   let variableValue: string = ''
+
   if (stateSummary === 'loggedIn.selectedProject.dataSuccess') {
     switch (variable) {
       case 'url':
-        variableValue = `https://${apiData?.app_config?.endpoint}`
+        variableValue = `https://${apiSettingsData?.app_config?.endpoint}`
+        break
+      case 'anon':
+        variableValue =
+          apiKeysData?.find((key) => key.type === 'legacy' && key.id === 'anon')?.api_key || ''
         break
-      case 'publishableKey':
-        variableValue = apiData?.service_api_keys?.find((key) => key.tags === 'anon')?.api_key || ''
+      case 'publishable':
+        variableValue = apiKeysData?.find((key) => key.type === 'publishable')?.api_key || ''
         break
       case 'sessionPooler':
         variableValue = supavisorConfig?.[0]?.connection_string || ''

diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.utils.ts b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.utils.ts
@@ -6,7 +6,7 @@ export type Org = OrganizationsData[number]
 export type Project = ProjectsData[number]
 export type Branch = BranchesData[number]
 
-export type Variable = 'url' | 'publishableKey' | 'sessionPooler'
+export type Variable = 'url' | 'publishable' | 'anon' | 'sessionPooler'
 
 function removeDoubleQuotes(str: string) {
   return str.replaceAll('"', '')
@@ -30,7 +30,8 @@ function unescapeDoubleQuotes(str: string) {
 
 export const prettyFormatVariable: Record<Variable, string> = {
   url: 'Project URL',
-  publishableKey: 'Publishable key',
+  anon: 'Anon key',
+  publishable: 'Publishable key',
   sessionPooler: 'Connection string (pooler session mode)',
 }
 

diff --git a/apps/docs/content/guides/auth/server-side/creating-a-client.mdx b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx
@@ -39,10 +39,11 @@ pnpm add @supabase/ssr @supabase/supabase-js
 
 ## Set environment variables
 
-In your environment variables file, set your Supabase URL and Supabase Anon Key:
+In your environment variables file, set your Supabase URL and Key:
 
 <ProjectConfigVariables variable="url" />
-<ProjectConfigVariables variable="publishableKey" />
+<ProjectConfigVariables variable="publishable" />
+<ProjectConfigVariables variable="anon" />
 
 <Tabs scrollable size="small" type="underlined" defaultActiveId="nextjs" queryGroup="framework">
 

diff --git a/apps/docs/content/guides/auth/server-side/nextjs.mdx b/apps/docs/content/guides/auth/server-side/nextjs.mdx
@@ -39,7 +39,8 @@ Create a `.env.local` file in your project root directory.
 Fill in your `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY`:
 
 <ProjectConfigVariables variable="url" />
-<ProjectConfigVariables variable="publishableKey" />
+<ProjectConfigVariables variable="publishable" />
+<ProjectConfigVariables variable="anon" />
 
 </StepHikeCompact.Details>
 
@@ -560,7 +561,8 @@ Create a `.env.local` file in your project root directory.
 Fill in your `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY`:
 
 <ProjectConfigVariables variable="url" />
-<ProjectConfigVariables variable="publishableKey" />
+<ProjectConfigVariables variable="publishable" />
+<ProjectConfigVariables variable="anon" />
 
 </StepHikeCompact.Details>
 

diff --git a/apps/docs/content/guides/auth/server-side/sveltekit.mdx b/apps/docs/content/guides/auth/server-side/sveltekit.mdx
@@ -34,7 +34,8 @@ Create a `.env.local` file in your project root directory.
 Fill in your `PUBLIC_SUPABASE_URL` and `PUBLIC_SUPABASE_PUBLISHABLE_KEY`:
 
 <ProjectConfigVariables variable="url" />
-<ProjectConfigVariables variable="publishableKey" />
+<ProjectConfigVariables variable="publishable" />
+<ProjectConfigVariables variable="anon" />
 
 </StepHikeCompact.Details>
 

diff --git a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx
@@ -58,7 +58,8 @@ hideToc: true
       Open `lib/main.dart` and edit the main function to initialize Supabase using your project URL and public API (anon) key:
 
       <ProjectConfigVariables variable="url" />
-      <ProjectConfigVariables variable="publishableKey" />
+      <ProjectConfigVariables variable="publishable" />
+      <ProjectConfigVariables variable="anon" />
 
     </StepHikeCompact.Details>
 

diff --git a/apps/docs/content/guides/getting-started/quickstarts/hono.mdx b/apps/docs/content/guides/getting-started/quickstarts/hono.mdx
@@ -50,7 +50,8 @@ hideToc: true
     Lastly, [enable anonymous sign-ins](/dashboard/project/_/auth/providers) in the Auth settings.
 
     <ProjectConfigVariables variable="url" />
-    <ProjectConfigVariables variable="publishableKey" />
+    <ProjectConfigVariables variable="publishable" />
+    <ProjectConfigVariables variable="anon" />
 
     </StepHikeCompact.Details>
     <StepHikeCompact.Code>

diff --git a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx
@@ -42,7 +42,8 @@ hideToc: true
       Create a new `Supabase.swift` file add a new Supabase instance using your project URL and public API (anon) key:
 
       <ProjectConfigVariables variable="url" />
-      <ProjectConfigVariables variable="publishableKey" />
+      <ProjectConfigVariables variable="publishable" />
+      <ProjectConfigVariables variable="anon" />
 
     </StepHikeCompact.Details>
 

diff --git a/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx
@@ -79,7 +79,8 @@ hideToc: true
       Replace the `supabaseUrl` and `supabaseKey` with your own:
 
       <ProjectConfigVariables variable="url" />
-      <ProjectConfigVariables variable="publishableKey" />
+      <ProjectConfigVariables variable="publishable" />
+      <ProjectConfigVariables variable="anon" />
 
     </StepHikeCompact.Details>
 

diff --git a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx
@@ -40,7 +40,8 @@ hideToc: true
     Rename `.env.example` to `.env.local` and populate with your Supabase connection variables:
 
     <ProjectConfigVariables variable="url" />
-    <ProjectConfigVariables variable="publishableKey" />
+    <ProjectConfigVariables variable="publishable" />
+    <ProjectConfigVariables variable="anon" />
 
     </StepHikeCompact.Details>
 

diff --git a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx
@@ -56,7 +56,8 @@ hideToc: true
     Create a `.env` file and populate with your Supabase connection variables:
 
     <ProjectConfigVariables variable="url" />
-    <ProjectConfigVariables variable="publishableKey" />
+    <ProjectConfigVariables variable="publishable" />
+    <ProjectConfigVariables variable="anon" />
 
     </StepHikeCompact.Details>
 

diff --git a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx
@@ -56,7 +56,8 @@ hideToc: true
     Create a `.env.local` file and populate with your Supabase connection variables:
 
     <ProjectConfigVariables variable="url" />
-    <ProjectConfigVariables variable="publishableKey" />
+    <ProjectConfigVariables variable="publishable" />
+    <ProjectConfigVariables variable="anon" />
 
     </StepHikeCompact.Details>