diff --git a/apps/docs/app/contributing/content.mdx b/apps/docs/app/contributing/content.mdx index c3632971a2..1bff38834c 100644 --- 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 - + + ``` - + + ### Step Hike diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx index b34ed12242..d384746540 100644 --- 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 'publishableKey': - variableValue = apiData?.service_api_keys?.find((key) => key.tags === 'anon')?.api_key || '' + case 'anon': + variableValue = + apiKeysData?.find((key) => key.type === 'legacy' && key.id === 'anon')?.api_key || '' + break + 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 index 2ed28261be..cb06766dba 100644 --- 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 = { 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 index bbefe0d40c..4440e53b0e 100644 --- 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: - + + diff --git a/apps/docs/content/guides/auth/server-side/nextjs.mdx b/apps/docs/content/guides/auth/server-side/nextjs.mdx index ff02120c23..7dfb218570 100644 --- 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`: - + + @@ -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`: - + + diff --git a/apps/docs/content/guides/auth/server-side/sveltekit.mdx b/apps/docs/content/guides/auth/server-side/sveltekit.mdx index b8de7de042..e14fdf6aef 100644 --- 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`: - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx b/apps/docs/content/guides/getting-started/quickstarts/flutter.mdx index 54142ac73c..b36cbd8f6c 100644 --- 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: - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/hono.mdx b/apps/docs/content/guides/getting-started/quickstarts/hono.mdx index 565ee5fae0..7efe526cbd 100644 --- 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. - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx b/apps/docs/content/guides/getting-started/quickstarts/ios-swiftui.mdx index 9424fd47d9..2cda6ab608 100644 --- 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: - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx b/apps/docs/content/guides/getting-started/quickstarts/kotlin.mdx index 59f7b6cf28..1271178623 100644 --- 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: - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nextjs.mdx index e7fc33911c..2a58a49ab6 100644 --- 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: - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/nuxtjs.mdx index 0da48358c7..d9a6a20cd7 100644 --- 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: - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/reactjs.mdx index 1bf6756565..d9bf9f3d13 100644 --- 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: - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/refine.mdx b/apps/docs/content/guides/getting-started/quickstarts/refine.mdx index a6cb4ff632..11214198c8 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/refine.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/refine.mdx @@ -78,7 +78,8 @@ hideToc: true You now have to update the `supabaseClient` with the `SUPABASE_URL` and `SUPABASE_KEY` of your Supabase API. The `supabaseClient` is used in auth provider and data provider methods that allow the refine app to connect to your Supabase backend. - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx index 10aa736884..a0d82752f2 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/solidjs.mdx @@ -56,7 +56,8 @@ hideToc: true Create a `.env.local` file and populate with your Supabase connection variables: - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx index c5b20f469c..82061a1386 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/sveltekit.mdx @@ -57,7 +57,8 @@ hideToc: true Create a `.env` file at the root of your project and populate with your Supabase connection variables: - + + diff --git a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx index fb1de8db61..715acdd2ea 100644 --- a/apps/docs/content/guides/getting-started/quickstarts/vue.mdx +++ b/apps/docs/content/guides/getting-started/quickstarts/vue.mdx @@ -56,7 +56,8 @@ hideToc: true Create a `.env.local` file and populate with your Supabase connection variables: - + + diff --git a/apps/docs/lib/fetch/fetchWrappers.ts b/apps/docs/lib/fetch/fetchWrappers.ts index f8a145f587..50fcd93ebf 100644 --- a/apps/docs/lib/fetch/fetchWrappers.ts +++ b/apps/docs/lib/fetch/fetchWrappers.ts @@ -28,7 +28,6 @@ async function constructHeaders(headersInit?: HeadersInit | undefined) { headers.set('Authorization', `Bearer ${accessToken}`) } } - return headers } diff --git a/apps/docs/lib/fetch/projectApi.ts b/apps/docs/lib/fetch/projectApi.ts index 8a88f8062d..8fe4a68d48 100644 --- a/apps/docs/lib/fetch/projectApi.ts +++ b/apps/docs/lib/fetch/projectApi.ts @@ -4,13 +4,34 @@ import { UseQueryOptions, useQuery } from '@tanstack/react-query' const projectApiKeys = { api: (projectRef: string | undefined) => ['projects', projectRef, 'api'] as const, + settings: (projectRef: string | undefined) => ['projects', projectRef, 'settings'] as const, } export interface ProjectApiVariables { projectRef?: string } +type ProjectApiError = ResponseError -async function getProjectApi({ projectRef }: ProjectApiVariables, signal?: AbortSignal) { +export type ProjectKeys = Awaited> + +export type ProjectSettings = Awaited> + +async function getProjectKeys({ projectRef }: ProjectApiVariables, signal?: AbortSignal) { + if (!projectRef) { + throw Error('projectRef is required') + } + + const { data, error } = await get('/v1/projects/{ref}/api-keys', { + params: { + path: { ref: projectRef }, + }, + signal, + }) + if (error) throw error + return data +} + +async function getProjectSettings({ projectRef }: ProjectApiVariables, signal?: AbortSignal) { if (!projectRef) { throw Error('projectRef is required') } @@ -22,23 +43,34 @@ async function getProjectApi({ projectRef }: ProjectApiVariables, signal?: Abort signal, }) if (error) throw error - return data } -export type ProjectApiData = Awaited> -type ProjectApiError = ResponseError - -export function useProjectApiQuery( +export function useProjectKeysQuery( { projectRef }: ProjectApiVariables, { enabled = true, ...options - }: Omit, 'queryKey'> = {} + }: Omit, 'queryKey'> = {} ) { - return useQuery({ + return useQuery({ queryKey: projectApiKeys.api(projectRef), - queryFn: ({ signal }) => getProjectApi({ projectRef }, signal), + queryFn: ({ signal }) => getProjectKeys({ projectRef }, signal), + enabled, + ...options, + }) +} + +export function useProjectSettingsQuery( + { projectRef }: ProjectApiVariables, + { + enabled = true, + ...options + }: Omit, 'queryKey'> = {} +) { + return useQuery({ + queryKey: projectApiKeys.settings(projectRef), + queryFn: ({ signal }) => getProjectSettings({ projectRef }, signal), enabled, ...options, })