{
+ const [branchId] = fromBranchValue(option)
+ if (branchId) {
+ const branch = data.find((branch) => branch.id === branchId)
+ if (branch) setSelectedBranch(branch)
+ }
+ }}
+ />
+ ) : null
+}
+
+function VariableView({ variable, className }: { variable: Variable; className?: string }) {
+ const isUserLoading = useIsUserLoading()
+ const isLoggedIn = useIsLoggedIn()
+
+ const { selectedProject, selectedBranch } = useSnapshot(projectsStore)
+
+ // @ts-ignore -- problem in OpenAPI spec -- project has is_branch-enabled property
+ const hasBranches = selectedProject?.is_branch_enabled ?? false
+ // @ts-ignore -- problem in OpenAPI spec -- project has ref property
+ const ref = hasBranches ? selectedBranch?.project_ref : selectedProject?.ref
+
+ const {
+ data: apiData,
+ isPending,
+ isError,
+ } = useProjectApiQuery(
+ {
+ projectRef: ref,
+ },
+ { enabled: isLoggedIn && !!ref }
+ )
+
+ const stateSummary: VariableDataState = isUserLoading
+ ? 'userLoading'
+ : !isLoggedIn
+ ? 'loggedOut'
+ : !ref
+ ? 'loggedIn.noSelectedProject'
+ : isPending
+ ? 'loggedIn.selectedProject.dataPending'
+ : isError
+ ? 'loggedIn.selectedProject.dataError'
+ : 'loggedIn.selectedProject.dataSuccess'
+
+ let variableValue: string = null
+ if (stateSummary === 'loggedIn.selectedProject.dataSuccess') {
+ switch (variable) {
+ case 'url':
+ variableValue = `${apiData.autoApiService.protocol || 'https'}://${
+ apiData.autoApiService.endpoint
+ }`
+ break
+ case 'anonKey':
+ variableValue = apiData.autoApiService.defaultApiKey
+ break
+ }
+ }
+
+ const { copied, handleCopy } = useCopy()
+
+ return (
+ <>
+
+
+
+
+
+
+ {stateSummary === 'loggedIn.selectedProject.dataError' && (
+
+ You can also copy your {prettyFormatVariable[variable]} from the{' '}
+
+ dashboard
+
+ .
+
+ )}
+
+ )
+}
+
+function LoginHint({ variable }: { variable: Variable }) {
+ const isUserLoading = useIsUserLoading()
+ const isLoggedIn = useIsLoggedIn()
+
+ if (isUserLoading || isLoggedIn) return null
+
+ return (
+
+ To get your {prettyFormatVariable[variable]},{' '}
+
+ log in
+
+ .
+
+ )
+}
+
+function ProjectConfigVariablesInternal({ variable }: { variable: Variable }) {
+ const { clear: clearSharedStoreData } = useSnapshot(projectsStore)
+ useOnLogout(clearSharedStoreData)
+
+ return (
+
+
{prettyFormatVariable[variable]}
+
+
+
+
+
+
+
+ Couldn't display your API settings. You can get them from the{' '}
+
+ dashboard
+
+ .
+
+ ),
+})
diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.utils.ts b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.utils.ts
new file mode 100644
index 00000000000..a0659cf8aca
--- /dev/null
+++ b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.utils.ts
@@ -0,0 +1,53 @@
+import type { BranchesData } from '~/lib/fetch/branches'
+import type { OrganizationsData } from '~/lib/fetch/organizations'
+import type { ProjectsData } from '~/lib/fetch/projects'
+
+export type Org = OrganizationsData[number]
+export type Project = ProjectsData[number]
+export type Branch = BranchesData[number]
+
+export type Variable = 'url' | 'anonKey'
+
+export const prettyFormatVariable: Record = {
+ url: 'Project URL',
+ anonKey: 'Anon key',
+}
+
+export function toDisplayNameOrgProject(org: Org, project: Project) {
+ return `${org.name} / ${project.name}`
+}
+
+export function toOrgProjectValue(org: Org, project: Project) {
+ // @ts-ignore -- problem in OpenAPI spec -- project has ref property
+ return JSON.stringify([org.id, project.ref, toDisplayNameOrgProject(org, project)])
+}
+
+export function fromOrgProjectValue(
+ maybeOrgProject: string
+): [string, string, string] | [null, null, null] {
+ try {
+ const data = JSON.parse(maybeOrgProject)
+ if (!Array.isArray(data) || data.length !== 3) {
+ throw Error("Shape of parsed JSON doesn't match form of org and project value")
+ }
+ return data as [string, string, string]
+ } catch {
+ return [null, null, null]
+ }
+}
+
+export function toBranchValue(branch: Branch) {
+ return JSON.stringify([branch.id, branch.name])
+}
+
+export function fromBranchValue(maybeBranch: string): [string, string] | [null, null] {
+ try {
+ const data = JSON.parse(maybeBranch)
+ if (!Array.isArray(data) || data.length !== 2) {
+ throw Error("Shape of parsed JSON doesn't match form of branch value")
+ }
+ return data as [string, string]
+ } catch {
+ return [null, null]
+ }
+}
diff --git a/apps/docs/components/ProjectConfigVariables/index.tsx b/apps/docs/components/ProjectConfigVariables/index.tsx
new file mode 100644
index 00000000000..25b47999a42
--- /dev/null
+++ b/apps/docs/components/ProjectConfigVariables/index.tsx
@@ -0,0 +1 @@
+export { ProjectConfigVariables } from './ProjectConfigVariables'
diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index d8f550820a0..bddb5268caf 100644
--- a/apps/docs/components/index.tsx
+++ b/apps/docs/components/index.tsx
@@ -17,6 +17,7 @@ import MigrationWarnings from './MDX/migration_warnings.mdx'
import GetSessionWarning from './MDX/get_session_warning.mdx'
import { CH } from '@code-hike/mdx/components'
import RefHeaderSection from './reference/RefHeaderSection'
+import { ProjectConfigVariables } from './ProjectConfigVariables'
// Ref version specific
import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlobalFlagsHandler'
@@ -65,6 +66,7 @@ const components = {
SocialProviderSetup,
SocialProviderSettingsSupabase,
StepHikeCompact,
+ ProjectConfigVariables,
StorageManagement,
Alert: (props: any) => (
diff --git a/apps/docs/hooks/useCopy.ts b/apps/docs/hooks/useCopy.ts
new file mode 100644
index 00000000000..460df34f30a
--- /dev/null
+++ b/apps/docs/hooks/useCopy.ts
@@ -0,0 +1,14 @@
+import { useState } from 'react'
+
+export function useCopy() {
+ const [copied, setCopied] = useState(false)
+
+ function handleCopy() {
+ setCopied(true)
+ setTimeout(() => {
+ setCopied(false)
+ }, 1000)
+ }
+
+ return { copied, handleCopy }
+}
diff --git a/apps/docs/lib/constants.ts b/apps/docs/lib/constants.ts
index 42c12c0d3f4..3aa55d2717d 100644
--- a/apps/docs/lib/constants.ts
+++ b/apps/docs/lib/constants.ts
@@ -1,3 +1,7 @@
export const IS_PLATFORM = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
export const LOCAL_SUPABASE = process.env.NEXT_PUBLIC_LOCAL_SUPABASE === 'true'
-export const API_URL = process.env.NEXT_PUBLIC_API_URL
+export const API_URL = (
+ process.env.NODE_ENV === 'development'
+ ? process.env.NEXT_PUBLIC_API_URL || 'http://localhost:8080'
+ : process.env.NEXT_PUBLIC_API_URL
+).replace(/\/platform$/, '')
diff --git a/apps/docs/lib/fetch/branches.ts b/apps/docs/lib/fetch/branches.ts
new file mode 100644
index 00000000000..419de29f957
--- /dev/null
+++ b/apps/docs/lib/fetch/branches.ts
@@ -0,0 +1,43 @@
+import { ResponseError } from '~/types/fetch'
+import { get } from './fetchWrappers'
+import { UseQueryOptions, useQuery } from '@tanstack/react-query'
+
+const branchKeys = {
+ list: (projectRef: string | undefined) => ['projects', projectRef, 'branches'] as const,
+}
+
+export interface BranchVariables {
+ projectRef?: string
+}
+
+async function getBranches({ projectRef }: BranchVariables, signal?: AbortSignal) {
+ if (!projectRef) throw Error('projectRef is required')
+
+ const { data, error } = await get('/v1/projects/{ref}/branches', {
+ params: {
+ path: { ref: projectRef },
+ },
+ signal,
+ })
+ if (error) throw error
+
+ return data
+}
+
+export type BranchesData = Awaited>
+type BranchesError = ResponseError
+
+export function useBranchesQuery(
+ { projectRef }: BranchVariables,
+ {
+ enabled = true,
+ ...options
+ }: Omit, 'queryKey'>
+) {
+ return useQuery({
+ queryKey: branchKeys.list(projectRef),
+ queryFn: ({ signal }) => getBranches({ projectRef }, signal),
+ enabled,
+ ...options,
+ })
+}
diff --git a/apps/docs/lib/fetch/fetchWrappers.ts b/apps/docs/lib/fetch/fetchWrappers.ts
new file mode 100644
index 00000000000..2e3efd513dd
--- /dev/null
+++ b/apps/docs/lib/fetch/fetchWrappers.ts
@@ -0,0 +1,82 @@
+import { type paths } from '~/types/api'
+import createClient from 'openapi-fetch'
+import { v4 as uuidv4 } from 'uuid'
+import { API_URL } from '../constants'
+import { getAccessToken } from '../userAuth'
+
+const DEFAULT_HEADERS = {
+ 'Content-Type': 'application/json',
+ Accept: 'application/json',
+}
+
+const { GET: _get, POST: _post } = createClient({
+ baseUrl: API_URL,
+ referrerPolicy: 'no-referrer-when-downgrade',
+ headers: DEFAULT_HEADERS,
+})
+
+export async function constructHeaders(
+ headersInit?: HeadersInit | undefined,
+ { allowUnauthenticated = false }: { allowUnauthenticated?: boolean } = {}
+) {
+ const requestId = uuidv4()
+ const headers = new Headers(headersInit)
+
+ headers.set('X-Request-Id', requestId)
+
+ if (!headers.has('Authorization')) {
+ const accessToken = await getAccessToken()
+ if (accessToken) {
+ headers.set('Authorization', `Bearer ${accessToken}`)
+ } else if (!allowUnauthenticated) {
+ throw Error("can't fetch authenticated routes without signing in")
+ }
+ }
+
+ return headers
+}
+
+export const get: typeof _get = async (url, init) => {
+ let headers: Headers = null
+ try {
+ headers = await constructHeaders(init?.headers)
+ } catch (err) {
+ console.error(err)
+ return { error: err, response: undefined }
+ }
+
+ return await _get(url, {
+ ...init,
+ headers,
+ })
+}
+
+export const post: typeof _post = async (url, init) => {
+ let headers: Headers = null
+ try {
+ headers = await constructHeaders(init?.headers)
+ } catch (err) {
+ console.error(err)
+ return { error: err, response: undefined }
+ }
+
+ return await _post(url, {
+ ...init,
+ headers,
+ })
+}
+
+export const unauthedAllowedPost: typeof _post = async (url, init) => {
+ let headers: Headers = null
+ try {
+ headers = await constructHeaders(init?.headers, { allowUnauthenticated: true })
+ } catch (err) {
+ console.error(err)
+ return { error: err, response: undefined }
+ }
+
+ return await _post(url, {
+ ...init,
+ headers,
+ })
+}
diff --git a/apps/docs/lib/fetch/organizations.ts b/apps/docs/lib/fetch/organizations.ts
new file mode 100644
index 00000000000..dc4e8401dbe
--- /dev/null
+++ b/apps/docs/lib/fetch/organizations.ts
@@ -0,0 +1,28 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { get } from './fetchWrappers'
+import { ResponseError } from '~/types/fetch'
+
+const organizationKeys = {
+ list: () => ['organizations'] as const,
+}
+
+async function getOrganizations(signal?: AbortSignal) {
+ const { data, error } = await get('/platform/organizations', { signal })
+ if (error) throw error
+ return data
+}
+
+export type OrganizationsData = Awaited>
+type OrganizationsError = ResponseError
+
+export function useOrganizationsQuery({
+ enabled = true,
+ ...options
+}: Omit, 'queryKey'> = {}) {
+ return useQuery({
+ queryKey: organizationKeys.list(),
+ queryFn: ({ signal }) => getOrganizations(signal),
+ enabled,
+ ...options,
+ })
+}
diff --git a/apps/docs/lib/fetch/projectApi.ts b/apps/docs/lib/fetch/projectApi.ts
new file mode 100644
index 00000000000..5e041b80d07
--- /dev/null
+++ b/apps/docs/lib/fetch/projectApi.ts
@@ -0,0 +1,45 @@
+import { ResponseError } from '~/types/fetch'
+import { get } from './fetchWrappers'
+import { UseQueryOptions, useQuery } from '@tanstack/react-query'
+
+const projectApiKeys = {
+ api: (projectRef: string | undefined) => ['projects', projectRef, 'api'] as const,
+}
+
+export interface ProjectApiVariables {
+ projectRef?: string
+}
+
+async function getProjectApi({ projectRef }: ProjectApiVariables, signal?: AbortSignal) {
+ if (!projectRef) {
+ throw Error('projectRef is required')
+ }
+
+ const { data, error } = await get('/platform/props/project/{ref}/api', {
+ params: {
+ path: { ref: projectRef },
+ },
+ signal,
+ })
+ if (error) throw error
+
+ return data
+}
+
+type ProjectApiData = Awaited>
+type ProjectApiError = ResponseError
+
+export function useProjectApiQuery(
+ { projectRef }: ProjectApiVariables,
+ {
+ enabled = true,
+ ...options
+ }: Omit, 'queryKey'> = {}
+) {
+ return useQuery({
+ queryKey: projectApiKeys.api(projectRef),
+ queryFn: ({ signal }) => getProjectApi({ projectRef }, signal),
+ enabled,
+ ...options,
+ })
+}
diff --git a/apps/docs/lib/fetch/projects.ts b/apps/docs/lib/fetch/projects.ts
new file mode 100644
index 00000000000..568722b23b3
--- /dev/null
+++ b/apps/docs/lib/fetch/projects.ts
@@ -0,0 +1,28 @@
+import { useQuery, UseQueryOptions } from '@tanstack/react-query'
+import { ResponseError } from '~/types/fetch'
+import { get } from './fetchWrappers'
+
+const projectKeys = {
+ list: () => ['all-projects'] as const,
+}
+
+export async function getProjects(signal?: AbortSignal) {
+ const { data, error } = await get('/platform/projects', { signal })
+ if (error) throw error
+ return data
+}
+
+export type ProjectsData = Awaited>
+type ProjectsError = ResponseError
+
+export function useProjectsQuery({
+ enabled = true,
+ ...options
+}: Omit, 'queryKey'> = {}) {
+ return useQuery({
+ queryKey: projectKeys.list(),
+ queryFn: ({ signal }) => getProjects(signal),
+ enabled,
+ ...options,
+ })
+}
diff --git a/apps/docs/lib/fetch/queryClient.ts b/apps/docs/lib/fetch/queryClient.ts
new file mode 100644
index 00000000000..d28330e4b59
--- /dev/null
+++ b/apps/docs/lib/fetch/queryClient.ts
@@ -0,0 +1,46 @@
+import { QueryClient } from '@tanstack/react-query'
+import { useState } from 'react'
+
+let queryClient: QueryClient | undefined
+
+function getQueryClient() {
+ const _queryClient =
+ queryClient ??
+ new QueryClient({
+ defaultOptions: {
+ queries: {
+ staleTime: 5 * 60 * 1000, // 5 minutes
+ retry: (failureCount, error) => {
+ // Don't retry on 404s
+ if (
+ typeof error === 'object' &&
+ error !== null &&
+ 'code' in error &&
+ error.code === 404
+ ) {
+ return false
+ }
+
+ if (failureCount < 3) {
+ return true
+ }
+
+ return false
+ },
+ },
+ },
+ })
+
+ // For SSG and SSR always create a new queryClient
+ if (typeof window === 'undefined') return _queryClient
+
+ // Create the query client once in the client
+ if (!queryClient) queryClient = _queryClient
+ return queryClient
+}
+
+export function useRootQueryClient() {
+ const [_queryClient] = useState(() => getQueryClient())
+
+ return _queryClient
+}
diff --git a/apps/docs/lib/fetchWrappers.tsx b/apps/docs/lib/fetchWrappers.tsx
deleted file mode 100644
index 0313e49565f..00000000000
--- a/apps/docs/lib/fetchWrappers.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-interface DataProps {
- [prop: string]: any
-}
-
-export const post = (url: string, data: DataProps, options = {}) => {
- return fetch(url, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json',
- Accept: 'application/json',
- },
- referrerPolicy: 'no-referrer-when-downgrade',
- body: JSON.stringify(data),
- ...options,
- }).catch((error) => {
- console.error('Error at fetchWrapper - post:', error)
- })
-}
diff --git a/apps/docs/lib/storage.ts b/apps/docs/lib/storage.ts
new file mode 100644
index 00000000000..ea30f871d92
--- /dev/null
+++ b/apps/docs/lib/storage.ts
@@ -0,0 +1,49 @@
+export const LOCAL_STORAGE_KEYS = {
+ SAVED_ORG: 'docs.ui.user.selected.org',
+ SAVED_PROJECT: 'docs.ui.user.selected.project',
+ SAVED_BRANCH: 'docs.ui.user.selected.branch',
+} as const
+
+type LocalStorageKey = (typeof LOCAL_STORAGE_KEYS)[keyof typeof LOCAL_STORAGE_KEYS]
+
+type StorageType = 'local' | 'session'
+
+function getStorage(storageType: StorageType) {
+ return storageType === 'local' ? window.localStorage : window.sessionStorage
+}
+
+export function store(storageType: StorageType, key: LocalStorageKey, value: string) {
+ if (typeof window === 'undefined') return
+ const storage = getStorage(storageType)
+
+ try {
+ storage.setItem(key, value)
+ } catch {
+ console.error(`Failed to set storage item with key "${key}"`)
+ }
+}
+
+export function retrieve(storageType: StorageType, key: LocalStorageKey) {
+ if (typeof window === 'undefined') return
+ const storage = getStorage(storageType)
+ return storage.getItem(key)
+}
+
+export function remove(storageType: StorageType, key: LocalStorageKey) {
+ if (typeof window === 'undefined') return
+ const storage = getStorage(storageType)
+ return storage.removeItem(key)
+}
+
+export function storeOrRemoveNull(
+ storageType: StorageType,
+ key: LocalStorageKey,
+ value: string | null | undefined
+) {
+ if (typeof window === 'undefined') return
+ if (value === null || value === undefined) {
+ remove(storageType, key)
+ } else {
+ store(storageType, key, value)
+ }
+}
diff --git a/apps/docs/lib/userAuth.ts b/apps/docs/lib/userAuth.ts
new file mode 100644
index 00000000000..12fec885fe7
--- /dev/null
+++ b/apps/docs/lib/userAuth.ts
@@ -0,0 +1,36 @@
+import { gotrueClient } from 'common'
+import { useEffect } from 'react'
+
+export const auth = gotrueClient
+
+export async function getAccessToken() {
+ // ignore if server-side
+ if (typeof window === 'undefined') {
+ return
+ }
+
+ const {
+ data: { session },
+ error,
+ } = await auth.getSession()
+ if (error) {
+ throw error
+ }
+ return session?.access_token
+}
+
+export function useOnLogout(callback: () => void) {
+ useEffect(() => {
+ const {
+ data: {
+ subscription: { unsubscribe },
+ },
+ } = auth.onAuthStateChange((event) => {
+ if (event === 'SIGNED_OUT') {
+ callback()
+ }
+ })
+
+ return unsubscribe
+ }, [callback])
+}
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 3f497954d6d..0883cf3331c 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -7,6 +7,7 @@
"dev:secrets:pull": "AWS_PROFILE=supabase-dev node ../../scripts/getSecrets.js -n local/docs",
"build": "next build",
"build:analyze": "ANALYZE=true next build",
+ "codegen": "openapi-typescript http://localhost:8080/api-json -o types/api.d.ts && prettier --write types/api.d.ts",
"start": "next start",
"lint": "next lint",
"typecheck": "tsc --noEmit",
@@ -30,6 +31,7 @@
"@radix-ui/react-accordion": "^1.1.2",
"@supabase/auth-helpers-react": "^0.4.2",
"@supabase/supabase-js": "^2.39.3",
+ "@tanstack/react-query": "^5.13.4",
"common": "*",
"config": "*",
"framer-motion": "^6.5.1",
@@ -54,8 +56,10 @@
"next-seo": "^5.14.1",
"next-themes": "^0.2.1",
"openai": "^4.17.0",
+ "openapi-fetch": "^0.8.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
+ "react-error-boundary": "^4.0.12",
"react-intersection-observer": "^9.5.2",
"react-markdown": "^8.0.3",
"rehype-slug": "^5.1.0",
@@ -84,6 +88,7 @@
"jest-environment-jsdom": "^29.7.0",
"npm-run-all": "^4.1.5",
"openapi-types": "^12.0.2",
+ "openapi-typescript": "^6.7.2",
"sass": "^1.68.0",
"tsconfig": "*",
"tsx": "^4.6.2",
diff --git a/apps/docs/pages/__dev-secret-auth.tsx b/apps/docs/pages/__dev-secret-auth.tsx
new file mode 100644
index 00000000000..de882c374f1
--- /dev/null
+++ b/apps/docs/pages/__dev-secret-auth.tsx
@@ -0,0 +1,59 @@
+import { useRouter } from 'next/router'
+import { Button_Shadcn_ } from 'ui'
+import { auth } from '~/lib/userAuth'
+
+export function getServerSideProps() {
+ if (process.env.NEXT_PUBLIC_DEV_AUTH_PAGE === 'true') {
+ return {
+ props: {},
+ }
+ }
+
+ return {
+ notFound: true,
+ }
+}
+
+export default function DevOnlySecretAuth() {
+ const router = useRouter()
+
+ function signInWithGitHub() {
+ auth.signInWithOAuth({
+ provider: 'github',
+ options: {
+ redirectTo: process.env.NEXT_PUBLIC_SITE_URL,
+ },
+ })
+ }
+
+ function signOut() {
+ auth.signOut().then(({ error }) => {
+ if (error) {
+ throw error
+ }
+
+ router.push('/')
+ })
+ }
+
+ return (
+
+
+ Sign in
+
+ This is a dev-only route to sign in and test authenticated actions within docs. In staging
+ and production, signin is managed via dashboard because docs and dashboard are proxied to
+ the same domain.
+
+
+
+