+
+
+
+
+
+
+
+
+ Supabase
+
+
+ {children}
+
+
- {section.map((link) => {
+
- Community }
diff --git a/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx
new file mode 100644
index 00000000000..07ad9d7f9c0
--- /dev/null
+++ b/apps/docs/components/Navigation/NavigationMenu/HomeMenuIconPicker.tsx
@@ -0,0 +1,84 @@
+import React from 'react'
+import {
+ IconMenuApi,
+ IconMenuAuth,
+ IconMenuCli,
+ IconMenuCsharp,
+ IconMenuDatabase,
+ IconMenuEdgeFunctions,
+ IconMenuFlutter,
+ IconMenuGettingStarted,
+ IconMenuHome,
+ IconMenuIntegrations,
+ IconMenuJavascript,
+ IconMenuPlatform,
+ IconMenuPython,
+ IconMenuRealtime,
+ IconMenuResources,
+ IconMenuSelfHosting,
+ IconMenuServerlessApis,
+ IconMenuStorage,
+ IconMenuSwift,
+ IconMenuStatus,
+} from './HomeMenuIcons'
+
+function getMenuIcon(menuKey: string, width: number = 16, height: number = 16) {
+ switch (menuKey) {
+ case 'home':
+ return
+
{icon && 
}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index 22a7d049827..17c8c9d91e8 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -2,23 +2,10 @@ import { useTheme } from 'common/Providers'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import React from 'react'
+import React, { useEffect, useRef } from 'react'
import { IconChevronLeft } from '~/../../packages/ui'
import * as Accordion from '@radix-ui/react-accordion'
-
-const HeaderImage = React.memo(function HeaderImage(props: any) {
- const router = useRouter()
- const { isDarkMode } = useTheme()
-
- return (
-
-
+
@@ -120,14 +118,14 @@ const ContentLink = React.memo(function ContentLink(props: any) {
const router = useRouter()
return (
-
+
{props.icon && (
@@ -168,8 +166,8 @@ const Content = (props) => {
-
+ {section.map((link, i) => {
if (!link.href) {
return (
-
{link.label}
-
+
)
} else {
return (
@@ -186,19 +47,11 @@ const NavigationMenuHome = ({ active }) => {
-
+
@@ -179,15 +177,17 @@ const Content = (props) => {
return (
{x.items && x.items.length > 0 ? (
-
+
+
{icon &&
@@ -121,26 +124,37 @@ const RenderLink = React.memo(function RenderLink(props: any) {
value={active ? props.id : ''}
>
-
- {props.items &&
- props.items
- .filter((item) => props.allowedKeys.includes(item.id))
- .map((item) => {
- return (
-
+
+ {props.items &&
+ props.items
+ .filter((item) => props.allowedKeys.includes(item.id))
+ .map((item) => {
+ return (
+
+ )}
)
@@ -239,12 +253,12 @@ const Content: React.FC = ({ id, lib, commonSections, sp
{x.items.map((subItem, subItemIndex) => {
return (
-
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
index b81f6c5a1dd..1c8a5415074 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuRefListItems.tsx
@@ -1,7 +1,7 @@
import * as Accordion from '@radix-ui/react-accordion'
import Link from 'next/link'
import { useRouter } from 'next/router'
-import { IconChevronLeft } from 'ui'
+import { IconChevronLeft, IconChevronUp } from 'ui'
import * as NavItems from './NavigationMenu.constants'
import { find } from 'lodash'
@@ -15,24 +15,10 @@ import { RefIdOptions, RefKeyOptions } from './NavigationMenu'
import React, { Fragment } from 'react'
import { generateAllowedClientLibKeys } from '~/lib/refGenerator/helpers'
import { isFuncNotInLibraryOrVersion } from './NavigationMenu.utils'
-
-const HeaderImage = React.memo(function HeaderImage(props: any) {
- const router = useRouter()
- const { isDarkMode } = useTheme()
-
- return (
-
-
- -
+
-
{sections.map((fn: any, fnIndex) => {
// run allow check
if (isFuncNotInLibraryOrVersion(fn.id, fn.type, allowedKeys)) {
diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index 8178b4d51f5..468ea91e3c1 100644
--- a/apps/docs/components/index.tsx
+++ b/apps/docs/components/index.tsx
@@ -1,7 +1,6 @@
import Link from 'next/link'
import { Alert, Button, CodeBlock, GlassPanel, markdownComponents, Tabs } from 'ui'
import StepHikeCompact from '~/components/StepHikeCompact'
-
// Common components
import Admonition from './Admonition'
import ButtonCard from './ButtonCard'
@@ -31,6 +30,28 @@ import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlo
import Options from '~/components/Options'
import Param from '~/components/Params'
+import {
+ IconMenuJavascript,
+ IconMenuHome,
+ IconMenuGettingStarted,
+ IconMenuDatabase,
+ IconMenuServerlessApis,
+ IconMenuAuth,
+ IconMenuEdgeFunctions,
+ IconMenuRealtime,
+ IconMenuStorage,
+ IconMenuPlatform,
+ IconMenuResources,
+ IconMenuSelfHosting,
+ IconMenuIntegrations,
+ IconMenuFlutter,
+ IconMenuPython,
+ IconMenuCsharp,
+ IconMenuSwift,
+ IconMenuApi,
+ IconMenuCli,
+} from './Navigation/NavigationMenu/HomeMenuIcons'
+
const components = {
...markdownComponents,
Admonition,
@@ -73,6 +94,25 @@ const components = {
CliGlobalFlagsHandler: () =>
- 
+
+ C# Client Library
@supabase-community/supabase-csharp
diff --git a/apps/docs/docs/ref/dart/introduction.mdx b/apps/docs/docs/ref/dart/introduction.mdx index e183e37889e..b99332b670d 100644 --- a/apps/docs/docs/ref/dart/introduction.mdx +++ b/apps/docs/docs/ref/dart/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
- 
+
+ Flutter Client Library
supabase-flutter
diff --git a/apps/docs/docs/ref/dart/v0/introduction.mdx b/apps/docs/docs/ref/dart/v0/introduction.mdx index fdbb9d766a5..1d1f27212ce 100644 --- a/apps/docs/docs/ref/dart/v0/introduction.mdx +++ b/apps/docs/docs/ref/dart/v0/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
-
+
+ Flutter Client Library
supabase-flutter
diff --git a/apps/docs/docs/ref/javascript/introduction.mdx b/apps/docs/docs/ref/javascript/introduction.mdx index d3c14042cb6..b22c1b371ff 100644 --- a/apps/docs/docs/ref/javascript/introduction.mdx +++ b/apps/docs/docs/ref/javascript/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
- 
+
+ Javascript Client Library
@supabase/supabase-js
diff --git a/apps/docs/docs/ref/javascript/v1/introduction.mdx b/apps/docs/docs/ref/javascript/v1/introduction.mdx index a62134bdd69..8112558ffd6 100644 --- a/apps/docs/docs/ref/javascript/v1/introduction.mdx +++ b/apps/docs/docs/ref/javascript/v1/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
- 
+ ) => {
+ const { isDarkMode } = useTheme()
+ return (
+ <>
+
+ Authorize API access | Supabase
+
+
+
+
+ )
+}
+
+export default APIAuthorizationLayout
diff --git a/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx b/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
index a604849edf0..0b4ae398b2e 100644
--- a/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
+++ b/studio/components/to-be-cleaned/Storage/StorageSettings/StorageSettings.tsx
@@ -1,8 +1,8 @@
import { useState } from 'react'
-import * as Tooltip from '@radix-ui/react-tooltip'
import { Button, Form, IconClock, Input, Listbox } from 'ui'
import { checkPermissions, useStore } from 'hooks'
+import { IS_PLATFORM } from 'lib/constants'
import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
import { useProjectStorageConfigUpdateUpdateMutation } from 'data/config/project-storage-config-update-mutation'
import UpgradeToPro from 'components/ui/UpgradeToPro'
@@ -15,7 +15,7 @@ export type StorageSettingsProps = {
}
const StorageSettings = ({ projectRef }: StorageSettingsProps) => {
- const { data, error } = useProjectStorageConfigQuery({ projectRef })
+ const { data, error } = useProjectStorageConfigQuery({ projectRef }, { enabled: IS_PLATFORM })
if (error || data?.error) {
return (
diff --git a/studio/components/ui/PageTelemetry.tsx b/studio/components/ui/PageTelemetry.tsx
index 412336e28d0..f6de24e69b6 100644
--- a/studio/components/ui/PageTelemetry.tsx
+++ b/studio/components/ui/PageTelemetry.tsx
@@ -1,4 +1,4 @@
-import { useStore } from 'hooks'
+import { useTelemetryProps } from 'common'
import { post } from 'lib/common/fetch'
import { API_URL, IS_PLATFORM } from 'lib/constants'
import { observer } from 'mobx-react-lite'
@@ -25,7 +25,7 @@ function sanitizePageViewRoute(_route?: string) {
const PageTelemetry: FC = ({ children }) => {
const router = useRouter()
- const { ui } = useStore()
+ const telemetryProps = useTelemetryProps()
useEffect(() => {
function handleRouteChange(url: string) {
@@ -71,8 +71,8 @@ const PageTelemetry: FC = ({ children }) => {
title: document.title,
route,
ga: {
- screen_resolution: ui.googleAnalyticsProps?.screenResolution,
- language: ui.googleAnalyticsProps?.language,
+ screen_resolution: telemetryProps?.screenResolution,
+ language: telemetryProps?.language,
},
})
}
diff --git a/studio/data/api-authorization/api-authorization-approve-mutation.ts b/studio/data/api-authorization/api-authorization-approve-mutation.ts
new file mode 100644
index 00000000000..5ac01111adc
--- /dev/null
+++ b/studio/data/api-authorization/api-authorization-approve-mutation.ts
@@ -0,0 +1,42 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { post } from 'lib/common/fetch'
+import { API_ADMIN_URL } from 'lib/constants'
+
+export type ApiAuthorizationApproveVariables = {
+ id: string
+ organization_id: string
+}
+
+export type ApiAuthorizationApproveResponse = {
+ url: string
+}
+
+export async function approveApiAuthorization({
+ id,
+ organization_id,
+}: ApiAuthorizationApproveVariables) {
+ if (!id) throw new Error('Authorization ID is required')
+ if (!organization_id) throw new Error('Organization slug is required')
+
+ const response = await post(
+ `${API_ADMIN_URL}/oauth/authorizations/${id}?skip_browser_redirect=true`,
+ { organization_id }
+ )
+ if (response.error) throw response.error
+ return response as ApiAuthorizationApproveResponse
+}
+
+type ApiAuthorizationApproveData = Awaited>
+
+export const useApiAuthorizationApproveMutation = ({
+ onSuccess,
+ ...options
+}: Omit<
+ UseMutationOptions,
+ 'mutationFn'
+> = {}) => {
+ return useMutation(
+ (vars) => approveApiAuthorization(vars),
+ options
+ )
+}
diff --git a/studio/data/api-authorization/api-authorization-decline-mutation.ts b/studio/data/api-authorization/api-authorization-decline-mutation.ts
new file mode 100644
index 00000000000..7825bb01688
--- /dev/null
+++ b/studio/data/api-authorization/api-authorization-decline-mutation.ts
@@ -0,0 +1,34 @@
+import { useMutation, UseMutationOptions } from '@tanstack/react-query'
+import { delete_ } from 'lib/common/fetch'
+import { API_ADMIN_URL } from 'lib/constants'
+
+export type ApiAuthorizationDeclineVariables = {
+ id: string
+}
+
+export type ApiAuthorizationDeclineResponse = {
+ id: string
+}
+
+export async function declineApiAuthorization({ id }: ApiAuthorizationDeclineVariables) {
+ if (!id) throw new Error('Authorization ID is required')
+
+ const response = await delete_(`${API_ADMIN_URL}/oauth/authorizations/${id}`, {})
+ if (response.error) throw response.error
+ return response as ApiAuthorizationDeclineResponse
+}
+
+type ApiAuthorizationDeclineData = Awaited>
+
+export const useApiAuthorizationDeclineMutation = ({
+ onSuccess,
+ ...options
+}: Omit<
+ UseMutationOptions,
+ 'mutationFn'
+> = {}) => {
+ return useMutation(
+ (vars) => declineApiAuthorization(vars),
+ options
+ )
+}
diff --git a/studio/data/api-authorization/api-authorization-query.ts b/studio/data/api-authorization/api-authorization-query.ts
new file mode 100644
index 00000000000..652c19c4d5f
--- /dev/null
+++ b/studio/data/api-authorization/api-authorization-query.ts
@@ -0,0 +1,57 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'lib/common/fetch'
+import { API_ADMIN_URL } from 'lib/constants'
+import { useCallback } from 'react'
+import { resourceKeys } from './keys'
+
+export type ApiAuthorizationVariables = {
+ id?: string
+}
+
+export type ApiAuthorizationResponse = {
+ name: string
+ website: string
+ domain: string
+ expires_at: string
+ approved_at: string | null
+ approved_organization_slug?: string
+}
+
+export async function getApiAuthorizationDetails(
+ { id }: ApiAuthorizationVariables,
+ signal?: AbortSignal
+) {
+ if (!id) throw new Error('Authorization ID is required')
+
+ const response = await get(`${API_ADMIN_URL}/oauth/authorizations/${id}`, { signal })
+ if (response.error) throw response.error
+ return response as ApiAuthorizationResponse
+}
+
+export type ResourceData = Awaited>
+export type ResourceError = { errorEventId: string; message: string }
+
+export const useApiAuthorizationQuery = (
+ { id }: ApiAuthorizationVariables,
+ { enabled = true, ...options }: UseQueryOptions = {}
+) =>
+ useQuery(
+ resourceKeys.resource(id),
+ ({ signal }) => getApiAuthorizationDetails({ id }, signal),
+ {
+ enabled: enabled && typeof id !== 'undefined',
+ ...options,
+ }
+ )
+
+export const useApiAuthorizationPrefetch = ({ id }: ApiAuthorizationVariables) => {
+ const client = useQueryClient()
+
+ return useCallback(() => {
+ if (id) {
+ client.prefetchQuery(resourceKeys.resource(id), ({ signal }) =>
+ getApiAuthorizationDetails({ id }, signal)
+ )
+ }
+ }, [id])
+}
diff --git a/studio/data/api-authorization/keys.ts b/studio/data/api-authorization/keys.ts
new file mode 100644
index 00000000000..69660c24f42
--- /dev/null
+++ b/studio/data/api-authorization/keys.ts
@@ -0,0 +1,3 @@
+export const resourceKeys = {
+ resource: (id: string | undefined) => ['api-authorization', id] as const,
+}
diff --git a/studio/data/organizations/keys.ts b/studio/data/organizations/keys.ts
index 5b7250c028d..4aabe753ab3 100644
--- a/studio/data/organizations/keys.ts
+++ b/studio/data/organizations/keys.ts
@@ -1,4 +1,5 @@
export const organizationKeys = {
+ list: () => ['organizations'] as const,
detail: (slug: string | undefined) => ['organizations', slug, 'detail'] as const,
roles: (slug: string | undefined) => ['organizations', slug, 'roles'] as const,
freeProjectLimitCheck: (slug: string | undefined) =>
diff --git a/studio/data/organizations/organizations-query.ts b/studio/data/organizations/organizations-query.ts
new file mode 100644
index 00000000000..598c8b17df4
--- /dev/null
+++ b/studio/data/organizations/organizations-query.ts
@@ -0,0 +1,37 @@
+import { useQuery, useQueryClient, UseQueryOptions } from '@tanstack/react-query'
+import { get } from 'lib/common/fetch'
+import { API_URL } from 'lib/constants'
+import { useCallback } from 'react'
+import { Organization } from 'types'
+import { organizationKeys } from './keys'
+
+export type OrganizationsResponse = Organization[]
+
+export async function getOrganizations(signal?: AbortSignal) {
+ const data = await get(`${API_URL}/organizations`, { signal })
+ if (data.error) throw data.error
+
+ return data as OrganizationsResponse
+}
+
+export type OrganizationsData = Awaited>
+export type OrganizationsError = unknown
+
+export const useOrganizationsQuery = ({
+ enabled = true,
+ ...options
+}: UseQueryOptions = {}) =>
+ useQuery(
+ organizationKeys.list(),
+ ({ signal }) => getOrganizations(signal),
+ { enabled: enabled, ...options }
+ )
+
+export const useOrganizationsPrefetch = () => {
+ const client = useQueryClient()
+
+ return useCallback(
+ () => client.prefetchQuery(organizationKeys.list(), ({ signal }) => getOrganizations(signal)),
+ []
+ )
+}
diff --git a/studio/lib/auth.tsx b/studio/lib/auth.tsx
index c7b962a2010..55b17f74866 100644
--- a/studio/lib/auth.tsx
+++ b/studio/lib/auth.tsx
@@ -1,18 +1,20 @@
import {
AuthContext as AuthContextInternal,
AuthProvider as AuthProviderInternal,
- AuthProviderProps,
gotrueClient,
+ useTelemetryProps,
} from 'common'
import { useProfileQuery } from 'data/profile/profile-query'
import { useStore } from 'hooks'
import { PropsWithChildren, useEffect } from 'react'
import { GOTRUE_ERRORS, IS_PLATFORM } from './constants'
+import Telemetry from 'lib/telemetry'
export const AuthContext = AuthContextInternal
export const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
const { ui, app } = useStore()
+ const telemetryProps = useTelemetryProps()
// Check for unverified GitHub users after a GitHub sign in
useEffect(() => {
@@ -34,7 +36,7 @@ export const AuthProvider = ({ children }: PropsWithChildren<{}>) => {
// Track telemetry for the current user
useProfileQuery({
onSuccess(profile) {
- ui.setProfile(profile)
+ Telemetry.sendIdentify(profile, telemetryProps)
// [Joshen] Temp fix: For new users, the GET profile call also creates a default org
// But because the dashboard's logged in state is using gotrue as the source of truth
diff --git a/studio/lib/telemetry.ts b/studio/lib/telemetry.ts
index ea5dcb38bcb..9cf951fc0c6 100644
--- a/studio/lib/telemetry.ts
+++ b/studio/lib/telemetry.ts
@@ -1,8 +1,9 @@
import { post } from 'lib/common/fetch'
import { API_URL, IS_PLATFORM } from 'lib/constants'
import { User } from 'types'
+import { NextRouter } from 'next/router'
-export interface GoogleAnalyticsProps {
+export interface TelemetryProps {
screenResolution?: string
language: string
}
@@ -14,7 +15,8 @@ const sendEvent = (
label: string
value?: string
},
- gaProps?: GoogleAnalyticsProps
+ gaProps: TelemetryProps,
+ router: NextRouter
) => {
if (!IS_PLATFORM) return
@@ -25,6 +27,9 @@ const sendEvent = (
category: category,
label: label,
value: value,
+ page_referrer: document?.referrer,
+ page_title: document?.title,
+ page_location: router.asPath,
ga: {
screen_resolution: gaProps?.screenResolution,
language: gaProps?.language,
@@ -36,7 +41,7 @@ const sendEvent = (
* TODO: GA4 doesn't have identify method.
* We may or may not need gaClientId here. Confirm later
*/
-const sendIdentify = (user: User, gaProps?: GoogleAnalyticsProps) => {
+const sendIdentify = (user: User, gaProps?: TelemetryProps) => {
if (!IS_PLATFORM) return
return post(`${API_URL}/telemetry/identify`, {
diff --git a/studio/package.json b/studio/package.json
index 2f845d6011e..5e3a39a6bb9 100644
--- a/studio/package.json
+++ b/studio/package.json
@@ -33,7 +33,7 @@
"@supabase/auth-helpers-react": "^0.3.1",
"@supabase/react-data-grid": "^7.1.0-beta.7",
"@supabase/shared-types": "^0.1.40",
- "@supabase/supabase-js": "^2.13.0",
+ "@supabase/supabase-js": "^2.21.0",
"@tanstack/react-query": "^4.22.0",
"@tanstack/react-query-devtools": "^4.22.0",
"@zip.js/zip.js": "^2.6.61",
diff --git a/studio/pages/api/storage/[ref]/buckets/[id]/index.ts b/studio/pages/api/storage/[ref]/buckets/[id]/index.ts
index 72af258757b..ce3e524f7be 100644
--- a/studio/pages/api/storage/[ref]/buckets/[id]/index.ts
+++ b/studio/pages/api/storage/[ref]/buckets/[id]/index.ts
@@ -22,10 +22,16 @@ async function handler(req: NextApiRequest, res: NextApiResponse) {
const handlePatch = async (req: NextApiRequest, res: NextApiResponse) => {
const { id } = req.query
- const { public: isPublicBucket } = req.body
+ const {
+ public: isPublicBucket,
+ allowed_mime_types: allowedMimeTypes,
+ file_size_limit: fileSizeLimit,
+ } = req.body
const { data, error } = await supabase.storage.updateBucket(id as string, {
public: isPublicBucket,
+ allowedMimeTypes,
+ fileSizeLimit,
})
if (error) {
return res.status(400).json({ error: { message: error.message } })
diff --git a/studio/pages/api/storage/[ref]/buckets/[id]/objects/sign.ts b/studio/pages/api/storage/[ref]/buckets/[id]/objects/sign.ts
index 8677334f21b..d235508ab84 100644
--- a/studio/pages/api/storage/[ref]/buckets/[id]/objects/sign.ts
+++ b/studio/pages/api/storage/[ref]/buckets/[id]/objects/sign.ts
@@ -27,5 +27,10 @@ const handlePost = async (req: NextApiRequest, res: NextApiResponse) => {
return res.status(400).json({ error: { message: error.message } })
}
+ // change the domain name to the SUPABASE_PUBLIC_URL since SUPABASE_URL is not accessible from the client
+ const signedUrl = new URL(data.signedUrl)
+ signedUrl.hostname = new URL(process.env.SUPABASE_PUBLIC_URL!).hostname
+ data.signedUrl = signedUrl.href
+
return res.status(200).json(data)
}
diff --git a/studio/pages/authorize.tsx b/studio/pages/authorize.tsx
new file mode 100644
index 00000000000..86559bebe6e
--- /dev/null
+++ b/studio/pages/authorize.tsx
@@ -0,0 +1,232 @@
+import { useParams } from 'common'
+import APIAuthorizationLayout from 'components/layouts/APIAuthorizationLayout'
+import { FormPanel } from 'components/ui/Forms'
+import ShimmeringLoader from 'components/ui/ShimmeringLoader'
+import { useApiAuthorizationApproveMutation } from 'data/api-authorization/api-authorization-approve-mutation'
+import { useApiAuthorizationDeclineMutation } from 'data/api-authorization/api-authorization-decline-mutation'
+import { useApiAuthorizationQuery } from 'data/api-authorization/api-authorization-query'
+import { useOrganizationsQuery } from 'data/organizations/organizations-query'
+import dayjs from 'dayjs'
+import { useStore, withAuth } from 'hooks'
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { NextPageWithLayout } from 'types'
+import { Alert, Button, Listbox } from 'ui'
+
+// Need to handle if no organizations in account
+// Need to handle if not logged in yet state
+
+const APIAuthorizationPage: NextPageWithLayout = () => {
+ const { ui } = useStore()
+ const router = useRouter()
+ const { auth_id } = useParams()
+ const [isSubmitting, setIsSubmitting] = useState(false)
+ const [selectedOrg, setSelectedOrg] = useState()
+
+ const { data: organizations, isLoading: isLoadingOrganizations } = useOrganizationsQuery()
+ const { data: requester, isLoading, isError, error } = useApiAuthorizationQuery({ id: auth_id })
+ const isApproved = requester?.approved_at !== null
+ const isExpired = dayjs().isAfter(dayjs(requester?.expires_at))
+
+ const { mutateAsync: approveRequest } = useApiAuthorizationApproveMutation()
+ const { mutateAsync: declineRequest } = useApiAuthorizationDeclineMutation()
+
+ useEffect(() => {
+ if (!isLoadingOrganizations) {
+ setSelectedOrg(organizations?.[0].slug ?? undefined)
+ }
+ }, [isLoadingOrganizations])
+
+ const onApproveRequest = async () => {
+ if (!auth_id) {
+ return ui.setNotification({
+ category: 'error',
+ message: 'Unable to approve request: auth_id is missing ',
+ })
+ }
+ if (!selectedOrg) {
+ return ui.setNotification({
+ category: 'error',
+ message: 'Unable to approve request: No organization selected',
+ })
+ }
+
+ try {
+ setIsSubmitting(true)
+ const res = await approveRequest({ id: auth_id, organization_id: selectedOrg })
+ router.push(res.url)
+ } catch (error: any) {
+ ui.setNotification({
+ category: 'error',
+ message: `Failed to approve request: ${error.message}`,
+ })
+ setIsSubmitting(false)
+ }
+ }
+
+ const onDeclineRequest = async () => {
+ if (!auth_id)
+ return ui.setNotification({
+ category: 'error',
+ message: 'Unable to decline request: auth_id is missing ',
+ })
+
+ try {
+ setIsSubmitting(true)
+ await declineRequest({ id: auth_id })
+ ui.setNotification({ category: 'success', message: 'Declined API authorization request' })
+ router.push('/projects')
+ } catch (error: any) {
+ ui.setNotification({
+ category: 'error',
+ message: `Failed to decline request: ${error.message}`,
+ })
+ setIsSubmitting(false)
+ }
+ }
+
+ if (isLoading) {
+ return (
+ Authorize API access}>
+
+ )
+ }
+
+ if (auth_id === undefined) {
+ return (
+ Authorization for API access}>
+
+ )
+ }
+
+ if (isError) {
+ return (
+ Authorize API access}>
+
+ )
+ }
+
+ if (isApproved) {
+ const approvedOrganization = organizations?.find(
+ (org) => org.slug === requester.approved_organization_slug
+ )
+
+ return (
+ Authorize API access for {requester?.name}}>
+
+ )
+ }
+
+ return (
+ Authorize API access for {requester?.name}}
+ footer={
+
+ )
+}
+
+APIAuthorizationPage.getLayout = (page) => {page}
+export default withAuth(APIAuthorizationPage)
diff --git a/studio/stores/UiStore.ts b/studio/stores/UiStore.ts
index 1b91898ae31..0e7b35339f9 100644
--- a/studio/stores/UiStore.ts
+++ b/studio/stores/UiStore.ts
@@ -1,8 +1,7 @@
import { uuidv4 } from 'lib/helpers'
import { action, makeAutoObservable } from 'mobx'
-import { Project, Notification, User, Organization, ProjectBase, Permission } from 'types'
+import { Project, Notification, Organization, ProjectBase, Permission } from 'types'
import { IRootStore } from './RootStore'
-import Telemetry, { GoogleAnalyticsProps } from 'lib/telemetry'
export interface IUiStore {
language: 'en-US'
@@ -12,12 +11,10 @@ export interface IUiStore {
selectedOrganization?: Organization
notification?: Notification
permissions?: Permission[]
- googleAnalyticsProps?: GoogleAnalyticsProps
load: () => void
setProjectRef: (ref?: string) => void
setOrganizationSlug: (slug?: string) => void
setNotification: (notification: Notification) => string
- setProfile: (value: User) => void
setPermissions: (permissions?: Permission[]) => void
}
export default class UiStore implements IUiStore {
@@ -83,14 +80,6 @@ export default class UiStore implements IUiStore {
return undefined
}
- get googleAnalyticsProps() {
- return {
- screenResolution:
- typeof window !== 'undefined' ? `${window.innerWidth}x${window.innerHeight}` : undefined,
- language: this.language,
- }
- }
-
load() {
if (typeof window === 'undefined') return
}
@@ -109,10 +98,6 @@ export default class UiStore implements IUiStore {
return id
}
- setProfile(value: User) {
- Telemetry.sendIdentify(value, this.googleAnalyticsProps)
- }
-
setPermissions(permissions?: any) {
this.permissions = permissions
}
+ Javascript Client Library
@supabase/supabase-js
diff --git a/apps/docs/docs/ref/python/introduction.mdx b/apps/docs/docs/ref/python/introduction.mdx index cecb5e86669..8b163faa745 100644 --- a/apps/docs/docs/ref/python/introduction.mdx +++ b/apps/docs/docs/ref/python/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
- 
+
diff --git a/studio/components/layouts/APIAuthorizationLayout.tsx b/studio/components/layouts/APIAuthorizationLayout.tsx
new file mode 100644
index 00000000000..143dd4a6526
--- /dev/null
+++ b/studio/components/layouts/APIAuthorizationLayout.tsx
@@ -0,0 +1,48 @@
+import Head from 'next/head'
+import Image from 'next/image'
+import { useTheme } from 'common'
+import { PropsWithChildren } from 'react'
+import { BASE_PATH } from 'lib/constants'
+import Divider from 'components/ui/Divider'
+
+export interface APIAuthorizationLayoutProps {}
+
+const APIAuthorizationLayout = ({ children }: PropsWithChildren
+ Python Client Library
@supabase-community/supabase-py
diff --git a/apps/docs/docs/ref/swift/introduction.mdx b/apps/docs/docs/ref/swift/introduction.mdx index 80dc3584bd1..475ae7f8a03 100644 --- a/apps/docs/docs/ref/swift/introduction.mdx +++ b/apps/docs/docs/ref/swift/introduction.mdx @@ -5,7 +5,7 @@ hideTitle: true ---
- 
+
-
+ Swift Client Library
@supabase-community/supabase-swift
@@ -16,14 +16,12 @@ hideTitle: true This reference documents every object and method available in Supabase's Swift library, [supabase-swift](https://github.com/supabase-community/supabase-swift). You can use supabase-swift to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files. We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Swift projects. +The Swift client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.
-- Huge thanks to official maintainer, [Maail](https://github.com/maail). -
+Huge thanks to official maintainer, [Maail](https://github.com/maail).
-
+
- (
-
diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx
new file mode 100644
index 00000000000..a6ecc280009
--- /dev/null
+++ b/apps/docs/pages/guides/auth/auth-password-reset.mdx
@@ -0,0 +1,109 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import { Accordion } from 'ui'
+
+export const meta = {
+ id: 'auth-password-reset',
+ title: 'Password Reset',
+ description: 'How to reset password with Supabase Auth',
+}
+
+- Send email for password reset using [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) while providing a `redirectTo` parameter
+- Email link will work as a magic link and log the user in then take them to the url specified in the `redirectTo` parameter
+- Create form to update the password and call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method with the new password
+
+## Single Page Application (SPA)
+
+### Sending password reset email
+Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail)
+to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to
+the update password page. This URL must be saved in your
+allowed [Redirect URLs](https://app.supabase.com/project/_/auth/url-configuration) list found at
+[Authentication > Redirect Configuration](https://app.supabase.com/project/_/auth/url-configuration) or it won't
+redirect the user.
+
+```ts
+await supabase.auth.resetPasswordForEmail('hello@example.com', {
+ redirectTo: 'http://example.com/account/update-password',
+})
+```
+
+### Email link
+The email link you receive will work like a magic link. This way when you click the link you will be logged into
+the website. Since we passed a redirect URL to the [`.resetPasswordForEmail`](https://supabase.com/docs/reference/javascript/auth-resetpasswordforemail)
+method the user should be sent to the update password page.
+
+### Update Password
+To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and pass along the new password to this method.
+
+```ts
+await supabase.auth.updateUser({ password: new_password })
+```
+
+## Server-Side Rendering (SSR)
+
+### Sending password reset email
+Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail)
+to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to
+the callback page along with a query parameter to the update password page. This URL must be saved in your
+allowed [Redirect URLs](https://app.supabase.com/project/_/auth/url-configuration) list found at
+[Authentication > Redirect Configuration](https://app.supabase.com/project/_/auth/url-configuration) or it won't
+redirect the user.
+
+```ts
+await supabase.auth.resetPasswordForEmail('hello@example.com', {
+ redirectTo: 'http://example.com/api/auth/callback?next=/account/update-password',
+})
+```
+
+
+
+We are using `next` as our query parameter, but this can name whatever you like.
+
+
+
+### Email link
+The email link you receive will behave like a magic link. When the link is clicked you will be sent to the `redirectTo` URL you specified that points to the path with the exchange code.
+
+### Exchange authorization code
+After redirecting to the server page, we need to retrieve the code from the query parameter called `code` and pass it to the `.exchangeAuthCodeForSession` function.
+```ts
+// api/auth/callback.ts
+
+// The code is retrieved from the query parameter - use whichever mechanism is recommended
+// for your app/framework. This is just an example.
+const code = url.searchParams.get('code')
+
+// call the Supabase API to exchange the code for a session
+await supabase.auth.exchangeCodeForSession(code)
+```
+
+
+
+The query parameter is always `code` for the authorization code returned from the Supabase API
+
+
+
+We will also need to check for the `next` query parameter to redirect the user to the update password page.
+```ts
+// api/auth/callback.ts
+
+// The password page path is retrieved from the query parameter - use whichever mechanism is recommended
+// for your app/framework. This is just an example.
+const next = url.searchParams.get('next')
+
+// using NextJS API response object in this example
+res.redirect(next)
+```
+
+### Update Password
+To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and
+pass along the new password to this method.
+
+```ts
+await supabase.auth.updateUser({ password: new_password })
+```
+
+export const Page = ({ children }) => {label}
)}
- {url && sendTelemetryEvent(name)}
+ />
+ )}
)
})
diff --git a/apps/www/components/Hero.tsx b/apps/www/components/Hero.tsx
index e97cd31fa74..d2decb0ab08 100644
--- a/apps/www/components/Hero.tsx
+++ b/apps/www/components/Hero.tsx
@@ -1,10 +1,19 @@
-import { Button, IconBookOpen, Space } from 'ui'
-import Link from 'next/link'
+import { Button, IconBookOpen } from 'ui'
import { useRouter } from 'next/router'
+import Link from 'next/link'
import SectionContainer from './Layouts/SectionContainer'
+import Telemetry, { TelemetryEvent } from '~/lib/telemetry'
+import gaEvents from '~/lib/gaEvents'
+import { useTelemetryProps } from 'common/hooks/useTelemetryProps'
const Hero = () => {
- const { basePath } = useRouter()
+ const router = useRouter()
+ const { basePath } = router
+ const telemetryProps = useTelemetryProps()
+
+ const sendTelemetryEvent = async (event: TelemetryEvent) => {
+ await Telemetry.sendEvent(event, telemetryProps, router)
+ }
return (
+ C# Client Library
supabase-csharp
diff --git a/apps/docs/lib/constants.ts b/apps/docs/lib/constants.ts index d1bbedbf47c..42c12c0d3f4 100644 --- a/apps/docs/lib/constants.ts +++ b/apps/docs/lib/constants.ts @@ -1,2 +1,3 @@ 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 diff --git a/apps/docs/lib/fetchWrappers.tsx b/apps/docs/lib/fetchWrappers.tsx index c573a0d37dc..0313e49565f 100644 --- a/apps/docs/lib/fetchWrappers.tsx +++ b/apps/docs/lib/fetchWrappers.tsx @@ -1,7 +1,5 @@ interface DataProps { - referrer?: string - title: string - route?: string + [prop: string]: any } export const post = (url: string, data: DataProps, options = {}) => { diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx index 8563418f9a8..f2f415a6963 100644 --- a/apps/docs/pages/_app.tsx +++ b/apps/docs/pages/_app.tsx @@ -1,6 +1,6 @@ import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs' import { SessionContextProvider } from '@supabase/auth-helpers-react' -import { AuthProvider, ThemeProvider } from 'common' +import { AuthProvider, ThemeProvider, useTelemetryProps } from 'common' import { useRouter } from 'next/router' import { useEffect, useState } from 'react' import ReactMarkdown from 'react-markdown' @@ -10,7 +10,7 @@ import { CommandMenuProvider } from 'ui' import components from '~/components' import Favicons from '~/components/Favicons' import SiteLayout from '~/layouts/SiteLayout' -import { IS_PLATFORM, LOCAL_SUPABASE } from '~/lib/constants' +import { API_URL, IS_PLATFORM, LOCAL_SUPABASE } from '~/lib/constants' import { post } from '~/lib/fetchWrappers' import '../styles/ch.scss' import '../styles/main.scss?v=1.0.0' @@ -19,16 +19,21 @@ import '../styles/prism-okaidia.scss' function MyApp({ Component, pageProps }: AppPropsWithLayout) { const router = useRouter() + const telemetryProps = useTelemetryProps() const [supabase] = useState(() => IS_PLATFORM || LOCAL_SUPABASE ? createBrowserSupabaseClient() : undefined ) function handlePageTelemetry(route: string) { - return post(`https://api.supabase.io/platform/telemetry/page`, { + return post(`${API_URL}/telemetry/page`, { referrer: document.referrer, title: document.title, route, + ga: { + screen_resolution: telemetryProps?.screenResolution, + language: telemetryProps?.language, + }, }) } @@ -85,12 +90,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {- We tried other vector databases - we tried Faiss, we tried Weviate, we tried Pinecone. We found them to be incredibly expensive and not very intuitive. If you’re just doing vector search they’re great, but if you need to store a bunch of metadata that becomes a huge pain. + We tried other vector databases - we tried Faiss, we tried Weviate, we tried Pinecone. We found + them to be incredibly expensive and not very intuitive. If you’re just doing vector search they’re + great, but if you need to store a bunch of metadata that becomes a huge pain.## What They Built -Using Supabase's pg_vector, [Mendable.ai](http://mendable.ai/) was able to build a more efficient and accurate search function for their AI chatbot. By storing vector data alongside metadata in Supabase, [Mendable.ai](http://mendable.ai/) was able to quickly and easily search through their customers documentation to find the most relevant responses to queries. They found that Supabase's solution was just as performant as dedicated vector databases, but without the high cost. +Using Supabase and pgvector, Mendable.ai was able to build a more efficient and accurate search function for their AI chatbot. By storing vector data alongside metadata in Supabase, Mendable.ai was able to quickly and easily search through their customers documentation to find the most relevant responses to queries. They found that Supabase's solution was just as performant as dedicated vector databases, but without the high cost. ## The Results -Thanks to Supabase's pg_vector, [Mendable.ai](http://mendable.ai/) was able to significantly improve the efficiency and accuracy of their Chat Powered Search for Documentation. They were able to build faster and more cost-effectively using Supabase’s open source stack. +Thanks to Supabase and pgvector, Mendable.ai was able to significantly improve the efficiency and accuracy of their Chat Powered Search for Documentation. They were able to build faster and more cost-effectively using Supabase’s open source stack. ## Tech stack -[Mendable.ai](http://mendable.ai/)'s tech stack includes React, Next.js, Express, Vercel, and Supabase. +Mendable.ai's tech stack includes React, Next.js, Express, Vercel, and Supabase.
- We looked at the alternatives and chose Supabase because it’s open source, it’s simpler, and, for all the ways we need use it, Supabase has been just as performant - if not more performant - than the other vector databases. + We looked at the alternatives and chose Supabase because it’s open source, it’s simpler, and, for + all the ways we need use it, Supabase has been just as performant - if not more performant - than + the other vector databases.diff --git a/apps/www/components/Features/index.tsx b/apps/www/components/Features/index.tsx index b5c8dc3f68f..ab6510718e5 100644 --- a/apps/www/components/Features/index.tsx +++ b/apps/www/components/Features/index.tsx @@ -1,12 +1,52 @@ -import { Button, Badge, IconArrowRight } from 'ui' -import SectionHeader from 'components/UI/SectionHeader' +import { Badge } from 'ui' import Solutions from 'data/Solutions.json' -import Link from 'next/link' +import Telemetry from '~/lib/telemetry' +import gaEvents from '~/lib/gaEvents' import SectionContainer from '../Layouts/SectionContainer' import ProductIcon from '../ProductIcon' import TextLink from '../TextLink' +import { useTelemetryProps } from 'common/hooks/useTelemetryProps' +import { useRouter } from 'next/router' const Features = () => { + const router = useRouter() + const telemetryProps = useTelemetryProps() + + const sendTelemetryEvent = async (product: any) => { + switch (product) { + case 'Database': + return await Telemetry.sendEvent( + gaEvents['www_hp_subhero_products_database'], + telemetryProps, + router + ) + case 'Authentication': + return await Telemetry.sendEvent( + gaEvents['www_hp_subhero_products_auth'], + telemetryProps, + router + ) + case 'Storage': + return await Telemetry.sendEvent( + gaEvents['www_hp_subhero_products_storage'], + telemetryProps, + router + ) + case 'Edge Functions': + return await Telemetry.sendEvent( + gaEvents['www_hp_subhero_products_edgeFunctions'], + telemetryProps, + router + ) + case 'Realtime': + return await Telemetry.sendEvent( + gaEvents['www_hp_subhero_products_realtime'], + telemetryProps, + router + ) + } + } + const IconSections = Object.values(Solutions).map((solution: any) => { const { name, description, icon, label, url } = solution if (solution.name === 'Realtime') return null @@ -24,7 +64,13 @@ const Features = () => {
@@ -40,14 +49,16 @@ const Hero = () => {
-
+ sendTelemetryEvent(gaEvents['www_hp_hero_startProject'])}>
-
+ sendTelemetryEvent(gaEvents['www_hp_hero_documentation'])}
+ >
}>
Documentation
diff --git a/apps/www/components/TextLink.tsx b/apps/www/components/TextLink.tsx
index 3bd3edfc10e..73d54f6136e 100644
--- a/apps/www/components/TextLink.tsx
+++ b/apps/www/components/TextLink.tsx
@@ -1,20 +1,22 @@
-import { IconArrowRight, IconChevronRight } from 'ui'
+import { IconChevronRight } from 'ui'
import Link from 'next/link'
-function TextLink({ url, label }: any) {
+function TextLink({ url = '', label, ...props }: any) {
return (
-
-
diff --git a/studio/components/interfaces/Storage/EditBucketModal.tsx b/studio/components/interfaces/Storage/EditBucketModal.tsx
index b812880c31b..a68e52a4973 100644
--- a/studio/components/interfaces/Storage/EditBucketModal.tsx
+++ b/studio/components/interfaces/Storage/EditBucketModal.tsx
@@ -22,6 +22,7 @@ import {
import { useStore } from 'hooks'
import { useParams } from 'common'
import { useProjectStorageConfigQuery } from 'data/config/project-storage-config-query'
+import { IS_PLATFORM } from 'lib/constants'
export interface EditBucketModalProps {
visible: boolean
@@ -35,7 +36,7 @@ const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalProps) =>
const storageExplorerStore = useStorageStore()
const { editBucket } = storageExplorerStore
- const { data } = useProjectStorageConfigQuery({ projectRef: ref })
+ const { data } = useProjectStorageConfigQuery({ projectRef: ref }, { enabled: IS_PLATFORM })
const { value, unit } = convertFromBytes(data?.fileSizeLimit ?? 0)
const formattedGlobalUploadLimit = `${value} ${unit}`
@@ -226,17 +227,19 @@ const EditBucketModal = ({ visible, bucket, onClose }: EditBucketModalProps) =>
))}
- {`${label} about ${url}`}
- {label}
-
-
+
+
)
}
diff --git a/apps/www/data/Company.json b/apps/www/data/Company.json
index 60f2df1d29c..f418817d2f0 100644
--- a/apps/www/data/Company.json
+++ b/apps/www/data/Company.json
@@ -8,7 +8,7 @@
{
"text": "Open Source",
"description": "Supabase is an opensource company, supporting existing open source tools and communities wherever possible.",
- "url": "/docs/oss",
+ "url": "/open-source",
"icon": "M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
},
{
diff --git a/apps/www/data/CustomerStories.json b/apps/www/data/CustomerStories.json
index d97f6e79991..c55ae5a858e 100644
--- a/apps/www/data/CustomerStories.json
+++ b/apps/www/data/CustomerStories.json
@@ -1,4 +1,21 @@
[
+ {
+ "type": "Customer Story",
+ "title": "Mendable.ai switches from Pinecone to Supabase for PostgreSQL vector embeddings.",
+ "description": "How Mendable.ai boosts efficiency and accuracy of chat powered search for documentation using Supabase with pg_vector.",
+ "imgUrl": "images/customers/logos/mendableai.png",
+ "logoUrl": "images/customers/logos/mendableai.png",
+ "organization": "Mendable.ai",
+ "url": "/customers/mendableai",
+ "path": "/customers/mendableai",
+ "postMeta": {
+ "name": "Paul Copplestone",
+ "avatarUrl": "https://avatars0.githubusercontent.com/u/10214025?v=4",
+ "publishDate": "Feb 16, 2023",
+ "readLength": 6
+ },
+ "ctaText": "View story"
+ },
{
"type": "Customer Story",
"title": "HappyTeams unlocks better performance and reduces cost with Supabase.",
diff --git a/apps/www/data/Developers.ts b/apps/www/data/Developers.ts
index 30157c364a2..a459ec5260d 100644
--- a/apps/www/data/Developers.ts
+++ b/apps/www/data/Developers.ts
@@ -20,7 +20,7 @@ export const links = [
{
text: 'Open Source',
description: 'We support existing open source tools and communities wherever possible.',
- url: '/oss',
+ url: '/open-source',
icon: 'M10.7607 3.08859C15.7723 2.38592 20.0295 5.94789 20.8525 10.7642C21.5964 15.1122 19.4634 19.1692 15.8778 20.9967L14.0736 16.084C15.129 15.4346 15.8232 14.4223 16.0198 13.0819C16.3702 10.7219 14.7442 8.47426 12.3801 8.25648C10.2228 8.04047 8.33304 9.61601 7.99823 11.7702L7.99761 11.7743C7.73427 13.5096 8.47082 15.1847 9.92827 16.0841L8.12693 21C6.34571 20.1066 4.88125 18.6129 3.97963 16.7387L3.97879 16.7369C3.15872 15.0395 3.07406 13.7081 3.01524 12.783C3.01012 12.7024 3.0052 12.6249 3 12.5506C3.10941 7.30353 6.59243 3.6764 10.7607 3.08859Z',
},
]
diff --git a/apps/www/data/Footer.json b/apps/www/data/Footer.json
index d7a8da8c24a..91d445770e3 100644
--- a/apps/www/data/Footer.json
+++ b/apps/www/data/Footer.json
@@ -82,7 +82,7 @@
},
{
"text": "Open Source",
- "url": "/oss"
+ "url": "/open-source"
},
{
"text": "SupaSquad",
diff --git a/apps/www/data/Solutions.json b/apps/www/data/Solutions.json
index f12ff0f89fa..823d5dd261d 100644
--- a/apps/www/data/Solutions.json
+++ b/apps/www/data/Solutions.json
@@ -23,14 +23,6 @@
"label": "",
"url": "/storage"
},
- "realtime": {
- "name": "Realtime",
- "icon": "M15.042 21.672L13.684 16.6m0 0l-2.51 2.225.569-9.47 5.227 7.917-3.286-.672zM12 2.25V4.5m5.834.166l-1.591 1.591M20.25 10.5H18M7.757 14.743l-1.59 1.59M6 10.5H3.75m4.007-4.243l-1.59-1.59",
- "description": "Store, organize, and serve large files. Any media, including videos and images.",
- "description_short": "",
- "label": "",
- "url": "/storage"
- },
"edge-functions": {
"name": "Edge Functions",
"icon": "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4",
diff --git a/apps/www/lib/constants.ts b/apps/www/lib/constants.ts
index e3c815b5dca..445c0a6810a 100644
--- a/apps/www/lib/constants.ts
+++ b/apps/www/lib/constants.ts
@@ -1,5 +1,8 @@
export const APP_NAME = 'Supabase'
export const DESCRIPTION = 'The Open Source Alternative to Firebase.'
+export const IS_PROD = process.env.NEXT_PUBLIC_VERCEL_ENV === 'production'
+export const IS_PREVIEW = process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview'
+export const API_URL = process.env.NEXT_PUBLIC_API_URL
// Launch Weeek
export const SAMPLE_TICKET_NUMBER = 1234
diff --git a/apps/www/lib/fetchWrapper.ts b/apps/www/lib/fetchWrapper.ts
index c573a0d37dc..0313e49565f 100644
--- a/apps/www/lib/fetchWrapper.ts
+++ b/apps/www/lib/fetchWrapper.ts
@@ -1,7 +1,5 @@
interface DataProps {
- referrer?: string
- title: string
- route?: string
+ [prop: string]: any
}
export const post = (url: string, data: DataProps, options = {}) => {
diff --git a/apps/www/lib/gaEvents.ts b/apps/www/lib/gaEvents.ts
new file mode 100644
index 00000000000..a9db7dead20
--- /dev/null
+++ b/apps/www/lib/gaEvents.ts
@@ -0,0 +1,45 @@
+import { TelemetryEvent } from './telemetry'
+
+interface TelemetryEventType {
+ [key: string]: TelemetryEvent
+}
+
+const TelemetryEvents: TelemetryEventType = {
+ www_hp_hero_startProject: {
+ action: 'www_hp_hero_startProject',
+ category: 'link',
+ label: '',
+ },
+ www_hp_hero_documentation: {
+ action: 'www_hp_hero_documentation',
+ category: 'link',
+ label: '',
+ },
+ www_hp_subhero_products_database: {
+ action: 'www_hp_subhero_products_database',
+ category: 'link',
+ label: '',
+ },
+ www_hp_subhero_products_auth: {
+ action: 'www_hp_subhero_products_auth',
+ category: 'link',
+ label: '',
+ },
+ www_hp_subhero_products_storage: {
+ action: 'www_hp_subhero_products_storage',
+ category: 'link',
+ label: '',
+ },
+ www_hp_subhero_products_edgeFunctions: {
+ action: 'www_hp_subhero_products_edgeFunctions',
+ category: 'link',
+ label: '',
+ },
+ www_hp_subhero_products_realtime: {
+ action: 'www_hp_subhero_products_realtime',
+ category: 'link',
+ label: '',
+ },
+}
+
+export default TelemetryEvents
diff --git a/apps/www/lib/redirects.js b/apps/www/lib/redirects.js
index 5c57d2f3456..7331a19da0b 100644
--- a/apps/www/lib/redirects.js
+++ b/apps/www/lib/redirects.js
@@ -1496,6 +1496,11 @@ module.exports = [
source: '/docs/oss',
destination: '/oss',
},
+ {
+ permanent: true,
+ source: '/oss',
+ destination: '/open-source',
+ },
{
permanent: true,
source: '/docs/company/aup',
@@ -1913,4 +1918,57 @@ module.exports = [
source: '/docs/guides/cli/local-development',
destination: '/docs/guides/getting-started/local-development',
},
+
+ // old case studies moved to /customers
+
+ {
+ permanent: true,
+ source: '/blog/case-study-monitoro',
+ destination: '/customers',
+ },
+ {
+ permanent: true,
+ source: '/blog/case-study-tayfa',
+ destination: '/customers',
+ },
+ {
+ permanent: true,
+ source: '/blog/case-study-xendit',
+ destination: '/customers/xendit',
+ },
+ {
+ permanent: true,
+ source: '/blog/case-study-roboflow',
+ destination: '/customers',
+ },
+ {
+ permanent: true,
+ source: '/blog/toad-a-link-shortener-with-simple-apis-for-low-coders',
+ destination: '/customers',
+ },
+ {
+ permanent: true,
+ source: '/blog/epsilon3-self-hosting',
+ destination: '/customers/epsilon3',
+ },
+ {
+ permanent: true,
+ source: '/blog/spot-flutter-with-postgres',
+ destination: '/customers',
+ },
+ {
+ permanent: true,
+ source: '/blog/mobbin-supabase-200000-users',
+ destination: '/customers/mobbin',
+ },
+ {
+ permanent: true,
+ source: '/blog/replenysh-time-to-value-in-less-than-24-hours',
+ destination: '/customers/replenysh',
+ },
+ {
+ permanent: true,
+ source: '/blog/how-supabase-accelerates-development-of-all-pull-together',
+ destination: '/customers',
+ },
]
diff --git a/apps/www/lib/telemetry.ts b/apps/www/lib/telemetry.ts
new file mode 100644
index 00000000000..a880edb6f5b
--- /dev/null
+++ b/apps/www/lib/telemetry.ts
@@ -0,0 +1,42 @@
+import { post } from '~/lib/fetchWrapper'
+import { API_URL, IS_PROD, IS_PREVIEW } from 'lib/constants'
+import { NextRouter } from 'next/router'
+
+export interface TelemetryEvent {
+ category: string
+ action: string
+ label: string
+ value?: string
+}
+
+export interface TelemetryProps {
+ screenResolution?: string
+ language: string
+}
+
+// This event is the same as in studio/lib/telemetry.tx
+// but uses different ENV variables for www
+
+const sendEvent = (event: TelemetryEvent, gaProps: TelemetryProps, router: NextRouter) => {
+ if (!IS_PROD && !IS_PREVIEW) return
+
+ const { category, action, label, value } = event
+
+ return post(`${API_URL}/telemetry/event`, {
+ action: action,
+ category: category,
+ label: label,
+ value: value,
+ page_referrer: document?.referrer,
+ page_title: document?.title,
+ page_location: router.asPath,
+ ga: {
+ screen_resolution: gaProps?.screenResolution,
+ language: gaProps?.language,
+ },
+ })
+}
+
+export default {
+ sendEvent,
+}
diff --git a/apps/www/pages/_app.tsx b/apps/www/pages/_app.tsx
index 2ccb053b3ae..7329be0174e 100644
--- a/apps/www/pages/_app.tsx
+++ b/apps/www/pages/_app.tsx
@@ -1,22 +1,27 @@
-import { APP_NAME, DESCRIPTION } from 'lib/constants'
+import { API_URL, APP_NAME, DESCRIPTION } from 'lib/constants'
import { DefaultSeo } from 'next-seo'
import { AppProps } from 'next/app'
import { useRouter } from 'next/router'
import { useEffect } from 'react'
import Meta from '~/components/Favicons'
import '../styles/index.css'
-import { post } from './../lib/fetchWrapper'
-import { AuthProvider, ThemeProvider } from 'common'
+import { post } from '~/lib/fetchWrapper'
+import { AuthProvider, ThemeProvider, useTelemetryProps } from 'common'
import Head from 'next/head'
export default function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter()
+ const telemetryProps = useTelemetryProps()
function handlePageTelemetry(route: string) {
- return post(`https://api.supabase.io/platform/telemetry/page`, {
+ return post(`${API_URL}/telemetry/page`, {
referrer: document.referrer,
title: document.title,
route,
+ ga: {
+ screen_resolution: telemetryProps?.screenResolution,
+ language: telemetryProps?.language,
+ },
})
}
diff --git a/apps/www/pages/oss.tsx b/apps/www/pages/open-source/index.tsx
similarity index 97%
rename from apps/www/pages/oss.tsx
rename to apps/www/pages/open-source/index.tsx
index 684444cd700..e4f9b46e254 100644
--- a/apps/www/pages/oss.tsx
+++ b/apps/www/pages/open-source/index.tsx
@@ -3,12 +3,12 @@ import { useRouter } from 'next/router'
import { Octokit } from '@octokit/core'
import DefaultLayout from '~/components/Layouts/Default'
import SectionContainer from '~/components/Layouts/SectionContainer'
-import maintainers from '../data/maintainers.json'
-import Sponsors from '../components/Sponsors'
+import maintainers from '~/data/maintainers.json'
+import Sponsors from '~/components/Sponsors'
import Image from 'next/image'
import { NextSeo } from 'next-seo'
-export default function Oss() {
+const OpenSource = () => {
const octokit = new Octokit()
const [activePill, setActivePill] = useState('All')
@@ -157,3 +157,5 @@ export default function Oss() {
)
}
+
+export default OpenSource
diff --git a/apps/www/pages/storage/Storage.tsx b/apps/www/pages/storage/Storage.tsx
index e6296c35362..5baff9cc2bd 100644
--- a/apps/www/pages/storage/Storage.tsx
+++ b/apps/www/pages/storage/Storage.tsx
@@ -174,10 +174,7 @@ function StoragePage() {
content={ApiExamples}
text={[
)}
Built from the ground up for interoperable authentication.
, -- Fast and easy to implement using our powerful library clients. Asset optimization - and image transformation coming soon! -
, +Fast and easy to implement using our powerful library clients.
, ]} footer={[ -
-
+ {IS_PLATFORM && (
+ - Note: The{' '} - - - global upload limit - - {' '} - takes precedence over this value ({formattedGlobalUploadLimit}) -
-
+
+ )}
+ Note: The{' '} + + + global upload limit + + {' '} + takes precedence over this value ({formattedGlobalUploadLimit}) +
+
-
+ {IS_PLATFORM && (
+ - Note: The{' '} - - - global upload limit - - {' '} - takes precedence over this value ({formattedGlobalUploadLimit}) -
-
+
+ )}
+ Note: The{' '} + + + global upload limit + + {' '} + takes precedence over this value ({formattedGlobalUploadLimit}) +
+
+
+
+
+ Please provide a valid authorization ID in the URL
+
+
+
+
+
+
+ Please retry your authorization request from the requesting app
+ {error !== undefined &&Error: {error?.message}
} +
+
+
+
+ + {requester.name} has read and write access to the organization " + {approvedOrganization?.name ?? 'Unknown'}" and all of its projects +
++ Approved on: {dayjs(requester.approved_at).format('DD MMM YYYY HH:mm:ss (ZZ)')} +
+
+
+ }
+ >
+
+
+
+
+
+ {/* API Authorization requester details */}
+
+
+ Please retry your authorization request from the requesting app
+
+ )}
+
+ {/* Organization selection */}
+ {isLoadingOrganizations ? (
+
+ {(organizations ?? []).map((organization) => (
+
+ {organization.name}
+
+ ))}
+
+ )}
+
+
+
+
+ {/* Expiry warning */}
+ {isExpired && (
+
+
+
+
+
+
+ {requester?.name[0]}
++ {requester?.name} ({requester?.domain}) is requesting API access to an organization. The + application will be able to{' '} + + read and write the organization's settings and all of its projects. + +
+
+
+ ) : (
+