diff --git a/.github/workflows/avoid-typos.yml b/.github/workflows/avoid-typos.yml
index 1cbe64238ac..68a17b5ba32 100644
--- a/.github/workflows/avoid-typos.yml
+++ b/.github/workflows/avoid-typos.yml
@@ -17,4 +17,8 @@ jobs:
locale: "US"
reporter: github-pr-review
level: error
- exclude: "*.css"
+ exclude: |
+ "*.css"
+ "**/package.json"
+ "**/package-lock.json"
+ ".git/*"
diff --git a/.gitignore b/.gitignore
index c67a911193a..c78e6a2eb47 100644
--- a/.gitignore
+++ b/.gitignore
@@ -121,3 +121,6 @@ typings/
**/supabase/.temp
apps/new-docs/*
+
+# For self-hosted logs: https://github.com/supabase/supabase/blob/86e3ab20abfdb9c3e666334d3d2f8efeef9ccf2c/docker/docker-compose-logging.yml#L101
+gcloud.json
diff --git a/DEVELOPERS.md b/DEVELOPERS.md
index 5487e76808a..e88f3cb89f0 100644
--- a/DEVELOPERS.md
+++ b/DEVELOPERS.md
@@ -28,7 +28,7 @@ You need to install and configure the following dependencies on your machine to
- [Git](http://git-scm.com/)
- [Node.js v16.x (LTS)](http://nodejs.org)
-- [npm](https://www.npmjs.com/) version 7+ or [Yarn](https://yarnpkg.com/)
+- [npm](https://www.npmjs.com/) version 8.x.x or [Yarn](https://yarnpkg.com/)
## Local development
diff --git a/README.md b/README.md
index fcf1cfe5aba..f3506927e0a 100644
--- a/README.md
+++ b/README.md
@@ -13,8 +13,8 @@
- [x] Authentication and Authorization. [Docs](https://supabase.com/docs/guides/auth)
- [x] Auto-generated APIs.
- [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
+ - [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
- [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
- - [x] GraphQL (Beta). [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
- [x] Functions.
- [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions)
- [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
@@ -63,6 +63,7 @@ You can also [self-host](https://supabase.com/docs/guides/hosting/overview) and
- [PostgreSQL](https://www.postgresql.org/) is an object-relational database system with over 30 years of active development that has earned it a strong reputation for reliability, feature robustness, and performance.
- [Realtime](https://github.com/supabase/realtime) is an Elixir server that allows you to listen to PostgreSQL inserts, updates, and deletes using websockets. Realtime polls Postgres' built-in replication functionality for database changes, converts changes to JSON, then broadcasts the JSON over websockets to authorized clients.
- [PostgREST](http://postgrest.org/) is a web server that turns your PostgreSQL database directly into a RESTful API
+- [pg_graphql](http://github.com/supabase/pg_graphql/) a PostgreSQL extension that exposes a GraphQL API
- [Storage](https://github.com/supabase/storage-api) provides a RESTful interface for managing Files stored in S3, using Postgres to manage permissions.
- [postgres-meta](https://github.com/supabase/postgres-meta) is a RESTful API for managing your Postgres, allowing you to fetch tables, add roles, and run queries, etc.
- [GoTrue](https://github.com/netlify/gotrue) is an SWT based API for managing users and issuing SWT tokens.
diff --git a/apps/docs/components/Favicons.tsx b/apps/docs/components/Favicons.tsx
index 5c65346f0fa..1e9ddafffe1 100644
--- a/apps/docs/components/Favicons.tsx
+++ b/apps/docs/components/Favicons.tsx
@@ -5,32 +5,46 @@ const Favicons = () => {
const { basePath } = useRouter()
return (
-
-
-
-
- {/* */}
-
+ {/* prettier-ignore */}
+
+ {/* prettier-ignore */}
+
+ {/* prettier-ignore */}
+
+ {/* prettier-ignore */}
+
+ {/* prettier-ignore */}
+
+ {/* prettier-ignore */}
+
+ {/* prettier-ignore */}
+
+ {/* prettier-ignore */}
+
+ {/* prettier-ignore */}
+
-
+
+
+
+
+
-
+
-
+ {/* misc */}
+
+
+
)
}
diff --git a/apps/docs/components/JwtGenerator.js b/apps/docs/components/JwtGenerator.js
index 4ac1b05e255..d0dc7a7bf08 100644
--- a/apps/docs/components/JwtGenerator.js
+++ b/apps/docs/components/JwtGenerator.js
@@ -1,7 +1,6 @@
import React, { useState } from 'react'
import KJUR from 'jsrsasign'
-import CodeBlock from './CodeBlock/CodeBlock'
-import { Button, Select, Input } from 'ui'
+import { Button, Select, Input, CodeBlock } from 'ui'
const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
const now = new Date()
diff --git a/apps/docs/components/Navigation/AlgoliaSearch.tsx b/apps/docs/components/Navigation/AlgoliaSearch.tsx
deleted file mode 100644
index eeb954f037a..00000000000
--- a/apps/docs/components/Navigation/AlgoliaSearch.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { render } from 'react-dom'
-import { IconCommand } from 'ui'
-import { createElement, FC, useEffect, useRef, Fragment } from 'react'
-import algoliasearch from 'algoliasearch/lite'
-import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js'
-import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'
-import { useRouter } from 'next/router'
-
-// [Joshen] We're currently using DocSearch from Algolia as it provides a nice
-// UI out of the box + some good preconfigured search settings (e.g hierarchy).
-// However, we're using our own Algolia account to store the records in the indexes
-// (rather than going through the DocSearch program from Algolia where they'll crawl
-// our site for us). Refer to scripts/build-search on how we're saving the records.
-
-// Using Algolia's autocomplete library gives us full flexbility in terms of customizing
-// our search experience, but that will take time to figure out. Hence why for now we're just
-// using DocSearch with our own records.
-
-// Potentially for search, we could
-// - Go ahead with the DocSearch program and let them crawl our site to generate the records
-// - But we need to ensure that our site is semantically correct first
-// - Use Algolia itself to flesh out our own search logic
-// - The basics are already set up to be honest, but will take time to make it great
-// - Go back to Typesense if we deem that Algolia is not helpful in the long run
-
-const searchClient = algoliasearch(
- process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
- process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY
-)
-
-// [Joshen] Not working properly, but lets not get stuck on this
-// Priority just to get a search working
-const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
- key: 'docs-search',
- limit: 3,
- //@ts-ignore
- transformSource({ source }) {
- return {
- ...source,
- templates: {
- ...source.templates,
- header({ state }) {
- if (state.query) return null
- return (
-
- Your searches
-
-
- )
- },
- },
- }
- },
-})
-
-interface Props {}
-
-const AlgoliaSearch: FC = ({}) => {
- const searchRef = useRef(null)
- const router = useRouter()
-
- useEffect(() => {
- if (!searchRef.current) {
- return undefined
- }
- const search = autocomplete({
- openOnFocus: true,
- container: searchRef.current,
- defaultActiveItemId: 0,
- detachedMediaQuery: '',
- // @ts-ignore
- renderer: { createElement, Fragment, render },
- placeholder: 'Search docs',
- plugins: [recentSearchesPlugin],
- renderNoResults({ state, render }, root) {
- render(
-
diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index 8b228a6bfa6..ddb35ba930b 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -1,7 +1,6 @@
import ReactMarkdown from 'react-markdown'
-import { IconDatabase, Tabs } from 'ui'
-import CodeBlock from '~/components/CodeBlock/CodeBlock'
+import { CodeBlock, IconDatabase, Tabs } from 'ui'
import Options from '~/components/Options'
import Param from '~/components/Params'
diff --git a/apps/docs/data/nav/supabase-js/v2.ts b/apps/docs/data/nav/supabase-js/v2.ts
index 13925dc1d85..f71236ae3aa 100644
--- a/apps/docs/data/nav/supabase-js/v2.ts
+++ b/apps/docs/data/nav/supabase-js/v2.ts
@@ -160,6 +160,11 @@ const Nav = [
url: '/reference/javascript/storage-from-createsignedurls',
items: [],
},
+ {
+ name: 'from.createSignedUploadUrl()',
+ url: '/reference/javascript/storage-from-createsigneduploadurl',
+ items: [],
+ },
{
name: 'from.getPublicUrl()',
url: '/reference/javascript/storage-from-getpublicurl',
diff --git a/apps/docs/docs/ref/python/introduction.mdx b/apps/docs/docs/ref/python/introduction.mdx
index cf0a9f0ee4f..cecb5e86669 100644
--- a/apps/docs/docs/ref/python/introduction.mdx
+++ b/apps/docs/docs/ref/python/introduction.mdx
@@ -19,3 +19,14 @@ hideTitle: true
changes, invoke Deno Edge Functions, build login and user management functionality, and manage
large files.
+
+
+
The Python 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 maintainers, [anand2312](https://github.com/anand2312/), [dreinon](https://github.com/dreinon), [J0](https://github.com/j0), and [Leynier](https://github.com/leynier).
+
+
+ Shoutout to [timkpaine](https://github.com/timkpaine) for maintaining our Conda libraries as well.
+
+
+
+
+
+The Supabase Analytics server is a Logflare self-hostable instance that manages the ingestion and query pipelines for searching and aggregating structured analytics events.
+
+When self-hosting the Analytics server, the full logging experience matching that of the Supabase Platform is available in the Studio instance, allowing for an integrated and enhanced development experience.
+However, it's important to note that certain [differences](#differences) may arise due to the platform's infrastructure.
+
+
+ All logflare technical docs are available at
+ [https://docs.logflare.app](https://docs.logflare.app)
+
+
+## Getting Started
+
+### Pre-requisites
+
+Logflare currently requires BigQuery usage. You will need to create a Google Cloud project with billing enabled.
+
+The requirements are as follows after creating the project:
+
+- Project ID
+- Project number
+- A service account key
+
+#### Setting up BigQuery Service Account
+
+To ensure that you have sufficient permissions to insert into your Google Cloud BigQuery, ensure that you have created a service account with either:
+
+- BigQuery Admin role; or
+- The following permissions:
+ - bigquery.datasets.create
+ - bigquery.datasets.get
+ - bigquery.datasets.getIamPolicy
+ - bigquery.datasets.update
+ - bigquery.jobs.create
+ - bigquery.routines.create
+ - bigquery.routines.update
+ - bigquery.tables.create
+ - bigquery.tables.delete
+ - bigquery.tables.get
+ - bigquery.tables.getData
+ - bigquery.tables.update
+ - bigquery.tables.updateData
+
+You can create the service account via the web console or `gcloud`, as per the [Google Cloud documentation](https://cloud.google.com/iam/docs/keys-create-delete). In the web console, you can create the key by navigating to IAM > Service Accounts > Actions (dropdown) > Manage Keys
+
+We recommend setting the BigQuery Admin role, as it simplifies permissions setup.
+
+#### Downloading the Service Account key
+
+After the service account is created, you will need to create a key for the service account. This key will sign the JWTs for API requests that the Analytics server makes with BigQuery.
+
+### Docker Compose
+
+Using the example [self-hosting stack based on docker-compose](https://github.com/supabase/supabase/tree/master/docker), you include the logging related services using the following command
+
+You will first need to update the `.env.example` file with the necessary environment variables.
+
+- `GOOGLE_PROJECT_ID`
+- `GOOGLE_PROJECT_NUMBER`
+
+You will need to place your Service Account key in your present working directory with the filename `gcloud.json`.
+
+Thereafter, you can run the docker-compose commands and include the logging-specific compose file.
+
+```bash
+# assuming you clone the supabase/supabase repo.
+cd docker
+docker compose -f docker-compose.yml -f docker-compose-logging.yml up
+```
+
+This would include two additional docker services to your compose stack: Logflare and Vector.
+
+
+ Read more about [self-hosting Logflare](https://docs.logflare.app/self-hosting) as your analytics
+ server.
+
+
+#### Vector Usage
+
+In the Docker Compose example, we utilize vector to coordinate the logging pipeline between the services. However, if you peer into the [vector configuration file](https://github.com/supabase/supabase/blob/master/docker/volumes/logs/vector.yml), you will be able to see that Vector sends logs to the Analytics ingestion endpoint.
+
+If you need to customize the logging pipeline for your own needs, you must ensure that the payloads matches the expected event schema structure. Without the correct structure, it would cause the Studio Logs UI features to break.
+
+### Standalone Docker Container
+
+If desired, you can utilize the standalone docker-container. Please refer to the [docker-compose file](https://github.com/supabase/supabase/tree/master/docker/docker-compose-logging.yml) for required docker configuration.
+
+Additional supplementary technical documentation on self-hosting and using the `supabase/logflare` image for a full Logflare experience is available at the [official Logflare documentation](https://docs.logflare.app/self-hosting/).
+
+## Differences
+
+API logs rely on Kong instead of the Supabase Cloud API Gateway. Logs from Kong are not enriched with platform-only data.
+
+Within the self-hosted setup, all logs are routed to Logflare via Vector. As Kong routes API requests to PostgREST, self-hosted or local deployments will result in Kong request logs instead.
+This would result in differences in the log event metadata between self-hosted API requests and Supabase Platform requests.
+
+## BigQuery
+
+All log event data is stored in and queried from BigQuery. To use the Analytics server with Supabase you'll need a Google Cloud Platform account for access to BigQuery.
+
+Make sure to set the `GOOGLE_DATASET_ID_APPEND`, `GOOGLE_PROJECT_ID` and `GOOGLE_PROJECT_NUMBER` environment variables.
+
+Download your Google Cloud API JWT and store it under gcloud.json in your working directory.
+
+
+ You must also enable billing on your Google Cloud project, as the streaming inserts feature is
+ required.
+
+
+## Production Recommendations
+
+To self-host in a production setting, we recommend performing the following for a better experience.
+
+### Ensure that Logflare is behind a firewall and restrict all network access to it besides safe requests.
+
+Self-hosted Logflare has UI authentication disabled and is intended for exposure to the internet. We recommend restricting access to the dashboard, accessible at the `/dashboard` path.
+If dashboard access is required for managing sources, we recommend having an authentication layer, such as a VPN.
+
+### Use a different Postgres Database to store Logflare data.
+
+Logflare requires a Postgres database to function. However, if there is an issue with you self-hosted Postgres service, you would not be able to debug it as it would also bring Logflare down together.
+
+The self-hosted example is only used as a minimal example on running the entire stack, however it is not recommended to use the same database server for both production and observability.
+
+
+
+
+
+ ### Client libraries
+
+ - [JavaScript - Pino Transport](https://github.com/Logflare/pino-logflare)
+ - [Elixir](https://github.com/Logflare/logflare_api_client)
+ - [Elixir - Logger Backend](https://github.com/Logflare/logflare_logger_backend)
+ - [Erlang](https://github.com/Logflare/logflare_erl)
+ - [Erlang - Lager Backend](https://github.com/Logflare/logflare_lager_backend)
+ - [Cloudflare Worker](https://gist.github.com/chasers/c7a220e91820a1084b27fcfdb18ad6bd)
+
+ ### Integrations
+
+ - [Fly - Logs](https://github.com/Logflare/fly-log-shipper)
+ - [Vercel Integration - Logs](https://vercel.com/integrations/logflare)
+ - [Cloudflare App - Logs](https://www.cloudflare.com/apps/logflare/install)
+
+ ### Additional links
+
+ - [Source code](https://github.com/logflare/logflare)
+ - [OpenAPI docs](https://logflare.app/api/openapi)
+ - [Supabase Acquires Logflare](https://supabase.com/blog/supabase-acquires-logflare)
+ - [Logflare self-hosting docs](https://docs.logflare.app/self-hosting)
+
+
+
+
diff --git a/apps/docs/docs/ref/swift/introduction.mdx b/apps/docs/docs/ref/swift/introduction.mdx
new file mode 100644
index 00000000000..80dc3584bd1
--- /dev/null
+++ b/apps/docs/docs/ref/swift/introduction.mdx
@@ -0,0 +1,29 @@
+---
+id: introduction
+title: Introduction
+hideTitle: true
+---
+
+
+
+
+
Swift Client Library
+
@supabase-community/supabase-swift
+
+
+
+
+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).
+
+
+
+
diff --git a/apps/docs/generator/helpers.ts b/apps/docs/generator/helpers.ts
index 6bb5653e808..e7796c9101f 100644
--- a/apps/docs/generator/helpers.ts
+++ b/apps/docs/generator/helpers.ts
@@ -2,6 +2,7 @@ import * as _ from 'lodash'
import * as fs from 'fs'
export const slugify = (text: string) => {
+ if (!text) return ''
return text
.toString()
.toLowerCase()
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index d8966e5d668..0af5320a944 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -22,6 +22,10 @@ const levelsData = {
icon: '/docs/img/icons/menu/database',
name: 'Database',
},
+ api: {
+ icon: '/docs/img/icons/menu/database',
+ name: 'Serverless APIs',
+ },
auth: {
icon: '/docs/img/icons/menu/auth',
name: 'Auth',
@@ -34,6 +38,10 @@ const levelsData = {
icon: '/docs/img/icons/menu/realtime',
name: 'Realtime',
},
+ analytics: {
+ icon: '/docs/img/icons/menu/analytics',
+ name: 'Analytics',
+ },
storage: {
icon: '/docs/img/icons/menu/storage',
name: 'Storage',
@@ -82,6 +90,10 @@ const levelsData = {
icon: '/docs/img/icons/menu/reference-python',
name: 'Python Reference v2.0',
},
+ reference_swift_v1: {
+ icon: '/docs/img/icons/menu/reference-swift',
+ name: 'Swift Reference v1.0',
+ },
reference_cli: {
icon: '/docs/img/icons/menu/reference-cli',
name: 'CLI Reference',
@@ -102,6 +114,10 @@ const levelsData = {
icon: '/docs/img/icons/menu/reference-realtime',
name: 'Realtime Server Reference',
},
+ reference_self_hosting_analytics: {
+ icon: '/docs/img/icons/menu/reference-analytics',
+ name: 'Analytics Server Reference',
+ },
}
const MobileHeader = memo(function MobileHeader() {
@@ -298,20 +314,6 @@ const NavContainer = memo(function NavContainer() {
})
const SiteLayout = ({ children }) => {
- // const mobileMenuOpen = useMenuMobileOpen()
-
- useEffect(() => {
- const key = localStorage.getItem('supabaseDarkMode')
- if (!key) {
- // Default to dark mode if no preference config
- document.documentElement.className = 'dark'
- document.documentElement.style.colorScheme = 'dark'
- } else {
- document.documentElement.className = key === 'true' ? 'dark' : ''
- document.documentElement.style.colorScheme = key === 'true' ? 'dark' : ''
- }
- }, [])
-
return (
<>
diff --git a/apps/docs/layouts/tutorials/TutorialLayout.tsx b/apps/docs/layouts/tutorials/TutorialLayout.tsx
index 2f58a612cca..ba3ffe68f6e 100644
--- a/apps/docs/layouts/tutorials/TutorialLayout.tsx
+++ b/apps/docs/layouts/tutorials/TutorialLayout.tsx
@@ -14,19 +14,8 @@ interface Props {
}
const Layout: FC = (props: Props) => {
- // const contentString = renderToString(props.children)
const [active, setActive] = useState(false)
- useEffect(() => {
- const key = localStorage.getItem('supabaseDarkMode')
- if (!key) {
- // Default to dark mode if no preference config
- document.documentElement.className = 'dark'
- } else {
- document.documentElement.className = key === 'true' ? 'dark' : ''
- }
- }, [])
-
useEffect(() => {
setTimeout(function () {
setActive(true)
diff --git a/apps/docs/lib/docs.ts b/apps/docs/lib/docs.ts
index daa0f83d6bd..2ae4f8dfe80 100644
--- a/apps/docs/lib/docs.ts
+++ b/apps/docs/lib/docs.ts
@@ -2,7 +2,7 @@ import fs from 'fs'
import { join } from 'path'
import matter from 'gray-matter'
import nonGeneratedReferencePages from 'data/nonGeneratedReferencePages'
-import { REFERENCES } from 'components/Navigation/Navigation.constants'
+import { REFERENCES } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
const docsDirectory = process.cwd()
diff --git a/apps/docs/lib/mdx/getConfig.tsx b/apps/docs/lib/mdx/getConfig.tsx
index 8a014486212..d208d4243cc 100644
--- a/apps/docs/lib/mdx/getConfig.tsx
+++ b/apps/docs/lib/mdx/getConfig.tsx
@@ -4,6 +4,8 @@ import specStorageV0 from '~/../../spec/storage_v0_config.yaml' assert { type: '
import specRealtimeV0 from '~/../../spec/realtime_v0_config.yaml' assert { type: 'yml' }
// @ts-expect-error
import specAuthV1 from '~/../../spec/gotrue_v1_config.yaml' assert { type: 'yml' }
+// @ts-expect-error
+import specAnalyticsV0 from '~/../../spec/analytics_v0_config.yaml' assert { type: 'yml' }
function getStorageConfigV0() {
return { ...specStorageV0 }
@@ -17,4 +19,8 @@ function getAuthConfigV1() {
return { ...specAuthV1 }
}
-export { getStorageConfigV0, getRealtimeConfigV0, getAuthConfigV1 }
+function getAnalyticsConfigV0() {
+ return { ...specAnalyticsV0 }
+}
+
+export { getStorageConfigV0, getRealtimeConfigV0, getAuthConfigV1, getAnalyticsConfigV0 }
diff --git a/apps/docs/lib/refGenerator/helpers.ts b/apps/docs/lib/refGenerator/helpers.ts
index 83864fa5540..3325d45786f 100644
--- a/apps/docs/lib/refGenerator/helpers.ts
+++ b/apps/docs/lib/refGenerator/helpers.ts
@@ -267,6 +267,7 @@ export function gen_v3(spec: OpenAPIV3.Document, dest: string, { apiUrl }: { api
}
const slugify = (text: string) => {
+ if (!text) return ''
return text
.toString()
.toLowerCase()
diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
index 777b2e2224a..b3c71cae82e 100644
--- a/apps/docs/next.config.mjs
+++ b/apps/docs/next.config.mjs
@@ -80,6 +80,16 @@ const nextConfig = {
},
]
},
+ async redirects() {
+ return [
+ {
+ source: '/',
+ destination: '/docs',
+ basePath: false,
+ permanent: false,
+ },
+ ]
+ },
}
// next.config.js
diff --git a/apps/docs/package.json b/apps/docs/package.json
index f8fd026c549..cfda86a3831 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -35,7 +35,10 @@
"gen:supabase-js:v2": "npm-run-all gen:supabase-js:v2:ref",
"gen:supabase-js:v2:ref": "ts-node ./generator/index.ts gen --type legacy --input ../../spec/supabase_js_v2.yml --output ./docs/reference/javascript/generated",
"gen:realtime": "npm-run-all gen:realtime:config",
- "gen:realtime:config": "ts-node ./generator/index.ts gen --type config --input ../../spec/realtime_v0_config.yaml --output ./docs/reference/realtime/generated/config.mdx"
+ "gen:realtime:config": "ts-node ./generator/index.ts gen --type config --input ../../spec/realtime_v0_config.yaml --output ./docs/reference/realtime/generated/config.mdx",
+ "gen:analytics": "npm-run-all gen:analytics:config gen:analytics:usage",
+ "gen:analytics:config": "ts-node ./generator/index.ts gen --type config --input ../../spec/analytics_v0_config.yaml --output ./docs/reference/analytics/generated/config.mdx",
+ "gen:analytics:usage": "ts-node ./generator/index.ts gen --type api --input ../../spec/transforms/analytics_v0_openapi_deparsed.json --output ./docs/reference/analytics/generated/usage.mdx"
},
"dependencies": {
"@algolia/autocomplete-js": "^1.7.2",
@@ -45,9 +48,9 @@
"@mdx-js/react": "^1.6.22",
"@next/mdx": "^12.0.4",
"@radix-ui/react-accordion": "^1.0.1",
- "@supabase/auth-helpers-nextjs": "^0.5.4",
+ "@supabase/auth-helpers-nextjs": "^0.5.6",
"@supabase/auth-helpers-react": "^0.3.1",
- "@supabase/supabase-js": "^2.8.0",
+ "@supabase/supabase-js": "^2.13.0",
"algoliasearch": "^4.14.2",
"babel": "^6.23.0",
"clsx": "^1.2.1",
@@ -65,6 +68,7 @@
"mdast-util-to-markdown": "^1.5.0",
"mdast-util-to-string": "^3.1.1",
"mdx-mermaid": "2.0.0-rc3",
+ "mermaid": "^10.0.2",
"micromark-extension-mdxjs": "^1.0.0",
"next": "12.3.2",
"next-compose-plugins": "^2.2.1",
diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
index f3f6b65f63a..b8ebabf1003 100644
--- a/apps/docs/pages/_app.tsx
+++ b/apps/docs/pages/_app.tsx
@@ -1,19 +1,18 @@
import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { SessionContextProvider } from '@supabase/auth-helpers-react'
-import { ThemeProvider } from 'common/Providers'
-import { DefaultSeo } from 'next-seo'
-import Head from 'next/head'
+import { AuthProvider, ThemeProvider } from 'common'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
import { AppPropsWithLayout } from 'types'
+import { CommandMenuProvider } from 'ui'
+import components from '~/components'
import Favicons from '~/components/Favicons'
-import SearchProvider from '~/components/Search/SearchProvider'
import SiteLayout from '~/layouts/SiteLayout'
import { IS_PLATFORM, LOCAL_SUPABASE } from '~/lib/constants'
import { post } from '~/lib/fetchWrappers'
-import '../styles/algolia-search.scss'
import '../styles/ch.scss'
-import '../styles/docsearch.scss'
import '../styles/main.scss?v=1.0.0'
import '../styles/new-docs.scss'
import '../styles/prism-okaidia.scss'
@@ -25,7 +24,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
IS_PLATFORM || LOCAL_SUPABASE ? createBrowserSupabaseClient() : undefined
)
- function telemetry(route: string) {
+ function handlePageTelemetry(route: string) {
return post(`https://api.supabase.io/platform/telemetry/page`, {
referrer: document.referrer,
title: document.title,
@@ -38,7 +37,7 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
/*
* handle telemetry
*/
- telemetry(url)
+ handlePageTelemetry(url)
/*
* handle "scroll to top" behaviour on route change
*/
@@ -60,30 +59,44 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
}
}, [router.events])
+ useEffect(() => {
+ /**
+ * Send page telemetry on first page load
+ */
+ if (router.isReady) {
+ handlePageTelemetry(router.route)
+ }
+ }, [router.isReady])
+
const SITE_TITLE = 'Supabase Documentation'
+ const AuthContainer = (props) => {
+ return IS_PLATFORM || LOCAL_SUPABASE ? (
+
+ {props.children}
+
+ ) : (
+ {props.children}
+ )
+ }
+
return (
<>
- {IS_PLATFORM || LOCAL_SUPABASE ? (
-
-
-
-
-
-
-
-
-
- ) : (
+
-
+ (
+
+ )}
+ >
-
+
- )}
+
)
}
diff --git a/apps/docs/pages/_document.tsx b/apps/docs/pages/_document.tsx
index ed9a8a70c10..67f89450efd 100644
--- a/apps/docs/pages/_document.tsx
+++ b/apps/docs/pages/_document.tsx
@@ -2,11 +2,11 @@ import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
-
+
-
+
diff --git a/apps/docs/pages/guides/api.mdx b/apps/docs/pages/guides/api.mdx
new file mode 100644
index 00000000000..3b518ced47b
--- /dev/null
+++ b/apps/docs/pages/guides/api.mdx
@@ -0,0 +1,75 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'api',
+ title: 'Serverless APIs',
+ description: 'Auto-generating and Realtime APIs.',
+ sidebar_label: 'Overview',
+ video: 'https://www.youtube.com/v/rPAJJFdtPw0',
+}
+
+Supabase auto-generates three types of API directly from your database schema.
+
+- REST - connect to your database through a restful interface, directly from the browser.
+- GraphQL - manipulate your database using a graph-like query language.
+- Realtime - listen to database changes.
+
+All the APIs are auto-generated from your database and are designed to get you building as fast as possible, without writing a single line of code.
+
+You can use them directly from the browser (two-tier architecture), or as a complement to your own API server (three-tier architecture).
+
+## Features
+
+- **Instant and auto-generated.** As you update your database the changes are immediately accessible through your API.
+- **Self documenting.** Supabase generates documentation in the Dashboard which updates as you make database changes.
+- **Secure.** The API is configured to work with PostgreSQL's Row Level Security, provisioned behind an API gateway with key-auth enabled.
+- **Fast.** Our benchmarks for basic reads are more than 300% faster than Firebase. The API is a very thin layer on top of Postgres, which does most of the heavy lifting.
+- **Scalable.** The API can serve thousands of simultaneous requests, and works well for Serverless workloads.
+
+## REST API [#rest-api-overview]
+
+Supabase provides a RESTful API using [PostgREST](https://postgrest.org/). This is a very thin API layer on top of Postgres.
+It provides everything you need from a CRUD API at the URL `https://.supabase.co/rest/v1/`.
+
+The REST interface is automatically reflected from your database's schema and supports:
+- Basic CRUD operations (Create/Read/Update/Delete)
+- Arbitrarily deep relationships among tables/views, functions that return table types can also nest related tables/views.
+- Works with Postgres Views, Materialized Views and Foreign Tables
+- Works with Postgres Functions
+- User defined computed columns and computed relationships
+- Works with the Postgres security model - including Row Level Security, Roles, and Grants.
+
+The REST API resolves all requests to a single SQL statement leading to fast response times and high throughput.
+
+Reference:
+- [Docs](https://postgrest.org/)
+- [Source Code](https://github.com/PostgREST/postgrest)
+
+## GraphQL API [#graphql-api-overview]
+
+Supabase uses [pg_graphql](https://supabase.github.io/pg_graphql/) to expose a GraphQL API endpoint at `https://.supabase.co/graphql/v1/`.
+You can introspect and query the GraphQL API of an existing Supabase project within Studio [here](https://app.supabase.com/project/_/api/graphiql),
+or navigate there manually at `API Docs > GraphQL > GraphiQL`.
+
+The GraphQL interface is automatically reflected from your database's schema and supports:
+- Basic CRUD operations (Create/Read/Update/Delete)
+- Support for Tables, Views, Materialized Views, and Foreign Tables
+- Arbitrarily deep relationships among tables/views
+- User defined computed fields
+- The Postgres security model - including Row Level Security, Roles, and Grants.
+
+The GraphQL API resolves all requests in a single round-trip leading to fast response times and high throughput.
+
+Reference:
+- [Docs](https://supabase.github.io/pg_graphql/)
+- [Source Code](https://github.com/supabase/pg_graphql)
+
+## Realtime API [#realtime-api-overview]
+
+Supabase provides a Realtime API using [Realtime](https://github.com/supabase/realtime). You can use this to listen to database changes over websockets.
+Realtime leverages PostgreSQL's built-in logical replication. You can manage your Realtime API simply by managing Postgres publications.
+Go to your project's [Replication section](https://app.supabase.com/project/_/database/replication) to get started.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/api-keys.mdx b/apps/docs/pages/guides/api/api-keys.mdx
new file mode 100644
index 00000000000..3f9869586f5
--- /dev/null
+++ b/apps/docs/pages/guides/api/api-keys.mdx
@@ -0,0 +1,70 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'api-keys',
+ title: 'Understanding API Keys',
+ description: 'Securing your Serverless API with Postgres Row Level Security.',
+}
+
+Supabase provides two default keys when you create a project: an `anon` key, and a `service_role` key. You can find both keys in the [API Settings](https://app.supabase.com/project/_/settings/api).
+
+The Serverless APIs are designed to work with Postgres Row Level Security (RLS). These keys both map to Postgres roles. You can find an `anon` user and a `service_role` user in the [Roles](http://app.supabase.com/project/_/database/roles) section of the dashboard.
+
+The keys are both long-lived JWTs. If you decode these keys, you will see that they contain the "role", an "issued date", and an "expiry date" ~10 years in the future.
+
+```json
+{
+ "role": "anon",
+ "iat": 1625137684,
+ "exp": 1940713684
+}
+```
+
+## The `anon` key
+
+The `anon` key has very few privileges. You can use it in your [RLS policies](/docs/guides/auth/row-level-security) for "anonymous" access. For example, this policy will allow access to the `profiles` table:
+
+```sql
+create policy "Allow anonymous access" on profiles to anon for
+select
+ using (true);
+```
+
+And similarity for disallowing access:
+
+```sql
+create policy "Disallow anonymous access" on profiles to anon for
+select
+ using (false);
+```
+
+If you are using [Supabase Auth](/docs/guides/auth/overview), then the `anon` role will automatically update to `authenticated` once a user is logged in:
+
+```sql
+create policy "Allow access to authenticated users" on profiles to authenticated for
+select
+ using (true);
+```
+
+## The `service_role` key
+
+The "service_role" is a predefined Postgres role with elevated privileges, designed to perform various administrative and service-related tasks. It can bypass Row Level Security, so it should only be used on a private server.
+
+
+ Never expose the `service_role` key in a browser or anywhere where a user can see it.
+
+
+A common use case for the `service_role` key is running data analytics jobs on the backend. To support joins on user id, it is often useful to grant the service role read access to `auth.users` table.
+
+```sql
+grant
+select
+ on table auth.users to service_role;
+```
+
+We have [partnered with GitHub](https://github.blog/changelog/2022-03-28-supabase-is-now-a-github-secret-scanning-partner/) to scan for Supabase `service_role` keys pushed to public repositories.
+If they detect any keys with service_role privileges being pushed to GitHub, they will forward the API key to us, so that we can automatically revoke the detected secrets and notify you, protecting your data against malicious actors.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/creating-routes.mdx b/apps/docs/pages/guides/api/creating-routes.mdx
new file mode 100644
index 00000000000..c48442f12d1
--- /dev/null
+++ b/apps/docs/pages/guides/api/creating-routes.mdx
@@ -0,0 +1,252 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'creating-routes',
+ title: 'Creating API Routes',
+ description:
+ 'API routes are automatically created when you create Postgres Tables, Views, or Functions.',
+}
+
+API routes are automatically created when you create Postgres Tables, Views, or Functions.
+
+## Create a table
+
+Let's create our first API route by creating a table called `todos` to store tasks.
+This creates a corresponding route `todos` which can accept `GET`, `POST`, `PATCH`, & `DELETE` requests.
+
+
+
+
+1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
+1. Click **New Table** and create a table with the name `todos`.
+1. Click **Save**.
+1. Click **New Column** and create a column with the name `task` and type `text`.
+1. Click **Save**.
+
+
+
+
+
+
+```sql
+ -- Create a table called "todos" with a column to store tasks.
+create table
+ todos (
+ id bigint generated by default as identity primary key,
+ task text check (char_length(task) > 3)
+ );
+```
+
+
+
+
+## API URL and Keys
+
+Every Supabase project has a unique API URL. Your API is secured behind an API gateway which requires an API Key for every request.
+
+1. Go to the [Settings](https://app.supabase.com/project/_/settings/general) page in the Dashboard.
+2. Click **API** in the sidebar.
+3. Find your API `URL`, `anon`, and `service_role` keys on this page.
+
+
+
+The REST API and the GraphQL API are both accessible through this URL:
+
+- REST: `https://.supabase.co/rest/v1`
+- GraphQL: `https://.supabase.co/graphql/v1`
+
+Both of these routes require the `anon` key to be passed through an `apikey` header.
+
+## Using the API
+
+### REST API
+
+You can interact with your API directly via HTTP requests, or you can use the client libraries which we provide.
+
+Let's see how to make a request to the `todos` table which we created in the first step,
+using the API URL (`SUPABASE_URL`) and Key (`SUPABASE_ANON_KEY`) we provided:
+
+
+
+
+```javascript
+// Initialize the JS client
+import { createClient } from '@supabase/supabase-js'
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
+
+// Make a request
+const { data: todos, error } = await supabase.from('todos').select('*')
+```
+
+
+
+
+```bash
+# Append /rest/v1/ to your URL, and then use the table name as the route
+curl '/rest/v1/todos' \
+-H "apikey: " \
+-H "Authorization: Bearer "
+```
+
+
+
+
+JS Reference: [select()](/docs/reference/javascript/select),
+[insert()](/docs/reference/javascript/insert),
+[update()](/docs/reference/javascript/update),
+[upsert()](/docs/reference/javascript/upsert),
+[delete()](/docs/reference/javascript/delete),
+[rpc()](/docs/reference/javascript/rpc) (call Postgres functions).
+
+### GraphQL API
+
+You can use any GraphQL client with the Supabase GraphQL API. For our GraphQL example we will use [urql](https://formidable.com/open-source/urql/docs/).
+
+
+
+
+```javascript
+import { createClient, useQuery } from 'urql'
+
+// Prepare API key and Authorization header
+const headers = {
+ apikey: ,
+ authorization: `Bearer ${}`,
+}
+
+// Create GraphQL client
+// See: https://formidable.com/open-source/urql/docs/basics/react-preact/#setting-up-the-client
+const client = createClient({
+ url: '/graphql/v1',
+ fetchOptions: function createFetchOptions() {
+ return { headers }
+ },
+})
+
+// Prepare our GraphQL query
+const TodosQuery = `
+ query {
+ todosCollection {
+ edges {
+ node {
+ id
+ title
+ }
+ }
+ }
+ }
+`
+
+// Query for the data (React)
+const [result, reexecuteQuery] = useQuery({
+ query: TodosQuery,
+})
+
+// Read the result
+const { data, fetching, error } = result
+```
+
+
+
+
+```bash
+# Append /graphql/v1/ to your URL, and then use the table name as the route
+curl --request POST '/graphql/v1' \
+-H 'apikey: ' \
+-H 'Authorization: Bearer ' \
+-H 'Content-Type: application/json' \
+-d '{ "query":"{ todos(first: 3) { edges { node { id } } } }" }'
+```
+
+
+
+
+### Realtime API
+
+By default Realtime is disabled on your database. Let's turn on Realtime for the `todos` table.
+
+
+
+
+1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
+2. Click on **Replication** in the sidebar.
+3. Control which database events are sent by toggling **Insert**, **Update**, and **Delete**.
+4. Control which tables broadcast changes by selecting **Source** and toggling each table.
+
+
+
+
+
+
+```sql
+alter
+ publication supabase_realtime add table todos;
+```
+
+
+
+
+From the client, we can listen to any new data that is inserted into the `todos` table:
+
+```javascript
+// Initialize the JS client
+import { createClient } from '@supabase/supabase-js'
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
+
+// Create a function to handle inserts
+const handleInserts = (payload) => {
+ console.log('Change received!', payload)
+}
+
+// Listen to inserts
+const { data: todos, error } = await supabase.from('todos').on('INSERT', handleInserts).subscribe()
+```
+
+Use [subscribe()](/docs/reference/javascript/subscribe) to listen to database changes.
+The Realtime API works through PostgreSQL's replication functionality. Postgres sends database changes to a [publication](/docs/guides/database/replication#publications)
+called `supabase_realtime`, and by managing this publication you can control which data is broadcast.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/graphql/graphiql.mdx b/apps/docs/pages/guides/api/graphql/graphiql.mdx
new file mode 100644
index 00000000000..a3ce41073fd
--- /dev/null
+++ b/apps/docs/pages/guides/api/graphql/graphiql.mdx
@@ -0,0 +1,22 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'graphiql',
+ title: 'GraphiQL documentation',
+ description: 'Some docs on graphiql.',
+ video: 'https://www.youtube.com/v/7CqlTU9aOR4',
+}
+
+Every Supabase project has a GraphQL Endpoint: `https://.supabase.co/graphql/v1`.
+
+This endpoint is compatible with any GraphiQL implementation that can pass an `apikey` header.
+Some suggested applications:
+
+- [paw.cloud](https://paw.cloud)
+- [insomnia.rest](https://insomnia.rest)
+- [postman.com/graphql](https://www.postman.com/graphql/)
+- Self-hosted GraphiQL: GraphiQL can be served through a simple HTML file. See [this discussion](https://github.com/supabase/supabase/discussions/6144) for more details.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/joins-and-nesting.mdx b/apps/docs/pages/guides/api/joins-and-nesting.mdx
new file mode 100644
index 00000000000..470eba7a5aa
--- /dev/null
+++ b/apps/docs/pages/guides/api/joins-and-nesting.mdx
@@ -0,0 +1,206 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'joins-and-nested-tables',
+ title: 'Querying Joins and Nested tables',
+ description: 'The Serverless APIs automatically detect relationships between Postgres tables.',
+}
+
+The Serverless APIs automatically detect relationships between Postgres tables. Since Postgres is a relational database, this is a very common scenario.
+
+## One-to-many joins
+
+Let's use an example database that stores `countries` and `cities`:
+
+
+
+
+**Countries**
+
+| `id` | `name` |
+| ---- | -------------- |
+| 1 | United Kingdom |
+| 2 | United States |
+
+**Cities**
+
+| `id` | `name` | `country_id` |
+| ---- | ----------- | ------------ |
+| 1 | London | 1 |
+| 2 | Manchester | 1 |
+| 3 | Los Angeles | 2 |
+| 4 | New York | 2 |
+
+
+
+
+```sql
+create table
+ countries ("id" serial primary key, "name" text);
+
+insert into
+ countries (id, name)
+values
+ (1, 'United Kingdom'),
+ (2, 'United States');
+
+create table
+ cities (
+ "id" serial primary key,
+ "name" text,
+ "country_id" int references "countries"
+ );
+
+insert into
+ cities (name, country_id)
+values
+ ('London', 1),
+ ('Manchester', 1),
+ ('Los Angeles', 2),
+ ('New York', 2);
+```
+
+
+
+
+The APIs will automatically detect relationships based on the foreign keys:
+
+
+
+
+```js
+const { data, error } = await supabase.from('countries').select(`
+ id,
+ name,
+ cities ( id, name )
+`)
+```
+
+
+
+
+```dart
+final data = await supabase.from('todos').select('id, name, cities(id, name)');
+```
+
+
+
+
+```javascript
+const Query = `
+ query {
+ countriesCollection {
+ edges {
+ node {
+ id
+ name
+ cities {
+ id,
+ name
+ }
+ }
+ }
+ }
+ }
+`
+```
+
+
+
+
+```bash
+GET https://[REF].supabase.co/rest/v1/countries?select=id,name,cities(id,name)
+```
+
+
+
+
+## Many-to-many joins
+
+The Serverless APIs will detect many-to-many joins. For example, if you have a database which stored teams of users (where each user could below to many teams):
+
+```sql
+create table
+ users ("id" serial primary key, "name" text);
+
+create table
+ teams ("id" serial primary key, "team_name" text);
+
+create table
+ members (
+ "id" serial primary key,
+ "user_id" int references users,
+ "team_id" int references teams
+ );
+```
+
+In these cases you don't need to explicitly define the joining table (members). If we wanted to fetch all the teams and the members in each team:
+
+
+
+
+```js
+const { data, error } = await supabase.from('teams').select(`
+ id,
+ team_name,
+ users ( id, name )
+`)
+```
+
+
+
+
+```dart
+final data = await supabase.from('teams').select('id, team_name, users(id, name)');
+```
+
+
+
+
+```javascript
+const Query = `
+ query {
+ teamsCollection {
+ edges {
+ node {
+ id
+ team_name
+ users {
+ id,
+ name
+ }
+ }
+ }
+ }
+ }
+`
+```
+
+
+
+
+```bash
+GET https://[REF].supabase.co/rest/v1/teams?select=id,team_name,users(id,name)
+```
+
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/quickstart.mdx b/apps/docs/pages/guides/api/quickstart.mdx
new file mode 100644
index 00000000000..7d645a8b5f7
--- /dev/null
+++ b/apps/docs/pages/guides/api/quickstart.mdx
@@ -0,0 +1,236 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import StepHikeCompact from '~/components/StepHikeCompact'
+
+export const meta = {
+ title: 'Build an API route in less than 2 minutes.',
+ subtitle: 'Create your first API route by creating a table called `todos` to store tasks.',
+ breadcrumb: 'API Quickstart',
+}
+
+Let's create our first REST route which we can query using `cURL` or the browser.
+
+We'll create a database table called `todos` for storing tasks. This creates a corresponding API route `/rest/v1/todos` which can accept `GET`, `POST`, `PATCH`, & `DELETE` requests.
+
+
+
+
+
+
+ [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
+
+ After your project is ready, create a table in your Supabase database. You can do this with either the Table interface or the [SQL Editor](https://app.supabase.com/project/_/sql).
+
+
+
+
+
+
+
+
+ ```sql
+ -- Create a table called "todos"
+ -- with a column to store tasks.
+ create table todos (
+ id serial primary key,
+ task text
+ );
+ ```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's turn on Row Level Security for this table and allow anonymous access.
+
+
+
+
+
+ ```sql
+ -- Turn on security
+ alter table "todos"
+ enable row level security;
+
+ -- Allow anonymous access
+ create policy "Allow anonymous access"
+ on todos
+ to anon
+ for select
+ using (true);
+ ```
+
+
+
+
+
+
+
+
+ Now we can add some data to our table which we can access through our API.
+
+
+
+
+
+ ```sql
+ insert into todos (task)
+ values
+ ('Create tables'),
+ ('Enable security'),
+ ('Add data'),
+ ('Fetch data from the API');
+ ```
+
+
+
+
+
+
+
+
+ Find your API URL and Keys in your Dashboard [API Settings](https://app.supabase.com/project/_/settings/api). You can now query your "todos" table by appending `/rest/v1/todos` to the API URL.
+
+ Copy this block of code, substitute `` and ``, then run it from a terminal.
+
+
+
+
+ ```bash Terminal
+ curl 'https://.supabase.co/rest/v1/todos' \
+ -H "apikey: " \
+ -H "Authorization: Bearer "
+ ```
+
+
+
+
+
+
+
+## Bonus
+
+There are several options for accessing your data:
+
+### Browser
+
+You can query the route in your browser, by appending the `anon` key as a query parameter:
+
+`https://.supabase.co/rest/v1/users?apikey=`
+
+### Client libraries
+
+We provide a numerous [Client Libraries](https://github.com/supabase/supabase#client-libraries).
+
+
+
+
+```js
+const { data, error } = await supabase.from('todos').select()
+```
+
+
+
+
+```dart
+final data = await supabase.from('todos').select('*');
+```
+
+
+
+
+```python
+response = supabase.table('todos').select("*").execute()
+```
+
+
+
+
+### GraphQL
+
+Every table can be accessed through the GraphQL API by switching `/rest/v1` with `/graphql/v1`.
+
+
+
+
+```javascript
+import { createClient, useQuery } from 'urql'
+
+const URL = '/graphql/v1'
+const ANON_KEY = ''
+
+// Prepare API key and Authorization header
+const headers = {
+ apikey: `${ANON_KEY}`,
+ authorization: `Bearer ${ANON_KEY}`,
+}
+
+const client = createClient({
+ url: URL,
+ fetchOptions: function createFetchOptions() {
+ return { headers }
+ },
+})
+
+// Prepare our GraphQL query
+const TodosQuery = `
+ query {
+ todosCollection {
+ edges {
+ node {
+ id
+ task
+ }
+ }
+ }
+ }
+`
+
+// Query for the data (React)
+const [result, reexecuteQuery] = useQuery({
+ query: TodosQuery,
+})
+
+// Read the result
+const { data, fetching, error } = result
+```
+
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/rest/auto-generated-docs.mdx b/apps/docs/pages/guides/api/rest/auto-generated-docs.mdx
new file mode 100644
index 00000000000..82709aa7a1a
--- /dev/null
+++ b/apps/docs/pages/guides/api/rest/auto-generated-docs.mdx
@@ -0,0 +1,26 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'auto-docs',
+ title: 'Auto-generated documentation',
+ description: 'Supabase provides documentation that updates automatically.',
+}
+
+Supabase generates documentation in the [Dashboard](https://app.supabase.com) which updates as you make database changes.
+
+1. Go to the [API](https://app.supabase.com/project/_/api) page in the Dashboard.
+2. Select any table under **Tables and Views** in the sidebar.
+3. Switch between the JavaScript and the cURL docs using the tabs.
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/rest/client-libs.mdx b/apps/docs/pages/guides/api/rest/client-libs.mdx
new file mode 100644
index 00000000000..5594ef78686
--- /dev/null
+++ b/apps/docs/pages/guides/api/rest/client-libs.mdx
@@ -0,0 +1,33 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'client-libs',
+ title: 'Client Libraries',
+ description: 'Supabase provides several client libraries for the REST and Realtime APIs.',
+ video: 'https://www.youtube.com/v/7CqlTU9aOR4',
+}
+
+Supabase provides client libraries for the REST and Realtime APIs. Some libraries are officially supported, and some are contributed by the community.
+
+## Official Libraries
+
+| `Language` | `Source Code` | `Documentation` |
+| --------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- |
+| Javascript/Typescript | [supabase-js](https://github.com/supabase/supabase-js) | [Docs](https://supabase.com/docs/reference/javascript/introduction) |
+| Dart/Flutter | [supabase-dart](https://github.com/supabase/supabase-dart) | [Docs](https://supabase.com/docs/reference/dart/introduction) |
+
+## Community Libraries
+
+| `Language` | `Source Code` | `Documentation` |
+| ----------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------- |
+| C# | [supabase-csharp](https://github.com/supabase-community/supabase-csharp) | [Docs](https://supabase.com/docs/reference/csharp/introduction) |
+| Go | [supabase-go](https://github.com/supabase-community/supabase-go) | |
+| Kotlin | [supabase-kt](https://github.com/supabase-community/supabase-kt) | |
+| Python | [supabase-py](https://github.com/supabase-community/supabase-py) | [Docs](https://supabase.com/docs/reference/python/initializing) |
+| Ruby | [supabase-rb](https://github.com/supabase-community/supabase-rb) | |
+| Swift | [supabase-swift](https://github.com/supabase-community/supabase-swift) | |
+| Godot Engine (GDScript) | [supabase-gdscript](https://github.com/supabase-community/godot-engine.supabase) | |
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/database/api/generating-types.mdx b/apps/docs/pages/guides/api/rest/generating-types.mdx
similarity index 100%
rename from apps/docs/pages/guides/database/api/generating-types.mdx
rename to apps/docs/pages/guides/api/rest/generating-types.mdx
diff --git a/apps/docs/pages/guides/api/securing-your-api.mdx b/apps/docs/pages/guides/api/securing-your-api.mdx
new file mode 100644
index 00000000000..70fa2ef38ae
--- /dev/null
+++ b/apps/docs/pages/guides/api/securing-your-api.mdx
@@ -0,0 +1,66 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'securing-your-api',
+ title: 'Securing your API',
+ description: 'Securing your Serverless API with Postgres Row Level Security.',
+}
+
+The Serverless APIs are designed to work with Postgres Row Level Security (RLS). If you use [Supabase Auth](/docs/guides/auth), you can restrict data based on the logged-in user.
+To control access to your data, you can use [Policies](/docs/guides/auth#policies).
+
+## Enabling Row Level Security
+
+If you create a table through the Dashboard, RLS will be enabled by default. This is not the case, however, if you create a table or view using SQL.
+To enable RLS on any table:
+
+
+
+
+1. Go to the [Authentication](https://app.supabase.com/project/_/auth/users) page in the Dashboard.
+2. Click on **Policies** in the sidebar.
+3. Select **Enable RLS** to enable Row Level Security.
+
+
+
+
+```sql
+alter table
+ todos enable row level security;
+```
+
+
+
+
+With RLS enabled, you can create Policies that allow or disallow users to access and update data. We provide a detailed guide for creating Row Level Security Policies in our [Authorization documentation](/docs/guides/auth/row-level-security).
+
+## Safeguards towards accidental deletes and updates
+
+By default, all projects have the [safeupdate](https://github.com/eradman/pg-safeupdate) Postgres extension enabled for API queries.
+This ensures that `delete()` and `update()` requests will fail if there are no filters provided.
+To confirm that safeupdate is enabled for API queries, run the following query:
+
+```sql
+select
+ usename,
+ useconfig
+from
+ pg_shadow
+where
+ usename = 'authenticator';
+```
+
+The expected value for `useconfig` should be:
+
+```sql
+['session_preload_libraries=supautils, safeupdate']
+```
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/auth/overview.mdx b/apps/docs/pages/guides/auth.mdx
similarity index 100%
rename from apps/docs/pages/guides/auth/overview.mdx
rename to apps/docs/pages/guides/auth.mdx
diff --git a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
index 52f2e5acf68..e52a421e9cb 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
@@ -66,7 +66,7 @@ const App = () => (
### Social Providers
-The Auth component also supports login with [offical social providers](../../auth#providers).
+The Auth component also supports login with [official social providers](../../auth#providers).
```js lines=13 title=/src/index.js
import { createClient } from '@supabase/supabase-js'
@@ -322,6 +322,8 @@ const App = () => (
)
```
+Currently, translating error messages (e.g. "Invalid credentials") is not supported. Check [related issue.](https://github.com/supabase/auth-ui/issues/86)
+
export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx
index 21ec7369f1f..5cad755ec61 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs-server-components.mdx
@@ -2,13 +2,15 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'nextjs-server-components',
- title: 'Supabase Auth with Next.js Server Components',
+ title: 'Supabase Auth with Next.js app directory',
description:
- 'Authentication helpers for creating an authenticated Supabase client in Next.js 13 app directory Server Components.',
- sidebar_label: 'Next.js Server Components',
+ 'Authentication helpers for creating an authenticated Supabase client in Next.js 13 app directory Server Components and Route Handlers.',
+ sidebar_label: 'Next.js (app)',
}
-This submodule provides experimental convenience helpers for implementing user authentication in Next.js Server Components - the `app` directory. For examples using the `pages` directory check out [Auth Helpers in Next.js](/docs/guides/auth/auth-helpers/nextjs).
+The Next.js Auth Helpers package configures Supabase Auth to store the user's session in a cookie, rather than `localStorage`. This makes the users's session available server-side - in Server Components and Route Handlers - and is automatically sent along with any requests to Supabase.
+
+> The `app` directory in Next.js is still in beta and expected to change. For examples using the `pages` directory check out [Auth Helpers in Next.js](/docs/guides/auth/auth-helpers/nextjs).
-> For a complete implementation example, check out [this repo](https://github.com/supabase/auth-helpers/tree/main/examples/nextjs-server-components).
-
-> To learn more about fetching and caching Supabase data with Next.js 13 Server Components, check out our [blog](/blog/fetching-and-caching-supabase-data-in-next-js-server-components) or [live stream](https://www.youtube.com/watch?v=QH0P5xZt5wY).
+> To learn more about Supabase and the Next.js 13 app directory, check out [this playlist](https://youtube.com/playlist?list=PL5S4mPUpp4OtwG-qCxm8gA_hjaBq0OPdz).
## Install the Next.js helper library
@@ -61,9 +61,7 @@ NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
```
-## Creating a Supabase Client
-
-### Server-side
+## Configure Middleware
-Create a new file at `/utils/supabase-server.js` and populate with the following:
+Middleware runs immediately before each route in rendered. Next.js only provides read access to headers and cookies in Server Components and Route Handlers, however, Supabase needs to be able to set cookies and headers to refresh expired access tokens. Therefore, you must call the `getSession` function in `middleware.js` in order to use a Supabase client in Server Components or Route Handlers.
-```js title="/utils/supabase-server.js"
-import { headers, cookies } from 'next/headers'
-import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
-
-export const createClient = () =>
- createServerComponentSupabaseClient({
- headers,
- cookies,
- })
-```
-
-> This needs to export a function, as the headers and cookies are not populated with values until the Server Component is requesting data.
-
-
-
-
-
-Create a new file at `/utils/supabase-server.ts` and populate with the following:
-
-```ts title="/utils/supabase-server.ts"
-import { headers, cookies } from 'next/headers'
-import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
-
-import type { Database } from '../lib/database.types'
-
-export const createClient = () =>
- createServerComponentSupabaseClient({
- headers,
- cookies,
- })
-```
-
-> TypeScript types can be [generated with the Supabase CLI](https://supabase.com/docs/reference/javascript/typescript-support) and passed to `createServerSupabaseClient` to add type support to the Supabase client.
-
-> This needs to export a function, as the headers and cookies are not populated with values until the Server Component is requesting data.
-
-
-
-
-This will be used any time we need to create a Supabase client _server-side_ - in a Server Component, for example.
-
-Next, we need a middleware file to refresh the user's session on navigation.
-
-> If you were using Middleware prior to 12.2, see the [upgrade guide](https://nextjs.org/docs/messages/middleware-upgrade-guide).
-
-
-
-
-Create a new `middleware.js` file at the same level as your `app` (in the root or `src` directory) and populate with the following:
+Create a new `middleware.js` file in the root of your project and populate with the following:
```jsx title="middleware.js"
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
@@ -136,13 +81,8 @@ import { NextResponse } from 'next/server'
export async function middleware(req) {
const res = NextResponse.next()
-
const supabase = createMiddlewareSupabaseClient({ req, res })
-
- const {
- data: { session },
- } = await supabase.auth.getSession()
-
+ await supabase.auth.getSession()
return res
}
```
@@ -151,24 +91,21 @@ export async function middleware(req) {
-Create a new `middleware.ts` file at the same level as your `app` (in the root or `src` directory) and populate with the following:
+Middleware runs immediately before each route in rendered. Next.js only provides read access to headers and cookies in Server Components and Route Handlers, however, Supabase needs to be able to set cookies and headers to refresh expired access tokens. Therefore, you must call the `getSession` function in `middleware.ts` in order to use a Supabase client in Server Components or Route Handlers.
+
+Create a new `middleware.ts` file in the root of your project and populate with the following:
```tsx title="middleware.ts"
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
-import type { Database } from './lib/database.types'
+import type { Database } from '@/lib/database.types'
export async function middleware(req: NextRequest) {
const res = NextResponse.next()
-
const supabase = createMiddlewareSupabaseClient({ req, res })
-
- const {
- data: { session },
- } = await supabase.auth.getSession()
-
+ await supabase.auth.getSession()
return res
}
```
@@ -178,27 +115,9 @@ export async function middleware(req: NextRequest) {
-We can now use our server-side Supabase client to fetch data in Server Components.
+## Supabase Provider
-```jsx
-import 'server-only'
-
-import { createClient } from '../../utils/supabase-server'
-
-// do not cache this page
-export const revalidate = 0
-
-export default async function ServerComponent() {
- const supabase = createClient()
- const { data } = await supabase.from('posts').select('*')
-
- return
{JSON.stringify({ data }, null, 2)}
-}
-```
-
-### Client-side
-
-We still need a Supabase instance client-side for authentication and realtime subscriptions. It is important, when using Supabase client-side, to have a single instance of a client. We can share this singleton instance across our components using providers and React context.
+All Client Components need to share a single instance of the Supabase client. We can wrap our application in a `` and use React Context to create a global Supabase instance.
-Create a new file at `/utils/supabase-browser.js` and populate with the following:
+Create a new file at `/app/supabase-provider.jsx` and populate with the following:
-```js title="/utils/supabase-browser.js"
-import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
-export const createClient = () => createBrowserSupabaseClient()
-```
-
-
-
-
-
-Create a new file at `/utils/supabase-browser.ts` and populate with the following:
-
-```ts
-import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
-import { Database } from '../lib/database.types'
-
-export const createClient = () => createBrowserSupabaseClient()
-```
-
-> TypeScript types can be [generated with the Supabase CLI](https://supabase.com/docs/reference/javascript/typescript-support) and passed to `createBrowserSupabaseClient` to add type support to the Supabase client.
-
-
-
-
-
-
-
-Next, we need to create a single instance of Supabase to use client-side. Let's create a new Provider for Supabase at `/components/supabase-provider.jsx` and populate with the following:
-
-```jsx title=components/supabase-provider.jsx
+```jsx title="app/supabase-provider.jsx"
'use client'
-import { createContext, useContext, useState } from 'react'
-import { createClient } from '../utils/supabase-browser'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { useRouter } from 'next/navigation'
-const Context = createContext()
+const Context = createContext(undefined)
export default function SupabaseProvider({ children }) {
- const [supabase] = useState(() => createClient())
+ const [supabase] = useState(() => createBrowserSupabaseClient())
+ const router = useRouter()
useEffect(() => {
- const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
- if (session?.access_token !== accessToken) {
- router.refresh()
- }
+ const {
+ data: { subscription },
+ } = supabase.auth.onAuthStateChange(() => {
+ router.refresh()
})
- return () => subscription.unsubscribe()
- }, [accessToken])
-
- return (
-
- <>{children}
-
- )
-}
-
-export const useSupabase = () => useContext(Context)
-```
-
-
-
-
-
-Next, we need to create a single instance of Supabase to use client-side. Let's create a new Provider for Supabase at `/components/supabase-provider.tsx` and populate with the following:
-
-```tsx title=components/supabase-provider.tsx
-'use client'
-
-import { createContext, useContext, useState } from 'react'
-import { createClient } from '../utils/supabase-browser'
-
-import type { SupabaseClient } from '@supabase/auth-helpers-nextjs'
-import type { Database } from '../lib/database.types'
-
-type SupabaseContext = {
- supabase: SupabaseClient
-}
-
-const Context = createContext(undefined)
-
-export default function SupabaseProvider({ children }: { children: React.ReactNode }) {
- const [supabase] = useState(() => createClient())
+ return () => {
+ subscription.unsubscribe()
+ }
+ }, [router, supabase])
return (
@@ -306,12 +162,69 @@ export default function SupabaseProvider({ children }: { children: React.ReactNo
}
export const useSupabase = () => {
- let context = useContext(Context);
+ const context = useContext(Context)
+
if (context === undefined) {
- throw new Error("useSupabase must be used inside SupabaseProvider");
- } else {
- return context;
+ throw new Error('useSupabase must be used inside SupabaseProvider')
}
+
+ return context
+}
+```
+
+
+
+
+
+Create a new file at `/app/supabase-provider.tsx` and populate with the following:
+
+```tsx title="app/supabase-provider.tsx"
+'use client'
+
+import { createContext, useContext, useEffect, useState } from 'react'
+import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { useRouter } from 'next/navigation'
+
+import type { SupabaseClient } from '@supabase/auth-helpers-nextjs'
+import type { Database } from '@/lib/database.types'
+
+type SupabaseContext = {
+ supabase: SupabaseClient
+}
+
+const Context = createContext(undefined)
+
+export default function SupabaseProvider({ children }: { children: React.ReactNode }) {
+ const [supabase] = useState(() => createBrowserSupabaseClient())
+ const router = useRouter()
+
+ useEffect(() => {
+ const {
+ data: { subscription },
+ } = supabase.auth.onAuthStateChange(() => {
+ router.refresh()
+ })
+
+ return () => {
+ subscription.unsubscribe()
+ }
+ }, [router, supabase])
+
+ return (
+
+ <>{children}
+
+ )
+}
+
+export const useSupabase = () => {
+ const context = useContext(Context)
+
+ if (context === undefined) {
+ throw new Error('useSupabase must be used inside SupabaseProvider')
+ }
+
+ return context
}
```
@@ -320,16 +233,6 @@ export const useSupabase = () => {
-We need to set up a listener to fetch fresh data whenever our user logs in or out. For this we need to check whether our client and server sessions match. Let's start by installing the `server-only` package.
-
-```bash
-npm install server-only
-```
-
-This will ensure that any component that imports this package will be a Server Component, and excluded from the browser bundle.
-
-Next, let's modify our root layout to fetch the user's session, wrap our application in our Supabase Provider, and pass the server access token as a prop to the `` component (we will create this next).
-
-```jsx title=app/layout.jsx
-import 'server-only'
+Modify `layout.jsx` to wrap the application with the `` component:
-import SupabaseListener from '../components/supabase-listener'
-import SupabaseProvider from '../components/supabase-provider'
+```jsx title="app/layout.jsx"
import './globals.css'
-import { createClient } from '../utils/supabase-server'
+import SupabaseProvider from './supabase-provider'
-// do not cache this layout
-export const revalidate = 0
-
-export default async function RootLayout({ children }) {
- const supabase = createClient()
-
- const {
- data: { session },
- } = await supabase.auth.getSession()
+export const metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+}
+export default function RootLayout({ children }) {
return (
- {/*
- will contain the components returned by the nearest parent
- head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
- */}
-
-
-
- {children}
-
+ {children}
)
@@ -378,36 +267,22 @@ export default async function RootLayout({ children }) {
-```tsx title=app/layout.tsx
-import 'server-only'
+Modify `layout.tsx` to wrap the application with the `` component:
-import SupabaseListener from '../components/supabase-listener'
-import SupabaseProvider from '../components/supabase-provider'
+```tsx title="app/layout.tsx"
import './globals.css'
-import { createClient } from '../utils/supabase-server'
+import SupabaseProvider from './supabase-provider'
-// do not cache this layout
-export const revalidate = 0
-
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
- const supabase = createClient()
-
- const {
- data: { session },
- } = await supabase.auth.getSession()
+export const metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+}
+export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
- {/*
- will contain the components returned by the nearest parent
- head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
- */}
-
-
-
- {children}
-
+ {children}
)
@@ -417,7 +292,15 @@ export default async function RootLayout({ children }: { children: React.ReactNo
-And now create our Supabase listener component that uses the singleton Supabase instance to listen for auth changes.
+Now any of our Client Components can use the `useSupabase` hook to ensure they are using the same instance of a Supabase client.
+
+## Creating a Supabase Client
+
+### Client Components
+
+While Server Components are great for data fetching, we still need to use Supabase client-side for [authentication](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/login.tsx) and [realtime subscriptions](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/realtime-posts.tsx).
+
+As mentioned above, it is important that all Client Components share a single instance of the Supabase client. We can use the `useSupabase` hook we created above to ensure this is the case.
-```jsx title="/components/supabase-listener.jsx"
+```jsx title="app/new-post.jsx"
'use client'
-import { useRouter } from 'next/navigation'
-import { useEffect } from 'react'
+import { useState } from 'react'
import { useSupabase } from './supabase-provider'
-export default function SupabaseListener({ serverAccessToken }) {
+export default function NewPost() {
+ const [content, setContent] = useState('')
const { supabase } = useSupabase()
- const router = useRouter()
- useEffect(() => {
- const {
- data: { subscription },
- } = supabase.auth.onAuthStateChange((event, session) => {
- if (session?.access_token !== serverAccessToken) {
- router.refresh()
- }
- })
-
- return () => {
- subscription.unsubscribe()
- }
- }, [serverAccessToken, router, supabase])
-
- return null
-}
-```
-
-
-
-
-
-```tsx title="/components/supabase-listener.tsx"
-'use client'
-
-import { useRouter } from 'next/navigation'
-import { useEffect } from 'react'
-import { useSupabase } from './supabase-provider'
-
-export default function SupabaseListener({ serverAccessToken }: { serverAccessToken?: string }) {
- const { supabase } = useSupabase()
- const router = useRouter()
-
- useEffect(() => {
- const {
- data: { subscription },
- } = supabase.auth.onAuthStateChange((event, session) => {
- if (session?.access_token !== serverAccessToken) {
- router.refresh()
- }
- })
-
- return () => {
- subscription.unsubscribe()
- }
- }, [serverAccessToken, router, supabase])
-
- return null
-}
-```
-
-
-
-
-> `use client` tells Next.js that this is a [Client Component](https://beta.nextjs.org/docs/rendering/server-and-client-components#client-components). Only Client Components can use hooks like `useEffect` and `useRouter`.
-
-The function we pass to `onAuthStateChange` is automatically called by Supabase whenever a user's session changes. This component takes an `serverAccessToken` prop, which is the server's state for our user. If the `serverAccessToken` and the new session's `access_token` do not match then the client and server are out of sync, therefore, we want to reload the active route.
-
-Now we can use our `useSupabase` hook throughout our client-side components.
-
-### Authentication
-
-
-
-
-```jsx title="/components/login.jsx"
-'use client'
-
-import { useSupabase } from './supabase-provider'
-
-// Supabase auth needs to be triggered client-side
-export default function Login() {
- const { supabase, session } = useSupabase()
-
- const handleEmailLogin = async () => {
- await supabase.auth.signInWithPassword({
- email: 'jon@supabase.com',
- password: 'password',
- })
- }
-
- const handleGitHubLogin = async () => {
- await supabase.auth.signInWithOAuth({
- provider: 'github',
- })
- }
-
- const handleLogout = async () => {
- await supabase.auth.signOut()
+ const handleSave = async () => {
+ const { data } = await supabase.from('posts').insert({ content }).select()
}
return (
<>
-
-
-
+ setContent(e.target.value)} value={content} />
+
)
}
@@ -548,37 +337,24 @@ export default function Login() {
-```tsx title="/components/login.tsx"
+```jsx title="app/new-post.tsx"
'use client'
+import { useState } from 'react'
import { useSupabase } from './supabase-provider'
-// Supabase auth needs to be triggered client-side
-export default function Login() {
- const { supabase, session } = useSupabase()
+export default function NewPost() {
+ const [content, setContent] = useState('')
+ const { supabase } = useSupabase()
- const handleEmailLogin = async () => {
- await supabase.auth.signInWithPassword({
- email: 'jon@supabase.com',
- password: 'password',
- })
- }
-
- const handleGitHubLogin = async () => {
- await supabase.auth.signInWithOAuth({
- provider: 'github',
- })
- }
-
- const handleLogout = async () => {
- await supabase.auth.signOut()
+ const handleSave = async () => {
+ const { data } = await supabase.from('posts').insert({ content }).select()
}
return (
<>
-
-
-
+ setContent(e.target.value)} value={content} />
+
)
}
@@ -587,11 +363,11 @@ export default function Login() {
-### Realtime
+> check out [this example](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/supabase-provider.tsx) for making the user's session available to all Client Components.
-A nice pattern for fetching data server-side and subscribing to changes client-side can be done by combining Server and Client components.
+### Server Components
-> To receive realtime events, you must [enable replication on your "posts" table in Supabase](https://app.supabase.com/project/_/database/replication).
+In order to use Supabase in Server Components, you need to have implemented the `middleware.ts` steps above 👆
-Create a new file at `/app/realtime/posts.jsx` and populate with the following:
-
-```jsx title="/app/realtime/posts.jsx"
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useSupabase } from '../../components/supabase-provider'
-
-export default function Posts({ serverPosts }) {
- const [posts, setPosts] = useState(serverPosts)
- const { supabase } = useSupabase()
-
- useEffect(() => {
- setPosts(serverPosts)
- }, [serverPosts])
-
- useEffect(() => {
- const channel = supabase
- .channel('*')
- .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'posts' }, (payload) =>
- setPosts((posts) => [...posts, payload.new])
- )
- .subscribe()
-
- return () => {
- supabase.removeChannel(channel)
- }
- }, [supabase, setPosts, posts])
-
- return
{JSON.stringify(posts, null, 2)}
-}
-```
-
-This can now be used in a Server Component to subscribe to realtime updates.
-
-Create a new file at `/app/realtime/page.jsx` and populate with the following:
-
-```jsx title="/app/realtime/page.jsx"
-import 'server-only'
-
-import { createClient } from '../../utils/supabase-server'
-import Posts from './posts'
+```jsx title="app/page.jsx"
+import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { headers, cookies } from 'next/headers'
// do not cache this page
export const revalidate = 0
-export default async function Realtime() {
- const supabase = createClient()
+export default async function ServerComponent() {
+ const supabase = createServerComponentSupabaseClient({
+ headers,
+ cookies,
+ })
const { data } = await supabase.from('posts').select('*')
- return
+ return
{JSON.stringify(data, null, 2)}
}
```
@@ -659,69 +399,91 @@ export default async function Realtime() {
-Create a new file at `/app/realtime/posts.tsx` and populate with the following:
+```tsx title="app/page.tsx"
+import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { headers, cookies } from 'next/headers'
-```tsx title="/app/realtime/posts.tsx"
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useSupabase } from '../../components/supabase-provider'
-
-import type { Database } from '../../lib/database.types'
-
-type Post = Database['public']['Tables']['posts']['Row']
-
-export default function Posts({ serverPosts }: { serverPosts: Post[] }) {
- const [posts, setPosts] = useState(serverPosts)
- const { supabase } = useSupabase()
-
- useEffect(() => {
- setPosts(serverPosts)
- }, [serverPosts])
-
- useEffect(() => {
- const channel = supabase
- .channel('*')
- .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'posts' }, (payload) =>
- setPosts((posts) => [...posts, payload.new as Post])
- )
- .subscribe()
-
- return () => {
- supabase.removeChannel(channel)
- }
- }, [supabase, setPosts, posts])
-
- return
{JSON.stringify(posts, null, 2)}
-}
-```
-
-> TypeScript types can be [generated with the Supabase CLI](https://supabase.com/docs/reference/javascript/typescript-support) and passed to `createServerSupabaseClient` to add type support to the Supabase client.
-
-This can now be used in a Server Component to subscribe to realtime updates.
-
-Create a new file at `/app/realtime/page.tsx` and populate with the following:
-
-```tsx title="/app/realtime/page.tsx"
-import 'server-only'
-
-import { createClient } from '../../utils/supabase-server'
-import Posts from './posts'
+import type { Database } from '@/lib/database.types'
// do not cache this page
export const revalidate = 0
-export default async function Realtime() {
- const supabase = createClient()
+export default async function ServerComponent() {
+ const supabase = createServerComponentSupabaseClient({
+ headers,
+ cookies,
+ })
const { data } = await supabase.from('posts').select('*')
- return
+ return
{JSON.stringify(data, null, 2)}
}
```
+> check out [this example](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/page.tsx) for redirecting unauthenticated users - protected pages.
+
+### Route Handlers
+
+In order to use Supabase in Route Handlers, you need to have implemented the `middleware.ts` steps above 👆
+
+
+
+
+```jsx title="app/api/posts/route.jsx"
+import { createRouteHandlerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { headers, cookies } from 'next/headers'
+
+// do not cache this page
+export const revalidate = 0
+
+export async function GET() {
+ const supabase = createRouteHandlerSupabaseClient({
+ headers,
+ cookies,
+ })
+ const { data } = await supabase.from('posts').select('*')
+ return NextResponse.json(data)
+}
+```
+
+
+
+
+
+```tsx title="app/api/posts/route.tsx"
+import { createRouteHandlerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { headers, cookies } from 'next/headers'
+
+import type { Database } from '@/lib/database.types'
+
+// do not cache this page
+export const revalidate = 0
+
+export async function GET() {
+ const supabase = createRouteHandlerSupabaseClient({
+ headers,
+ cookies,
+ })
+ const { data } = await supabase.from('posts').select('*')
+
+ return NextResponse.json(data)
+}
+```
+
+
+
+
+> Check out [this repo](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) for a full example including [authentication](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/login.tsx), [realtime](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/realtime-posts.tsx) and [protected pages](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/page.tsx).
+
export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index 4d450f7d48b..231edb486ca 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -4,7 +4,7 @@ export const meta = {
id: 'nextjs',
title: 'Supabase Auth with Next.js',
description: 'Authentication helpers for Next.js API routes, middleware, and SSR.',
- sidebar_label: 'Next.js',
+ sidebar_label: 'Next.js (pages)',
}
This submodule provides convenience helpers for implementing user authentication in Next.js applications.
diff --git a/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx b/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
index f4d71380697..424ed29ee0a 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
@@ -86,7 +86,7 @@ import type { LayoutServerLoad } from './$types';
export const load: LayoutServerLoad = async ({ locals: { getSession } }) => {
return {
- session: getSession()
+ session: await getSession()
};
};
```
@@ -142,13 +142,15 @@ We need to create an event listener in the root `+layout.svelte` file in order c
export let data: LayoutData;
- $: ({ supabase } = data);
+ $: ({ supabase, session } = data);
onMount(() => {
const {
data: { subscription },
- } = supabase.auth.onAuthStateChange(() => {
- invalidate('supabase:auth');
+ } = supabase.auth.onAuthStateChange((event, _session) => {
+ if (_session?.expires_at !== session?.expires_at) {
+ invalidate('supabase:auth');
+ }
});
return () => subscription.unsubscribe();
@@ -185,26 +187,6 @@ declare global {
}
```
-### Basic Setup
-
-You can now determine if a user is authenticated on the client-side by checking that the `session` object in `$page.data` is defined.
-
-```html
-
-
-
-{#if !session}
-
I am not logged in
-{:else}
-
Welcome {session.user.email}
-
I am logged in!
-{/if}
-```
-
## Client-side data fetching with RLS
For [row level security](https://supabase.com/docs/guides/auth/row-level-security) to work properly when fetching data client-side, you need to use `supabaseClient` from `PageData` and only run your query once the session is defined client-side:
@@ -217,8 +199,8 @@ For [row level security](https://supabase.com/docs/guides/auth/row-level-securit
let loadedData = [];
async function loadData() {
- const { data } = await data.supabase.from('test').select('*').limit(20);
- loadedData = data;
+ const { data: result } = await data.supabase.from('test').select('*').limit(20);
+ loadedData = result;
}
$: if (data.session) {
@@ -385,7 +367,6 @@ protect multiple routes at once.
```ts
// src/hooks.server.ts
import type { RequestHandler } from './$types';
-import { getSupabase } from '@supabase/auth-helpers-sveltekit';
import { redirect, error } from '@sveltejs/kit';
export const handle: Handle = async ({ event, resolve }) => {
@@ -562,13 +543,15 @@ export const load: LayoutLoad = async ({ fetch, data, depends }) => {
export let data: LayoutData;
- $: ({ supabase } = data);
+ $: ({ supabase, session } = data);
onMount(() => {
const {
data: { subscription },
- } = supabase.auth.onAuthStateChange(() => {
- invalidate('supabase:auth');
+ } = supabase.auth.onAuthStateChange((event, _session) => {
+ if (_session?.expires_at !== session?.expires_at) {
+ invalidate('supabase:auth')
+ }
});
return () => subscription.unsubscribe();
diff --git a/apps/docs/pages/guides/auth/enterprise-sso.mdx b/apps/docs/pages/guides/auth/enterprise-sso.mdx
index fbfb7b73915..5ca0dffcd0c 100644
--- a/apps/docs/pages/guides/auth/enterprise-sso.mdx
+++ b/apps/docs/pages/guides/auth/enterprise-sso.mdx
@@ -1,13 +1,11 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- title: 'Enterprise SSO',
+ title: 'Enterprise Single Sign-On',
description: 'Learn about Single Sign-On support in Supabase Auth for enterprise applications',
}
-Supabase Auth supports building enterprise applications that require Single Sign-On (SSO) authentication. At this time only [SSO with SAML 2.0](/guides/auth/sso/auth-sso-saml) is supported in an early beta.
-
-If you are interested in using SAML 2.0 SSO with your Supabase project, please [open a new support ticket](https://app.supabase.com/support/new).
+Supabase Auth supports building enterprise applications that require Single Sign-On (SSO) authentication [with SAML 2.0](/docs/guides/auth/sso/auth-sso-saml).
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
index be9da960411..11bca2d9bac 100644
--- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx
+++ b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
@@ -1,5 +1,4 @@
import Layout from '~/layouts/DefaultGuideLayout'
-
export const meta = {
id: 'auth-twilio',
title: 'Phone Auth with Twilio',
@@ -295,6 +294,56 @@ and the response should also be the same as above:
The user does not have a password therefore will need to sign in via this method each time they want to access your service.
+## WhatsApp OTP Logins
+
+In some cases, you may wish to use WhatsApp as a delivery channel instead. Here are some examples our users have cited:
+
+- You want higher deliverability
+- You wish for a secure channel
+- Your users mostly use WhatsApp as a messaging platform
+
+To make use of WhatsApp OTP, please complete the following steps:
+
+- Go through the [Twilio self sign up guide for WhatsApp](https://www.twilio.com/docs/whatsapp/self-sign-up)
+- Submit a template via the [Twilio Guide For Submitting WhatsApp templates](https://www.twilio.com/docs/whatsapp/tutorial/send-whatsapp-notification-messages-templates#creating-message-templates-and-submitting-them-for-approval)
+
+
+The message template submitted to Twilio must exactly match the SMS Body entered on the Supabase dashboard.
+
+
+The sign in process with WhatsApp is similar to the sign in process for SMS. Do note the additional `whatsapp` parameter added:
+
+```js
+const {data, error } = await supabase.auth.signInWithOtp({
+ phone: '+57336567365',
+ options: {
+ channel:'whatsapp'
+ }
+ })
+```
+
+You can also sign up with `whatsapp` as a channel:
+
+```js
+const {data, error }= await supabase.auth.signUp({
+ phone: '+57336567365',
+ password: 'testsupabasenow',
+ options: {
+ channel:'whatsapp',
+ }
+})
+```
+
+There is no change in the verification process, you should continue to use the `sms` type for verification
+```js
+// After receiving a WhatsApp OTP
+let { data, error } = await supabase.auth.verifyOtp({
+ phone: '+57336567365',
+ token: '123456',
+ type: 'sms',
+})
+```
+
## Resources
- [Twilio Signup](https://www.twilio.com/try-twilio)
diff --git a/apps/docs/pages/guides/auth/quickstarts/react.mdx b/apps/docs/pages/guides/auth/quickstarts/react.mdx
new file mode 100644
index 00000000000..c2ae0efb7fb
--- /dev/null
+++ b/apps/docs/pages/guides/auth/quickstarts/react.mdx
@@ -0,0 +1,137 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import StepHikeCompact from '~/components/StepHikeCompact'
+
+export const meta = {
+ title: 'Use Supabase Auth with React',
+ subtitle: 'Learn how to Supabase Auth with React.js.',
+ breadcrumb: 'Auth Quickstarts',
+}
+
+
+
+
+
+
+ [Launch a new project](https://app.supabase.com) in the Supabase Dashboard.
+
+ Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://app.supabase.com/project/_/sql).
+
+
+
+
+
+ ```sql SQL_EDITOR
+ select * from auth.users;
+ ````
+
+
+
+
+
+
+
+
+
+ Create a React app using the `create-react-app` command.
+
+
+
+
+
+ ```bash Terminal
+ npx create-react-app my-app
+ ```
+
+
+
+
+
+
+
+
+ The fastest way to get started is to use Supabase's `auth-ui-react` library which provides a convenient interface for working with Supabase Auth from a React app.
+
+ Navigate to the React app and install the Supabase libraries.
+
+
+
+
+
+ ```bash Terminal
+ cd my-app && npm install @supabase/supabase-js @supabase/auth-ui-react
+ ```
+
+
+
+
+
+
+
+
+ In `index.js`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
+
+ You can configure the Auth component to display whenever there is no session inside `supabase.auth.getSession()`
+
+
+
+
+
+ ```js src/index.js
+ import './index.css'
+ import { useState, useEffect } from 'react'
+ import { createClient } from '@supabase/supabase-js'
+ import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+
+ const supabase = createClient('https://.supabase.co', '')
+
+ export default function App() {
+ const [session, setSession] = useState(null)
+
+ useEffect(() => {
+ supabase.auth.getSession().then(({ data: { session } }) => {
+ setSession(session)
+ })
+
+ const {
+ data: { subscription },
+ } = supabase.auth.onAuthStateChange((_event, session) => {
+ setSession(session)
+ })
+
+ return () => subscription.unsubscribe()
+ }, [])
+
+ if (!session) {
+ return ()
+ }
+ else {
+ return (
Logged in!
)
+ }
+ }
+ ```
+
+
+
+
+
+
+
+
+ Start the app, go to http://localhost:3000 in a browser, and open the browser console and you should be able to log in.
+
+
+
+
+
+ ```bash Terminal
+ npm start
+ ```
+
+
+
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/auth/server-side-rendering.mdx b/apps/docs/pages/guides/auth/server-side-rendering.mdx
index 346984a63fb..7b7edb00924 100644
--- a/apps/docs/pages/guides/auth/server-side-rendering.mdx
+++ b/apps/docs/pages/guides/auth/server-side-rendering.mdx
@@ -1,4 +1,5 @@
import Layout from '~/layouts/DefaultGuideLayout'
+import { Accordion } from 'ui'
export const meta = {
id: 'server-side-rendering',
@@ -55,8 +56,25 @@ like `*` and `**` to allow redirects to different forms of URLs.
-These redirect URLs have the following structure:
+Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The **PKCE** flow is generally preferred when on the server.
+It introduces a few additional steps which guard a against replay and URL capture attacks. Unlike the implicit flow, it also allows users to access the
+`access_token` and `refresh_token` on the server.
+
+
+ Implicit}
+ id={`ssr-implicit-flow`}
+ >
+
+When using the implicit flow, a redirect URL will be returned with the following structure:
```
https://yourapp.com/...#access_token=<...>&refresh_token=<...>&...
```
@@ -77,9 +95,76 @@ your direct control (such as on GitHub Pages or other freemium hosting
providers), we want to prevent hosting services from getting access to your
user's authorization credentials by default. Even if the server is under your
direct control, `GET` requests and their full URLs are often logged. This
-approach also avoids leaking credentials in request or access logs.
-
+approach also avoids leaking credentials in request or access logs. If you wish to obtain the
+`access_token` and `refresh_token` on a server, please consider using the PKCE flow.
+
+
+
+ PKCE}
+ id={`ssr-pkce-flow`}
+ >
+ When using the PKCE flow, a redirect URL will be returned with the following structure:
+ ```
+ https://yourapp.com/...?code=<...>
+ ```
+ The `code` parameter is commonly known as the Auth Code and can be exchanged for an access token by calling `exchangeCodeForSession(code)`.
+
+ For security purposes, the code has a validity of 5 minutes and can only be exchanged for an access token once. You
+ will need to restart the authentication flow from scratch if you wish to obtain a new access token.
+
+
+ As the flow is run server side, `localStorage` may not be available. You may configure the client library to use a custom storage adapter an alternate backing storage such as cookies
+ by setting the `storage` option to an object with the following methods:
+ ```js
+ const customStorageAdapter: SupportedStorage = {
+ getItem: (key) => {
+ if (!supportsLocalStorage()) {
+ // Configure alternate storage
+ return null
+ }
+ return globalThis.localStorage.getItem(key)
+ },
+ setItem: (key, value) => {
+ if (!supportsLocalStorage()) {
+ // Configure alternate storage here
+ return
+ }
+ globalThis.localStorage.setItem(key, value)
+ },
+ removeItem: (key) => {
+ if (!supportsLocalStorage()) {
+ // Configure alternate storage here
+ return
+ }
+ globalThis.localStorage.removeItem(key)
+ },
+ }
+ ```
+ You may also configure the client library to automatically exchange it for a session after a successful redirect. This can be done by setting the `detectSessionInUrl` option to `true`.
+
+ Putting it all together, your client library initialization may look like this:
+ ```js
+ const supabase = createClient(
+ 'https://xyzcompany.supabase.co',
+ 'public-anon-key',
+ options: {
+ ...
+ auth: {
+ ...
+ detectSessionInUrl: true,
+ flowType: 'pkce',
+ storage: customStorageAdapter,
+ }
+ ...
+ }
+ )
+ ```
+ You can read more about the PKCE flow [here](https://oauth.net/2/pkce/)
+
+
+
## Bringing it together
@@ -130,6 +215,9 @@ if (refreshToken && accessToken) {
await supabase.auth.setSession({
refresh_token: refreshToken,
access_token: accessToken,
+ {
+ auth: { persistSession: false },
+ }
})
} else {
// make sure you handle this case!
@@ -217,3 +305,4 @@ cache keys every hour or less.
export const Page = ({ children }) =>
export default Page
+
diff --git a/apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx b/apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx
index 4ef6f345206..1923b2ed243 100644
--- a/apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx
+++ b/apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx
@@ -2,28 +2,37 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'auth-sso-saml',
- title: 'Single Sign-On with SAML 2.0',
- description: 'Use Single Sign-On (SSO) authentication with SAML 2.0',
+ title: 'Single Sign-On with SAML 2.0 for Projects',
+ description: 'Use Single Sign-On (SSO) authentication on your project with SAML 2.0',
video: 'https://www.youtube.com/v/em1cpOAXknM',
}
-Supabase Auth supports enterprise-level Single Sign-On (SSO) for any identity providers compatible with the using the SAML 2.0 protocol.
+Supabase Auth supports enterprise-level Single Sign-On (SSO) for any identity providers compatible with the using the SAML 2.0 protocol. This is a non-exclusive list of supported identity providers:
-
-This is an early beta release of these APIs. CLI and Dashboard support for SSO is under development.
+- Google Workspaces (formerly known as GSuite)
+- Okta, Auth0
+- Microsoft Active Directory, Azure Active Directory, Microsoft Entra
+- PingIdentity
+- OneLogin
-If you are comfortable using these APIs and would like to try out SSO with SAML 2.0 for your project, please [open a support ticket](https://app.supabase.com/support/new).
+If you're having issues with identity provider software not on this list, please [open a support ticket](https://app.supabase.com/support/new).
-These APIs are not expected to change before the feature is generally available, but we do reserve the right to modify them. Projects in the Beta will be notified of any changes.
+## Prerequisites
-
+This guide requires the use of the [Supabase CLI](/docs/guides/cli). Please make sure you're using version v1.46.4 or higher. You can use `supabase -v` to see the currently installed version.
+
+You can use the `supabase sso` [subcommands](/docs/reference/cli/supabase-sso) to manage your project's configuration.
+
+SAML 2.0 support is disabled by default on Supabase projects. You can configure this on the [Auth Providers](https://app.supabase.com/project/_/auth/providers) page on your project.
+
+Please note that SAML 2.0 support is offered on tiers Pro and above. Check the [Pricing](https://supabase.com/pricing) page for more information.
## Terminology
-The number of SAML and SSO acronyms can often overwhelming. Here's a glossary which you can refer back to at any time:
+The number of SAML and SSO acronyms can often be overwhelming. Here's a glossary which you can refer back to at any time:
- **Identity Provider**, **IdP**, or **IDP**
- This is software that manages user accounts at a company or organization. It can verify the identity of a user and exchange that information with your Supabase project. Commonly used identity providers are: Microsoft Active Directory (Azure AD, Microsoft Entra), Okta, Google Workspaces (GSuite), PingIdentity, OneLogin, and many others.
+ An identity provider is a service that manages user accounts at a company or organization. It can verify the identity of a user and exchange that information with your Supabase project and other applications. It acts as a single source of truth for user identities and access rights. Commonly used identity providers are: Microsoft Active Directory (Azure AD, Microsoft Entra), Okta, Google Workspaces (GSuite), PingIdentity, OneLogin, and many others. There are also self-hosted and on-prem versions of identity providers, and sometimes they are accessible only by having access to a company VPN or being in a specific building.
- **Service Provider**, **SP**
This is the software that is asking for user information from an identity provider. In Supabase, this is your project's Auth server.
- **Assertion**
@@ -47,17 +56,20 @@ The number of SAML and SSO acronyms can often overwhelming. Here's a glossary wh
Below is information about your project's SAML 2.0 configuration which you can share with the company or organization that you're trying to on-board.
-| Name | Value |
-| ------------ | --------------------------------------------------------- |
-| EntityID | `https://.supabase.co/auth/v1/sso/saml/metadata` |
-| Metadata URL | `https://.supabase.co/auth/v1/sso/saml/metadata` |
-| ACS URL | `https://.supabase.co/auth/v1/sso/saml/acs` |
-| SLO URL | `https://.supabase.co/auth/v1/sso/slo` |
-| NameID | Required `emailAddress` or `persistent` |
+| Name | Value |
+| --------------------------- | ----------------------------------------------------------------------- |
+| EntityID | `https://.supabase.co/auth/v1/sso/saml/metadata` |
+| Metadata URL | `https://.supabase.co/auth/v1/sso/saml/metadata` |
+| Metadata URL (download) | `https://.supabase.co/auth/v1/sso/saml/metadata?download=true` |
+| ACS URL | `https://.supabase.co/auth/v1/sso/saml/acs` |
+| SLO URL | `https://.supabase.co/auth/v1/sso/slo` |
+| NameID | Required `emailAddress` or `persistent` |
Note that SLO (Single Logout) is not supported at this time with Supabase Auth as it is a rarely supported feature by identity providers. However, the URL is registered and advertised for when this does become available.
-Append `?download=true` to the Metadata URL to get a downloadable Metadata XML file.
+Append `?download=true` to the Metadata URL to download the Metadata XML file. This is useful in cases where the identity provider requires a file.
+
+Alternatively, you can use the `supabase sso info --project-ref ` [command](/docs/reference/cli/supabase-sso-info) to get setup information for your project.
### User accounts and identities
@@ -119,18 +131,7 @@ CREATE POLICY "View organization settings."
## Managing SAML 2.0 connections
-### Prerequisites
-
-SSO support with SAML 2.0 is in an early beta release. This guide uses the following software which you need to install on your machine to configure your project:
-
-- [**cURL**](https://curl.se)
- It is typically pre-installed in macOS and GNU/Linux distributions.
-- [**jq**](https://stedolan.github.io/jq/)
- You can install it with `brew install jq` on macOS or using your distribution's package manager.
-
-You would need access to two keys -- the `anon` and `service_role` key. You can obtain these on the [Project API Keys](https://app.supabase.com/project/_/settings/api) page in the dashboard.
-
-We publish an [OpenAPI specification](https://github.com/supabase/gotrue/blob/master/openapi.yaml) which you can refer to at any time.
+Once you've enabled SAML 2.0 support on your project via the [Auth Providers](https://app.supabase.com/project/_/auth/providers) page in the dashboard, you can use the [Supabase CLI](/docs/reference/cli/supabase-sso) to add, update, remove and view information about identity providers.
### Add a connection
@@ -151,40 +152,34 @@ Commonly used SAML 2.0 Identity Providers that support Metadata URLs:
Commonly used SAML 2.0 Identity Providers that only support Metadata XML files:
- Google Workspaces (GSuite)
+- Any self-hosted or on-prem identity provider behind a VPN
-Once you've obtained the SAML 2.0 Metadata XML file or URL you can establish a connection with your project's Supabase Auth server by invoking this API:
+Once you've obtained the SAML 2.0 Metadata XML file or URL you can [establish a connection](/docs/reference/cli/supabase-sso-add) with your project's Supabase Auth server by running:
```bash
-curl -X POST \
- -H 'Content-Type: application/json' \
- -H 'apikey: ' \
- -H 'Authorization: Bearer ' \
- --data-binary '@/tmp/body.json' \
- 'https://.supabase.co/auth/v1/admin/sso/providers'
-```
-
-To create the `/tmp/body.json` file you can use this:
-
-```bash
-jq --null-input \
- --arg metadata_url "https://..." \
- '{ "type": "saml", "metadata_url": $metadata_url, "domains": ["company.com"] }' \
- > /tmp/body.json
+supabase sso add --type saml --project-ref \
+ --metadata-url 'https://company.com/idp/saml/metadata' \
+ --domains company.com
```
If you wish to use a Metadata XML file instead, you can use:
```bash
-jq --null-input \
- -M \
- --rawfile metadata_file /path/to/metadata.xml \
- '{ "type": "saml", "metadata_xml": $metadata_file, "domains": ["company.com"] }' \
- > /tmp/body.json
+supabase sso add --type saml --project-ref \
+ --metadata-file /path/to/saml/metadata.xml \
+ --domains company.com
```
-Once you've executed the cURL command with the correct body, you should see details about the registered SAML 2.0 Identity Provider.
+This command will register a new identity provider with your project's Auth server. When successful, you will see the details of the provider such as it's SAML information and registered domains.
-To initiate a sign-in request from your front-end application you can use:
+Please note that only persons with write access to the project can register, update or remove identity providers.
+
+Once you've added an identity provider, users who have access to it can sign in to your application. With SAML 2.0 there are two ways that users can sign in to your project:
+
+- By signing-in from your application's user interface, commonly known as **SP (Service Provider) Initiated Flow**
+- By clicking on an icon in the application menu on the company intranet or identity provider page, commonly known as **Identity Provider Initiated (IdP) Flow**
+
+To initiate a sign-in request from your application's user interface (i.e. the SP Initiated Flow), you can use:
```typescript
supabase.auth.signInWithSSO({
@@ -192,11 +187,11 @@ supabase.auth.signInWithSSO({
})
```
-Which will start the sign-in process using the SSO Identity Provider registered for the `company.com` domain name. If the SSO Identity Provider does not have an associated domain name, you can use `providerId` instead.
+Calling [`signInWithSSO`](/docs/reference/javascript/auth-signinwithsso) starts the sign-in process using the identity provider registered for the `company.com` domain name. It is not required that identity providers be assigned one or multiple domain names, in which case you can use the provider's unique ID instead.
### Understanding attribute mappings
-When a user signs in using the SAML 2.0 Single Sign-On protocol, an XML document called the SAML Assertion is exchanged between the Identity Provider and Supabase Auth.
+When a user signs in using the SAML 2.0 Single Sign-On protocol, an XML document called the SAML Assertion is exchanged between the identity provider and Supabase Auth.
This assertion contains information about the user's identity and other authentication information, such as:
@@ -206,9 +201,9 @@ This assertion contains information about the user's identity and other authenti
- Department or organization
- Other attributes present in the users directory managed by the identity provider
-Other than the unique ID of the user, SAML does not make it mandatory that any other attributes appear in the assertion. Identity Providers are configured about what user information is shared with your project.
+With exception of the unique user ID, SAML does not require any other attributes in the assertion. Identity providers can be configured so that only select user information is shared with your project.
-Your project can be configured to recognize these attributes and map them into your project's database using a JSON structure. This process is called attribute mapping, and varies according to the configuration of the Identity Provider.
+Your project can be configured to recognize these attributes and map them into your project's database using a JSON structure. This process is called attribute mapping, and varies according to the configuration of the identity provider.
For example, the following JSON structure configures attribute mapping for the `email` and `first_name` user identity properties.
@@ -225,7 +220,14 @@ For example, the following JSON structure configures attribute mapping for the `
}
```
-You can include this structure in the `POST /auth/v1/admin/sso/providers` call under the `attribute_mapping` property.
+When creating or updating an identity provider with the [Supabase CLI](/docs/guides/cli) you can include this JSON as a file with the `--attribute-mapping /path/to/attribute/mapping.json` flag.
+
+For example, to change the attribute mappings to an existing provider you can use:
+
+```bash
+supabase sso update --project-ref \
+ --attribute-mapping /path/to/attribute/mapping.json
+```
Given a SAML 2.0 assertion that includes these attributes:
@@ -268,24 +270,26 @@ Supabase Auth does not require specifying attribute mappings if you only need ac
At this time it is not possible to have users without an email address, so SAML assertions without one will be rejected.
-Most SAML 2.0 identity providers use LDAP attribute names. However, due to their variability and complexity operators of Identity Providers are able to customize both the `Name` and attribute value that is sent to Supabase Auth in an assertion. Please refer to the identity provider's documentation and contact the operator for details on what attributes are mapped for your project.
+Most SAML 2.0 identity providers use Lightweight Directory Access Protocol (LDAP) attribute names. However, due to their variability and complexity operators of identity providers are able to customize both the `Name` and attribute value that is sent to Supabase Auth in an assertion. Please refer to the identity provider's documentation and contact the operator for details on what attributes are mapped for your project.
### Remove a connection
-Once a connection to an identity provider is established, you can remove it by invoking the `DELETE` method on it:
+Once a connection to an identity provider is established, you can [remove it](/docs/reference/cli/supabase-sso-remove) by running:
```bash
-curl -X DELETE \
- -H 'Content-Type: application/json' \
- -H 'apikey: ' \
- -H 'Authorization: Bearer ' \
- 'https://.supabase.co/auth/v1/admin/sso/providers/'
+supabase sso remove --project-ref
```
-Once a connection is removed, all user accounts from that identity provider will be immediately logged out. User information will remain in the system, but it will no longer be possible for any of those accounts to be accessed in the future, even if you add the connection again.
+If successful, the details of the removed identity provider will be shown. All user accounts from that identity provider will be immediately logged out. User information will remain in the system, but it will no longer be possible for any of those accounts to be accessed in the future, even if you add the connection again.
If you need to reassign those user accounts to another identity provider, please [open a support ticket](https://app.supabase.com/support/new).
+A [list of all](/docs/reference/cli/supabase-sso-list) registered identity providers can be displayed by running:
+
+```bash
+supabase sso list --project-ref
+```
+
### Update a connection
You may wish to update settings about a connection to a SAML 2.0 identity provider.
@@ -293,23 +297,69 @@ You may wish to update settings about a connection to a SAML 2.0 identity provid
Commonly this is necessary when:
- Cryptographic keys are rotated or have expired
-- Metadata URL has changed, but is the same Identity Provider
-- Other SAML 2.0 Metadata attributes have changed, but it is still the same Identity Provider
+- Metadata URL has changed, but is the same identity provider
+- Other SAML 2.0 Metadata attributes have changed, but it is still the same identity provider
- You are updating the domains or attribute mapping
-```bash
-curl -X PUT \
- -H 'Content-Type: application/json' \
- -H 'apikey: ' \
- -H 'Authorization: Bearer ' \
- --data-binary '@/tmp/body.json' \
- 'https://.supabase.co/auth/v1/admin/sso/providers/'
+You can use this command to [update](/docs/reference/cli/supabase-sso-update) the configuration of an identity provider:
+```bash
+supabase sso update --project-ref
```
-The request body has the same structure as when you're adding a connection to an Identity Provider.
+Please use `--help` to see all available flags.
-It is not possible to change the Identity Provider's unique SAML identifier known as `EntityID`. Everything else can be updated. If the SAML `EntityID` of your identity provider has changed, it is regarded as a new identity provider and you will have to register it like a new connection.
+It is not possible to change the unique SAML identifier of the identity provider, known as `EntityID`. Everything else can be updated. If the SAML `EntityID` of your identity provider has changed, it is regarded as a new identity provider and you will have to register it like a new connection.
+
+### Retrieving information about a connection
+
+You can always obtain a [list](/docs/reference/cli/supabase-sso-list) of all registered providers using:
+
+```bash
+supabase sso list --project-ref
+```
+
+This list will only include basic information about each provider. To see [all of the information](/docs/reference/cli/supabase-sso-show) about a provider you can use:
+
+```bash
+supabase sso show --project-ref
+```
+
+You can use the `-o json` flag to output the information as JSON, should you need to. Other formats may be supported, please use `--help` to see all available options.
+
+## Frequently Asked Questions
+
+### How do I publish my application to an identity provider's marketplace?
+
+Many cloud-based identity providers offer a marketplace where you can register your application for easy on-boarding with customers. When you use Supabase Auth's SAML 2.0 support you can register your project in any one of these marketplaces.
+
+Please refer to the relevant documentation for each cloud-based identity provider on how you can do this. Some common marketplaces are:
+
+- [Okta Integration Network](https://developer.okta.com/docs/guides/build-sso-integration/saml2/main/)
+- [Azure Active Directory App Gallery](https://learn.microsoft.com/en-us/azure/active-directory-b2c/publish-app-to-azure-ad-app-gallery)
+- [Google Workspaces Pre-integrated SAML apps catalog](https://support.google.com/a/table/9217027)
+
+### Why do some users get: SAML Assertion does not contain email address?
+
+Identity providers do not have to send back and email address for the user, though they often do. Supabase Auth requires that an email address is present.
+
+The following list of commonly used SAML attribute names is inspected, in order of appearance, to discover the email address in the assertion:
+
+- `urn:oid:0.9.2342.19200300.100.1.3`
+- `http://schemas.xmlsoap.org/ws/2005/05/identity/claims/emailaddress`
+- `http://schemas.xmlsoap.org/claims/EmailAddress`
+- `mail`
+- `email`
+
+Finally if there is no such attribute, it will use the SAML `NameID` value but only if the format is advertised as `urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress`.
+
+Should you run into this problem, it is most likely a misconfiguration issue **on the identity provider side.** Please instruct your contact at the company to map the user's email address to one of the above listed attribute names, typically `email`.
+
+### How do I access the private key used for SAML in my project?
+
+At this time it is not possible to extract the RSA private key used by your project's Supabase Auth server. This is done to keep the private key as secure as possible, given that SAML does not offer an easy way to rotate keys without disrupting service. (Please use a SAML 2.0 Metadata URL whenever possible for this reason!)
+
+If you really need access to the key, please [open a support ticket](https://app.supabase.com/support/new) and we'll try to support you as best as possible.
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/cli/local-development.mdx b/apps/docs/pages/guides/cli/local-development.mdx
index 5438b2e941c..ca38587e786 100644
--- a/apps/docs/pages/guides/cli/local-development.mdx
+++ b/apps/docs/pages/guides/cli/local-development.mdx
@@ -9,7 +9,7 @@ export const meta = {
Supabase is a flexible platform that lets you decide how you want to build your projects. You can use the Dashboard directly to get up and running quickly, or use a proper local setup. We suggest you work locally and deploy your changes to a linked project on the [Supabase Platform](https://app.supabase.io/).
-Doing things directly on the platform via the [Dashboard](https://app.supabase.io/) is fine when you're getting started, but it's a good idea to move to a proper local workflow before you get too far. Working locally, generating migrations as you change your tables, and appling those migrations to a linked project on the [Platform](https://app.supabase.io/) keeps everything nicely organized as you grow.
+Doing things directly on the platform via the [Dashboard](https://app.supabase.io/) is fine when you're getting started, but it's a good idea to move to a proper local workflow before you get too far. Working locally, generating migrations as you change your tables, and applying those migrations to a linked project on the [Platform](https://app.supabase.io/) keeps everything nicely organized as you grow.
## Why develop locally?
@@ -23,7 +23,7 @@ The Dashboard provides a wide range of features for setting up your project: cre
4. **Configuration in code**: If you directly change your tables via the Dashboard, none of that gets captured in code. If you follow these local development practices, you'll store all of your table schemas in code.
-5. **Work offline**: Need to work from a train? A plain? An automobile? No problem. Developing your project locally allows you to work offline.
+5. **Work offline**: Need to work from a train? A plane? An automobile? No problem. Developing your project locally allows you to work offline.
-
-
-## GraphQL API [#graphql-api-overview]
-
-
-
-GraphQL is in Beta, and may have breaking changes. It is only available on self-hosted setups and Supabase projects created after 28th March 2022.
-
-
-
-GraphQL in Supabase works through [pg_graphql](https://supabase.com/blog/pg-graphql), an open source PostgreSQL extension for GraphQL.
-
-## Realtime API [#realtime-api-overview]
-
-Supabase provides a Realtime API using [Realtime](https://github.com/supabase/realtime). You can use this to listen to database changes over websockets.
-Realtime leverages PostgreSQL's built-in logical replication. You can manage your Realtime API simply by managing Postgres publications.
-Go to your project's [Replication section](https://app.supabase.com/project/_/database/replication) to get started.
-
-## Getting started
-
-All APIs are auto-created from Database tables. After you have added tables or functions to your database, you can use the APIs provided.
-
-### Creating API Routes
-
-API routes are automatically created when you create Postgres Tables, Views, or Functions.
-
-Let's create our first
-API route by creating a table called `todos` to store tasks.
-This creates a corresponding route `todos` which can accept `GET`, `POST`, `PATCH`, & `DELETE` requests.
-
-
-
-
-1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
-1. Click **New Table** and create a table with the name `todos`.
-1. Click **Save**.
-1. Click **New Column** and create a column with the name `task` and type `text`.
-1. Click **Save**.
-
-
-
-
-
-
-```sql
--- Create a table called "todos" with a column to store tasks.
-
-create table todos (
- id bigint generated by default as identity primary key,
- task text check (char_length(task) > 3)
-);
-
-```
-
-
-
-
-### API URL and Keys
-
-Every Supabase project has a unique API URL. Your API is secured behind an API gateway which requires an API Key for every request.
-
-1. Go to the [Settings](https://app.supabase.com/project/_/settings/general) page in the Dashboard.
-2. Click **API** in the sidebar.
-3. Find your API `URL`, `anon`, and `service_role` keys on this page.
-
-
-
-The REST API and the GraphQL API are both accessible through this URL:
-
-- REST: `https://.supabase.co/rest/v1`
-- GraphQL: `https://.supabase.co/graphql/v1`
-
-Both of these routes require the `anon` key to be passed through an `apikey` header.
-
-#### API Keys
-
-You are provided with two keys:
-
-- an `anon` key, which is safe to be used in a browser context.
-- a `service_role` key, which should only be used on a server. This key can bypass Row Level Security. NEVER use this key in a browser.
-
-### Accessing the docs in the Dashboard
-
-#### REST API [#rest-api-dashboard-docs]
-
-Supabase generates documentation in the [Dashboard](https://app.supabase.com) which updates as you make database changes.
-Let's view the documentation for a `countries` table which we created in our database.
-
-1. Go to the [API](https://app.supabase.com/project/_/api) page in the Dashboard.
-2. Find the `countries` table under **Tables and Views** in the sidebar.
-3. Switch between the JavaScript and the cURL docs using the tabs.
-
-
-
-#### GraphQL
-
-The GraphQL Endpoint that we provide (`https://.supabase.co/graphql/v1`) is compatible with any GraphiQL implementation that can pass an `apikey` header.
-Some suggested applications:
-
-- [paw.cloud](https://paw.cloud)
-- [insomnia.rest](https://insomnia.rest)
-- [postman.com/graphql](https://www.postman.com/graphql/)
-- Self-hosted GraphiQL: GraphiQL can be served through a simple HTML file. See [this discussion](https://github.com/supabase/supabase/discussions/6144) for more details.
-
-## Using the API
-
-### REST API
-
-You can interact with your API directly via HTTP requests, or you can use the client libraries which we provide.
-
-Let's see how to make a request to the `todos` table which we created in the first step,
-using the API URL (`SUPABASE_URL`) and Key (`SUPABASE_ANON_KEY`) we provided:
-
-
-
-
-```javascript
-// Initialize the JS client
-import { createClient } from '@supabase/supabase-js'
-const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
-
-// Make a request
-const { data: todos, error } = await supabase.from('todos').select('*')
-```
-
-
-
-
-```bash
-# Append /rest/v1/ to your URL, and then use the table name as the route
-curl '/rest/v1/todos' \
--H "apikey: " \
--H "Authorization: Bearer "
-```
-
-
-
-
-JS Reference: [select()](/docs/reference/javascript/select),
-[insert()](/docs/reference/javascript/insert),
-[update()](/docs/reference/javascript/update),
-[upsert()](/docs/reference/javascript/upsert),
-[delete()](/docs/reference/javascript/delete),
-[rpc()](/docs/reference/javascript/rpc) (call Postgres functions).
-
-### GraphQL API
-
-You can use any GraphQL client with the Supabase GraphQL API. For our GraphQL example we will use [urql](https://formidable.com/open-source/urql/docs/).
-
-
-
-
-```javascript
-import { createClient, useQuery } from 'urql'
-
-// Prepare API key and Authorization header
-const headers = {
- apikey: ,
- authorization: `Bearer ${}`,
-}
-
-// Create GraphQL client
-// See: https://formidable.com/open-source/urql/docs/basics/react-preact/#setting-up-the-client
-const client = createClient({
- url: '/graphql/v1',
- fetchOptions: function createFetchOptions() {
- return { headers }
- },
-})
-
-// Prepare our GraphQL query
-const TodosQuery = `
- query {
- todosCollection {
- edges {
- node {
- id
- title
- }
- }
- }
- }
-`
-
-// Query for the data (React)
-const [result, reexecuteQuery] = useQuery({
- query: TodosQuery,
-})
-
-// Read the result
-const { data, fetching, error } = result
-```
-
-
-
-
-```bash
-# Append /graphql/v1/ to your URL, and then use the table name as the route
-curl --request POST '/graphql/v1' \
--H 'apikey: ' \
--H 'Authorization: Bearer ' \
--H 'Content-Type: application/json' \
--d '{ "query":"{ todos(first: 3) { edges { node { id } } } }" }'
-```
-
-
-
-
-### Realtime API
-
-By default Realtime is disabled on your database. Let's turn on Realtime for the `todos` table.
-
-
-
-
-1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
-2. Click on **Replication** in the sidebar.
-3. Control which database events are sent by toggling **Insert**, **Update**, and **Delete**.
-4. Control which tables broadcast changes by selecting **Source** and toggling each table.
-
-
-
-
-
-
-```sql
-alter publication supabase_realtime add table todos;
-```
-
-
-
-
-From the client, we can listen to any new data that is inserted into the `todos` table:
-
-```javascript
-// Initialize the JS client
-import { createClient } from '@supabase/supabase-js'
-const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
-
-// Create a function to handle inserts
-const handleInserts = (payload) => {
- console.log('Change received!', payload)
-}
-
-// Listen to inserts
-const { data: todos, error } = await supabase.from('todos').on('INSERT', handleInserts).subscribe()
-```
-
-Use [subscribe()](/docs/reference/javascript/subscribe) to listen to database changes.
-The Realtime API works through PostgreSQL's replication functionality. Postgres sends database changes to a [publication](/docs/guides/database/replication#publications)
-called `supabase_realtime`, and by managing this publication you can control which data is broadcast.
-
-## API Security
-
-### Securing your Routes
-
-Your API is designed to work with Postgres Row Level Security (RLS). If you use Supabase [Auth](/docs/guides/auth), you can restrict data based on the logged-in user.
-To control access to your data, you can use [Policies](/docs/guides/auth#policies).
-When you create a table in Postgres, Row Level Security is disabled by default. To enable RLS:
-
-
-
-
-1. Go to the [Authentication](https://app.supabase.com/project/_/auth/users) page in the Dashboard.
-2. Click on **Policies** in the sidebar.
-3. Select **Enable RLS** to enable Row Level Security.
-
-
-
-
-```sql
-alter table todos enable row level security;
-```
-
-
-
-
-### The `service_role` key
-
-Never expose the `service_role` key in a browser or anywhere where a user can see it. This Key is designed to bypass Row Level Security - so it should only be used on a private server.
-
-A common use case for the `service_role` key is to run data analytics jobs on the backend. To support joins on user id, it is often useful to grant the service role read access to `auth.users` table.
-
-```sql
-grant select on table auth.users to service_role;
-```
-
-We have [partnered with GitHub](https://github.blog/changelog/2022-03-28-supabase-is-now-a-github-secret-scanning-partner/) to scan for Supabase `service_role` keys pushed to public repositories.
-If they detect any keys with service_role privileges being pushed to GitHub, they will forward the API key to us, so that we can automatically revoke the detected secrets and notify you, protecting your data against malicious actors.
-
-### Safeguards towards accidental deletes and updates
-
-For all projects, by default, the Postgres extension [safeupdate](https://github.com/eradman/pg-safeupdate) is enabled for all queries coming from the API.
-This ensures that any `delete()` or `update()` would fail if there are no accompanying filters provided.
-To confirm that safeupdate is enabled for queries going through the API of your project, the following query could be run:
-
-```sql
-select usename, useconfig from pg_shadow where usename = 'authenticator';
-```
-
-The expected value for `useconfig` should be:
-
-```sql
-['session_preload_libraries=supautils, safeupdate']
-```
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/database/arrays.mdx b/apps/docs/pages/guides/database/arrays.mdx
index e59be4a6d4b..45f258195e4 100644
--- a/apps/docs/pages/guides/database/arrays.mdx
+++ b/apps/docs/pages/guides/database/arrays.mdx
@@ -140,7 +140,7 @@ returns:
This returns the entire array field:
```js
-const { data, error } = await supabase.from('arraytest').select('textarray[]')
+const { data, error } = await supabase.from('arraytest').select('textarray')
console.log(JSON.stringify(data, null, 2))
```
@@ -161,7 +161,7 @@ returns:
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Supabase Account - Free Tier OK](https://supabase.com)
-- [PostgreSQL Arrays](https://www.postgresql.org/docs/12/arrays.html)
+- [PostgreSQL Arrays](https://www.postgresql.org/docs/15/arrays.html)
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/database/extensions/wrappers.mdx b/apps/docs/pages/guides/database/extensions/wrappers.mdx
index c0ba008b275..34305abd1cb 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers.mdx
+++ b/apps/docs/pages/guides/database/extensions/wrappers.mdx
@@ -62,8 +62,9 @@ A web interface for connecting to external data is coming to Supabase Studio in
- [Firebase](https://supabase.github.io/wrappers/firebase/)
- [Stripe](https://supabase.github.io/wrappers/stripe/)
+- [BigQuery](https://supabase.github.io/wrappers/bigquery/)
+- [AWS S3](https://supabase.github.io/wrappers/s3/)
- Airtable - Coming Soon
-- BigQuery - Coming Soon
- Clickhouse - Coming Soon
## Resources
diff --git a/apps/docs/pages/guides/functions.mdx b/apps/docs/pages/guides/functions.mdx
index b19ddb81872..c3b9901e49d 100644
--- a/apps/docs/pages/guides/functions.mdx
+++ b/apps/docs/pages/guides/functions.mdx
@@ -129,7 +129,7 @@ export const examples = [
{
name: 'Puppeteer',
description: `Generate screenshots with Puppeteer.`,
- href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/puppeteer',
+ href: '/guides/functions/examples/screenshots',
},
{
name: 'Discord Bot',
@@ -151,6 +151,11 @@ export const examples = [
description: `Build an Edge Functions Counter with Upstash Redis.`,
href: '/guides/functions/examples/upstash-redis',
},
+ {
+ name: 'Rate Limiting',
+ description: `Rate Limiting Egde Functions with Upstash Redis.`,
+ href: '/guides/functions/examples/rate-limiting',
+ },
]
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/functions/auth.mdx b/apps/docs/pages/guides/functions/auth.mdx
index 29ad1505034..c5bff683160 100644
--- a/apps/docs/pages/guides/functions/auth.mdx
+++ b/apps/docs/pages/guides/functions/auth.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'auth',
- title: 'Auth',
+ title: 'Integrating With Supabase Auth',
description: 'Supabase Edge Functions and Auth.',
}
diff --git a/apps/docs/pages/guides/functions/cicd-workflow.mdx b/apps/docs/pages/guides/functions/cicd-workflow.mdx
index e168c6c7642..a1836c20b53 100644
--- a/apps/docs/pages/guides/functions/cicd-workflow.mdx
+++ b/apps/docs/pages/guides/functions/cicd-workflow.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'cicd-workflow',
- title: 'CI / CD Workflow',
+ title: 'Deploying with GitHub Actions',
description: 'How to deploy Supabase Edge Functions with a CI / CD pipeline.',
video: 'https://www.youtube.com/v/6OMVWiiycLs',
}
diff --git a/apps/docs/pages/guides/functions/examples/connect-to-postgres.mdx b/apps/docs/pages/guides/functions/connect-to-postgres.mdx
similarity index 97%
rename from apps/docs/pages/guides/functions/examples/connect-to-postgres.mdx
rename to apps/docs/pages/guides/functions/connect-to-postgres.mdx
index 5fc087aa92f..461ae904c49 100644
--- a/apps/docs/pages/guides/functions/examples/connect-to-postgres.mdx
+++ b/apps/docs/pages/guides/functions/connect-to-postgres.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'examples-postgres-on-the-edge',
- title: 'Connect to Postgres',
+ title: 'Connecting directly to Postgres',
description: 'Connecting to Postgres from Edge Functions.',
video: 'https://www.youtube.com/v/cl7EuF1-RsY',
}
diff --git a/apps/docs/pages/guides/functions/cors.mdx b/apps/docs/pages/guides/functions/cors.mdx
index 7274d810b02..75525da0741 100644
--- a/apps/docs/pages/guides/functions/cors.mdx
+++ b/apps/docs/pages/guides/functions/cors.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'functions-cors',
- title: 'CORS (Cross-Origin Resource Sharing)',
+ title: 'CORS (Cross-Origin Resource Sharing) support for Invoking from the browser',
description: 'Add CORS headers to invoke Edge Functions from the browser.',
}
diff --git a/apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx b/apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx
index 7cfcc5feb19..bb6bdf7d71d 100644
--- a/apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx
+++ b/apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'examples-cloudflare-turnstile',
- title: 'Cloudflare Turnstile',
+ title: 'CAPTCHA support with Cloudflare Turnstile',
description: 'Protecting Forms with Cloudflare Turnstile.',
video: 'https://www.youtube.com/v/OwW0znboh60',
}
diff --git a/apps/docs/pages/guides/functions/examples/discord-bot.mdx b/apps/docs/pages/guides/functions/examples/discord-bot.mdx
index 4aad62ac901..e542f346ca6 100644
--- a/apps/docs/pages/guides/functions/examples/discord-bot.mdx
+++ b/apps/docs/pages/guides/functions/examples/discord-bot.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'examples-discord-bot',
- title: 'Discord Bot',
+ title: 'Building a Discord Bot',
description: 'Building a Slash Command Discord Bot with Edge Functions.',
video: 'https://www.youtube.com/v/J24Bvo_m7DM',
}
diff --git a/apps/docs/pages/guides/functions/examples/openai.mdx b/apps/docs/pages/guides/functions/examples/openai.mdx
index bc24d6a151a..236ad59354f 100644
--- a/apps/docs/pages/guides/functions/examples/openai.mdx
+++ b/apps/docs/pages/guides/functions/examples/openai.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'examples-openai',
- title: 'OpenAI',
+ title: 'Generating OpenAI GPT3 completions',
description: 'Using OpenAI in Edge Functions.',
video: 'https://www.youtube.com/v/29p8kIqyU_Y',
}
diff --git a/apps/docs/pages/guides/functions/examples/rate-limiting.mdx b/apps/docs/pages/guides/functions/examples/rate-limiting.mdx
new file mode 100644
index 00000000000..6c99592a8fc
--- /dev/null
+++ b/apps/docs/pages/guides/functions/examples/rate-limiting.mdx
@@ -0,0 +1,25 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ title: 'Rate Limiting Edge Functions',
+ description: 'Rate Limiting Edge Functions with Upstash Redis.',
+}
+
+
+
+
+
+[Redis](https://redis.io/docs/about/) is an open source (BSD licensed), in-memory data structure store used as a database, cache, message broker, and streaming engine. It is optimized for atomic operations like incrementing a value, for example for a view counter or rate limiting. We can even rate limit based on the user ID from Supabase Auth!
+
+[Upstash](https://upstash.com/) provides an HTTP/REST based Redis client which is ideal for serverless use-cases and therefore works well with Supabase Edge Functions.
+
+Find the code on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/upstash-redis-ratelimit).
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/functions/examples/screenshots.mdx b/apps/docs/pages/guides/functions/examples/screenshots.mdx
new file mode 100644
index 00000000000..6e02568e47e
--- /dev/null
+++ b/apps/docs/pages/guides/functions/examples/screenshots.mdx
@@ -0,0 +1,23 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ title: 'Taking Screenshots with Puppeteer',
+ description: 'Take screenshots in Edge Functions with Puppeteer and Browserless.io.',
+}
+
+
+
+
+
+[Puppeteer](https://pptr.dev/) is a handy tool to programmatically take screenshots and generate PDFs. However, trying to do so in Edge Functions can be challenging due to the size restrictions. Luckily there is a [serverless browser offering available](https://www.browserless.io/) that we can connect to via websockets.
+
+Find the code on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/puppeteer).
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/functions/examples/stripe-webhooks.mdx b/apps/docs/pages/guides/functions/examples/stripe-webhooks.mdx
index b71a4ca2b36..c10c46426c8 100644
--- a/apps/docs/pages/guides/functions/examples/stripe-webhooks.mdx
+++ b/apps/docs/pages/guides/functions/examples/stripe-webhooks.mdx
@@ -1,10 +1,8 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'examples-stripe-webhooks',
title: 'Handling Stripe Webhooks',
description: 'Handling signed Stripe Webhooks with Edge Functions.',
- video: 'https://www.youtube.com/v/6OMVWiiycLs',
}
diff --git a/apps/docs/pages/guides/functions/examples/telegram-bot.mdx b/apps/docs/pages/guides/functions/examples/telegram-bot.mdx
index ad87c1a7103..68254bc1b53 100644
--- a/apps/docs/pages/guides/functions/examples/telegram-bot.mdx
+++ b/apps/docs/pages/guides/functions/examples/telegram-bot.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'examples-telegram-bot',
- title: 'Telegram Bot',
+ title: 'Building a Telegram Bot',
description: 'Building a Telegram Bot with Edge Functions.',
video: 'https://www.youtube.com/v/AWfE3a9J_uo',
}
diff --git a/apps/docs/pages/guides/functions/examples/upstash-redis.mdx b/apps/docs/pages/guides/functions/examples/upstash-redis.mdx
index 77411c5b1d8..d97d1879e63 100644
--- a/apps/docs/pages/guides/functions/examples/upstash-redis.mdx
+++ b/apps/docs/pages/guides/functions/examples/upstash-redis.mdx
@@ -5,7 +5,16 @@ export const meta = {
description: 'Build an Edge Functions Counter with Upstash Redis.',
}
-A Redis counter example that stores a [hash](https://redis.io/commands/hincrby/) of function invocation count per region.
+
+
+
+
+A Redis counter example that stores a [hash](https://redis.io/commands/hincrby/) of function invocation count per region. Find the code on [GitHub](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/upstash-redis-counter).
## Redis database setup
diff --git a/apps/docs/pages/guides/functions/global-deployments.mdx b/apps/docs/pages/guides/functions/global-deployments.mdx
new file mode 100644
index 00000000000..dbd3810cb71
--- /dev/null
+++ b/apps/docs/pages/guides/functions/global-deployments.mdx
@@ -0,0 +1,49 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'functions-debugging',
+ title: 'Globally Distributed Deployments',
+ description: 'We deploy your code throughout the world, close to your users.',
+}
+
+We deploy your code throughout the world. Each new request is served from the closest region to your user. Currently located in the following regions:
+
+1. Taiwan (`asia-east1`)
+1. Hong Kong (`asia-east2`)
+1. Tokyo (`asia-northeast1`)
+1. Osaka (`asia-northeast2`)
+1. Seoul (`asia-northeast3`)
+1. Mumbai (`asia-south1`)
+1. Delhi (`asia-south2`)
+1. Singapore (`asia-southeast1`)
+1. Jakarta (`asia-southeast2`)
+1. Sydney (`australia-southeast1`)
+1. Melbourne (`australia-southeast2`)
+1. Warsaw (`europe-central2`)
+1. Finland (`europe-north1`)
+1. Belgium (`europe-west1`)
+1. London (`europe-west2`)
+1. Frankfurt (`europe-west3`)
+1. Netherlands (`europe-west4`)
+1. Zurich (`europe-west6`)
+1. Milan (`europe-west8`)
+1. Paris (`europe-west9`)
+1. Tel Aviv (`me-west1`)
+1. Madrid (`europe-southwest1`)
+1. Montréal (`northamerica-northeast1`)
+1. Toronto (`northamerica-northeast2`)
+1. São Paulo (`southamerica-east1`)
+1. Chile (`southamerica-west1`)
+1. Iowa (`us-central1`)
+1. South Carolina (`us-east1`)
+1. North Virginia (`us-east4`)
+1. Ohio (`us-east5`)
+1. Texas (`us-south1`)
+1. Oregon (`us-west1`)
+1. California (`us-west2`)
+1. Utah (`us-west3`)
+1. Nevada (`us-west4`)
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/functions/import-maps.mdx b/apps/docs/pages/guides/functions/import-maps.mdx
index 6d61e774b55..f6c360dc3fd 100644
--- a/apps/docs/pages/guides/functions/import-maps.mdx
+++ b/apps/docs/pages/guides/functions/import-maps.mdx
@@ -2,8 +2,8 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'functions-import-maps',
- title: 'Import Maps',
- description: 'Using Import Maps.',
+ title: 'Managing packages using Import Maps',
+ description: 'Managing packages using Import Maps.',
video: 'https://www.youtube.com/v/ILr3cneZuFk',
}
diff --git a/apps/docs/pages/guides/functions/local-development.mdx b/apps/docs/pages/guides/functions/local-development.mdx
index 254cad70044..e3e77c95105 100644
--- a/apps/docs/pages/guides/functions/local-development.mdx
+++ b/apps/docs/pages/guides/functions/local-development.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'functions-local-development',
- title: 'Local Development',
+ title: 'Developing Functions locally',
description: 'Run your Edge Functions locally.',
}
diff --git a/apps/docs/pages/guides/functions/schedule-functions.mdx b/apps/docs/pages/guides/functions/schedule-functions.mdx
index 3339fcab8fa..fb4b0552824 100644
--- a/apps/docs/pages/guides/functions/schedule-functions.mdx
+++ b/apps/docs/pages/guides/functions/schedule-functions.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'schedule-functions',
- title: 'Schedule Edge Functions',
+ title: 'Scheduling Edge Functions',
description: 'Schedule Edge Functions with pg_cron.',
}
diff --git a/apps/docs/pages/guides/functions/secrets.mdx b/apps/docs/pages/guides/functions/secrets.mdx
index 3487fc94d79..ffbe7920042 100644
--- a/apps/docs/pages/guides/functions/secrets.mdx
+++ b/apps/docs/pages/guides/functions/secrets.mdx
@@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'functions-secrets',
- title: 'Secrets and Environment Variables',
+ title: 'Managing Secrets and Environment Variables',
description: 'Managing secrets and environment variables.',
}
diff --git a/apps/docs/pages/guides/functions/examples/storage-caching.mdx b/apps/docs/pages/guides/functions/storage-caching.mdx
similarity index 90%
rename from apps/docs/pages/guides/functions/examples/storage-caching.mdx
rename to apps/docs/pages/guides/functions/storage-caching.mdx
index c9cf4de7be9..e7f70d58b0f 100644
--- a/apps/docs/pages/guides/functions/examples/storage-caching.mdx
+++ b/apps/docs/pages/guides/functions/storage-caching.mdx
@@ -1,8 +1,8 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'examples-storage-caching',
- title: 'Caching Images with Supabase Storage CDN',
+ id: 'storage-caching',
+ title: 'Integrating with Supabase Storage',
description: 'Integrate Edge Functions with Supabase Storage to cache images on the Edge (CDN).',
video: 'https://www.youtube.com/v/wW6L52v9Ldo',
}
diff --git a/apps/docs/pages/guides/functions/typescript-support.mdx b/apps/docs/pages/guides/functions/typescript-support.mdx
new file mode 100644
index 00000000000..66f6ce4c9b6
--- /dev/null
+++ b/apps/docs/pages/guides/functions/typescript-support.mdx
@@ -0,0 +1,54 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'functions-debugging',
+ title: 'TypeScript Support',
+ description: 'Using TypeScript in Deno Edge Functions.',
+}
+
+One of the benefits of Deno is that it treats TypeScript as a first class
+language, just like JavaScript or Web Assembly, when running code in Deno. What
+that means is you can run or import TypeScript without installing anything more
+than the Deno CLI.
+
+## How does it work?
+
+At a high level, Deno converts TypeScript (as well as TSX and JSX) into
+JavaScript. It does this via a combination of the
+[TypeScript compiler](https://github.com/microsoft/TypeScript), which we build
+into Deno, and a Rust library called [swc](https://swc.rs/). When the code has
+been type checked and transformed, it is stored in a cache, ready for the next
+run without the need to convert it from its source to JavaScript again.
+
+## Strict by default
+
+Deno type checks TypeScript in _strict_ mode by default, and the TypeScript core
+team recommends _strict_ mode as a sensible default. This mode generally enables
+features of TypeScript that probably should have been there from the start, but
+as TypeScript continued to evolve, would be breaking changes for existing code.
+
+## Mixing JavaScript and TypeScript
+
+By default, Deno does not type check JavaScript. This can be changed, and is
+discussed further in [Configuring TypeScript in Deno](./configuration.md). Deno
+does support JavaScript importing TypeScript and TypeScript importing
+JavaScript, in complex scenarios.
+
+An important note though is that when type checking TypeScript, by default Deno
+will "read" all the JavaScript in order to be able to evaluate how it might have
+an impact on the TypeScript types. The type checker will do the best it can to
+figure out what the types are of the JavaScript you import into TypeScript,
+including reading any JSDoc comments. Details of this are discussed in detail in
+the [Types and type declarations](./types.md) section.
+
+## Type resolution
+
+One of the core design principles of Deno is to avoid non-standard module
+resolution, and this applies to type resolution as well. If you want to utilize
+JavaScript that has type definitions (e.g. a `.d.ts` file), you have to
+explicitly tell Deno about this. The details of how this is accomplished are
+covered in the [Types and type declarations](https://deno.land/manual/advanced/typescript/types) section.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/getting-started.mdx b/apps/docs/pages/guides/getting-started.mdx
index 820eae29e0c..8032bc3a0b8 100644
--- a/apps/docs/pages/guides/getting-started.mdx
+++ b/apps/docs/pages/guides/getting-started.mdx
@@ -36,6 +36,22 @@ export const meta = {
+export const useCases = [
+ {
+ title: 'OpenAI Vector Search',
+ href: '/guides/getting-started/openai/vector-search',
+ description: `Build your own custom ChatGPT with Next.js, OpenAI and pg_vector.`,
+ icon: '/docs/img/icons/openai_logo',
+ },
+ {
+ title: 'Subscription Payments (SaaS)',
+ href: 'https://github.com/vercel/nextjs-subscription-payments#nextjs-subscription-payments-starter',
+ description: `Clone, deploy, and fully customize a SaaS subscription application with Next.js.`,
+ icon: '/docs/img/icons/nextjs-icon',
+ },
+ {
+ title: 'Partner Gallery',
+ href: 'https://github.com/supabase-community/partner-gallery-example#supabase-partner-gallery-example',
+ description: `Postgres full-text search, image storage, and more.`,
+ icon: '/docs/img/icons/nextjs-icon',
+ },
+]
+
export const quickstarts = [
{
title: 'React',
@@ -99,6 +136,13 @@ export const quickstarts = [
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a NextJS app.',
icon: '/docs/img/icons/nextjs-icon',
},
+ {
+ title: 'RedwoodJS',
+ href: '/guides/getting-started/quickstarts/redwoodjs',
+ description:
+ 'Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.',
+ icon: '/docs/img/icons/redwood-icon',
+ },
{
title: 'Flutter',
href: '/guides/getting-started/quickstarts/flutter',
@@ -106,6 +150,27 @@ export const quickstarts = [
'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Flutter app.',
icon: '/docs/img/icons/flutter-icon',
},
+ {
+ title: 'SvelteKit',
+ href: '/guides/getting-started/quickstarts/sveltekit',
+ description:
+ 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SvelteKit app.',
+ icon: '/docs/img/icons/svelte-icon',
+ },
+ {
+ title: 'SolidJS',
+ href: '/guides/getting-started/quickstarts/solidjs',
+ description:
+ 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a SolidJS app.',
+ icon: '/docs/img/icons/solidjs-icon',
+ },
+ {
+ title: 'Vue',
+ href: '/guides/getting-started/quickstarts/solidjs',
+ description:
+ 'Learn how to create a Supabase project, add some sample data to your database, and query the data from a Vue app.',
+ icon: '/docs/img/icons/vuejs-icon',
+ },
]
export const webapps = [
@@ -218,6 +283,12 @@ export const resources = [
href: '/guides/getting-started/architecture',
description: "An overview of Supabase's architecture and product principles.",
},
+ {
+ title: 'Local Development',
+ hasLightIcon: true,
+ href: '/guides/cli/local-development',
+ description: 'Use the Supabase CLI to develop locally and collaborate between teams.',
+ },
]
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/getting-started/features.mdx b/apps/docs/pages/guides/getting-started/features.mdx
index 4cf63f342c0..845dbb6914e 100755
--- a/apps/docs/pages/guides/getting-started/features.mdx
+++ b/apps/docs/pages/guides/getting-started/features.mdx
@@ -115,6 +115,10 @@ Unofficial libraries [supported by the community](https://github.com/supabase-co
Supabase Storage makes it simple to store and serve files. [Docs](/docs/guides/storage).
+### Resumable uploads
+
+Upload large files easily using resumable uploads. [Docs](/docs/guides/storage/uploads).
+
### Storage CDN
Cache large files using the Supabase CDN. [Docs](/docs/guides/storage-cdn).
@@ -149,35 +153,39 @@ Manage your projects programmatically. [Docs](/docs/reference/api).
Both Postgres and the Supabase Platform are production-ready. Some tools we offer on top of Postgres are still under development.
-| Product | Feature | Stage |
-| -------------------------- | ---------------------- | ------- |
-| Database | Postgres | `GA` |
-| Database | Triggers | `GA` |
-| Database | Functions | `GA` |
-| Database | Extensions | `GA` |
-| Database | Full Text Search | `GA` |
-| Database | Webhooks | `alpha` |
-| Database | Point-in-Time Recovery | `alpha` |
-| Database | Vault | `alpha` |
-| Studio | | `GA` |
-| Realtime | Postgres Changes | `GA` |
-| Realtime | Broadcast | `beta` |
-| Realtime | Presence | `beta` |
-| Storage | | `GA` |
-| Storage | S3 Backend | `GA` |
-| Storage | CDN | `GA` |
-| Storage | Smart CDN | `beta` |
-| Storage | Image Transformations | `beta` |
-| Edge Functions | | `beta` |
-| Auth | OAuth Providers | `beta` |
-| Auth | Passwordless | `beta` |
-| Auth | Next.js Auth Helpers | `alpha` |
-| Auth | SvelteKit Auth Helpers | `alpha` |
-| Auth | Remix Auth Helpers | `alpha` |
-| Management API | | `beta` |
-| CLI | | `beta` |
-| Client Library: JavaScript | | `GA` |
-| Client Library: Dart | | `beta` |
+| Product | Feature | Stage | Available on self-hosted |
+| -------------------------- | ---------------------- | ------- | ------------------------------------------- |
+| Database | Postgres | `GA` | ✅ |
+| Database | Triggers | `GA` | ✅ |
+| Database | Functions | `GA` | ✅ |
+| Database | Extensions | `GA` | ✅ |
+| Database | Full Text Search | `GA` | ✅ |
+| Database | Webhooks | `GA` | ✅ |
+| Database | Point-in-Time Recovery | `alpha` | 🚧 [wal-g](https://github.com/wal-g/wal-g) |
+| Database | Vault | `alpha` | ✅ |
+| Studio | | `GA` | ✅ |
+| Realtime | Postgres Changes | `GA` | ✅ |
+| Realtime | Broadcast | `beta` | ✅ |
+| Realtime | Presence | `beta` | ✅ |
+| Storage | | `GA` | ✅ |
+| Storage | S3 Backend | `GA` | ✅ |
+| Storage | CDN | `GA` | 🚧 [Cloudflare](https://www.cloudflare.com) |
+| Storage | Smart CDN | `beta` | 🚧 [Cloudflare](https://www.cloudflare.com) |
+| Storage | Image Transformations | `beta` | ✅ |
+| Storage | Resumable Uploads | `beta` | ✅ |
+| Edge Functions | | `beta` | 🚧 [Deno Deploy](https://deno.com/deploy) |
+| Auth | OAuth Providers | `beta` | ✅ |
+| Auth | Passwordless | `beta` | ✅ |
+| Auth | Next.js Auth Helpers | `alpha` | ✅ |
+| Auth | SvelteKit Auth Helpers | `alpha` | ✅ |
+| Auth | Remix Auth Helpers | `alpha` | ✅ |
+| Management API | | `beta` | N/A |
+| CLI | | `beta` | N/A |
+| Client Library: JavaScript | | `GA` | N/A |
+| Client Library: Dart | | `beta` | N/A |
+
+- ✅ = Fully Available
+- 🚧 = Available, but requires external tools or configuration
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/getting-started/openai/vector-search.mdx b/apps/docs/pages/guides/getting-started/openai/vector-search.mdx
new file mode 100644
index 00000000000..580d52262e0
--- /dev/null
+++ b/apps/docs/pages/guides/getting-started/openai/vector-search.mdx
@@ -0,0 +1,544 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import StepHikeCompact from '~/components/StepHikeCompact'
+
+export const meta = {
+ title: 'OpenAI Embeddings & Vector Search',
+ subtitle:
+ 'Learn how to build a ChatGPT-style doc search powered by Next.js, OpenAI, and Supabase.',
+ breadcrumb: 'OpenAI',
+}
+
+In this tutorial we'll look at how you can build a custom ChatGPT-like search experience for your own knowledge base. See our [Supabase Clippy](https://supabase.com/blog/chatgpt-supabase-docs) blog post for an example of how this will look.
+
+We assume that you have a Next.js project with a collection of `.mdx` files nested inside your `pages` directory. We will start developing locally with the Supabase CLI and then push our local database changes to our hosted Supabase project.
+
+
+ You can find the [full example on
+ GitHub](https://github.com/supabase-community/nextjs-openai-doc-search).
+
+
+## Create a project
+
+1. [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
+1. Enter your project details.
+1. Wait for the new database to launch.
+
+## Prepare the database
+
+Let's prepare the database schema. We can use the "OpenAI Vector Search" quickstart in the [SQL Editor](https://app.supabase.com/project/_/sql), or you can copy/paste the SQL below and run it yourself.
+
+
+
+
+1. Go to the [SQL Editor](https://app.supabase.com/project/_/sql) page in the Dashboard.
+2. Click **OpenAI Vector Search**.
+3. Click **Run**.
+
+
+
+
+
+
+
+
+
+
+ Make sure you have the latest version of the [Supabase CLI installed]().
+
+ Initialize Supabase in the root directory of your app.
+
+
+
+
+
+ ```bash
+ supabase init
+ ```
+
+
+
+
+
+
+
+
+ To make changes to our local database, we need to create a new migration. This will create a new `.sql` file in our `supabase/migrations` folder, where we can write SQL that will be applied to our local database when starting Supabase locally.
+
+
+
+
+
+ ```bash
+ supabase migration new init
+ ```
+
+
+
+
+
+
+
+
+ Copy the following SQL line into the newly created migration file to enable the pgvector extension.
+
+
+
+
+
+ ```sql
+ -- Enable pgvector extension
+ create extension if not exists vector with schema public;
+ ```
+
+
+
+
+
+
+
+
+ Copy these SQL queries to your migration file. It will create two tables in our database schema.
+
+
+
+
+
+ ```sql
+ -- Stores the checksum of our pages.
+ -- This ensures that we only regenerate embeddings
+ -- when the page content has changed.
+ create table "public"."nods_page" (
+ id bigserial primary key,
+ parent_page_id bigint references public.nods_page,
+ path text not null unique,
+ checksum text,
+ meta jsonb,
+ type text,
+ source text
+ );
+ alter table "public"."nods_page"
+ enable row level security;
+
+ -- Stores the actual embeddings with some metadata
+ create table "public"."nods_page_section" (
+ id bigserial primary key,
+ page_id bigint not null references public.nods_page on delete cascade,
+ content text,
+ token_count int,
+ embedding vector(1536),
+ slug text,
+ heading text
+ );
+ alter table "public"."nods_page_section"
+ enable row level security;
+ ```
+
+
+
+
+
+
+
+
+ Anytime the user sends a query, we want to find the content that's relevant to their questions. We can do this using pgvector's similarity search.
+
+ These are quite complex SQL operations, so let's wrap them in database functions that we can call from our frontend using [RPC](https://supabase.com/docs/reference/javascript/rpc).
+
+
+
+
+
+ ```sql
+ -- Create embedding similarity search functions
+ create or replace function match_page_sections(
+ embedding vector(1536),
+ match_threshold float,
+ match_count int,
+ min_content_length int
+ )
+ returns table (
+ id bigint,
+ page_id bigint,
+ slug text,
+ heading text,
+ content text,
+ similarity float
+ )
+ language plpgsql
+ as $$
+ #variable_conflict use_variable
+ begin
+ return query
+ select
+ nods_page_section.id,
+ nods_page_section.page_id,
+ nods_page_section.slug,
+ nods_page_section.heading,
+ nods_page_section.content,
+ (nods_page_section.embedding <#> embedding) * -1 as similarity
+ from nods_page_section
+
+ -- We only care about sections that have a useful amount of content
+ where length(nods_page_section.content) >= min_content_length
+
+ -- The dot product is negative because of a Postgres limitation, so we negate it
+ and (nods_page_section.embedding <#> embedding) * -1 > match_threshold
+
+ -- OpenAI embeddings are normalized to length 1, so
+ -- cosine similarity and dot product will produce the same results.
+ -- Using dot product which can be computed slightly faster.
+ --
+ -- For the different syntaxes, see https://github.com/pgvector/pgvector
+ order by nods_page_section.embedding <#> embedding
+
+ limit match_count;
+ end;
+ $$;
+ ```
+
+
+
+
+
+
+
+
+ Start Supabase locally. At this point all files in `supabase/migrations` will be applied to your database and you're ready to go.
+
+
+
+
+
+ ```bash
+ supabase start
+ ```
+
+
+
+
+
+
+
+
+ Once ready, you can link your local project to your cloud hosted Supabase project and push the local changes to your hosted instance.
+
+
+
+
+
+ ```bash
+ supabase link --project-ref=your-project-ref
+
+ supabase db push
+ ```
+
+
+
+
+
+
+
+
+
+
+## Pre-process the knowledge base at build time
+
+With our database set up, we need to process and store all `.mdx` files in the `pages` directory. You can find the full script [here](https://github.com/supabase-community/nextjs-openai-doc-search/blob/main/lib/generate-embeddings.ts), or follow the steps below:
+
+
+
+
+
+
+ Create a new file `lib/generate-embeddings.ts` and copy the code over from [GitHub](https://github.com/supabase-community/nextjs-openai-doc-search/blob/main/lib/generate-embeddings.ts).
+
+
+
+
+
+ ```bash
+ curl \
+ https://raw.githubusercontent.com/supabase-community/nextjs-openai-doc-search/main/lib/generate-embeddings.ts \
+ -o "lib/generate-embeddings.ts"
+ ```
+
+
+
+
+
+
+
+
+ We need some environment variables to run the script. Add them to your `.env` file and make sure your `.env` file is not committed to source control!
+ You can get your local Supabase credentials by running `supabase status`.
+
+
+
+
+
+ ```txt
+ NEXT_PUBLIC_SUPABASE_URL=
+ NEXT_PUBLIC_SUPABASE_ANON_KEY=
+ SUPABASE_SERVICE_ROLE_KEY=
+
+ # Get your key at https://platform.openai.com/account/api-keys
+ OPENAI_KEY=
+ ```
+
+
+
+
+
+
+
+
+ Include the script in your `package.json` script commands to enable Vercel to automaticall run it at build time.
+
+
+
+
+
+ ```json
+ "scripts": {
+ "dev": "next dev",
+ "build": "pnpm run embeddings && next build",
+ "start": "next start",
+ "embeddings": "tsx lib/generate-embeddings.ts"
+ },
+ ```
+
+
+
+
+
+
+
+## Create Text Completion with OpenAI API
+
+Anytime a user asks a question, we need to create an embedding for their question, perform a similarity search, and then send a text completion request to the OpenAI API with the query and then context content merged together into a prompt.
+
+All of this is glued together in a [Vercel Edge Function](https://vercel.com/docs/concepts/functions/edge-functions), the code for which can be found on [GitHub](https://github.com/supabase-community/nextjs-openai-doc-search/blob/main/pages/api/vector-search.ts).
+
+
+
+
+
+
+ In order to perform similarity search we need to turn the question into an embedding.
+
+
+
+
+
+ ```ts
+ const embeddingResponse = await fetch('https://api.openai.com/v1/embeddings', {
+ method: 'POST',
+ headers: {
+ Authorization: `Bearer ${openAiKey}`,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify({
+ model: 'text-embedding-ada-002',
+ input: sanitizedQuery.replaceAll('\n', ' '),
+ }),
+ })
+
+ if (embeddingResponse.status !== 200) {
+ throw new ApplicationError('Failed to create embedding for question', embeddingResponse)
+ }
+
+ const {
+ data: [{ embedding }],
+ } = await embeddingResponse.json()
+ ```
+
+
+
+
+
+
+
+
+ Using the `embeddingResponse` we can now perform similarity search by performing an remote procedure call (RPC) to the database function we created earlier.
+
+
+
+
+
+ ```ts
+ const { error: matchError, data: pageSections } = await supabaseClient.rpc(
+ 'match_page_sections',
+ {
+ embedding,
+ match_threshold: 0.78,
+ match_count: 10,
+ min_content_length: 50,
+ }
+ )
+ ```
+
+
+
+
+
+
+
+
+ With the relevant content for the user's question identified, we can now build the prompt and make a text completion request via the OpenAI API.
+
+ If successful, the OpenAI API will respond with a `text/event-stream` response that we can simply forward to the client where we'll process the event stream to smoothly print the answer to the user.
+
+
+
+
+
+ ```ts
+ const prompt = codeBlock`
+ ${oneLine`
+ You are a very enthusiastic Supabase representative who loves
+ to help people! Given the following sections from the Supabase
+ documentation, answer the question using only that information,
+ outputted in markdown format. If you are unsure and the answer
+ is not explicitly written in the documentation, say
+ "Sorry, I don't know how to help with that."
+ `}
+
+ Context sections:
+ ${contextText}
+
+ Question: """
+ ${sanitizedQuery}
+ """
+
+ Answer as markdown (including related code snippets if available):
+ `
+
+ const completionOptions: CreateCompletionRequest = {
+ model: 'text-davinci-003',
+ prompt,
+ max_tokens: 512,
+ temperature: 0,
+ stream: true,
+ }
+
+ const response = await fetch('https://api.openai.com/v1/completions', {
+ method: 'POST',
+ headers: {
+ Authorization: `Bearer ${openAiKey}`,
+ 'Content-Type': 'application/json',
+ },
+ body: JSON.stringify(completionOptions),
+ })
+
+ if (!response.ok) {
+ const error = await response.json()
+ throw new ApplicationError('Failed to generate completion', error)
+ }
+
+ // Proxy the streamed SSE response from OpenAI
+ return new Response(response.body, {
+ headers: {
+ 'Content-Type': 'text/event-stream',
+ },
+ })
+ ```
+
+
+
+
+
+
+
+## Display the answer on the frontend
+
+In a last step, we need to process the event stream from the OpenAI API and print the answer to the user. The full code for this can be found on [GitHub](https://github.com/supabase-community/nextjs-openai-doc-search/blob/main/components/SearchDialog.tsx).
+
+```tsx
+const handleConfirm = React.useCallback(
+ async (query: string) => {
+ setAnswer(undefined)
+ setQuestion(query)
+ setSearch('')
+ dispatchPromptData({ index: promptIndex, answer: undefined, query })
+ setHasError(false)
+ setIsLoading(true)
+
+ const eventSource = new SSE(`api/vector-search`, {
+ headers: {
+ apikey: process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? '',
+ Authorization: `Bearer ${process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY}`,
+ 'Content-Type': 'application/json',
+ },
+ payload: JSON.stringify({ query }),
+ })
+
+ function handleError(err: T) {
+ setIsLoading(false)
+ setHasError(true)
+ console.error(err)
+ }
+
+ eventSource.addEventListener('error', handleError)
+ eventSource.addEventListener('message', (e: any) => {
+ try {
+ setIsLoading(false)
+
+ if (e.data === '[DONE]') {
+ setPromptIndex((x) => {
+ return x + 1
+ })
+ return
+ }
+
+ const completionResponse: CreateCompletionResponse = JSON.parse(e.data)
+ const text = completionResponse.choices[0].text
+
+ setAnswer((answer) => {
+ const currentAnswer = answer ?? ''
+
+ dispatchPromptData({
+ index: promptIndex,
+ answer: currentAnswer + text,
+ })
+
+ return (answer ?? '') + text
+ })
+ } catch (err) {
+ handleError(err)
+ }
+ })
+
+ eventSource.stream()
+
+ eventSourceRef.current = eventSource
+
+ setIsLoading(true)
+ },
+ [promptIndex, promptData]
+)
+```
+
+## Learn More
+
+Want to learn more about the awesome tech that is powering this?
+
+- Read about how we built [ChatGPT for the Supabase Docs](https://supabase.com/blog/chatgpt-supabase-docs).
+- Read the pgvector Docs for [Embeddings and vector similarity](https://supabase.com/docs/guides/database/extensions/pgvector)
+- Watch Greg's video for a full breakdown:
+
+
+
+
+
+export const Page = ({ children }) =>
+export default Page
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx
new file mode 100644
index 00000000000..ac716078403
--- /dev/null
+++ b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx
@@ -0,0 +1,242 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import StepHikeCompact from '~/components/StepHikeCompact'
+
+export const meta = {
+ title: 'Use Supabase with RedwoodJS',
+ subtitle:
+ 'Learn how to create a Supabase project, add some sample data to your database using Prisma migration and seeds, and query the data from a RedwoodJS app.',
+ breadcrumb: 'Framework Quickstarts',
+}
+
+
+
+
+
+ [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
+
+
+ Be sure to make note of the Database Password you used as you will need this later to connect to your database.
+
+
+
+
+ 
+
+
+
+
+
+
+ After your project is ready, gather the following information about your [database connections](https://app.supabase.com/project/_/settings/database):
+
+ * Connection String (port 5432)
+ * Connection Pooling / Connection String (port 6543)
+
+ You will need these to setup environment variables in Step 5.
+
+
+ You can copy and paste these connection strings from the Supabase Dashboard when needed in later steps.
+
+
+
+
+ 
+
+
+
+
+
+
+ Create a RedwoodJS app with TypeScript.
+
+
+ The [`yarn` package manager](https://yarnpkg.com) is required to create a RedwoodJS app. You will use it to run RedwoodJS commands later.
+
+ While TypeScript is recommended, If you want a JavaScript app, omit the `--ts` flag.
+
+
+
+
+ ```bash Terminal
+ yarn create redwood-app my-app --ts
+ ```
+
+
+
+
+
+
+ You'll develop your app, manage database migrations, and run your app in VS Code.
+
+
+
+ ```bash Terminal
+ cd my-app
+ code .
+ ```
+
+
+
+
+
+
+ In your `.env` file, add the following environment variables for your database connection:
+
+ * The `DIRECT_URL` should use the `Connection String` from your Supabase project. Hint: the port is `5432`.
+
+ * The `DATABASE_URL` should use the `Connection Pooling / Connection String` from your Supabase project. Hint: the port is `6432`.
+
+
+ Be sure to append `?pgbouncer=true` to the end of the `DATABASE_URL` connection string.
+ Also, replace `[YOUR-PASSWORD]` and `[YOUR-PROJECT-REF]` with the password you used when creating your Supabase project and the project reference from the URL in your browser.
+
+
+
+
+ ```bash terminal
+ # .env
+ # PostgreSQL connection string used for migrations
+ DIRECT_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:5432/postgres"
+ # PostgreSQL connection string with pgBouncer config — used by Prisma Client
+ DATABASE_URL="postgres://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF].supabase.co:6543/postgres?pgbouncer=true"
+
+ ```
+
+
+
+
+
+
+ By default, RedwoodJS ships with a SQLite database, but we want to use PostgreSQL.
+
+ Update your Prisma schema file `api/db/schema.prisma` to use your Supabase PostgreSQL database connection environment variables you setup in Step 5.
+
+
+
+ ```file="api/prisma/schema.prisma" title="api/prisma/schema.prisma"
+ // api/db/schema.prisma
+
+ datasource db {
+ provider = "postgresql"
+ url = env("DATABASE_URL")
+ directUrl = env("DIRECT_URL")
+ }
+ ```
+
+
+
+
+
+
+ Create the Country model in `api/db/schema.prisma` and then run `yarn rw prisma migrate dev` from your terminal to apply the migration.
+
+
+
+ ```js
+ // api/db/schema.prisma
+
+ model Country {
+ id Int @id @default(autoincrement())
+ name String @unique
+ }
+ ```
+
+
+
+
+
+
+ Let's seed the database with a few countries.
+
+ Update the file `scripts/seeds.ts` to contain the following code:
+
+
+
+
+ ```ts
+ // scripts/seed.ts
+
+ import type { Prisma } from '@prisma/client'
+ import { db } from 'api/src/lib/db'
+
+ export default async () => {
+ try {
+ const data: Prisma.CountryCreateArgs['data'][] = [
+ { name: 'United States' },
+ { name: 'Canada' },
+ { name: 'Mexico' },
+ ]
+
+ console.log('Seeding countries ...')
+
+ const countries = await db.country.createMany({ data })
+
+ console.log('Done.', countries)
+ } catch (error) {
+ console.error(error)
+ }
+ }
+ ```
+
+
+
+
+
+
+ Run the seed database command to populate the `Country` table with the countries you just created.
+
+
+ The reset database command `yarn rw prisma db reset` will recreate the tables and will also run the seed script.
+
+
+
+
+ ```bash Terminal
+ yarn rw prisma db seed
+ ```
+
+
+
+
+
+
+ Now, we'll use RedwoodJS generators to scaffold a CRUD UI for the `Country` model.
+
+
+
+ ```bash Terminal
+ yarn rw g scaffold country
+ ```
+
+
+
+
+
+
+ Start the app via `yarn rw dev`. A browser will open to the RedwoodJS Splash page.
+
+
+
+ 
+
+
+
+
+
+
+
+ Click on `/countries` to visit http://localhost:8910/countries where should see the list of countries.
+
+ You may now edit, delete, and add new countries using the scaffolded UI.
+
+
+
+ 
+
+
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx
index 5c47ae577b3..aa420134d55 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx
@@ -36,6 +36,7 @@ Then let's install the additional dependencies: [supabase-js](https://github.com
```bash
npm install @supabase/supabase-js
npm install react-native-elements @react-native-async-storage/async-storage react-native-url-polyfill
+npx expo install expo-secure-store
```
Now let's create a helper file to initialize the Supabase client.
@@ -44,15 +45,28 @@ These variables will be exposed on the browser, and that's completely fine since
[Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
```ts title=lib/supabase.ts
-import AsyncStorage from '@react-native-async-storage/async-storage'
+import * as SecureStore from "expo-secure-store";
import { createClient } from '@supabase/supabase-js'
+
+const ExpoSecureStoreAdapter = {
+ getItem: (key: string) => {
+ return SecureStore.getItemAsync(key);
+ },
+ setItem: (key: string, value: string) => {
+ SecureStore.setItemAsync(key, value);
+ },
+ removeItem: (key: string) => {
+ SecureStore.deleteItemAsync(key);
+ },
+};
+
const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL
const supabaseAnonKey = YOUR_REACT_NATIVE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
auth: {
- storage: AsyncStorage as any,
+ storage: ExpoSecureStoreAdapter as any,
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: false,
@@ -99,7 +113,7 @@ export default function Auth() {
}
return (
-
+
+
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
index 2c2c5de48a5..14c32a07bbb 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
@@ -318,6 +318,8 @@ export default function Account({ session }) {
Let's create a new component for that called `Account.tsx` within a `components` folder.
+First, [generate type definitions from your database using the Supabase CLI](https://supabase.com/docs/guides/database/api/generating-types) to `../utils/database.types`.
+
```tsx title=components/Account.tsx
import { useState, useEffect } from 'react'
import { useUser, useSupabaseClient, Session } from '@supabase/auth-helpers-react'
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
index 22b154c836c..c67ccea9008 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
@@ -179,11 +179,13 @@ Update your `src/routes/+layout.svelte`:
export let data: LayoutData
- $: ({ supabase } = data)
+ $: ({ supabase, session } = data)
onMount(() => {
- const { data } = supabase.auth.onAuthStateChange(() => {
- invalidate('supabase:auth')
+ const { data } = supabase.auth.onAuthStateChange((event, _session) => {
+ if (_session?.expires_at !== session?.expires_at) {
+ invalidate('supabase:auth')
+ }
})
return () => data.subscription.unsubscribe()
diff --git a/apps/docs/pages/guides/integrations.mdx b/apps/docs/pages/guides/integrations.mdx
index 60e06333e2c..1f491796c81 100644
--- a/apps/docs/pages/guides/integrations.mdx
+++ b/apps/docs/pages/guides/integrations.mdx
@@ -15,7 +15,7 @@ Explore a variety of integrations from Supabase partners. Need a different integ
- ))}
-
- )
-}
diff --git a/apps/temp-community-tutorials/src/styles/tailwind.css b/apps/temp-community-tutorials/src/styles/tailwind.css
deleted file mode 100644
index b5c61c95671..00000000000
--- a/apps/temp-community-tutorials/src/styles/tailwind.css
+++ /dev/null
@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
diff --git a/apps/temp-community-tutorials/src/utils/api.ts b/apps/temp-community-tutorials/src/utils/api.ts
deleted file mode 100644
index baa1b180f00..00000000000
--- a/apps/temp-community-tutorials/src/utils/api.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-const username = 'supabase'
-const postsUrl = `https://dev.to/api/articles?username=${username}`
-
-// Defines a Post returned from the DEV API
-export type DevPost = {
- id: Number
- title: string
- description: string
- slug: string
- url: string
- path: string
- readable_publish_date: string
- published_at: string
- tags: string
- tag_list: string[]
- comments_count: Number
- public_reactions_count: Number
- positive_reactions_count: Number
- published: boolean
- first_published_at: string
- edited_at: string
- user: {
- username: string
- name: string
- profile_image_90: string
- cover_image_90: string
- profile_image_original: string
- cover_image_original: string
- location: string
- website: string
- bio: string
- twitter_username: string
- github_username: string
- dribbble_username: string
- path: string
- }
- organization: {
- id: Number
- name: string
- slug: string
- profile_image_90: string
- profile_imag: string
- }
-}
-
-export async function fetchPosts() {
- try {
- const res = await fetch(postsUrl)
- const data: DevPost[] = await res.json()
- return data
- } catch (err) {
- console.log(err)
- return []
- }
-}
diff --git a/apps/temp-community-tutorials/tailwind.config.js b/apps/temp-community-tutorials/tailwind.config.js
deleted file mode 100644
index 9c2af498997..00000000000
--- a/apps/temp-community-tutorials/tailwind.config.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('config/tailwind.config')
diff --git a/apps/temp-community-tutorials/tsconfig.json b/apps/temp-community-tutorials/tsconfig.json
deleted file mode 100644
index a355365ba65..00000000000
--- a/apps/temp-community-tutorials/tsconfig.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
- "extends": "tsconfig/nextjs.json",
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
- "exclude": ["node_modules"]
-}
diff --git a/apps/www/_blog/2021-03-30-supabase-storage.mdx b/apps/www/_blog/2021-03-30-supabase-storage.mdx
index 28d73490665..bea3afbfb2d 100644
--- a/apps/www/_blog/2021-03-30-supabase-storage.mdx
+++ b/apps/www/_blog/2021-03-30-supabase-storage.mdx
@@ -10,7 +10,17 @@ tags:
date: '03-30-2021'
---
-Today, we are launching one of most requested features - Storage! When you sign up for Supabase, you get a Postgres database with realtime subscriptions, user management, auto-generated APIs and now a scalable object store. These services integrate very well with each other and you don't need to sign up for yet another service just for your storage requirements.
+
+
+🆕 Storage has undergone significant enhancements with two major releases since its initial launch. Here is what is new:
+
+ - [Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn)
+ - [Supabase Storage v3: Resumable Uploads with support for 50GB files](https://supabase.com/blog/storage-v3-resumable-uploads)
+
+
+
+
+Today, we are launching one of most requested features - [Storage!](https://supabase.com/storage) When you sign up for Supabase, you get a Postgres database with realtime subscriptions, user management, auto-generated APIs and now a scalable object store. These services integrate very well with each other and you don't need to sign up for yet another service just for your storage requirements.
As with anything that we build in Supabase, Storage is fast, secure and scalable. You can use it to store terabytes of Machine Learning training data, your e-commerce product gallery or just your growing collection of JPEGs featuring cats playing synths in space.
@@ -155,8 +165,8 @@ You may be itching to get started tinkering around with our new Supabase storage
## What's next
- We currently support S3 and will be adding more storage backends. Vote for the storage backends you would like to see us implement [here](https://github.com/supabase/supabase/discussions/982).
-- We will integrate our storage service with a Content Delivery Network. With a CDN, objects are cached on a global network. This leads to faster access times for your users around the world.
-- We are working on transformations like resizing of images and automatic optimization of different media types. This makes it easy to embed Supabase objects directly in your websites and mobile applications without additional processing.
+- We will integrate our storage service with a Content Delivery Network. With a CDN, objects are cached on a global network. This leads to faster access times for your users around the world. **SHIPPED: [Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn#smart-cdn)
+- We are working on transformations like resizing of images and automatic optimization of different media types. This makes it easy to embed Supabase objects directly in your websites and mobile applications without additional processing. **SHIPPED: [Supabase Storage v2: Image resizing and Smart CDN](https://supabase.com/blog/storage-image-resizing-smart-cdn#image-resizing)
- A better editor to make authoring policies easier and less error prone.
- Reach out to us if you would like to help out with adding storage support in one of the [community maintained client libraries](/docs/reference/javascript/installing).
diff --git a/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx b/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx
index 02b1284ca5b..e4686040e3b 100644
--- a/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx
+++ b/apps/www/_blog/2022-12-13-storage-image-resizing-smart-cdn.mdx
@@ -16,9 +16,9 @@ Today we're introducing three new features for Supabase Storage: Image resizing,
These features are designed to work together to deliver a next-gen image resizing system. Let's explore how it works.
-
+
-Image Resizing is in Beta. While in Beta, it is only enabled for Pro-tier and Enterprise customers.
+🆕 What is new in Storage: [Supabase Storage v3: Resumable Uploads with support for 50GB files](https://supabase.com/blog/storage-v3-resumable-uploads)
@@ -83,6 +83,12 @@ Behind the scenes, we've provided a few small niceties:
- **Sane defaults:** default mode maintains aspect ratio and the resize mode is `cover`
- **Standardization**: resize modes mirror the [object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) property of CSS. We support the contain, cover and fill modes.
+
+
+Image Resizing is in Beta. While in Beta, it is only enabled for Pro-tier and Enterprise customers.
+
+
+
## Smart CDN
Resizing images can get expensive, so before this release we knew we needed a better caching system. We already provide a “basic” CDN for all projects (including Free-tier), so the important update here is some smarter cache invalidation whenever there are changes.
diff --git a/apps/www/_blog/2023-02-07-chatgpt-supabase-docs.mdx b/apps/www/_blog/2023-02-07-chatgpt-supabase-docs.mdx
index 85b061947c7..e0b1c949f8c 100644
--- a/apps/www/_blog/2023-02-07-chatgpt-supabase-docs.mdx
+++ b/apps/www/_blog/2023-02-07-chatgpt-supabase-docs.mdx
@@ -114,3 +114,7 @@ While you're at it, consider supporting [@ankane](https://github.com/ankane)'s g
Want to try Supabase Clippy? It's a hidden feature while in MVP - visit [supabase.com/docs](/docs) and hit `cmd` + `/` to pull up the search box (sorry mobile users).
If you have any comments we'd love to hear them in our [ShowHN](https://news.ycombinator.com/item?id=34695306).
+
+## Deploy your own
+
+Want to build your own Clippy based on your own content? Use our [Next.js OpenAI Doc Search Template](https://github.com/supabase-community/nextjs-openai-doc-search) to deploy your own now!
diff --git a/apps/www/_blog/2023-04-01-supaclub.mdx b/apps/www/_blog/2023-04-01-supaclub.mdx
new file mode 100644
index 00000000000..9d52ef8a387
--- /dev/null
+++ b/apps/www/_blog/2023-04-01-supaclub.mdx
@@ -0,0 +1,38 @@
+---
+title: SupaClub
+description: The Worlds First Software Engineering Nightclub.
+author: ant_wilson
+image: supaclub/supaclub-thumb.png
+thumb: supaclub/supaclub-thumb.png
+tags:
+ - announcements
+date: '2023-04-01'
+toc_depth: 3
+---
+
+Announcing SupaClub (pronounced “Super-Clurb”), the world’s first Software Engineering Nightclub.
+
+Located on the Indonesian island of Bali, SupaClub is where the digital nomads of South East Asia are mixing Hardcore Techno with Hardcore Engineering.
+
+
+
+In March this year, some members of the Supabase team took advantage of the fact that they can work fully remotely, and spent a week working in Bali. The island is a great place to relax in coffee shops during the day, but when night time rolled around our team faced a major problem - the large established nightclubs of Bali would not allow our engineers to bring their laptops into the club. They have strict rules against EMACS on the dance floor, killing our dream of fixing bugs whilst jamming to 90s club anthems.
+
+Our team got together and decided that we would do what we do best at Supabase. We’d ship a fix, and today that fix becomes a reality.
+
+
+
+SupaClub, situated near the beach in the Canggu neighborhood of Bali, will open its doors this coming Friday. It can house 4000 developers across 4 floors, each with a dedicated DJ and breakout rooms. It has UltraSpeed 1Gbps WiFi and bookable standing desks on every floor. VIP [SupaBrew bottle service](https://supabase.com/blog/supabrew) is available inside private conference rooms, complete with whiteboards and UltraWide monitors for full immersion (Think WeWork-meets-Pacha).
+
+
+
+In terms of beverage selection, [SupaBrew](https://supabase.com/blog/supabrew) will of course be available behind the bar, along with a cocktail list that includes:
+
+- **Bjarne Pisco Stroustrup** - A back-to-basics tantalizing mix of tart, sweet, and silky pisco brandy that won't leave your pointers dangling
+- **The Linus** - A spicy twist on the Bloody Mary, this aggressive blend will have you shouting for more
+- **Mojito-js** - we would list the ingredients but our mixologists keep changing the spec
+- **HTML Highball** - Not a real cocktail, more of a mocktail
+
+SupaClub was made possible with the help of infamous Fyre Fest investor Ja Rule and “Super Bass” songstress Niki Minaj, both of which will also be performing on the opening night.
+
+If you would like to reserve a spot on the guest list for the opening night please email us at noreply@supabase.com with a link to your GitHub account and "Re: april fools" in the subject line. See you there.
diff --git a/apps/www/_blog/2023-04-04-infinite-scroll-with-nextjs-framer-motion.mdx b/apps/www/_blog/2023-04-04-infinite-scroll-with-nextjs-framer-motion.mdx
new file mode 100644
index 00000000000..a670abe9610
--- /dev/null
+++ b/apps/www/_blog/2023-04-04-infinite-scroll-with-nextjs-framer-motion.mdx
@@ -0,0 +1,338 @@
+---
+title: Infinite scroll with Next.js, Framer Motion, and Supabase
+description: Lazy load and paginate data on scroll with Next.js and a sprinkle of Framer Motion magic ✨
+author: fsansalvadore
+image: infinite-scroll-thumb.jpg
+thumb: infinite-scroll-thumb.jpg
+launchweek: 7
+tags:
+ - tutorial
+ - launch-week
+ - Next-js
+date: '2023-04-04'
+toc_depth: 6
+---
+
+Every Launch Week, we strive to approach things differently as part of our Kaizen mindset. For [Launch Week 7](https://www.supabase.com/launch-week), we decided to add some twists to our popular ticket system. While we made several changes, this post will focus on one specific modification (we'll share more about the rest this week!).
+
+Our goal was to feature all the amazing people who generated tickets on a [single page](https://supabase.com/launch-week/tickets). However, displaying them all at once could take a toll on the loading time and negatively affect the user experience. That's where lazy loading smaller subsets via infinite scrolling came in as the solution.
+
+With infinite scrolling, users can effortlessly scroll through content while only loading the necessary data as they go. This not only enhances performance but also creates a seamless and enjoyable user experience.
+
+In this post, we'll detail our process of implementing infinite scrolling using Next.js, Framer Motion, and Supabase.
+
+## Step 0. Load the first batch
+
+First things first, let's install the dependencies we'll need.
+
+```bash
+npm install @supabase/supabase-js lodash framer-motion
+```
+
+Set up the supabase-js client and fetch the first 20 tickets through `getServerSideProps` so we don't start with an empty screen.
+
+We'll assume our table in the db is called `my_tickets_table`.
+
+```jsx
+import { useEffect, useState } from 'react'
+import { createClient } from '@supabase/supabase-js'
+
+const supabase = createClient('supabase-url', 'supabase-key')
+
+export default function TicketsPage({ tickets }) {
+ const [loadedTickets, setLoadedTickets] = useState(tickets)
+
+ return (
+
+ {loadedTickets.map((ticket, index) => (
+ {/* We'll get to this part later */}
+ ))}
+
+ )
+
+export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+ const { data: tickets } = await supabase!
+ .from('my_tickets_table')
+ .select('*')
+ .order('createdAt', { ascending: false })
+ .limit(20)
+
+ return {
+ props: {
+ tickets,
+ },
+ }
+}
+```
+
+## Step 1. Listen to the scroll
+
+To detect if the user is scrolling we can listen to the window `scroll` event.
+
+If you try to `console.log()` the event returned in the listener callback, you'll notice that it fires on every single pixel scrolled. We want to avoid triggering like crazy, so we'll use a [lodash debounce function](https://www.geeksforgeeks.org/lodash-_-debounce-method/) to limit how often we call this event to once every 200 milliseconds.
+
+Here's what it looks like:
+
+```jsx
+import { useEffect } from 'react'
+import { debounce } from 'lodash'
+
+const handleScroll = () => {
+ // Do stuff when scrolling
+}
+
+useEffect(() => {
+ const handleDebouncedScroll = debounce(() => handleScroll(), 200)
+ window.addEventListener('scroll', handleDebouncedScroll)
+ return () => {
+ window.removeEventListener('scroll', handleDebouncedScroll)
+ }
+}, [])
+```
+
+## Step 2. Check if the container intersects the viewport
+
+Next, we want to check if the bottom of the tickets container intersects with the bottom of the viewport. We can use the `getBoundingClientRect` method to get the position of the container and then compare it with the height of the viewport.
+
+```jsx
+import { useRef, useState } from 'react'
+
+// ...
+
+const containerRef = useRef(null)
+const [offset, setOffset] = useState(1)
+const [isInView, setIsInView] = useState(false)
+
+const handleScroll = (container) => {
+ if (containerRef.current && typeof window !== 'undefined') {
+ const container = containerRef.current
+ const { bottom } = container.getBoundingClientRect()
+ const { innerHeight } = window
+ setIsInView((prev) => bottom <= innerHeight)
+ }
+}
+
+useEffect(() => {
+ if (isInView) {
+ loadMoreUsers(offset)
+ }
+}, [isInView])
+
+return
{/* List of loaded tickets */}
+```
+
+## Step 3. Load tickets based on the offset
+
+Now we can load more tickets based on the current offset. We'll use the [range](https://supabase.com/docs/reference/javascript/range) method from the supabase-js library to easily work with the pagination logic.
+
+```jsx
+export default function TicketsPage() {
+ const PAGE_COUNT = 20
+ const [offset, setOffset] = useState(1)
+ const [isLoading, setIsLoading] = useState(false)
+ const [isInView, setIsInView] = useState(false)
+
+ useEffect(() => {
+ if (isInView) {
+ loadMoreTickets(offset)
+ }
+ }, [isInView])
+
+ const loadMoreTickets = async (offset: number) => {
+ setIsLoading(true)
+ // Every time we fetch, we want to increase
+ // the offset to load fresh tickets
+ setOffset((prev) => prev + 1)
+ const { data: newTickets } = await fetchTickets(offset, PAGE_COUNT)
+ // Merge new tickets with all previously loaded
+ setLoadedTickets((prevTickets) => [...prevTickets, ...newTickets])
+ setIsLoading(false)
+ }
+
+ const fetchTickets = async (offset, limit) => {
+ const from = offset * PAGE_COUNT
+ const to = from + PAGE_COUNT - 1
+
+ const { data } = await supabase!
+ .from('my_tickets_table')
+ .select('*')
+ .range(from, to)
+ .order('createdAt', { ascending: false })
+
+
+ return data
+ }
+}
+```
+
+## Step 4. Animate the tickets
+
+Now that we have our tickets loaded, we want to add some animation to make them pop like dominos as they appear on the screen. For this, we're going to use the [Framer Motion](https://www.framer.com/motion/) library.
+
+We'll wrap each ticket in a motion component and add a transition effect to stagger their appearance on the screen:
+
+```jsx
+import { motion } from 'framer-motion'
+
+// ...
+
+{
+ loadedTickets.map((ticket, index) => {
+ // each ticket will be delayed based on it's index
+ // but we need to subtract the delay from all the previously loaded tickets
+ const recalculatedDelay = i >= PAGE_COUNT * 2 ? (i - PAGE_COUNT * (offset - 1)) / 15 : i / 15
+
+ return (
+
+ {/* Actual ticket component */}
+
+ )
+ })
+}
+```
+
+With this code, each ticket will start with an opacity of 0 and a y position of 20. As it animates into view, it will fade in and move up to its final position. The delay for each ticket will be based on its index in the array, creating a nice staggered effect.
+
+## Step 5. Stop listening when finished
+
+Once all the tickets have been loaded, we want to stop listening to the scroll event to avoid unnecessary requests. We can do this by setting a state variable called `isLast` to true whenever the length of the response will be less than `PAGE_COUNT`:
+
+```jsx
+if (newTickets.length < PAGE_COUNT) {
+ setIsLast(true)
+}
+```
+
+We'll use this code to conditionally remove the event listener:
+
+```jsx
+useEffect(() => {
+ const handleDebouncedScroll = debounce(() => !isLast && handleScroll(), 200)
+ window.addEventListener('scroll', handleScroll)
+ return () => {
+ window.removeEventListener('scroll', handleScroll)
+ }
+}, [])
+```
+
+Now, when the `isLast` state variable is true, the event listener will be removed and the component will stop listening to the scroll event.
+
+## Wrap up
+
+That's it! We hope this post enabled you to build the next awesome infinite scroll.
+
+Here's the complete code:
+
+```jsx
+import { useEffect, useState, useRef } from 'react'
+import { createClient } from '@supabase/supabase-js'
+import { debounce } from 'lodash'
+import { motion } from 'framer-motion'
+
+const supabase = createClient('supabase-url', 'supabase-key')
+
+export default function TicketsPage({ tickets }) {
+ const PAGE_COUNT = 20
+ const containerRef = useRef(null)
+ const [loadedTickets, setLoadedTickets] = useState(tickets)
+ const [offset, setOffset] = useState(1)
+ const [isLoading, setIsLoading] = useState(false)
+ const [isInView, setIsInView] = useState(false)
+
+ const handleScroll = (container) => {
+ if (containerRef.current && typeof window !== 'undefined') {
+ const container = containerRef.current
+ const { bottom } = container.getBoundingClientRect()
+ const { innerHeight } = window
+ setIsInView((prev) => bottom <= innerHeight)
+ }
+ }
+
+ useEffect(() => {
+ const handleDebouncedScroll = debounce(() => !isLast && handleScroll(), 200)
+ window.addEventListener('scroll', handleScroll)
+ return () => {
+ window.removeEventListener('scroll', handleScroll)
+ }
+ }, [])
+
+ useEffect(() => {
+ if (isInView) {
+ loadMoreTickets(offset)
+ }
+ }, [isInView])
+
+ const loadMoreTickets = async (offset: number) => {
+ setIsLoading(true)
+ setOffset((prev) => prev + 1)
+ const { data: newTickets } = await fetchTickets(offset, PAGE_COUNT)
+ setLoadedTickets((prevTickets) => [...prevTickets, ...newTickets])
+ setIsLoading(false)
+ }
+
+ const fetchTickets = async (offset) => {
+ const from = offset * PAGE_COUNT
+ const to = from + PAGE_COUNT - 1
+
+ const { data } = await supabase!
+ .from('my_tickets_table')
+ .select('*')
+ .range(from, to)
+ .order('createdAt', { ascending: false })
+
+ return data
+ }
+
+ return (
+
+ )
+
+export const getServerSideProps: GetServerSideProps = async ({ req, res }) => {
+ const { data: tickets } = await supabase!
+ .from('my_tickets_table')
+ .select('*')
+ .order('createdAt', { ascending: false })
+ .limit(20)
+
+ return {
+ props: {
+ tickets,
+ },
+ }
+}
+```
+
+If you also want to feature in the endless tickets page and have a chance to win cool swag, you're invited to [generate your unique ticket](https://www.supabase.com/launch-week) until April 16th.
+
+See you at Launch Week! 👋
diff --git a/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx b/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx
new file mode 100644
index 00000000000..2a82e547dce
--- /dev/null
+++ b/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx
@@ -0,0 +1,292 @@
+---
+title: 'Designing with AI: Generating unique artwork for every user'
+description: Using MidJourney to generative artwork and serving ticket images with Edge Functions
+author: marijana,thor_schaeff
+image: launch-week-7/designing-with-ai-midjourney/header.png
+thumb: launch-week-7/designing-with-ai-midjourney/header.png
+launchweek: 7
+tags:
+ - launch-week
+date: '2023-04-07'
+toc_depth: 6
+---
+
+While Supabase Launch Weeks happen online, we love the idea of bringing everyone together as if it was an in-person conference. Our ticketing system is one of the ways that we emulate this.
+
+We have been issuing tickets since Launch Week 5, and they were so successful that we have done them ever since. It’s become a challenge to outdo the previous effort with something better every time.
+
+## Prompts with Midjourney
+
+You've probably heard of this "AI" tech, and most likely tired of the low-effort SkyNet memes. We wanted to do something more integrated with our developer/designer workflow. Something that we could share with developers & designers that they might find useful.
+
+[Midjourney](https://www.midjourney.com/) was where we started for art generation. We experimented with prompts, blends, and colors to create eye-catching visuals for each ticket connected to a GitHub profile. Some first attempts and ideas included prompts like:
+
+```
+/imagine abstract 3 layers of waves on a dark background with light refracting through it, very cool subtle minimal dark illustration, purple light leak with subtle highlights
+```
+
+In our exploration of different commands and prompts, we found that the `/blend` command was particularly enjoyable and helpful for creating the desired visuals. This command allowed us to quickly upload multiple images and experiment with different combinations and aesthetics to create a cohesive new image. For designers, the `/blend` command is like `/imagine` but visual, making it easy to visually experiment with different elements. Experiments included blurred edges, planetoid shapes, light leaks, shadows, swirls, motion blurs, waves, cubes, reflections, bokeh, and lots and lots of _“make it look really really blurred”_.
+
+
+
+After exploring a variety of text prompts, blends, and styles, we decided that most of the visuals we generated were too chaotic and busy for our Launch Week tickets. Images felt cluttered and overwhelming, making it difficult to read overlaid text. We shifted our focus to creating a cleaner, simpler aesthetic. This required a selective approach to the visual components we wanted to include.
+
+After what-seemed-like hours (okay, just a few), we were able to generate some interesting artwork that could be useful. We chose purple hues and simpler swirls - minimalist visuals that could serve as backgrounds for our tickets and landing page.
+
+
+
+### Chasing Gold Behind the Scenes
+
+When we were happy with the main visual for Launch Week 7, we also needed to create gold visuals for the extra special tickets, and those needed to look the same… but gold. Initially, we thought we could simply use the prompt `/imagine *seed number* make it gold` to generate the desired effect. To our surprise, MidJourney did not cooperate with this idea:
+
+
+
+We tried excluding certain elements, such as faces or circles to refine the output, and at one point every prompt ended with a `-- no faces, -- no circles, -- no gold bars ...`, but the occasional gold bars still appeared.
+
+We needed to come up with a different approach (even though this approach seemed more fun).
+
+Eventually, we just added a golden overlay gradient to previously generated images and then used `/blend` to blend the purple and the gold together.
+
+And voila, we had a baseline for generating variations:
+
+
+
+The final visual that you see everywhere won us over because of its vibrant swirls. While each swirl looks slightly different, a consistent style is still maintained throughout.
+
+Fortunately, we didn't require full-width images for each ticket. Upscaled MidJourney images sufficed. Nevertheless, we had to recreate the main visual on the landing page in vectors to use it effectively. You can view it in full glory at [https://supabase.com/launch-week](https://supabase.com/launch-week).
+
+
+
+## Open Graph images
+
+An important aspect of Launch Week tickets is their shareability. Each Launch Week we’ve been blown away by how many developers post their tickets on social channels (and we absolutely love seeing them!).
+
+When you share your unique ticket URL, the image shown on the social preview is called an Open Graph image (or OG image for short).
+
+These images are generated for each unique URL and ticket. This requires a bit of magic, which in our case means using a [Supabase Edge Function](https://supabase.com/docs/guides/functions) together with [Supabase Storage](https://supabase.com/docs/guides/storage) for smart caching.
+
+### Supabase Edge Function 🤝 Supabase Storage
+
+Our Edge Function handles the generation of each ticket image, and also does a bunch of other things under the hood, like detecting if the ticket was shared on socials. This will become important later!
+
+```jsx
+if (userAgent?.toLocaleLowerCase().includes('twitter')) {
+ // Attendee shared on Twitter
+ await supabaseAdminClient
+ .from('lw7_tickets')
+ .update({ sharedOnTwitter: 'now' })
+ .eq('username', username)
+ .is('sharedOnTwitter', null)
+} else if (userAgent?.toLocaleLowerCase().includes('linkedin')) {
+ // Attendee shared on LinkedIn
+ await supabaseAdminClient
+ .from('lw7_tickets')
+ .update({ sharedOnLinkedIn: 'now' })
+ .eq('username', username)
+ .is('sharedOnLinkedIn', null)
+}
+```
+
+We want to be as efficient as possible because generating a png file in an edge function is an expensive operation. We generate each ticket only once and then save it to Supabase Storage (which has a [smart CDN cache built in](https://supabase.com/blog/storage-image-resizing-smart-cdn#smart-cdn-deep-dive)).
+
+So in the first step we check if we can fetch the user’s image from storage:
+
+```tsx
+// Try to get image from Supabase Storage CDN.
+storageResponse = await fetch(
+ `${STORAGE_URL}/tickets/regular/${BUCKET_FOLDER_VERSION}/${username}.png`
+)
+```
+
+If we can’t find the image in storage, then we kick off the ticket generation pipeline, using Vercel’s awesome [open-source satori library](https://github.com/vercel/satori) transforms HTML & CSS into svgs!
+
+Each image includes the user’s GitHub details. We use [`supabase-js`](https://supabase.com/docs/reference/javascript/installing) for authentication: users log in with their GitHub account and we store their username in a table in Postgres.
+
+Since this table includes email addresses, we secure it using [RLS](https://supabase.com/docs/guides/auth/row-level-security) to ensure each user can only view their own data. At the same time, we want these tickets to be publicly shareable, and that’s where [Postgres Views](https://supabase.com/blog/postgresql-views) come in handy.
+
+By creating a view, we can selectively publicize parts of our table and also compute some additional values on the fly:
+
+```sql
+drop
+ view if exists lw7_tickets_golden;
+
+create
+or replace view lw7_tickets_golden as
+with
+ lw7_referrals as (
+ select
+ referred_by,
+ count(*) as referrals
+ from
+ lw7_tickets
+ where
+ referred_by is not null
+ group by
+ referred_by
+ )
+select
+ lw7_tickets."id",
+ lw7_tickets."name",
+ lw7_tickets."username",
+ lw7_tickets."ticketNumber",
+ lw7_tickets."createdAt",
+ lw7_tickets."sharedOnTwitter",
+ lw7_tickets."sharedOnLinkedIn",
+ lw7_tickets."bg_image_id",
+ case
+ when lw7_referrals.referrals is null then 0
+ ELSE lw7_referrals.referrals
+ end as referrals,
+ case
+ when lw7_tickets."sharedOnTwitter" is not null
+ and lw7_tickets."sharedOnLinkedIn" is not null then true
+ else false
+ end as golden
+from
+ lw7_tickets
+ left outer join lw7_referrals on lw7_tickets.username = lw7_referrals.referred_by;
+
+select
+ *
+from
+ lw7_tickets_golden
+```
+
+We can now retrieve that username by using the following code:
+
+```jsx
+// Get ticket data
+const { data, error } = await supabaseAdminClient
+ .from('lw7_tickets_golden')
+ .select('name, ticketNumber, golden, bg_image_id')
+ .eq('username', username)
+ .maybeSingle()
+if (error) console.log(error.message)
+if (!data) throw new Error('user not found')
+const { name, ticketNumber, bg_image_id } = data
+const golden = data?.golden ?? false
+```
+
+You can now probably guess why our edge function was tracking requests from the Twitter and LinkedIn bots! That’s exactly the condition used to turn your ticket golden. How cool is that, with the power of Postgres, we can do all of this within the Database, absolutely mind-blowing. Also, we can easily track a referral count. Relational DBs for the win!
+
+With our public view in place, we can now easily retrieve the relevant ticket details needed to generate the image, via `supabase-js`:
+
+The ticket image itself is just a layering of some background images, your GitHub profile picture, and some text elements, et voila you’ve got yourself a unique ticket image!
+
+
+
+ 
+
+ Main background image
+
+
+
+
+ 
+ Ticket outline
+
+
+
+ 
+ Random AI generated background for the ticket outline
+
+
+
+ 
+ Layer it all together and put some nice text on top and you got yourself a beautiful ticket!
+
+
+
+Once generated, we can conveniently upload the image to Supabase Storage using `supabase-js`. This ensures fast response times as well as efficient resource usage.
+
+```jsx
+const type = golden ? 'golden' : 'regular'
+
+// Upload image to storage.
+const { error: storageError } = await supabaseAdminClient.storage
+ .from('images')
+ .upload(`lw7/tickets/${type}/${BUCKET_FOLDER_VERSION}/${username}.png`, generatedImage.body, {
+ contentType: 'image/png',
+ cacheControl: '31536000',
+ upsert: false,
+ })
+```
+
+And of course, all of this is open source, you can find the full function code [here](https://github.com/supabase/supabase/tree/master/apps/www/supabase/functions/lw7-ticket-og). Please feel free to utilize it for your own Launches!
+
+### Turning tickets golden in realtime
+
+Using the power of the entire Supabase stack, we’ve designed a pretty neat mechanic to allow users to turn their tickets golden.
+
+In previous Launch Weeks, we employed the [fibonacci sequence](https://en.wikipedia.org/wiki/Fibonacci_sequence) to sprinkle golden tickets around using the ticket number sequence. This time around we wanted to make it more interactive and allow the user to earn their golden ticket, increasing their chance to win swag.
+
+Remember the Twitter and LinkedIn bot detection from above? We use those to generate the `golden` column in our public view:
+
+```sql
+case
+ when lw7_tickets."sharedOnTwitter" is not null
+ and lw7_tickets."sharedOnLinkedIn" is not null then true
+ else false
+end as golden
+```
+
+As folks are sharing their tickets on socials to earn their gold status, we also want to give them realtime feedback on their progress. Luckily we also have a feature for that, [Supabase Realtime](https://supabase.com/realtime).
+
+Something that would have been a headache in the past is just a couple of lines of client-side JavaScript:
+
+```jsx
+const channel = supabase
+ .channel('changes')
+ .on(
+ 'postgres_changes',
+ {
+ event: 'UPDATE',
+ schema: 'public',
+ table: 'lw7_tickets',
+ filter: `username=eq.${username}`,
+ },
+ (payload) => {
+ const golden = !!payload.new.sharedOnTwitter && !!payload.new.sharedOnLinkedIn
+ setUserData({
+ ...payload.new,
+ golden,
+ })
+ if (golden) {
+ channel.unsubscribe()
+ }
+ }
+ )
+ .subscribe()
+```
+
+Interested to know how this fits within your Next.js application? Find the code [here](https://github.com/supabase/supabase/blob/master/apps/www/components/LaunchWeek/Ticket/TicketForm.tsx#L70-L102).
+
+## Displaying the images
+
+We have some images, so how can we now display them somewhere? [@Francesco Sansalvadore](https://twitter.com/frnk_snslvdr) saw one of our team members trying to “swipe” on the tickets slider component on the [launch week page](https://supabase.com/launch-week/tickets) and he thought, why not feature all the fantastic people who generated tickets on a single page?
+
+We built a [ticket wall](https://supabase.com/launch-week/tickets) that you can scroll endlessly. We approached it with an infinite scroll technique, lazy-loading a few tickets at a time.
+
+
+
+If you’re interested in a more detailed step-by-step guide to reproduce this effect, take a look at the [Infinite scroll with Next.js, Framer Motion, and Supabase](/blog/infinite-scroll-with-nextjs-framer-motion) blog post.
+
+## Get your ticket
+
+You too can also be Charlie Bucket and have a Golden Ticket. There is no chocolate factory, however, but we do have some amazing swag to win.
+
+Up for grabs are:
+
+- Supabase mechanical keyboard. In fact, we have 3 of them to give away!\_ Guaranteed to annoy your co-workers/cat/partner/ yourself.
+- Socks: _Perfect for your `
+ ++
+ ++
+ ++
+ {DATE}
+ ++ + ) +} diff --git a/apps/www/components/LaunchWeek/Ticket/TicketProfile.tsx b/apps/www/components/LaunchWeek/Ticket/TicketProfile.tsx new file mode 100644 index 00000000000..965171407f5 --- /dev/null +++ b/apps/www/components/LaunchWeek/Ticket/TicketProfile.tsx @@ -0,0 +1,86 @@ +// import GithubIcon from '~/components/LaunchWeek/Ticket/icons/icon-github' +import cn from 'classnames' +import TicketForm from './TicketForm' +// import IconAvatar from '~/components/LaunchWeek/Ticket/icons/icon-avatar' +import styles from './ticket-profile.module.css' +import Image from 'next/image' + +type TicketGenerationState = 'default' | 'loading' +type Props = { + name?: string + username?: string + size?: number + ticketGenerationState?: TicketGenerationState + setTicketGenerationState?: (ticketGenerationState: TicketGenerationState) => void + golden?: boolean +} + +// The middle part of the ticket +// avatar / Yourn Name / Username +export default function TicketProfile({ + name, + username, + size = 1, + ticketGenerationState, + setTicketGenerationState, + golden = false, +}: Props) { + return ( ++ {/* Mobile line */} +++ ++ {/* Vertical line: desktop */} ++ +++ {ticketNumberText} +++ {username && ( + + {username ? ( ++ ) +} diff --git a/apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx b/apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx new file mode 100644 index 00000000000..be31e8c231c --- /dev/null +++ b/apps/www/components/LaunchWeek/Ticket/TicketVisual.tsx @@ -0,0 +1,130 @@ +import styles from './ticket-visual.module.css' +import TicketProfile from './TicketProfile' +import TicketNumber from './TicketNumber' +import Tilt from 'vanilla-tilt' +import useConfData from '~/components/LaunchWeek/Ticket/hooks/use-conf-data' +import TicketHeader from './TicketHeader' +import { useEffect, useRef, useState } from 'react' +import Image from 'next/image' + +type TicketGenerationState = 'default' | 'loading' +type Props = { + size?: number + name?: string + ticketNumber?: number + bgImageId?: number + username?: string + ticketGenerationState?: TicketGenerationState + setTicketGenerationState?: any + golden?: boolean +} + +export default function TicketVisual({ + size = 1, + name, + username, + bgImageId, + ticketNumber, + ticketGenerationState = 'default', + setTicketGenerationState, + golden = false, +}: Props) { + const { session } = useConfData() + const [imageIsLoading, setImageIsLoading] = useState(true) + const ticketRef = useRef