diff --git a/.github/workflows/autofix_linters.yml b/.github/workflows/autofix_linters.yml
new file mode 100644
index 00000000000..ca8882d7e04
--- /dev/null
+++ b/.github/workflows/autofix_linters.yml
@@ -0,0 +1,58 @@
+name: Autofix Linting Checks
+
+on:
+ pull_request:
+ types:
+ - labeled
+
+# Cancel old builds on new commit for same workflow + branch/PR
+concurrency:
+ group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+ cancel-in-progress: true
+
+jobs:
+ autofix:
+ runs-on: ubuntu-latest
+ permissions:
+ contents: write
+ if: ${{ github.event_name == 'pull_request' && (github.event.label.name == 'autofix') }}
+ steps:
+ - name: Calculate number of commits
+ run: echo "PR_FETCH_DEPTH=$(( ${{ github.event.pull_request.commits }} + 1 ))" >> "${GITHUB_ENV}"
+
+ - uses: actions/checkout@v4
+ with:
+ ref: ${{ github.head_ref }}
+ sparse-checkout: apps
+ fetch-depth: ${{ env.PR_FETCH_DEPTH }}
+
+ - uses: actions/setup-node@v4
+ with:
+ node-version-file: '.nvmrc'
+
+ # Installing all dependencies takes up to three minutes, hacking around to only installing prettier+deps
+ - name: Install required dependencies
+ run: |
+ rm package.json
+ rm package-lock.json
+ npm i prettier@4.0.0-alpha.8 prettier-plugin-sql-cst
+
+ - name: Run Prettier in fix mode
+ run: |
+ npx prettier --write 'apps/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'
+
+ - name: Commit changes and push to existing branch
+ run: |
+ git checkout -- package.json
+ git checkout -- package-lock.json
+ git config --global user.name 'github-tidy-bot'
+ git config --global user.email 'github-tidy-bot@supabase.com'
+ if [[ `git status --porcelain` ]]; then
+ echo "[bot] Changes detected, committing."
+
+ echo "[bot] Running in non-squash mode."
+ git commit -am "ci: Autofix updates from GitHub workflow"
+ git push
+ else
+ echo "[bot] No changes detected, nothing to commit."
+ fi
diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
index 379248ed601..886a2d41b40 100644
--- a/.github/workflows/prettier.yml
+++ b/.github/workflows/prettier.yml
@@ -27,7 +27,7 @@ jobs:
run: |
rm package.json
rm package-lock.json
- npm i prettier@2 prettier-plugin-sql-cst
+ npm i prettier@4.0.0-alpha.8 prettier-plugin-sql-cst
- name: Run prettier
run: |-
npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'
@@ -50,7 +50,7 @@ jobs:
run: |
rm package.json
rm package-lock.json
- npm i prettier@2 prettier-plugin-sql-cst
+ npm i prettier@4.0.0-alpha.8 prettier-plugin-sql-cst
- name: Run prettier
run: |-
npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,mdx,json}'
@@ -63,13 +63,14 @@ jobs:
with:
sparse-checkout: |
apps/docs/pages
+ apps/docs/content
# Installing all dependencies takes up to three minutes, hacking around to only installing prettier+deps
- name: Download dependencies
run: |
rm package.json
rm package-lock.json
- npm i prettier@2 prettier-plugin-sql-cst
+ npm i prettier@4.0.0-alpha.8 prettier-plugin-sql-cst
- name: Run prettier
run: |-
# Check mdx files which contain sql code blocks
- grep -lr '```sql' apps/docs/pages/**/*.mdx | xargs npx prettier -c
+ grep -lr '```sql' apps/docs/{pages,content}/**/*.mdx | xargs npx prettier -c
diff --git a/.github/workflows/search.yml b/.github/workflows/search.yml
index 2fc6b8cd510..b1dd9b1d57a 100644
--- a/.github/workflows/search.yml
+++ b/.github/workflows/search.yml
@@ -38,6 +38,7 @@ jobs:
with:
sparse-checkout: |
apps/docs
+ apps/www/.env.local.example
supabase
- name: Setup node
@@ -54,6 +55,10 @@ jobs:
- name: Run migrations
run: npx supabase db push
+ # Need the miscellaneous use API, which is available publicly (by design) in www
+ - name: Copy environment variables
+ run: cp apps/www/.env.local.example apps/docs/.env
+
- name: Update embeddings
working-directory: ./apps/docs
if: ${{ !inputs.refresh }}
diff --git a/.prettierrc b/.prettierrc
index c60d3ab91ef..5609026b6f4 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -7,5 +7,11 @@
"endOfLine": "lf",
"sqlKeywordCase": "lower",
"pluginSearchDirs": false,
- "plugins": ["prettier-plugin-sql-cst"]
+ "plugins": ["prettier-plugin-sql-cst"],
+ "overrides": [
+ {
+ "files": "**/*.json",
+ "options": { "parser": "json" }
+ }
+ ]
}
diff --git a/README.md b/README.md
index 069f098bdde..a3cd29f08a3 100644
--- a/README.md
+++ b/README.md
@@ -39,7 +39,6 @@ To see how to Contribute, visit [Getting Started](./DEVELOPERS.md)
- [Email Support](https://supabase.com/docs/support#business-support). Best for: problems with your database or infrastructure.
- [Discord](https://discord.supabase.com). Best for: sharing your applications and hanging out with the community.
-
## How it works
Supabase is a combination of open source tools. We’re building the features of Firebase using enterprise-grade, open source products. If the tools and communities exist, with an MIT, Apache 2, or equivalent open license, we will use and support that tool. If the tool doesn't exist, we build and open source it ourselves. Supabase is not a 1-to-1 mapping of Firebase. Our aim is to give developers a Firebase-like developer experience using open source tools.
@@ -49,7 +48,7 @@ Supabase is a combination of open source tools. We’re building the features of
Supabase is a [hosted platform](https://supabase.com/dashboard). You can sign up and start using Supabase without installing anything.
You can also [self-host](https://supabase.com/docs/guides/hosting/overview) and [develop locally](https://supabase.com/docs/guides/local-development).
-
+
- [Postgres](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.
diff --git a/apps/database-new/app/[threadId]/[runId]/UserChat.tsx b/apps/database-new/app/[threadId]/[runId]/UserChat.tsx
index 8abc0683a6e..f1457b55ff6 100644
--- a/apps/database-new/app/[threadId]/[runId]/UserChat.tsx
+++ b/apps/database-new/app/[threadId]/[runId]/UserChat.tsx
@@ -138,8 +138,8 @@ const UserChat = ({ message, isLatest, times, run }: UserChatProps) => {
{replyDuration !== undefined
? ` with ${replyDuration}s response`
: isLoading
- ? ', generating response...'
- : ''}
+ ? ', generating response...'
+ : ''}
)}
diff --git a/apps/database-new/app/globals.css b/apps/database-new/app/globals.css
index bbe375023cc..11c393d6b2d 100644
--- a/apps/database-new/app/globals.css
+++ b/apps/database-new/app/globals.css
@@ -8,56 +8,64 @@
@font-face {
font-family: 'circular';
- src: url(/fonts/custom/CustomFont-Book.woff2) format('woff2'),
+ src:
+ url(/fonts/custom/CustomFont-Book.woff2) format('woff2'),
url(/fonts/custom/CustomFont-Book.woff) format('woff');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'circular';
- src: url(/fonts/custom/CustomFont-BookItalic.woff2) format('woff2'),
+ src:
+ url(/fonts/custom/CustomFont-BookItalic.woff2) format('woff2'),
url(/fonts/custom/CustomFont-BookItalic.woff) format('woff');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'circular';
- src: url(/fonts/custom/CustomFont-Medium.woff2) format('woff2'),
+ src:
+ url(/fonts/custom/CustomFont-Medium.woff2) format('woff2'),
url(/fonts/custom/CustomFont-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'circular';
- src: url(/fonts/custom/CustomFont-MediumItalic.woff2) format('woff2'),
+ src:
+ url(/fonts/custom/CustomFont-MediumItalic.woff2) format('woff2'),
url(/fonts/custom/CustomFont-MediumItalic.woff) format('woff');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'circular';
- src: url(/fonts/custom/CustomFont-Bold.woff2) format('woff2'),
+ src:
+ url(/fonts/custom/CustomFont-Bold.woff2) format('woff2'),
url(/fonts/custom/CustomFont-Bold.woff) format('woff');
font-weight: 700;
font-style: 600;
}
@font-face {
font-family: 'circular';
- src: url(/fonts/custom/CustomFont-BoldItalic.woff2) format('woff2'),
+ src:
+ url(/fonts/custom/CustomFont-BoldItalic.woff2) format('woff2'),
url(/fonts/custom/CustomFont-BoldItalic.woff) format('woff');
font-style: 600;
font-style: italic;
}
@font-face {
font-family: 'circular';
- src: url(/fonts/custom/CustomFont-Black.woff2) format('woff2'),
+ src:
+ url(/fonts/custom/CustomFont-Black.woff2) format('woff2'),
url(/fonts/custom/CustomFont-Black.woff) format('woff');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'circular';
- src: url(/fonts/custom/CustomFont-BlackItalic.woff2) format('woff2'),
+ src:
+ url(/fonts/custom/CustomFont-BlackItalic.woff2) format('woff2'),
url(/fonts/custom/CustomFont-BlackItalic.woff) format('woff');
font-weight: 800;
font-style: italic;
@@ -66,7 +74,8 @@
@font-face {
font-family: 'source code pro';
src: url('/fonts/source-code-pro/SourceCodePro-Regular.eot');
- src: url('/fonts/source-code-pro/SourceCodePro-Regular.woff2') format('woff2'),
+ src:
+ url('/fonts/source-code-pro/SourceCodePro-Regular.woff2') format('woff2'),
url('/fonts/source-code-pro/SourceCodePro-Regular.woff') format('woff'),
url('/fonts/source-code-pro/SourceCodePro-Regular.ttf') format('truetype'),
url('/fonts/source-code-pro/SourceCodePro-Regular.svg#SourceCodePro-Regular') format('svg');
diff --git a/apps/database-new/components/Header/ThemeSwitcher.tsx b/apps/database-new/components/Header/ThemeSwitcher.tsx
index 6ae241f5823..02f72e47752 100644
--- a/apps/database-new/components/Header/ThemeSwitcher.tsx
+++ b/apps/database-new/components/Header/ThemeSwitcher.tsx
@@ -1,5 +1,5 @@
'use client'
-import ThemeToggle from '@ui/components/ThemeProvider/ThemeToggle'
+import { ThemeToggle } from 'ui-patterns/ThemeToggle'
export default function ThemeSwitcher() {
return
diff --git a/apps/database-new/next.config.js b/apps/database-new/next.config.js
index 5bbe7d31982..9de7ef8a94c 100644
--- a/apps/database-new/next.config.js
+++ b/apps/database-new/next.config.js
@@ -1,6 +1,6 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
- transpilePackages: ['ui'],
+ transpilePackages: ['ui', 'ui-patterns'],
webpack: (config, { dev, isServer, webpack, nextRuntime }) => {
config.module.rules.push({
test: /\.node$/,
diff --git a/apps/database-new/package.json b/apps/database-new/package.json
index db88150b75c..a57afb3a814 100644
--- a/apps/database-new/package.json
+++ b/apps/database-new/package.json
@@ -17,7 +17,7 @@
"common": "*",
"config": "*",
"dayjs": "^1.11.10",
- "eslint-config-next": "^14.0.3",
+ "eslint-config-next": "^14.1.0",
"lodash": "^4.17.21",
"lucide-react": "^0.292.0",
"next": "^14.0.3",
@@ -27,6 +27,7 @@
"react-flow": "^1.0.3",
"sql-formatter": "^13.1.0",
"ui": "*",
+ "ui-patterns": "*",
"valtio": "^1.12.0",
"zod": "^3.22.4"
},
diff --git a/apps/database-new/tailwind.config.js b/apps/database-new/tailwind.config.js
index 394569fad16..f64d449ed98 100644
--- a/apps/database-new/tailwind.config.js
+++ b/apps/database-new/tailwind.config.js
@@ -5,8 +5,8 @@ export default config({
'./pages/**/*.{ts,tsx}',
'./components/**/*.{ts,tsx}',
'./app/**/*.{ts,tsx}',
- './src/**/*.{ts,tsx}',
'../../packages/ui/src/**/*.{tsx,ts,js}',
+ '../../packages/ui-patterns/**/*.{tsx,ts,js}',
],
theme: {
extend: {
diff --git a/apps/database-new/types/supabase.ts b/apps/database-new/types/supabase.ts
index 6a883759f1d..7050f57386e 100644
--- a/apps/database-new/types/supabase.ts
+++ b/apps/database-new/types/supabase.ts
@@ -46,7 +46,7 @@ export interface Database {
columns: ['user_id']
referencedRelation: 'users'
referencedColumns: ['id']
- }
+ },
]
}
responses_ai: {
@@ -92,7 +92,7 @@ export interface Database {
columns: ['user_id']
referencedRelation: 'users'
referencedColumns: ['id']
- }
+ },
]
}
threads: {
@@ -132,7 +132,7 @@ export interface Database {
columns: ['user_id']
referencedRelation: 'users'
referencedColumns: ['id']
- }
+ },
]
}
}
diff --git a/apps/docs/.gitignore b/apps/docs/.gitignore
index 155cb496ae3..b18b47afe4b 100644
--- a/apps/docs/.gitignore
+++ b/apps/docs/.gitignore
@@ -23,7 +23,3 @@ yarn-error.log*
**/*/generated/**/*
!**/*/generated/.gitkeep
!**/*/generated/**/.gitkeep
-
-# Temporary to avoid storing a lot of duplicate Markdown
-# before finalizing the codemod
-/content
diff --git a/apps/docs/components/AppleSecretGenerator.tsx b/apps/docs/components/AppleSecretGenerator/AppleSecretGenerator.tsx
similarity index 100%
rename from apps/docs/components/AppleSecretGenerator.tsx
rename to apps/docs/components/AppleSecretGenerator/AppleSecretGenerator.tsx
diff --git a/apps/docs/components/AppleSecretGenerator/index.tsx b/apps/docs/components/AppleSecretGenerator/index.tsx
new file mode 100644
index 00000000000..ea66eadd23a
--- /dev/null
+++ b/apps/docs/components/AppleSecretGenerator/index.tsx
@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const Generator = lazy(() => import('./AppleSecretGenerator'))
+
+export function AppleSecretGenerator() {
+ return (
+
+
+
+ )
+}
diff --git a/apps/docs/components/AuthProviders.tsx b/apps/docs/components/AuthProviders.tsx
index ec9b59a1e3f..1c1950ff87c 100644
--- a/apps/docs/components/AuthProviders.tsx
+++ b/apps/docs/components/AuthProviders.tsx
@@ -1,5 +1,5 @@
+import { IconPanel } from 'ui-patterns/IconPanel'
import providers from '../data/authProviders'
-import { IconPanel } from 'ui'
import Link from 'next/link'
export default function AuthProviders({ type }: { type: string }) {
diff --git a/apps/docs/components/Extensions.tsx b/apps/docs/components/Extensions.tsx
index d8ca49e3c69..7a1e76e5537 100644
--- a/apps/docs/components/Extensions.tsx
+++ b/apps/docs/components/Extensions.tsx
@@ -1,7 +1,8 @@
import Link from 'next/link'
import React, { useState } from 'react'
import { extensions } from 'shared-data'
-import { GlassPanel, IconX, Input } from 'ui'
+import { IconX, Input } from 'ui'
+import { GlassPanel } from 'ui-patterns/GlassPanel'
type Extension = {
name: string
diff --git a/apps/docs/components/HomePageCover.tsx b/apps/docs/components/HomePageCover.tsx
index d9a603be207..d9ee30ad170 100644
--- a/apps/docs/components/HomePageCover.tsx
+++ b/apps/docs/components/HomePageCover.tsx
@@ -1,7 +1,8 @@
import Link from 'next/link'
-import { IconBackground, IconPanel, IconPlay } from 'ui'
+import { IconBackground, IconPlay } from 'ui'
import { useBreakpoint } from 'common'
import DocsCoverLogo from './DocsCoverLogo'
+import { IconPanel } from 'ui-patterns/IconPanel'
const HomePageCover = (props) => {
const isXs = useBreakpoint(639)
@@ -74,7 +75,7 @@ const HomePageCover = (props) => {
-
+
Getting Started
diff --git a/apps/docs/components/Mermaid/Mermaid.tsx b/apps/docs/components/Mermaid/Mermaid.tsx
new file mode 100644
index 00000000000..e2607613ccf
--- /dev/null
+++ b/apps/docs/components/Mermaid/Mermaid.tsx
@@ -0,0 +1,2 @@
+import { Mermaid } from 'mdx-mermaid/lib/Mermaid'
+export default Mermaid
diff --git a/apps/docs/components/Mermaid/index.tsx b/apps/docs/components/Mermaid/index.tsx
new file mode 100644
index 00000000000..b73a5d8033d
--- /dev/null
+++ b/apps/docs/components/Mermaid/index.tsx
@@ -0,0 +1,11 @@
+import { Suspense, lazy } from 'react'
+
+const MermaidHeavy = lazy(() => import('./Mermaid'))
+
+export function Mermaid(props) {
+ return (
+
+
+
+ )
+}
diff --git a/apps/docs/components/NavData.tsx b/apps/docs/components/NavData.tsx
new file mode 100644
index 00000000000..8fb29b5fa23
--- /dev/null
+++ b/apps/docs/components/NavData.tsx
@@ -0,0 +1,14 @@
+import { ReactNode } from 'react'
+
+import { navDataForMdx } from './Navigation/NavigationMenu/NavigationMenu.constants'
+
+export function NavData({
+ data,
+ children,
+}: {
+ data: keyof typeof navDataForMdx
+ children: (navItems: (typeof navDataForMdx)[keyof typeof navDataForMdx]) => ReactNode
+}) {
+ const navItems = navDataForMdx[data]
+ return children(navItems)
+}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index ec26db6379d..381cb046e77 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -614,6 +614,10 @@ export const auth = {
url: undefined,
items: [
{ name: 'Overview', url: '/guides/auth/server-side/overview' },
+ {
+ name: 'Next.js guide',
+ url: '/guides/auth/server-side/nextjs',
+ },
{
name: 'Creating a client',
url: '/guides/auth/server-side/creating-a-client',
@@ -653,20 +657,20 @@ export const auth = {
items: [
{
name: 'Part One: JWTs',
- url: '/learn/auth-deep-dive/auth-deep-dive-jwts',
+ url: '/guides/auth/auth-deep-dive/auth-deep-dive-jwts',
},
{
name: 'Part Two: Row Level Security',
- url: '/learn/auth-deep-dive/auth-row-level-security',
+ url: '/guides/auth/auth-deep-dive/auth-row-level-security',
},
{
name: 'Part Three: Policies',
- url: '/learn/auth-deep-dive/auth-policies',
+ url: '/guides/auth/auth-deep-dive/auth-policies',
},
- { name: 'Part Four: GoTrue', url: '/learn/auth-deep-dive/auth-gotrue' },
+ { name: 'Part Four: GoTrue', url: '/guides/auth/auth-deep-dive/auth-gotrue' },
{
name: 'Part Five: Google OAuth',
- url: '/learn/auth-deep-dive/auth-google-oauth',
+ url: '/guides/auth/auth-deep-dive/auth-google-oauth',
},
],
},
@@ -751,6 +755,10 @@ export const database: NavMenuConstant = {
url: '/guides/database/postgres/roles',
},
{ name: 'Managing secrets with Vault', url: '/guides/database/vault' },
+ {
+ name: 'Superuser Access and Unsupported Operations',
+ url: '/guides/database/postgres/roles-superuser',
+ },
],
},
{
@@ -938,6 +946,10 @@ export const database: NavMenuConstant = {
name: 'Print PostgreSQL Version',
url: '/guides/database/postgres/which-version-of-postgres',
},
+ {
+ name: 'Replicating from Supabase to External Postgres',
+ url: '/guides/database/postgres/setup-replication-external',
+ },
],
},
],
@@ -1622,6 +1634,10 @@ export const platform: NavMenuConstant = {
name: 'Enterprise Billing',
url: '/guides/platform/enterprise-billing',
},
+ {
+ name: 'Billing FAQ',
+ url: '/guides/platform/billing-faq',
+ },
],
},
{
@@ -2110,3 +2126,9 @@ export const references = [
],
},
]
+
+export const navDataForMdx = {
+ nativeMobileLoginItems: NativeMobileLoginItems,
+ phoneLoginsItems: PhoneLoginsItems,
+ socialLoginItems: SocialLoginItems,
+}
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
index c5727f3b2a6..5ac5557f0d9 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
@@ -4,8 +4,7 @@ import Link from 'next/link'
import { FC } from 'react'
import { Button, IconCommand, IconGitHub, IconSearch, SearchButton } from 'ui'
import { useIsLoggedIn, useIsUserLoading } from 'common'
-
-import ThemeToggle from '@ui/components/ThemeProvider/ThemeToggle'
+import { ThemeToggle } from 'ui-patterns/ThemeToggle'
const TopNavBar: FC = () => {
const isLoggedIn = useIsLoggedIn()
diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx
index fa68260238a..5f2047470bd 100644
--- a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx
+++ b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.ComboBox.tsx
@@ -64,8 +64,8 @@ export function ComboBox({
{isLoading
? 'Loading...'
: options.length === 0
- ? `No ${name} found`
- : selectedOptionDisplayName ?? `Select a ${name}...`}
+ ? `No ${name} found`
+ : selectedOptionDisplayName ?? `Select a ${name}...`}
diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx
index dfe36c3b34d..b316a6cdbb8 100644
--- a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx
+++ b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.tsx
@@ -98,14 +98,14 @@ function OrgProjectSelector() {
const stateSummary: ProjectOrgDataState = isUserLoading
? 'userLoading'
: !isLoggedIn
- ? 'loggedOut'
- : anyIsPending
- ? 'loggedIn.dataPending'
- : anyIsError
- ? 'loggedIn.dataError'
- : projects?.length === 0
- ? 'loggedIn.dataSuccess.hasNoData'
- : 'loggedIn.dataSuccess.hasData'
+ ? 'loggedOut'
+ : anyIsPending
+ ? 'loggedIn.dataPending'
+ : anyIsError
+ ? 'loggedIn.dataError'
+ : projects?.length === 0
+ ? 'loggedIn.dataSuccess.hasNoData'
+ : 'loggedIn.dataSuccess.hasData'
const formattedData: ComboBoxOption[] = useMemo(
() =>
@@ -194,16 +194,16 @@ function BranchSelector() {
const stateSummary: BranchesDataState = userLoading
? 'userLoading'
: !isLoggedIn
- ? 'loggedOut'
- : !hasBranches
- ? 'loggedIn.noBranches'
- : isPending
- ? 'loggedIn.branches.dataPending'
- : isError
- ? 'loggedIn.branches.dataError'
- : data.length === 0
- ? 'loggedIn.branches.dataSuccess.noData'
- : 'loggedIn.branches.dataSuccess.hasData'
+ ? 'loggedOut'
+ : !hasBranches
+ ? 'loggedIn.noBranches'
+ : isPending
+ ? 'loggedIn.branches.dataPending'
+ : isError
+ ? 'loggedIn.branches.dataError'
+ : data.length === 0
+ ? 'loggedIn.branches.dataSuccess.noData'
+ : 'loggedIn.branches.dataSuccess.hasData'
const formattedData: ComboBoxOption[] =
stateSummary !== 'loggedIn.branches.dataSuccess.hasData'
@@ -282,14 +282,14 @@ function VariableView({ variable, className }: { variable: Variable; className?:
const stateSummary: VariableDataState = isUserLoading
? 'userLoading'
: !isLoggedIn
- ? 'loggedOut'
- : !ref
- ? 'loggedIn.noSelectedProject'
- : isPending
- ? 'loggedIn.selectedProject.dataPending'
- : isError
- ? 'loggedIn.selectedProject.dataError'
- : 'loggedIn.selectedProject.dataSuccess'
+ ? 'loggedOut'
+ : !ref
+ ? 'loggedIn.noSelectedProject'
+ : isPending
+ ? 'loggedIn.selectedProject.dataPending'
+ : isError
+ ? 'loggedIn.selectedProject.dataError'
+ : 'loggedIn.selectedProject.dataSuccess'
let variableValue: string = null
if (stateSummary === 'loggedIn.selectedProject.dataSuccess') {
@@ -319,8 +319,8 @@ function VariableView({ variable, className }: { variable: Variable; className?:
stateSummary === 'loggedIn.selectedProject.dataPending'
? 'Loading...'
: stateSummary === 'loggedIn.selectedProject.dataSuccess'
- ? variableValue
- : `YOUR ${prettyFormatVariable[variable].toUpperCase()}`
+ ? variableValue
+ : `YOUR ${prettyFormatVariable[variable].toUpperCase()}`
}
/>
diff --git a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.utils.ts b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.utils.ts
index a0659cf8aca..519c40c25e0 100644
--- a/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.utils.ts
+++ b/apps/docs/components/ProjectConfigVariables/ProjectConfigVariables.utils.ts
@@ -8,6 +8,26 @@ export type Branch = BranchesData[number]
export type Variable = 'url' | 'anonKey'
+function removeDoubleQuotes(str: string) {
+ return str.replaceAll('"', '')
+}
+
+function escapeDoubleQuotes(str: string) {
+ return str.replaceAll('"', '\\"')
+}
+
+function unescapeDoubleQuotes(str: string) {
+ /**
+ * Regex matches a backslash followed by a double quote, except when the
+ * backslash is escaped.
+ *
+ * Negative lookbehind:
+ * \\(?:\\\\)* -> An odd number of backslashes (means the next backslash is escaped)
+ * (?:^|[^\\]) -> Backslash group is at start or follows non-backslash
+ */
+ return str.replace(/(? = {
url: 'Project URL',
anonKey: 'Anon key',
@@ -18,15 +38,19 @@ export function toDisplayNameOrgProject(org: Org, project: Project) {
}
export function toOrgProjectValue(org: Org, project: Project) {
- // @ts-ignore -- problem in OpenAPI spec -- project has ref property
- return JSON.stringify([org.id, project.ref, toDisplayNameOrgProject(org, project)])
+ return escapeDoubleQuotes(
+ // @ts-ignore -- problem in OpenAPI spec -- project has ref property
+ JSON.stringify([org.id, project.ref, removeDoubleQuotes(toDisplayNameOrgProject(org, project))])
+ )
}
export function fromOrgProjectValue(
maybeOrgProject: string
): [string, string, string] | [null, null, null] {
try {
- const data = JSON.parse(maybeOrgProject)
+ // not restoring the double quotes on the display name is fine because it's only used for
+ // command fuzzy search, not for exact/literal matching
+ const data = JSON.parse(unescapeDoubleQuotes(maybeOrgProject))
if (!Array.isArray(data) || data.length !== 3) {
throw Error("Shape of parsed JSON doesn't match form of org and project value")
}
@@ -37,12 +61,14 @@ export function fromOrgProjectValue(
}
export function toBranchValue(branch: Branch) {
- return JSON.stringify([branch.id, branch.name])
+ return escapeDoubleQuotes(JSON.stringify([branch.id, removeDoubleQuotes(branch.name)]))
}
export function fromBranchValue(maybeBranch: string): [string, string] | [null, null] {
try {
- const data = JSON.parse(maybeBranch)
+ // not restoring the double quotes on the branch name is fine because it's only used for
+ // command fuzzy search, not for exact/literal matching
+ const data = JSON.parse(unescapeDoubleQuotes(maybeBranch))
if (!Array.isArray(data) || data.length !== 2) {
throw Error("Shape of parsed JSON doesn't match form of branch value")
}
diff --git a/apps/docs/components/RealtimeLimitsEstimater.tsx b/apps/docs/components/RealtimeLimitsEstimator/RealtimeLimitsEstimator.tsx
similarity index 98%
rename from apps/docs/components/RealtimeLimitsEstimater.tsx
rename to apps/docs/components/RealtimeLimitsEstimator/RealtimeLimitsEstimator.tsx
index d8e153c2d3b..822c95f5a83 100644
--- a/apps/docs/components/RealtimeLimitsEstimater.tsx
+++ b/apps/docs/components/RealtimeLimitsEstimator/RealtimeLimitsEstimator.tsx
@@ -158,8 +158,8 @@ export default function RealtimeLimitsEstimater({}) {
{computeAddOn === 'micro'
? 'Micro'
: computeAddOn === 'small'
- ? 'Small to medium'
- : 'Large to 16XL'}
+ ? 'Small to medium'
+ : 'Large to 16XL'}
diff --git a/apps/docs/components/RealtimeLimitsEstimator/index.tsx b/apps/docs/components/RealtimeLimitsEstimator/index.tsx
new file mode 100644
index 00000000000..34fe3d20a42
--- /dev/null
+++ b/apps/docs/components/RealtimeLimitsEstimator/index.tsx
@@ -0,0 +1,11 @@
+import { lazy, Suspense } from 'react'
+
+const Estimator = lazy(() => import('./RealtimeLimitsEstimator'))
+
+export function RealtimeLimitsEstimator() {
+ return (
+
+
+
+ )
+}
diff --git a/apps/docs/components/index.tsx b/apps/docs/components/index.tsx
index bddb5268caf..a36aea45605 100644
--- a/apps/docs/components/index.tsx
+++ b/apps/docs/components/index.tsx
@@ -1,80 +1,94 @@
+/**
+ * This entire file could do with a cleanup and better code-splitting, but one thing at a time.
+ */
+
+// Basic UI things
import Link from 'next/link'
-import { Alert, Button, CodeBlock, GlassPanel, markdownComponents, Tabs } from 'ui'
-import StepHikeCompact from '~/components/StepHikeCompact'
+import { Accordion, Admonition, Alert, Button, CodeBlock, markdownComponents, Tabs } from 'ui'
+import { GlassPanel } from 'ui-patterns/GlassPanel'
+import { IconPanel } from 'ui-patterns/IconPanel'
+import { ThemeImage } from 'ui-patterns/ThemeImage'
+
// Common components
+import { CH } from '@code-hike/mdx/components'
+import StepHikeCompact from '~/components/StepHikeCompact'
import ButtonCard from './ButtonCard'
+import { Heading } from './CustomHTMLElements'
+
+// Reference guide specific
+// [Charis] I think we can factor these out so they aren't in the bundle for absolutely everything
+import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlobalFlagsHandler'
+import RefSubLayout from '~/layouts/ref/RefSubLayout'
+import RefHeaderSection from './reference/RefHeaderSection'
// Other components
-import RefSubLayout from '~/layouts/ref/RefSubLayout'
-import { Heading } from './CustomHTMLElements'
+import AuthProviders from '~/components/AuthProviders'
+import Options from '~/components/Options'
+import Param from '~/components/Params'
+import { ProjectConfigVariables } from './ProjectConfigVariables'
+
+// Data wrappers
+import { NavData } from './NavData'
+
+// Partials
import DatabaseSetup from './MDX/database_setup.mdx'
+import GetSessionWarning from './MDX/get_session_warning.mdx'
+import HuggingFaceDeployment from './MDX/ai/quickstart_hf_deployment.mdx'
+import MigrationWarnings from './MDX/migration_warnings.mdx'
import ProjectSetup from './MDX/project_setup.mdx'
import QuickstartIntro from './MDX/quickstart_intro.mdx'
import SocialProviderSettingsSupabase from './MDX/social_provider_settings_supabase.mdx'
import SocialProviderSetup from './MDX/social_provider_setup.mdx'
import StorageManagement from './MDX/storage_management.mdx'
-import MigrationWarnings from './MDX/migration_warnings.mdx'
-import GetSessionWarning from './MDX/get_session_warning.mdx'
-import { CH } from '@code-hike/mdx/components'
-import RefHeaderSection from './reference/RefHeaderSection'
-import { ProjectConfigVariables } from './ProjectConfigVariables'
-// Ref version specific
-import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlobalFlagsHandler'
-
-import Options from '~/components/Options'
-import Param from '~/components/Params'
-
-import { Admonition, ThemeImage } from 'ui'
+// Icons
import {
- IconMenuJavascript,
- IconMenuHome,
- IconMenuGettingStarted,
- IconMenuDatabase,
- IconMenuRestApis,
- IconMenuAuth,
- IconMenuEdgeFunctions,
- IconMenuRealtime,
- IconMenuStorage,
- IconMenuPlatform,
- IconMenuResources,
- IconMenuSelfHosting,
- IconMenuIntegrations,
- IconMenuFlutter,
- IconMenuPython,
- IconMenuCsharp,
- IconMenuSwift,
- IconMenuKotlin,
IconMenuApi,
+ IconMenuAuth,
IconMenuCli,
+ IconMenuCsharp,
+ IconMenuDatabase,
+ IconMenuEdgeFunctions,
+ IconMenuFlutter,
+ IconMenuGettingStarted,
+ IconMenuHome,
+ IconMenuIntegrations,
+ IconMenuJavascript,
+ IconMenuKotlin,
+ IconMenuPlatform,
+ IconMenuPython,
+ IconMenuRealtime,
+ IconMenuResources,
+ IconMenuRestApis,
+ IconMenuSelfHosting,
+ IconMenuStorage,
+ IconMenuSwift,
} from './Navigation/NavigationMenu/HomeMenuIcons'
+// Heavy/rare (lazy-loaded)
+import { AppleSecretGenerator } from './AppleSecretGenerator'
+import { Mermaid } from './Mermaid'
+import { RealtimeLimitsEstimator } from './RealtimeLimitsEstimator'
+
const components = {
...markdownComponents,
+ Accordion,
Admonition,
- Button,
- ButtonCard,
- CH,
- CodeBlock,
- GlassPanel,
- Link,
- QuickstartIntro,
- DatabaseSetup,
- ProjectSetup,
- MigrationWarnings,
- GetSessionWarning,
- SocialProviderSetup,
- SocialProviderSettingsSupabase,
- StepHikeCompact,
- ProjectConfigVariables,
- StorageManagement,
Alert: (props: any) => (
{props.children}
),
- Tabs: (props: any) => ,
- TabPanel: (props: any) => {props.children},
+ AppleSecretGenerator,
+ AuthProviders,
+ Button,
+ ButtonCard,
+ CH,
+ CliGlobalFlagsHandler: () => ,
+ CodeBlock,
+ DatabaseSetup,
+ GetSessionWarning,
+ GlassPanel,
h2: (props: any) => (
{props.children}
@@ -90,32 +104,47 @@ const components = {
{props.children}
),
+ HuggingFaceDeployment,
+ IconMenuApi,
+ IconMenuAuth,
+ IconMenuCli,
+ IconMenuCsharp,
+ IconMenuDatabase,
+ IconMenuEdgeFunctions,
+ IconMenuFlutter,
+ IconMenuGettingStarted,
+ IconMenuHome,
+ IconMenuIntegrations,
+ IconMenuJavascript,
+ IconMenuKotlin,
+ IconMenuPlatform,
+ IconMenuPython,
+ IconMenuRealtime,
+ IconMenuResources,
+ IconMenuRestApis,
+ IconMenuSelfHosting,
+ IconMenuStorage,
+ IconMenuSwift,
+ IconPanel,
Image: (props: any) => ,
- RefSubLayout,
- RefHeaderSection: (props: any) => ,
- CliGlobalFlagsHandler: () => ,
+ Link,
+ Mermaid,
+ MigrationWarnings,
+ NavData,
Options,
Param,
- IconMenuJavascript,
- IconMenuHome,
- IconMenuGettingStarted,
- IconMenuDatabase,
- IconMenuRestApis,
- IconMenuAuth,
- IconMenuEdgeFunctions,
- IconMenuRealtime,
- IconMenuStorage,
- IconMenuPlatform,
- IconMenuResources,
- IconMenuSelfHosting,
- IconMenuIntegrations,
- IconMenuFlutter,
- IconMenuPython,
- IconMenuCsharp,
- IconMenuKotlin,
- IconMenuSwift,
- IconMenuApi,
- IconMenuCli,
+ ProjectConfigVariables,
+ ProjectSetup,
+ QuickstartIntro,
+ RealtimeLimitsEstimator,
+ RefHeaderSection: (props: any) => ,
+ RefSubLayout,
+ SocialProviderSettingsSupabase,
+ SocialProviderSetup,
+ StepHikeCompact,
+ StorageManagement,
+ TabPanel: (props: any) => {props.children},
+ Tabs: (props: any) => ,
}
export default components
diff --git a/apps/docs/components/reference/RefFunctionSection.tsx b/apps/docs/components/reference/RefFunctionSection.tsx
index 733e07030f0..19d14023f54 100644
--- a/apps/docs/components/reference/RefFunctionSection.tsx
+++ b/apps/docs/components/reference/RefFunctionSection.tsx
@@ -126,14 +126,14 @@ const RefFunctionSection: React.FC = (props) => {
const codeBlockLang = example?.code?.startsWith('```js')
? 'js'
: example?.code?.startsWith('```ts')
- ? 'ts'
- : example?.code?.startsWith('```dart')
- ? 'dart'
- : example?.code?.startsWith('```c#')
- ? 'csharp'
- : example?.code?.startsWith('```kotlin')
- ? 'kotlin'
- : 'js'
+ ? 'ts'
+ : example?.code?.startsWith('```dart')
+ ? 'dart'
+ : example?.code?.startsWith('```c#')
+ ? 'csharp'
+ : example?.code?.startsWith('```kotlin')
+ ? 'kotlin'
+ : 'js'
// `
// import { createClient } from '@supabase/supabase-js'
diff --git a/apps/docs/pages/guides/ai.mdx b/apps/docs/content/guides/ai.mdx
similarity index 73%
rename from apps/docs/pages/guides/ai.mdx
rename to apps/docs/content/guides/ai.mdx
index a1abf0d2ba8..66c7ffbedae 100644
--- a/apps/docs/pages/guides/ai.mdx
+++ b/apps/docs/content/guides/ai.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'ai',
- title: 'AI & Vectors',
- description: 'The best vector database is the database you already have.',
- subtitle: 'The best vector database is the database you already have.',
- sidebar_label: 'Overview',
-}
+---
+id: 'ai'
+title: 'AI & Vectors'
+description: 'The best vector database is the database you already have.'
+subtitle: 'The best vector database is the database you already have.'
+hideToc: true
+---
Supabase provides an open source toolkit for developing AI applications using Postgres and pgvector. Use the Supabase client libraries to store, index, and query your vector embeddings at scale.
@@ -109,7 +107,26 @@ export const integrations = [
## Case studies
- {customers.map((x) => (
+ {[
+ {
+ name: 'Berri AI Boosts Productivity by Migrating from AWS RDS to Supabase with pgvector',
+ description:
+ 'Learn how Berri AI overcame challenges with self-hosting their vector database on AWS RDS and successfully migrated to Supabase.',
+ href: 'https://supabase.com/customers/berriai',
+ },
+ {
+ name: 'Mendable switches from Pinecone to Supabase for PostgreSQL vector embeddings',
+ description:
+ 'How Mendable boosts efficiency and accuracy of chat powered search for documentation using Supabase with pgvector',
+ href: 'https://supabase.com/customers/mendableai',
+ },
+ {
+ name: 'Markprompt: GDPR-Compliant AI Chatbots for Docs and Websites',
+ description:
+ "AI-powered chatbot platform, Markprompt, empowers developers to deliver efficient and GDPR-compliant prompt experiences on top of their content, by leveraging Supabase's secure and privacy-focused database and authentication solutions",
+ href: 'https://supabase.com/customers/markprompt',
+ },
+ ].map((x) => (
+ ))}
- setFactorId(e.target.value.trim())}
- />
-
+ setFactorId(e.target.value.trim())} />
+
)
}
@@ -581,6 +570,10 @@ TOTP is not going to be the only MFA factor Supabase Auth is going to support in
The TOTP QR code encodes a URI with the `otpauth` scheme. It was [initially introduced by Google Authenticator](https://github.com/google/google-authenticator/wiki/Key-Uri-Format) but is now universally accepted by all authenticator apps.
+### How long is the TOTP code valid for?
+
+In our TOTP implementation, each generated code remains valid for one interval, which spans 30 seconds. To account for minor time discrepancies, we allow for a one-interval clock skew. This ensures that users can successfully authenticate within this timeframe, even if there are slight variations in system clocks.
+
### How do I check _when_ a user went through MFA?
Access tokens issued by Supabase Auth contain an `amr` (Authentication Methods Reference) claim. It is an array of objects that indicate what authentication methods the user has used so far.
@@ -629,13 +622,10 @@ Currently recognized authentication methods are:
- `sso/saml` - any Single Sign On (SAML) method.
The following additional claims are available when using PKCE flow:
+
- `invite` - any sign in via an invitation.
- `magiclink` - any sign in via magic link. Excludes logins resulting from invocation of `signUp`.
- `email/signup` - any login resulting from an email signup.
- `email_change` - any login resulting from a change in email.
More authentication methods will be added over time as we increase the number of authentication methods supported by Supabase.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-smtp.mdx b/apps/docs/content/guides/auth/auth-smtp.mdx
similarity index 84%
rename from apps/docs/pages/guides/auth/auth-smtp.mdx
rename to apps/docs/content/guides/auth/auth-smtp.mdx
index 918e20b144d..ed80f9780cd 100644
--- a/apps/docs/pages/guides/auth/auth-smtp.mdx
+++ b/apps/docs/content/guides/auth/auth-smtp.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-smtp',
- title: 'Configure a Custom SMTP',
- description: 'Moving towards production: Configuring a custom SMTP provider',
-}
+---
+id: 'auth-smtp'
+title: 'Configure a Custom SMTP'
+description: 'Moving towards production: Configuring a custom SMTP provider'
+---
## Auth SMTP
@@ -38,6 +36,3 @@ You can use Supabase Auth with any major SMTP provider of your choosing. Some SM
- [Twilio SendGrid](https://docs.sendgrid.com/for-developers/sending-email/integrating-with-the-smtp-api)
- [AWS SES](https://docs.aws.amazon.com/ses/latest/dg/send-email-smtp.html)
- [Resend](https://resend.com/docs/dashboard/emails/introduction)
-
-export const Page = ({ children }) =>
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-user-management.mdx b/apps/docs/content/guides/auth/auth-user-management.mdx
similarity index 95%
rename from apps/docs/pages/guides/auth/auth-user-management.mdx
rename to apps/docs/content/guides/auth/auth-user-management.mdx
index edc65197f44..1e24c2e142e 100644
--- a/apps/docs/pages/guides/auth/auth-user-management.mdx
+++ b/apps/docs/content/guides/auth/auth-user-management.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-user-management',
- title: 'User Management',
- description: 'Manage your users with Supabase Auth',
- subtitle: 'Manage your users with Supabase Auth',
-}
+---
+id: 'auth-user-management'
+title: 'User Management'
+description: 'Manage your users with Supabase Auth'
+subtitle: 'Manage your users with Supabase Auth'
+---
## The user object
@@ -81,7 +79,3 @@ Supabase Auth provides these [configuration options](/dashboard/project/_/settin
- **Confirm Email (Deprecated)**: Users will need to confirm their email address before signing in for the first time.
- Having **Confirm Email** disabled assumes that the user's email does not need to be verified in order to login and implicitly confirms the user's email in the database.
- If you previously relied on this config to autoconfirm a user's email address, you can switch to use **Allow unverified email sign in** instead. This new option allows the user to sign in with an unverified email which you can keep track of through the user object. It provides more versatility if you require your users to verify their email address in the future since you can structure your RLS policies to check the user's `email_verified` field.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/column-level-security.mdx b/apps/docs/content/guides/auth/column-level-security.mdx
similarity index 85%
rename from apps/docs/pages/guides/auth/column-level-security.mdx
rename to apps/docs/content/guides/auth/column-level-security.mdx
index 942c7ff8bcc..ac2155ca023 100644
--- a/apps/docs/pages/guides/auth/column-level-security.mdx
+++ b/apps/docs/content/guides/auth/column-level-security.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'column-level-security',
- title: 'Column Level Security',
- description: 'Secure your data using Postgres Column Level Security.',
-}
+---
+id: 'column-level-security'
+title: 'Column Level Security'
+description: 'Secure your data using Postgres Column Level Security.'
+---
PostgreSQL's [Row Level Security (RLS)](https://www.postgresql.org/docs/current/ddl-rowsecurity.html) gives you granular control over who can access rows of data. However, it doesn't give you control over which columns they can access within rows. Sometimes you want to restrict access to specific columns in your database. Column Level Privileges allows you to do just that.
@@ -118,30 +116,28 @@ supabase migration new create_posts_table
```sql
+ create table
+ posts (
+ id bigint primary key generated always as identity,
+ user_id text,
+ title text,
+ content text,
+ created_at timestamptz default now()
+ updated_at timestamptz default now()
+ );
-create table
-posts (
-id bigint primary key generated always as identity,
-user_id text,
-title text,
-content text,
-created_at timestamptz default now()
-updated_at timestamptz default now()
-);
+ -- Add row-level security
+ create a policy "Allow update for owners" on posts for
+ update
+ using (auth.uid () = user_id);
--- Add row-level security
-create a policy "Allow update for owners" on posts for
-update
-using (auth.uid () = user_id);
-
--- Add column-level security
-revoke
-update
-(title) on table public.posts
-from
-authenticated;
-
-```
+ -- Add column-level security
+ revoke
+ update
+ (title) on table public.posts
+ from
+ authenticated;
+ ```
@@ -149,10 +145,6 @@ authenticated;
## Considerations when using column-level privileges
+
- If you turn off a column privilege you won't be able to use that column at all.
- All operations (insert, update, delete) as well as using `select *` will fail.
-
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/concepts/redirect-urls.mdx b/apps/docs/content/guides/auth/concepts/redirect-urls.mdx
similarity index 94%
rename from apps/docs/pages/guides/auth/concepts/redirect-urls.mdx
rename to apps/docs/content/guides/auth/concepts/redirect-urls.mdx
index 2ffa7186bd8..2fcd240acd8 100644
--- a/apps/docs/pages/guides/auth/concepts/redirect-urls.mdx
+++ b/apps/docs/content/guides/auth/concepts/redirect-urls.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'redirect-urls',
- title: 'Redirect URLs',
- description: 'Set up redirect urls with Supabase Auth.',
- subtitle: 'Set up redirect urls with Supabase Auth.',
-}
+---
+id: 'redirect-urls'
+title: 'Redirect URLs'
+description: 'Set up redirect urls with Supabase Auth.'
+subtitle: 'Set up redirect urls with Supabase Auth.'
+---
## Overview
@@ -83,7 +81,3 @@ const { data, error } = await supabase.auth.signInWithOAuth({
For mobile applications you can use deep linking URIs. For example, for your `SITE_URL` you can specify something like `com.supabase://login-callback/` and for additional redirect URLs something like `com.supabase.staging://login-callback/` if needed.
Read more about deep linking and find code examples for different frameworks [here](/docs/guides/auth/native-mobile-deep-linking).
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/content/guides/auth/enterprise-sso.mdx b/apps/docs/content/guides/auth/enterprise-sso.mdx
new file mode 100644
index 00000000000..16390c486f4
--- /dev/null
+++ b/apps/docs/content/guides/auth/enterprise-sso.mdx
@@ -0,0 +1,6 @@
+---
+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 [with SAML 2.0](/docs/guides/auth/sso/auth-sso-saml).
diff --git a/apps/docs/pages/guides/auth/managing-user-data.mdx b/apps/docs/content/guides/auth/managing-user-data.mdx
similarity index 96%
rename from apps/docs/pages/guides/auth/managing-user-data.mdx
rename to apps/docs/content/guides/auth/managing-user-data.mdx
index 2735f05f837..dd73f0757ac 100644
--- a/apps/docs/pages/guides/auth/managing-user-data.mdx
+++ b/apps/docs/content/guides/auth/managing-user-data.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'managing-user-data',
- title: 'Managing User Data',
- description: 'Securing your user data with Row Level Security.',
-}
+---
+id: 'managing-user-data'
+title: 'Managing User Data'
+description: 'Securing your user data with Row Level Security.'
+---
For security purposes, the `auth` schema is not exposed on the auto-generated API.
@@ -241,7 +239,3 @@ create trigger on_auth_user_created
after insert on auth.users
for each row execute procedure public.handle_new_user();
```
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/native-mobile-deep-linking.mdx b/apps/docs/content/guides/auth/native-mobile-deep-linking.mdx
similarity index 95%
rename from apps/docs/pages/guides/auth/native-mobile-deep-linking.mdx
rename to apps/docs/content/guides/auth/native-mobile-deep-linking.mdx
index f1eb1425e3d..7017d7a779b 100644
--- a/apps/docs/pages/guides/auth/native-mobile-deep-linking.mdx
+++ b/apps/docs/content/guides/auth/native-mobile-deep-linking.mdx
@@ -1,13 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { IconPanel } from 'ui'
-import Link from 'next/link'
-import { NativeMobileLoginItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
-
-export const meta = {
- title: 'Native Mobile Deep Linking',
- description: 'Learn how to handle deep linking for OAuth and email based login.',
- tocVideo: '8TZ6O1C8ujE',
-}
+---
+title: 'Native Mobile Deep Linking'
+description: 'Learn how to handle deep linking for OAuth and email based login.'
+tocVideo: '8TZ6O1C8ujE'
+---
In certain auth scenarios you will need to handle linking back into your application to finish the user's sign in.
@@ -115,6 +110,7 @@ In certain auth scenarios you will need to handle linking back into your applica
```
For the best user experience it is recommended to use universal links which require a more elaborate setup. You can find the detailed setup instructions in the [Expo docs](https://docs.expo.dev/guides/deep-linking/).
+
\*Currently supabase_flutter supports deep links on Android, iOS, Web, MacOS and Windows.
@@ -266,7 +262,7 @@ In certain auth scenarios you will need to handle linking back into your applica
...
```
- At this point, you can register your own scheme.
+ At this point, you can register your own scheme.
On Windows, URL protocols are setup in the Windows registry.
This package won't do it for you.
@@ -306,6 +302,7 @@ In certain auth scenarios you will need to handle linking back into your applica
+
@@ -344,10 +341,6 @@ In certain auth scenarios you will need to handle linking back into your applica
```
+
-
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/native-mobile-login.mdx b/apps/docs/content/guides/auth/native-mobile-login.mdx
similarity index 71%
rename from apps/docs/pages/guides/auth/native-mobile-login.mdx
rename to apps/docs/content/guides/auth/native-mobile-login.mdx
index c5883ab7bad..95acd9e583a 100644
--- a/apps/docs/pages/guides/auth/native-mobile-login.mdx
+++ b/apps/docs/content/guides/auth/native-mobile-login.mdx
@@ -1,12 +1,7 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { IconPanel } from 'ui'
-import Link from 'next/link'
-import { NativeMobileLoginItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
-
-export const meta = {
- title: 'Native Mobile Login',
- description: 'Logging in with native mobile identity providers like Apple & Google.',
-}
+---
+title: 'Native Mobile Login'
+description: 'Logging in with native mobile identity providers like Apple & Google.'
+---
Some native mobile operating systems, like iOS and Android, offer a built-in identity provider for convenient user authentication.
@@ -25,21 +20,28 @@ There are several reasons why you might want to add social login to your applica
## Set up a native social login with Supabase Auth
## Provider tokens
@@ -47,7 +49,3 @@ There are several reasons why you might want to add social login to your applica
Just like with Oauth, you will receive a copy of the provider token in case you need to use it further. For example, you can use the Google provider token to access Google APIs on behalf of your user.
Provider tokens are intentionally not stored in your project's database, however. This is because provider tokens give access to potentially sensitive user data in third-party systems. Different applications have different needs, and one application's OAuth scopes may be significantly more permissive than another. If you do want to use the provider token outside of the browser that completed the OAuth flow, you will have to send it manually to a secure server under your control.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/passwordless-login.mdx b/apps/docs/content/guides/auth/passwordless-login.mdx
similarity index 65%
rename from apps/docs/pages/guides/auth/passwordless-login.mdx
rename to apps/docs/content/guides/auth/passwordless-login.mdx
index cd8a76cd7f6..cb8d308ecb2 100644
--- a/apps/docs/pages/guides/auth/passwordless-login.mdx
+++ b/apps/docs/content/guides/auth/passwordless-login.mdx
@@ -1,12 +1,7 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { IconPanel, GlassPanel, IconMail } from 'ui'
-import Link from 'next/link'
-import { PhoneLoginsItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
-
-export const meta = {
- title: 'Passwordless Login',
- description: 'Sign in your users without passwords via magic link email, or one-time passwords sent via email, SMS, or WhatsApp.',
-}
+---
+title: 'Passwordless Login'
+description: 'Sign in your users without passwords via magic link email, or one-time passwords sent via email, SMS, or WhatsApp.'
+---
Supabase supports various forms of passwordless authentication:
@@ -35,23 +30,22 @@ There are several reasons why you might want to add passwordless login to your a
Supabase supports [Phone Login](/docs/guides/auth/phone-login) (SMS & WhatsApp) with several communications platforms. Follow the guides below to set up a provider with Supabase Auth.
-
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/passwordless-login/auth-email-otp.mdx b/apps/docs/content/guides/auth/passwordless-login/auth-email-otp.mdx
similarity index 83%
rename from apps/docs/pages/guides/auth/passwordless-login/auth-email-otp.mdx
rename to apps/docs/content/guides/auth/passwordless-login/auth-email-otp.mdx
index 38857d78245..820f70e4b5c 100644
--- a/apps/docs/pages/guides/auth/passwordless-login/auth-email-otp.mdx
+++ b/apps/docs/content/guides/auth/passwordless-login/auth-email-otp.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-email-otp',
- title: 'Login With Email OTP',
- description: 'Use Supabase to authenticate your users using one-time password emails.',
-}
+---
+id: 'auth-email-otp'
+title: 'Login With Email OTP'
+description: 'Use Supabase to authenticate your users using one-time password emails.'
+---
Email one-time passwords (OTP) are a form of passwordless login where users key in a six digit code sent to their email address to log in to their accounts. By default, a user can only request an OTP once every 60 seconds and they expire after 24 hours.
@@ -86,6 +84,15 @@ If the request was successful, you receive a response with `error: null` and a `
## Verify OTP to create session
+
+
+
Provide an input field for the user to key in the one-time code. To verify the code and complete the user's sign in, call [verifyOtp()](/docs/reference/javascript/auth-verifyotp) with their email address, the code, and `type: "email"`:
```js
@@ -99,6 +106,18 @@ const {
})
```
+
+
+
+Provide an input field for the user to key in the one-time code. To verify the code and complete the user's sign in, call [verifyEmailOtp()](/docs/reference/kotlin/auth-verifyotp) with their email address, the code, and `OtpType.Email.EMAIL` as the type:
+
+```kotlin
+supabase.auth.verifyEmailOtp(type = OtpType.Email.EMAIL, email = "email", token = "151345")
+```
+
+
+
+
If successful the user will now be logged in and you should receive a valid session like:
```json
@@ -117,7 +136,3 @@ If successful the user will now be logged in and you should receive a valid sess
- [Phone SMS & WhatsApp OTP](/docs/guides/auth/phone-login)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Supabase Flutter Client](https://github.com/supabase/supabase-flutter)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/passwordless-login/auth-magic-link.mdx b/apps/docs/content/guides/auth/passwordless-login/auth-magic-link.mdx
similarity index 93%
rename from apps/docs/pages/guides/auth/passwordless-login/auth-magic-link.mdx
rename to apps/docs/content/guides/auth/passwordless-login/auth-magic-link.mdx
index 9ca6be133c5..4b6ffdfdc87 100644
--- a/apps/docs/pages/guides/auth/passwordless-login/auth-magic-link.mdx
+++ b/apps/docs/content/guides/auth/passwordless-login/auth-magic-link.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-magic-link',
- title: 'Login With Magic Link',
- description: 'Use Supabase to authenticate your users using magic links.',
-}
+---
+id: 'auth-magic-link'
+title: 'Login With Magic Link'
+description: 'Use Supabase to authenticate your users using magic links.'
+---
Magic links are a form of passwordless logins where users click on a link sent to their email address to log in to their accounts. Magic links only work with email addresses and are one-time use only. By default, a user can only request a magic link once every 60 seconds and they expire after 24 hours.
@@ -140,7 +138,3 @@ suspend fun logout() {
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Supabase Flutter Client](https://github.com/supabase/supabase-flutter)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/passwords.mdx b/apps/docs/content/guides/auth/passwords.mdx
similarity index 76%
rename from apps/docs/pages/guides/auth/passwords.mdx
rename to apps/docs/content/guides/auth/passwords.mdx
index 41d85695f4b..25877dad288 100644
--- a/apps/docs/pages/guides/auth/passwords.mdx
+++ b/apps/docs/content/guides/auth/passwords.mdx
@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { Accordion } from 'ui'
-
-export const meta = {
- id: 'auth-passwords',
- title: 'Passwords',
- description: 'How to work with passwords in Supabase Auth',
-}
+---
+id: 'auth-passwords'
+title: 'Passwords'
+description: 'How to work with passwords in Supabase Auth'
+---
Using passwords to authenticate users is a tried-and-tested method to give your users access to your application. Supabase Auth provides you with secure configuration options and uses best practices to store and verify your user's passwords.
@@ -52,28 +49,28 @@ Strong passwords are difficult to remember, so Supabase Auth provides you with A
To add a secure password reset flow to your application:
1. Build the **password reset page**:
- - Should be publicly accessible and contain a form asking for the user's email address.
- - Use the [`supabase.auth.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) API to request a password reset link for a user's email address.
- - Specify the `redirectTo` parameter when calling this API to point to the URL of the **change password page.**
+ - Should be publicly accessible and contain a form asking for the user's email address.
+ - Use the [`supabase.auth.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) API to request a password reset link for a user's email address.
+ - Specify the `redirectTo` parameter when calling this API to point to the URL of the **change password page.**
2. Build the **password change page**:
- - Should be accessible only to authenticated users.
- - Add its URL to the allowed [Redirect URLs](/dashboard/project/_/auth/url-configuration) settings.
- - Show a form or other prompt asking the user to choose a new password.
- - Call the [`supabase.auth.updateUser`](/docs/reference/javascript/auth-updateuser) API to set a new password for the user.
+ - Should be accessible only to authenticated users.
+ - Add its URL to the allowed [Redirect URLs](/dashboard/project/_/auth/url-configuration) settings.
+ - Show a form or other prompt asking the user to choose a new password.
+ - Call the [`supabase.auth.updateUser`](/docs/reference/javascript/auth-updateuser) API to set a new password for the user.
The email link sent to your users works in the same way as [passwordless authentication](/docs/guides/auth/passwordless-login):
1. After a user visits the **reset password page**, they are sent a reset password link.
- - If you use PKCE (default), this link only works on the device or browser where the original reset request was made. Display a message to the user to make sure they don't change devices or browsers.
- - If you use the implicit grant flow, the link can be opened on any device.
+ - If you use PKCE (default), this link only works on the device or browser where the original reset request was made. Display a message to the user to make sure they don't change devices or browsers.
+ - If you use the implicit grant flow, the link can be opened on any device.
2. A user clicks the link. They are taken to Supabase Auth, which validates the link.
- - If the link is valid, it redirects to the **change password page**, which you specified in the `redirectTo` parameter.
- - If the **change password page's** URL is not properly registered in the [Redirect URLs](/dashboard/project/_/auth/url-configuration) configuration, the user is taken to the default Site URL page.
+ - If the link is valid, it redirects to the **change password page**, which you specified in the `redirectTo` parameter.
+ - If the **change password page's** URL is not properly registered in the [Redirect URLs](/dashboard/project/_/auth/url-configuration) configuration, the user is taken to the default Site URL page.
3. Supabase Auth redirects to the **change password page** including [session](/docs/guides/auth/sessions) information in the URL.
- - If you used PKCE (default), the redirect contains the `code` query param.
- - If you are not using official Supabase libraries, or have a custom setup, extract the `code` from the URL and call the [`supabase.auth.exchangeCodeForSession`](/docs/reference/javascript/auth-exchangecodeforsession) API.
- - Official Supabase libraries handle code the code exchange for you.
- - If you used the implicit flow, the redirect contains a URL fragment encoding the user's [session](/docs/guides/auth/sessions).
+ - If you used PKCE (default), the redirect contains the `code` query param.
+ - If you are not using official Supabase libraries, or have a custom setup, extract the `code` from the URL and call the [`supabase.auth.exchangeCodeForSession`](/docs/reference/javascript/auth-exchangecodeforsession) API.
+ - Official Supabase libraries handle code the code exchange for you.
+ - If you used the implicit flow, the redirect contains a URL fragment encoding the user's [session](/docs/guides/auth/sessions).
### Example: Request a password reset email
@@ -153,7 +150,3 @@ The hash is stored in the `encrypted_password` column of the `auth.users` table.
### How will strengthened password requirements affect current users?
Existing users can still sign in with their current password even if it doesn't meet the new, strengthened password requirements. However, if their password falls short of these updated standards, they will encounter a `WeakPasswordError` during the `signInWithPassword` process, explaining why it's considered weak. This change is also applicable to new users and existing users changing their passwords, ensuring everyone adheres to the enhanced security standards.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/content/guides/auth/phone-login.mdx b/apps/docs/content/guides/auth/phone-login.mdx
new file mode 100644
index 00000000000..a608bcb26eb
--- /dev/null
+++ b/apps/docs/content/guides/auth/phone-login.mdx
@@ -0,0 +1,291 @@
+---
+title: 'Phone Login'
+description: 'Learn about logging in to your platform using SMS one-time passwords.'
+---
+
+
+
+Authenticating users via SMS can become expensive. Adjust your project's rate limits and [configure CAPTCHA](/docs/guides/auth/auth-captcha) to control the bill. Read more about this in the [Production Checklist](/docs/guides/platform/going-into-prod).
+
+
+
+Phone Login is a method of authentication that allows users to log in to a website or application without using a password. Instead of entering a password, the user provides another form of authentication through a one-time code sent via SMS.
+
+## Benefits
+
+There are several reasons why you might want to add phone login to your applications:
+
+- **Improved user experience**: By eliminating the need for users to remember and enter complex passwords, phone login can make it easier and more convenient for users to log in to your application. This can improve the overall user experience and make it more enjoyable for users to interact with your application.
+
+- **Increased security**: Phone login can improve the security of your application by reducing the risk of password-related security breaches, such as password reuse and weak passwords. By using alternative forms of authentication, such as one-time codes or biometric factors, you can make it more difficult for unauthorized users to access your application.
+
+- **Reduced support burden**: Phone login can also help reduce the support burden for your team by eliminating the need to handle password recovery flows or deal with other password-related issues. This can free up your team to focus on other important tasks and improve the efficiency of your operation.
+
+## Set up a provider with Supabase Auth
+
+To use Phone Login, you first need to set up a Phone provider. Supabase supports Phone Login with several communications platforms. Follow the guides below to set up your provider.
+
+
+
+## Using Phone Login
+
+You can use Phone Login to:
+
+- [Sign up a user with phone number and password](/docs/guides/auth/phone-login#sign-up-a-user-with-phone-number-and-password)
+- [Sign in a user with a One Time Password (OTP)](/docs/guides/auth/phone-login#sign-in-a-user-with-otp)
+- [Update a user's phone number](/docs/guides/auth/phone-login#update-a-users-phone-number)
+
+Each of these flows sends the user an SMS containing a six-digit PIN, which you must [verify](/docs/guides/auth/phone-login#verify-a-user) to complete the flow.
+
+### Sign up a user with phone number and password
+
+You can use a user's mobile phone number, instead of an email address, when they sign up with a password.
+
+This practice is usually discouraged because phone networks often recycle mobile phone numbers. Anyone receiving a recycled phone number gets access to the original user's account. To mitigate this risk, [implement MFA](/docs/guides/auth/auth-mfa).
+
+To sign up the user, call [`signUp()`](/docs/reference/javascript/auth-signup) with their phone number and password:
+
+
+
+
+
+```js
+const { data, error } = await supabase.auth.signUp({
+ phone: '+13334445555',
+ password: 'some-password',
+})
+```
+
+
+
+
+```kotlin
+supabase.auth.signUpWith(Phone) {
+ phone = "+13334445555"
+ password = "some-password"
+}
+```
+
+
+
+
+```bash
+curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/signup' \
+-H "apikey: SUPABASE_KEY" \
+-H "Content-Type: application/json" \
+-d '{
+ "phone": "+13334445555",
+ "password": "some-password"
+}'
+```
+
+
+
+
+The user receives an SMS with a 6-digit pin that you must [verify](/docs/guides/auth/phone-login#verify-a-user) within 60 seconds.
+
+After their phone number is verified, the user can use their phone number and password to sign in with needing to reverify each time:
+
+
+
+
+```js
+const { user, error } = await supabase.auth.signInWithPassword({
+ phone: '+13334445555',
+ password: 'some-password',
+})
+```
+
+
+
+
+```kotlin
+supabase.auth.signInWith(Phone) {
+ phone = "+13334445555"
+ password = "some-password"
+}
+```
+
+
+
+
+```bash
+curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/token?grant_type=password' \
+-H "apikey: SUPABASE_KEY" \
+-H "Content-Type: application/json" \
+-d '{
+ "phone": "+13334445555",
+ "password": "some-password"
+}'
+```
+
+
+
+
+### Sign in a user with OTP
+
+With OTP, a user can sign in without setting a password on their account. They need to verify their phone number each time they sign in.
+
+
+
+
+```js
+const { data, error } = await supabase.auth.signInWithOtp({
+ phone: '+13334445555',
+})
+```
+
+
+
+
+```kotlin
+supabase.auth.signInWith(OTP) {
+ phone = "+13334445555"
+}
+```
+
+
+
+
+```bash
+curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/otp' \
+-H "apikey: SUPABASE_KEY" \
+-H "Content-Type: application/json" \
+-d '{
+ "phone": "+13334445555"
+}'
+```
+
+
+
+
+The user receives an SMS with a 6-digit pin that you must [verify](/docs/guides/auth/phone-login#verify-a-user) within 60 seconds.
+
+### Update a user's phone number
+
+To update a user's phone number, the user must be logged in. Call [`updateUser()`](/docs/reference/javascript/auth-updateuser) with their phone number:
+
+
+
+
+```js
+const { data, error } = await supabase.auth.updateUser({
+ phone: '123456789',
+})
+```
+
+
+
+
+The user receives an SMS with a 6-digit pin that you must [verify](/docs/guides/auth/phone-login#verify-a-user) within 60 seconds.
+
+### Verify a user
+
+To verify the one-time password (OTP) sent to the user's phone number, call [`verifyOtp()`](/docs/reference/javascript/auth-verifyotp) with the phone number and OTP:
+
+
+
+
+You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyOtp`:
+
+```js
+const {
+ data: { session },
+ error,
+} = await supabase.auth.verifyOtp({
+ phone: '+13334445555',
+ token: '123456',
+ type: 'sms',
+})
+```
+
+
+
+
+You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyPhoneOtp`:
+
+```kotlin
+supabase.auth.verifyPhoneOtp(
+ type = OtpType.Phone.SMS,
+ phone = "+13334445555",
+ token = "123456"
+)
+```
+
+
+
+
+```bash
+curl -X POST 'https://.supabase.co/auth/v1/verify' \
+-H "apikey: " \
+-H "Content-Type: application/json" \
+-d '{
+ "type": "sms",
+ "phone": "+13334445555",
+ "token": "123456"
+}'
+```
+
+
+
+
+If successful the user will now be logged in and you should receive a valid session like:
+
+```json
+{
+ "access_token": "",
+ "token_type": "bearer",
+ "expires_in": 3600,
+ "refresh_token": ""
+}
+```
+
+The access token can be sent in the Authorization header as a Bearer token for any CRUD operations on supabase-js. See our guide on [Row Level Security](/docs/guides/auth#row-level-security) for more info on restricting access on a user basis.
diff --git a/apps/docs/content/guides/auth/phone-login/messagebird.mdx b/apps/docs/content/guides/auth/phone-login/messagebird.mdx
new file mode 100644
index 00000000000..27d882780ef
--- /dev/null
+++ b/apps/docs/content/guides/auth/phone-login/messagebird.mdx
@@ -0,0 +1,69 @@
+---
+id: 'auth-messagebird'
+title: 'Phone Auth with MessageBird'
+description: 'How to set up and use Mobile OTP with MessageBird and Supabase.'
+---
+
+
+
+Authenticating users via SMS can become expensive. Adjust your project's rate limits and [configure CAPTCHA](/docs/guides/auth/auth-captcha) to control the bill. Read more about this in the [Production Checklist](/docs/guides/platform/going-into-prod).
+
+
+
+## Prerequisites
+
+You'll need:
+
+- A MessageBird account (sign up [here](https://dashboard.messagebird.com/en/sign-up))
+- A Supabase project (create one [here](https://supabase.com/dashboard))
+- A mobile phone capable of receiving SMS
+
+## Set up MessageBird as your SMS provider
+
+Start by logging into your MessageBird account and verify the mobile number you'll be using to test with [here](https://dashboard.messagebird.com/en/getting-started/sms). This is the number that will be receiving the SMS OTPs.
+
+
+
+
+
+Navigate to the [dashboard settings](https://dashboard.messagebird.com/en/settings/sms) to set the default originator. The messagebird originator is the name or number from which the message is sent. For more information, you can refer to the messagebird article on choosing an originator [here](https://support.messagebird.com/hc/en-us/articles/115002628665-Choosing-an-originator)
+
+
+
+You will need the following values to get started:
+
+- Live API Key / Test API Key
+- MessageBird originator
+
+Now go to the [Auth > Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the Supabase dashboard and select "Phone" from the Auth Providers list.
+
+You should see an option to enable the Phone provider.
+
+Toggle it on, and copy the 2 values over from the Messagebird dashboard. Click save.
+
+
+
+If you use the Test API Key, the OTP will not be delivered to the mobile number specified but messagebird will log the response in the dashboard. If the Live API Key is used instead, the OTP will be delivered and there will be a deduction in your free credits.
+
+
+
+Plugin MessageBird credentials
+
+Now the backend should be setup, we can proceed to add our client-side code!
+
+#### SMS custom template
+
+The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
+
+Go to [Auth > Templates](https://supabase.com/dashboard/project/_/auth/templates) page in the Supabase dashboard.
+
+Use the variable `.Code` in the template to display the code.
+
+## Next steps
+
+To implement Phone Login, see the docs on [using Phone Login](/docs/guides/auth/phone-login#using-phone-login).
+
+## Resources
+
+- [MessageBird Signup](https://dashboard.messagebird.com/en/sign-up)
+- [Supabase Dashboard](https://supabase.com/dashboard)
diff --git a/apps/docs/content/guides/auth/phone-login/twilio.mdx b/apps/docs/content/guides/auth/phone-login/twilio.mdx
new file mode 100644
index 00000000000..86bbd8bae8b
--- /dev/null
+++ b/apps/docs/content/guides/auth/phone-login/twilio.mdx
@@ -0,0 +1,151 @@
+---
+id: 'auth-twilio'
+title: 'Phone Auth with Twilio'
+description: 'How to set up and use Mobile OTP with Twilio and Supabase.'
+video: 'https://www.youtube.com/v/akScoPO01bc'
+---
+
+
+
+Authenticating users via SMS can become expensive. Adjust your project's rate limits and [configure CAPTCHA](/docs/guides/auth/auth-captcha) to control the bill. Read more about this in the [Production Checklist](/docs/guides/platform/going-into-prod).
+
+
+
+## Preqrequisites
+
+You'll need:
+
+- Twilio account ([sign up](https://www.twilio.com/try-twilio))
+- Supabase project (create one [here](https://supabase.com/dashboard))
+- Mobile phone capable of receiving SMS
+
+SMS Authentication can be done with either Twilio Verify or Twilio Programmable Messaging. [Twilio Verify](https://www.twilio.com/en-us/trusted-activation/verify) is a specialized OTP solution and is recommended for most developers that need over-the-phone authentication. Alternatively you can use [Twilio Programmable Messaging](https://www.twilio.com/docs/messaging) which offers generic SMS sending support.
+
+## Twilio Verify
+
+To set up Twilio Verify, you will need to:
+
+1. Create a new [verification service](https://support.twilio.com/hc/en-us/articles/360033309133-Getting-Started-with-Twilio-Verify-V2) in the Twilio dashboard.
+2. [Switch Phone Provider to Twilio Verify](https://supabase.com/dashboard/project/_/auth/providers)
+3. Configure the Twilio Verify Service ID field using the Verification Service ID obtained in 1.
+
+When using Twilio Verify, OTPs are generated by Twilio. This means that:
+
+- Unlike other providers, the OTP expiry duration and message content fields are not configurable via the Supabase dashboard. Please head to Twilio Verify to configure these settings.
+- The token remains the same during its validity period until the verification is successful. This means if your user make another request within that period, they will receive the same token.
+- Twilio Verify has a separate set of rate limits that apply. Visit Twilio's [Rate Limit and Timeouts page](https://www.twilio.com/docs/verify/api/rate-limits-and-timeouts) to find out more.
+
+
+
+At this time, Twilio Verify is only supported on the `whatsapp` and `sms` channels.
+
+
+
+## Twilio (Programmable Messaging)
+
+In this section, you'll set up Twilio as an SMS provider:
+
+What you'll need:
+
+- A Twilio account (sign up here: https://www.twilio.com/try-twilio)
+- A Supabase project (create one here: https://supabase.com/dashboard)
+- A mobile phone capable of receiving SMS
+
+
+
+
+
+### Setting up your Twilio credentials
+
+Start by logging into your Twilio account and starting a new project: https://www.twilio.com/console/projects/create
+
+Give your project a name and verify the mobile number you'll be using to test with. This is the number that will be receiving the SMS OTPs.
+
+
+
+
+Select 'SMS', 'Identity & Verification', and 'With code' as options on the welcome form.
+
+
+
+When you're back on the [Twilio console screen](https://www.twilio.com/console), you need to scroll down and click 'Get a trial phone number' - this is the number that you'll be sending SMSs from.
+
+
+
+
+
+You should now be able to see all three values you'll need to get started:
+
+- Account SID
+- Auth Token
+- Sender Phone Number
+
+
+
+Now go to the [Auth > Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the Supabase dashboard and select "Phone" from the Auth Providers list.
+
+You should see an option to enable the Phone provider.
+
+Toggle it on, and copy the 3 values over from the Twilio dashboard. Click save.
+
+Note: for "Twilio Message Service SID" you can use the Sender Phone Number generated above.
+
+
+
+Now the backend should be setup, we can proceed to add our client-side code!
+
+
+ The `Twilio Content SID` field is specific to Twilio Programmable Messaging (WhatsApp) senders.
+ Disregard this field if you are only sending SMS messages. Refer to the section on WhatsApp OTP
+ Logins for further details.
+
+
+#### SMS custom template
+
+The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
+
+Go to the [Auth > Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the Supabase dashboard and select "Phone" from the Auth Providers list. Scroll to the very bottom of the "Phone" section to the "SMS Message" input - you can customize the SMS message here.
+
+Use the variable `.Code` in the template to display the OTP code. Here's an example in the SMS template.
+
+
+
+## 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
+
+Twilio Verify can be used with WhatsApp OTPs with no additional configuration.
+
+Complete the following steps to use WhatsApp OTP with Twilio Programmable Messaging:
+
+1. Go through the [Twilio self sign up guide for WhatsApp](https://www.twilio.com/docs/whatsapp/self-sign-up).
+2. Register a Twilio Content Template via the [API](https://www.twilio.com/docs/content/whatsappauthentication) and note the corresponding Twilio Content SID. You can also use the Template Builder on the Twilio dashboard to create a Content Template
+ 
+3. Register the Twilio Content SID on the Supabase dashboard under Authentication > Providers > Phone > Twilio Content SID. Ensure you have Twilio selected as your phone provider.
+
+
+
+You may only use one Twilio Content SID at a time. Supabase Auth will use the Content Template over the `SMS Message` field when sending WhatsApp messages. Use Twilio Verify if you need to use more than one message template.
+
+
+
+## Next steps
+
+To implement Phone Login, see the docs on [using Phone Login](/docs/guides/auth/phone-login#using-phone-login).
+
+## Resources
+
+- [Reasons to use Twilio Verify](https://www.twilio.com/blog/9-reasons-to-use-the-verify-api)
+- [Twilio Verify Documentation](https://www.twilio.com/docs/verify)
+- [Twilio Signup](https://www.twilio.com/try-twilio)
+- [Supabase Dashboard](https://supabase.com/dashboard)
+- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
diff --git a/apps/docs/content/guides/auth/phone-login/vonage.mdx b/apps/docs/content/guides/auth/phone-login/vonage.mdx
new file mode 100644
index 00000000000..046f0b85d2a
--- /dev/null
+++ b/apps/docs/content/guides/auth/phone-login/vonage.mdx
@@ -0,0 +1,66 @@
+---
+id: 'auth-vonage'
+title: 'Phone Auth with Vonage'
+description: 'How to set up and use Mobile OTP with Vonage and Supabase.'
+---
+
+
+
+Authenticating users via SMS can become expensive. Adjust your project's rate limits and [configure CAPTCHA](/docs/guides/auth/auth-captcha) to control the bill. Read more about this in the [Production Checklist](/docs/guides/platform/going-into-prod).
+
+
+
+## Prerequisites
+
+You'll need:
+
+- A Vonage account (sign up here: https://dashboard.nexmo.com/sign-up)
+- A Supabase project (create one here: https://supabase.com/dashboard)
+- A mobile phone capable of receiving SMS
+
+## Set up Vonage as an SMS provider
+
+### Getting your Vonage credentials
+
+Start by logging into your Vonage Dashboard at https://dashboard.nexmo.com/
+
+You will see you API Key and API Secret here, which is actually all you need to get started.
+
+In most countries, a phone number is actually optional and you can also use any Alphanumeric Sender ID of up to 11 characters length (8 for India) as a Sender ID (from). This means you do not need a number to test with in most cases.
+
+To find out more about supported countries for Alphanumeric Sender ID, check this overview: https://help.nexmo.com/hc/en-us/articles/115011781468-SMS-Features-Overview-Outbound-only-
+
+Hint: Some countries might need a Sender ID Registration to allow sending with an Alphanumeric Sender ID. You can find this information in the help article as well. If Alpha Sender IDs are not supported, you will need to buy a phone number.
+
+### Getting a phone number (optional)
+
+If you want a phone number to send SMS from, you can buy one from the Vonage Dashboard under Numbers > Buy Numbers (https://dashboard.nexmo.com/buy-numbers).
+
+Select the country you want a number for. You will need a mobile phone number with SMS or SMS+Voice capability. After you have bought the number, you will be able to send SMS from it.
+
+### Configure Supabase
+
+Now go to the [Auth > Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the Supabase dashboard and select "Phone" from the Auth Providers list.
+
+You should see an option to enable the Phone provider.
+
+Toggle it on, and copy the API key, API secret and phone number values over from the Vonage dashboard. Click save.
+
+Now the backend should be setup, we can proceed to add our client-side code!
+
+#### SMS custom template
+
+The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
+
+Go to [Auth > Templates](https://supabase.com/dashboard/project/_/auth/templates) page in the Supabase dashboard.
+
+Use the variable `.Code` in the template to display the code.
+
+## Next steps
+
+To implement Phone Login, see the docs on [using Phone Login](/docs/guides/auth/phone-login#using-phone-login).
+
+## Resources
+
+- [Vonage Signup](https://dashboard.nexmo.com/sign-up)
+- [Supabase Dashboard](https://supabase.com/dashboard)
diff --git a/apps/docs/pages/guides/auth/quickstarts/nextjs.mdx b/apps/docs/content/guides/auth/quickstarts/nextjs.mdx
similarity index 85%
rename from apps/docs/pages/guides/auth/quickstarts/nextjs.mdx
rename to apps/docs/content/guides/auth/quickstarts/nextjs.mdx
index 05ff464107c..33bb93927d5 100644
--- a/apps/docs/pages/guides/auth/quickstarts/nextjs.mdx
+++ b/apps/docs/content/guides/auth/quickstarts/nextjs.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
- title: 'Use Supabase Auth with Next.js',
- subtitle: 'Learn how to configure Supabase Auth for the Next.js App Router.',
- breadcrumb: 'Auth Quickstarts',
-}
+---
+title: 'Use Supabase Auth with Next.js'
+subtitle: 'Learn how to configure Supabase Auth for the Next.js App Router.'
+breadcrumb: 'Auth Quickstarts'
+hideToc: true
+---
@@ -88,7 +86,3 @@ export const meta = {
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/quickstarts/react-native.mdx b/apps/docs/content/guides/auth/quickstarts/react-native.mdx
similarity index 95%
rename from apps/docs/pages/guides/auth/quickstarts/react-native.mdx
rename to apps/docs/content/guides/auth/quickstarts/react-native.mdx
index 87ab5ddbff2..ff35d7283e3 100644
--- a/apps/docs/pages/guides/auth/quickstarts/react-native.mdx
+++ b/apps/docs/content/guides/auth/quickstarts/react-native.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
- title: 'Use Supabase Auth with React Native',
- subtitle: 'Learn how to use Supabase Auth with React Native',
- breadcrumb: 'Auth Quickstarts',
-}
+---
+title: 'Use Supabase Auth with React Native'
+subtitle: 'Learn how to use Supabase Auth with React Native'
+breadcrumb: 'Auth Quickstarts'
+hideToc: true
+---
@@ -268,7 +266,3 @@ export const meta = {
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/quickstarts/react.mdx b/apps/docs/content/guides/auth/quickstarts/react.mdx
similarity index 90%
rename from apps/docs/pages/guides/auth/quickstarts/react.mdx
rename to apps/docs/content/guides/auth/quickstarts/react.mdx
index 8a852e454fd..ca3e45a75bd 100644
--- a/apps/docs/pages/guides/auth/quickstarts/react.mdx
+++ b/apps/docs/content/guides/auth/quickstarts/react.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import StepHikeCompact from '~/components/StepHikeCompact'
-
-export const meta = {
- title: 'Use Supabase Auth with React',
- subtitle: 'Learn how to use Supabase Auth with React.js.',
- breadcrumb: 'Auth Quickstarts',
-}
+---
+title: 'Use Supabase Auth with React'
+subtitle: 'Learn how to use Supabase Auth with React.js.'
+breadcrumb: 'Auth Quickstarts'
+hideToc: true
+---
@@ -132,7 +130,3 @@ export const meta = {
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/row-level-security.mdx b/apps/docs/content/guides/auth/row-level-security.mdx
similarity index 94%
rename from apps/docs/pages/guides/auth/row-level-security.mdx
rename to apps/docs/content/guides/auth/row-level-security.mdx
index d8c1b1b53ba..f7fb52a63df 100644
--- a/apps/docs/pages/guides/auth/row-level-security.mdx
+++ b/apps/docs/content/guides/auth/row-level-security.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'row-level-security',
- title: 'Row Level Security',
- description: 'Using Row Level Security with Supabase Auth.',
- subtitle: 'Using Row Level Security with Supabase Auth.',
- tocVideo: 'Ow_Uzedfohk',
-}
+---
+id: 'row-level-security'
+title: 'Row Level Security'
+description: 'Using Row Level Security with Supabase Auth.'
+subtitle: 'Using Row Level Security with Supabase Auth.'
+tocVideo: 'Ow_Uzedfohk'
+---
[Postgres Row Level Security](/docs/guides/database/postgres/row-level-security) (RLS) is a feature of Postgres that allows you to control which users are permitted to perform SELECT/INSERT/UPDATE/DELETE statements on specific rows within tables and views. For example, you could restrict a `blog_post` table such that the current user is only allowed to UPDATE rows where their user id is set in the table's `author_id` column.
@@ -38,10 +36,11 @@ using ( auth.uid() = user_id );
```sql
select *
from todos
-where auth.uid() = todos.user_id; -- Policy is implicitly added.
+where auth.uid() = todos.user_id;
+-- Policy is implicitly added.
```
-## Authenticated and anonymous roles
+## Authenticated and anonymous roles
Supabase Auth maps every request to one of the roles:
@@ -56,7 +55,7 @@ on profiles for select
to authenticated, anon
using ( true );
--- OR
+-- OR
create policy "Public profiles are viewable only by authenticated users"
on profiles for select
@@ -64,7 +63,6 @@ to authenticated
using ( true );
```
-
## Helper functions
Supabase provides some helper functions that make it easier to write Policies.
@@ -82,8 +80,8 @@ Returns the JWT of the user making the request. Anything that you store in the u
The `auth.jwt()` function is extremely versatile. For example, if you store some team data inside `app_metadata`, you can use it to determine whether a particular user belongs to a team. For example, if this was an array of IDs:
-```sql
-create policy "User is in team"
+```sql
+create policy "User is in team"
on my_table
to authenticated
using ( team_id in (select auth.jwt() -> 'app_metadata' -> 'teams'));
@@ -91,7 +89,7 @@ using ( team_id in (select auth.jwt() -> 'app_metadata' -> 'teams'));
-Keep in mind that a JWT is not always "fresh". In the example above, even if you remove a user from a team and update the `app_metadata` field, that will not be reflected using `auth.jwt()` until the user's JWT is refreshed.
+Keep in mind that a JWT is not always "fresh". In the example above, even if you remove a user from a team and update the `app_metadata` field, that will not be reflected using `auth.jwt()` until the user's JWT is refreshed.
Also, if you are using Cookies for Auth, then you must be mindful of the JWT size. Some browsers are limited to 4096 bytes for each cookie, and so the total size of your JWT should be small enough to fit inside this limitation.
@@ -125,7 +123,7 @@ using ( true );
If you want to use another authorization method for your applications that's also fine. Supabase is "just Postgres", so if your application works with Postgres, then it also works with Supabase. If you take this path, don't put your tables in the `public` schema - instead create a new schema for your tables and functions:
-```sql
+```sql
create schema private;
create table private.employees (
@@ -147,10 +145,9 @@ alter table profiles enable row level security;
This makes the tables inaccessible via the [APIs](/docs/guides/api).
-
## Usage
-Row Level Security is extremely versatile, since it simply uses SQL to express access rules for your data.
+Row Level Security is extremely versatile, since it simply uses SQL to express access rules for your data.
### Using functions
@@ -291,7 +288,3 @@ to authenticated using (
- [Testing your database](/docs/guides/database/testing)
- Community repo on testing RLS using [pgTAP and dbdev](https://github.com/usebasejump/supabase-test-helpers/tree/main)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/server-side-rendering.mdx b/apps/docs/content/guides/auth/server-side-rendering.mdx
similarity index 97%
rename from apps/docs/pages/guides/auth/server-side-rendering.mdx
rename to apps/docs/content/guides/auth/server-side-rendering.mdx
index 4d01f8e1605..78e0d7e31c4 100644
--- a/apps/docs/pages/guides/auth/server-side-rendering.mdx
+++ b/apps/docs/content/guides/auth/server-side-rendering.mdx
@@ -1,11 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { Accordion } from 'ui'
-
-export const meta = {
- id: 'server-side-rendering',
- title: 'Server-Side Rendering',
- description: 'Render pages with user information on the server.',
-}
+---
+id: 'server-side-rendering'
+title: 'Server-Side Rendering'
+description: 'Render pages with user information on the server.'
+---
Single-page apps with server-side rendering (SSR) is a popular way to optimize rendering performance and leverage advanced caching strategies.
@@ -68,7 +65,7 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
Web browsers do not send the URL fragment to the server they're making the request to. Since you may not be hosting the single-page app on a server under 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. If you wish to obtain the `access_token` and `refresh_token` on a server, please consider using the PKCE flow.
@@ -80,7 +77,7 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
header={PKCE}
id={`ssr-pkce-flow`}
>
-
+
When using the PKCE flow, a redirect URL will be returned with the following structure:
```
https://yourapp.com/...?code=<...>
@@ -90,7 +87,7 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
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:
@@ -143,6 +140,7 @@ Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The
+
## Bringing it together
@@ -240,7 +238,3 @@ Also be sure you set proper cache control headers. We recommend invalidating cac
### Which authentication flows have PKCE support?
At present, PKCE is supported on the Magic Link, OAuth, Sign Up, and Password Recovery routes. These correspond to the `signInWithOtp`, `signInWithOAuth`, `signUp`, and `resetPasswordForEmail` methods on the Supabase client library. When using PKCE with Phone and Email OTPs, there is no behavior change with respect to the implicit flow - an access token will be returned in the body when a request is successful.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/server-side/creating-a-client.mdx b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx
similarity index 96%
rename from apps/docs/pages/guides/auth/server-side/creating-a-client.mdx
rename to apps/docs/content/guides/auth/server-side/creating-a-client.mdx
index f0e4ef72106..b8917844105 100644
--- a/apps/docs/pages/guides/auth/server-side/creating-a-client.mdx
+++ b/apps/docs/content/guides/auth/server-side/creating-a-client.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- title: 'Creating a Supabase client for SSR',
- description: 'Configure Supabase client to use Cookies',
- sidebar_label: 'Creating a client',
-}
+---
+title: 'Creating a Supabase client for SSR'
+description: 'Configure Supabase client to use Cookies'
+sidebar_label: 'Creating a client'
+---
### Install Supabase packages
@@ -98,6 +96,12 @@ dotenv.config()
Creating a Supabase client with the `ssr` package automatically configures it to use cookies. This means your user's session is available throughout the entire Next.js stack - client, server, App Router, Pages Router. It just works!
+
+
+For the client utility functions, it is recommended to create them in a separate `/utils/supabase` folder. That way, you can import them as `client` into any component or page that needs access to Supabase. For further information, you can look at the [Next.js Auth Guide](/docs/guides/auth/server-side/nextjs).
+
+
+
{
* will replicate previous/standard behaviour (https://kit.svelte.dev/docs/types#public-types-cookies)
*/
set: (key, value, options) => {
- event.cookies.set(key, value, { ...options, path: '' })
+ event.cookies.set(key, value, { ...options, path: '/' })
},
remove: (key, options) => {
- event.cookies.delete(key, { ...options, path: '' })
+ event.cookies.delete(key, { ...options, path: '/' })
},
},
})
@@ -862,7 +866,3 @@ app.post("/hello-world", async function (req, res, next) {
- Implement [Authentication using Email and Password](/docs/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr)
- Implement [Authentication using OAuth](/docs/guides/auth/server-side/oauth-with-pkce-flow-for-ssr)
- [Learn more about SSR](/docs/guides/auth/server-side-rendering)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr.mdx b/apps/docs/content/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr.mdx
similarity index 93%
rename from apps/docs/pages/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr.mdx
rename to apps/docs/content/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr.mdx
index 0eea3cf2723..02fe242a0a0 100644
--- a/apps/docs/pages/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr.mdx
+++ b/apps/docs/content/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr.mdx
@@ -1,12 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- title: 'Email Auth with PKCE flow for SSR',
- description:
- 'Learn how to configure email authentication in your server-side rendering (SSR) application to work with the PKCE flow.',
- subtitle:
- 'Learn how to configure email authentication in your server-side rendering (SSR) application to work with the PKCE flow.',
-}
+---
+title: 'Email Auth with PKCE flow for SSR'
+description: 'Learn how to configure email authentication in your server-side rendering (SSR) application to work with the PKCE flow.'
+subtitle: 'Learn how to configure email authentication in your server-side rendering (SSR) application to work with the PKCE flow.'
+---
### Setting up SSR client
@@ -277,7 +273,7 @@ Let's update the URL in our email templates to point to our new confirmation end
```
**Change Email Address template**
@@ -306,7 +302,3 @@ Let's update the URL in our email templates to point to our new confirmation end
>
```
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/server-side/migrating-to-ssr-from-auth-helpers.mdx b/apps/docs/content/guides/auth/server-side/migrating-to-ssr-from-auth-helpers.mdx
similarity index 78%
rename from apps/docs/pages/guides/auth/server-side/migrating-to-ssr-from-auth-helpers.mdx
rename to apps/docs/content/guides/auth/server-side/migrating-to-ssr-from-auth-helpers.mdx
index 4ff96642f8b..63de85f80bb 100644
--- a/apps/docs/pages/guides/auth/server-side/migrating-to-ssr-from-auth-helpers.mdx
+++ b/apps/docs/content/guides/auth/server-side/migrating-to-ssr-from-auth-helpers.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- title: 'Migrating to the SSR package from Auth Helpers',
- description: 'Step-by-step guide to migrating your app to the new SSR package',
- sidebar_label: 'Migrating to SSR from Auth Helpers',
-}
+---
+title: 'Migrating to the SSR package from Auth Helpers'
+description: 'Step-by-step guide to migrating your app to the new SSR package'
+sidebar_label: 'Migrating to SSR from Auth Helpers'
+---
The new `ssr` package takes the core concepts of the Auth Helpers and makes them available to any server language or framework. This page will guide you through migrating from the Auth Helpers package to `ssr`.
@@ -50,7 +48,3 @@ Check out the [Creating a client](/docs/guides/auth/server-side/creating-a-clien
- Implement [Authentication using Email and Password](/docs/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr)
- Implement [Authentication using OAuth](/docs/guides/auth/server-side/oauth-with-pkce-flow-for-ssr)
- [Learn more about SSR](/docs/guides/auth/server-side-rendering)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/content/guides/auth/server-side/nextjs.mdx b/apps/docs/content/guides/auth/server-side/nextjs.mdx
new file mode 100644
index 00000000000..99b0cd126e0
--- /dev/null
+++ b/apps/docs/content/guides/auth/server-side/nextjs.mdx
@@ -0,0 +1,1010 @@
+---
+title: 'Setting up Server-Side Auth for Next.js'
+sidebar_label: 'Next.js guide'
+hideToc: true
+---
+
+Next.js comes in two flavors: the [App Router](https://nextjs.org/docs/app) and the [Pages Router](https://nextjs.org/docs/pages). You can set up Server-Side Auth with either strategy. You can even use both in the same application.
+
+
+
+
+
+
+
+
+
+
+
+Install the `@supabase/supabase-js` package and the helper `@supabase/ssr` package.
+
+
+
+
+
+```sh
+npm install @supabase/supabase-js @supabase/ssr
+```
+
+
+
+
+
+
+
+
+
+Create a `.env.local` file in your project root directory.
+
+Fill in your `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY`:
+
+
+
+
+
+
+
+
+```txt .env.local
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+```
+
+
+
+
+
+
+
+
+
+To access Supabase from your Next.js app, you need 2 types of Supabase clients:
+
+1. **Client Component client** - To access Supabase from Client Components, which run in the browser.
+1. **Server Component client** - To access Supabase from Server Components, Server Actions, and Route Handlers, which run only on the server.
+
+Create a `utils/supabase` folder with a file for each type of client. Then copy the utility functions for each client type.
+
+
+
+ What does the `cookies` object do?}
+ id="utility-cookies"
+ >
+
+ The cookies object lets the Supabase client know how to access the cookies, so it can read and write the user session data. To make `@supabase/ssr` framework-agnostic, the cookies methods aren't hard-coded. These utility functions adapt `@supabase/ssr`'s cookie handling for Next.js.
+
+ The `set` and `remove` methods for the server client need error handlers, because Next.js throws an error if cookies are set from Server Components. You can safely ignore this error because you'll set up middleware in the next step to write refreshed cookies to storage.
+
+
+
+
+
+ Do I need to create a new client for every route?}
+ id="client-deduplication"
+ >
+
+ Yes! Creating a Supabase client is lightweight.
+
+ - On the server, it basically configures a `fetch` call. You need to reconfigure the fetch call anew for every request to your server, because you need the cookies from the request.
+ - On the client, `createBrowserClient` already uses a singleton pattern, so you only ever create one instance, no matter how many times you call your `createClient` function.
+
+
+
+
+
+
+
+
+
+
+
+
+```ts utils/supabase/client.ts
+import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+ return createBrowserClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+ )
+}
+```
+
+```ts utils/supabase/server.ts
+import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { type cookies } from 'next/headers'
+
+export function createClient(cookieStore: ReturnType) {
+ return createServerClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+ {
+ cookies: {
+ get(name: string) {
+ return cookieStore.get(name)?.value
+ },
+ set(name: string, value: string, options: CookieOptions) {
+ try {
+ cookieStore.set({ name, value, ...options })
+ } catch (error) {
+ // The `set` method was called from a Server Component.
+ // This can be ignored if you have middleware refreshing
+ // user sessions.
+ }
+ },
+ remove(name: string, options: CookieOptions) {
+ try {
+ cookieStore.set({ name, value: '', ...options })
+ } catch (error) {
+ // The `delete` method was called from a Server Component.
+ // This can be ignored if you have middleware refreshing
+ // user sessions.
+ }
+ },
+ },
+ }
+ )
+}
+```
+
+
+
+
+
+
+
+
+
+
+
+Create a `middleware.ts` file at the root of your project.
+
+Since Server Components can't write cookies, you need middleware to refresh expired Auth tokens and store them.
+
+The middleware is responsible for:
+
+1. Refreshing the Auth token (by calling `supabase.auth.getUser`).
+1. Passing the refreshed Auth token to Server Components, so they don't attempt to refresh the same token themselves. This is accomplished with `request.cookies.set`.
+1. Passing the refreshed Auth token to the browser, so it replaces the old token. This is accomplished with `response.cookies.set`.
+
+Copy the middleware code for your app.
+
+Add a [matcher](https://nextjs.org/docs/app/building-your-application/routing/middleware#matching-paths) so the middleware doesn't run on routes that don't access Supabase.
+
+
+
+Be careful when protecting pages. The server gets the user session from the cookies, which can be spoofed by anyone.
+
+Always use `supabase.auth.getUser()` to protect pages and user data.
+
+_Never_ trust `supabase.auth.getSession()` inside server code such as middleware. It isn't guaranteed to revalidate the Auth token.
+
+It's safe to trust `getUser()` because it sends a request to the Supabase Auth server every time to revalidate the Auth token.
+
+
+
+
+
+
+
+```ts middleware.ts
+import { createServerClient, type CookieOptions } from '@supabase/ssr'
+import { NextResponse, type NextRequest } from 'next/server'
+
+export async function middleware(request: NextRequest) {
+ let response = NextResponse.next({
+ request: {
+ headers: request.headers,
+ },
+ })
+
+ const supabase = createServerClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+ {
+ cookies: {
+ get(name: string) {
+ return request.cookies.get(name)?.value
+ },
+ set(name: string, value: string, options: CookieOptions) {
+ request.cookies.set({
+ name,
+ value,
+ ...options,
+ })
+ response = NextResponse.next({
+ request: {
+ headers: request.headers,
+ },
+ })
+ response.cookies.set({
+ name,
+ value,
+ ...options,
+ })
+ },
+ remove(name: string, options: CookieOptions) {
+ request.cookies.set({
+ name,
+ value: '',
+ ...options,
+ })
+ response = NextResponse.next({
+ request: {
+ headers: request.headers,
+ },
+ })
+ response.cookies.set({
+ name,
+ value: '',
+ ...options,
+ })
+ },
+ },
+ }
+ )
+
+ await supabase.auth.getUser()
+
+ return response
+}
+
+export const config = {
+ matcher: [
+ /*
+ * Match all request paths except for the ones starting with:
+ * - _next/static (static files)
+ * - _next/image (image optimization files)
+ * - favicon.ico (favicon file)
+ * Feel free to modify this pattern to include more paths.
+ */
+ '/((?!_next/static|_next/image|favicon.ico|.*\\.(?:svg|png|jpg|jpeg|gif|webp)$).*)',
+ ],
+}
+```
+
+
+
+
+
+
+
+
+
+Create a login page for your app. Use a Server Action to call the Supabase signup function.
+
+Since Supabase is being called from an Action, use the client defined in `@/utils/supabase/server.ts`.
+
+
+
+Note that `cookies` is called before any calls to Supabase, which opts fetch calls out of Next.js's caching. This is important for authenticated data fetches, to ensure that users get access only to their own data.
+
+See the Next.js docs to learn more about [opting out of data caching](https://nextjs.org/docs/app/building-your-application/data-fetching/fetching-caching-and-revalidating#opting-out-of-data-caching).
+
+
+
+
+
+
+
+
+
+```ts app/login/page.tsx
+import { login, signup } from './actions'
+
+export default function LoginPage() {
+ return (
+
+ )
+}
+```
+
+```ts app/login/actions.ts
+'use server'
+
+import { revalidatePath } from 'next/cache'
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+import { createClient } from '@/utils/supabase/server'
+
+export async function login(formData: FormData) {
+ const cookieStore = cookies()
+ const supabase = createClient(cookieStore)
+
+ // type-casting here for convenience
+ // in practice, you should validate your inputs
+ const data = {
+ email: formData.get('email') as string,
+ password: formData.get('password') as string,
+ }
+
+ const { error } = await supabase.auth.signInWithPassword(data)
+
+ if (error) {
+ redirect('/error')
+ }
+
+ revalidatePath('/', 'layout')
+ redirect('/')
+}
+
+export async function signup(formData: FormData) {
+ const cookieStore = cookies()
+ const supabase = createClient(cookieStore)
+
+ // type-casting here for convenience
+ // in practice, you should validate your inputs
+ const data = {
+ email: formData.get('email') as string,
+ password: formData.get('password') as string,
+ }
+
+ const { error } = await supabase.auth.signUp(data)
+
+ if (error) {
+ redirect('/error')
+ }
+
+ revalidatePath('/', 'layout')
+ redirect('/')
+}
+```
+
+```ts app/error/page.tsx
+export default function ErrorPage() {
+ return
Sorry, something went wrong
+}
+```
+
+
+
+
+
+
+
+
+
+
+
+If you have email confirmation turned on (the default), a new user will receive an email confirmation after signing up.
+
+Change the email template to support a server-side authentication flow.
+
+Go to the [Auth templates](https://supabase.com/dashboard/project/_/auth/templates) page in your dashboard. In each email template, change `{{ .ConfirmationURL }}` to `{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=signup`.
+
+
+
+
+
+
+
+
+
+Create a Route Handler for `auth/confirm`. When a user clicks their confirmation email link, exchange their secure code for an Auth token.
+
+Since this is a Router Handler, use the Supabase client from `@/utils/supabase/server.ts`.
+
+
+
+
+
+```ts app/auth/confirm/route.ts
+import { type EmailOtpType } from '@supabase/supabase-js'
+import { cookies } from 'next/headers'
+import { type NextRequest, NextResponse } from 'next/server'
+
+import { createClient } from '@/utils/supabase/server'
+
+export async function GET(request: NextRequest) {
+ const cookieStore = cookies()
+
+ const { searchParams } = new URL(request.url)
+ const token_hash = searchParams.get('token_hash')
+ const type = searchParams.get('type') as EmailOtpType | null
+ const next = searchParams.get('next') ?? '/'
+
+ const redirectTo = request.nextUrl.clone()
+ redirectTo.pathname = next
+ redirectTo.searchParams.delete('token_hash')
+ redirectTo.searchParams.delete('type')
+
+ if (token_hash && type) {
+ const supabase = createClient(cookieStore)
+
+ const { error } = await supabase.auth.verifyOtp({
+ type,
+ token_hash,
+ })
+ if (!error) {
+ redirectTo.searchParams.delete('next')
+ return NextResponse.redirect(redirectTo)
+ }
+ }
+
+ // return the user to an error page with some instructions
+ redirectTo.pathname = '/error'
+ return NextResponse.redirect(redirectTo)
+}
+```
+
+
+
+
+
+
+
+
+
+Server Components can read cookies, so you can get the Auth status and user info.
+
+Since you're calling Supabase from a Server Component, use the client created in `@/utils/supabase/server.ts`.
+
+Create a `private` page that users can only access if they're logged in. The page displays their email.
+
+
+
+Be careful when protecting pages. The server gets the user session from the cookies, which can be spoofed by anyone.
+
+Always use `supabase.auth.getUser()` to protect pages and user data.
+
+_Never_ trust `supabase.auth.getSession()` inside Server Components. It isn't guaranteed to revalidate the Auth token.
+
+It's safe to trust `getUser()` because it sends a request to the Supabase Auth server every time to revalidate the Auth token.
+
+
+
+
+
+
+
+```ts app/private/page.tsx
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+import { createClient } from '@/utils/supabase/server'
+
+export default async function PrivatePage() {
+ const cookieStore = cookies()
+ const supabase = createClient(cookieStore)
+
+ const { data, error } = await supabase.auth.getUser()
+ if (error || !data?.user) {
+ redirect('/')
+ }
+
+ return
Hello {data.user.email}
+}
+```
+
+
+
+
+
+
+
+## Congratulations
+
+You're done! To recap, you've successfully:
+
+- Called Supabase from a Server Action.
+- Called Supabase from a Server Component.
+- Set up a Supabase client utility to call Supabase from a Client Component. You can use this if you need to call Supabase from a Client Component, for example to set up a realtime subscription.
+- Set up middleware to automatically refresh the Supabase Auth session.
+
+You can now use any Supabase features from your client or server code!
+
+## Troubleshooting
+
+
+
+ Getting the error DynamicServerError: Dynamic server usage: cookies}
+ id="troubleshooting-error-dynamic-cookies"
+ >
+ This means Next.js has failed to detect that the route is dynamic until the `cookies` function is called. To fix this, make sure you call the `cookies` function directly in your Server Component, instead of abstracting it out.
+
+ Alternatively, you can mark the route as dynamic using `export const dynamic = 'force-dynamic'`.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Install the `@supabase/supabase-js` package and the helper `@supabase/ssr` package.
+
+
+
+
+
+```sh
+npm install @supabase/supabase-js @supabase/ssr
+```
+
+
+
+
+
+
+
+
+
+Create a `.env.local` file in your project root directory.
+
+Fill in your `NEXT_PUBLIC_SUPABASE_URL` and `NEXT_PUBLIC_SUPABASE_ANON_KEY`:
+
+
+
+
+
+
+
+
+```txt .env.local
+NEXT_PUBLIC_SUPABASE_URL=
+NEXT_PUBLIC_SUPABASE_ANON_KEY=
+```
+
+
+
+
+
+
+
+
+
+To access Supabase from your Next.js app, you need 4 types of Supabase clients:
+
+1. **`getServerSideProps` client** - To access Supabase from `getServerSideProps`.
+1. **`getStaticProps` client** - To access Supabase from `getStaticProps`.
+1. **Component client** - To access Supabase from within components.
+1. **API route client** - To access Supabase from API route handlers.
+
+Create a `utils/supabase` folder with a file for each type of client. Then copy the utility functions for each client type.
+
+
+
+ Why do I need so many types of clients?}
+ id="nextjs-clients"
+ >
+
+ A Supabase client reads and sets cookies in order to access and update the user session. Depending on where the client is used, it needs to interact with cookies in a different way:
+
+ - **`getServerSideProps`** - Runs on the server. Reads cookies from the request, which is passed through from `GetServerSidePropsContext`.
+ - **`getStaticProps`** - Runs at build time, where there is no user, session, or cookies.
+ - **Component** - Runs on the client. Reads cookies from browser storage. Behind the scenes, `createBrowserClient` reuses the same client instance if called multiple times, so don't worry about deduplicating the client yourself.
+ - **API route** - Runs on the server. Reads cookies from the request, which is passed through from `NextApiRequest`.
+
+
+
+
+
+ What does the `cookies` object do?}
+ id="client-storage-cookies"
+ >
+
+ The cookies object lets the Supabase client know how to access the cookies, so it can read and write the user session. To make `@supabase/ssr` framework-agnostic, the cookies methods aren't hard-coded. But you only need to set them up once. You can then reuse your utility functions whenever you need a Supabase client.
+
+
+
+
+
+
+
+
+
+
+
+
+```ts utils/supabase/server-props.ts
+import { createServerClient, type CookieOptions, serialize } from '@supabase/ssr'
+import { type GetServerSidePropsContext } from 'next'
+
+export function createClient(context: GetServerSidePropsContext) {
+ const supabase = createServerClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+ {
+ cookies: {
+ get(name: string) {
+ return context.req.cookies[name]
+ },
+ set(name: string, value: string, options: CookieOptions) {
+ context.res.appendHeader('Set-Cookie', serialize(name, value, options))
+ },
+ remove(name: string, options: CookieOptions) {
+ context.res.appendHeader('Set-Cookie', serialize(name, '', options))
+ },
+ },
+ }
+ )
+
+ return supabase
+}
+```
+
+```ts utils/supabase/static-props.ts
+import { createClient as createClientPrimitive } from '@supabase/supabase-js'
+
+export function createClient() {
+ const supabase = createClientPrimitive(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+ )
+
+ return supabase
+}
+```
+
+```ts utils/supabase/component.ts
+import { createBrowserClient } from '@supabase/ssr'
+
+export function createClient() {
+ const supabase = createBrowserClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+ )
+
+ return supabase
+}
+```
+
+```ts utils/supabase/api.ts
+import { createServerClient, type CookieOptions, serialize } from '@supabase/ssr'
+import { type NextApiRequest, type NextApiResponse } from 'next'
+
+export default function createClient(req: NextApiRequest, res: NextApiResponse) {
+ const supabase = createServerClient(
+ process.env.NEXT_PUBLIC_SUPABASE_URL!,
+ process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!,
+ {
+ cookies: {
+ get(name: string) {
+ return req.cookies[name]
+ },
+ set(name: string, value: string, options: CookieOptions) {
+ res.appendHeader('Set-Cookie', serialize(name, value, options))
+ },
+ remove(name: string, options: CookieOptions) {
+ res.appendHeader('Set-Cookie', serialize(name, '', options))
+ },
+ },
+ }
+ )
+
+ return supabase
+}
+```
+
+
+
+
+
+
+
+
+
+
+
+Create a login page for your app.
+
+Since Supabase is being called from a component, use the client defined in `@/utils/supabase/component.ts`.
+
+
+
+
+
+
+
+```ts pages/login.tsx
+import { useRouter } from 'next/router'
+import { useState } from 'react'
+
+import { createClient } from '@/utils/supabase/component'
+
+export default function LoginPage() {
+ const router = useRouter()
+ const supabase = createClient()
+
+ const [email, setEmail] = useState('')
+ const [password, setPassword] = useState('')
+
+ async function logIn() {
+ const { error } = await supabase.auth.signInWithPassword({ email, password })
+ if (error) {
+ console.error(error)
+ }
+ router.push('/')
+ }
+
+ async function signUp() {
+ const { error } = await supabase.auth.signUp({ email, password })
+ if (error) {
+ console.error(error)
+ }
+ router.push('/')
+ }
+
+ return (
+
+
+
+ )
+}
+```
+
+
+
+
+
+
+
+
+
+
+
+If you have email confirmation turned on (the default), a new user will receive an email confirmation after signing up.
+
+Change the email template to support a server-side authentication flow.
+
+Go to the [Auth templates](https://supabase.com/dashboard/project/_/auth/templates) page in your dashboard. In each email template, change `{{ .ConfirmationURL }}` to `{{ .SiteURL }}/api/auth/confirm?token_hash={{ .TokenHash }}&type=signup`.
+
+
+
+
+
+
+
+
+
+Create an API route for `api/auth/confirm`. When a user clicks their confirmation email link, exchange their secure code for an Auth token.
+
+Since this is an API route, use the Supabase client from `@/utils/supabase/api.ts`.
+
+
+
+
+
+
+
+```ts pages/api/auth/confirm.tsx
+import { type EmailOtpType } from '@supabase/supabase-js'
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+import { createClient } from '@/utils/supabase/api'
+
+function stringOrFirstString(item: string | string[] | undefined) {
+ return Array.isArray(item) ? item[0] : item
+}
+
+export default async function handler(req: NextApiRequest, res: NextApiResponse) {
+ if (req.method !== 'GET') {
+ res.status(405).appendHeader('Allow', 'GET').end()
+ return
+ }
+
+ const queryParams = req.query
+ const token_hash = stringOrFirstString(queryParams.token_hash)
+ const type = stringOrFirstString(queryParams.type)
+
+ let next = '/error'
+
+ if (token_hash && type) {
+ const supabase = createClient(req, res)
+ const { error } = await supabase.auth.verifyOtp({
+ type: type as EmailOtpType,
+ token_hash,
+ })
+ if (error) {
+ console.error(error)
+ } else {
+ next = stringOrFirstString(queryParams.next) || '/'
+ }
+ }
+
+ res.redirect(next)
+}
+```
+
+```tsx pages/error.tsx
+export default function ErrorPage() {
+ return
Sorry, something went wrong
+}
+```
+
+
+
+
+
+
+
+
+
+
+
+If you use dynamic server-side rendering, you can serve a page to authenticated users only by checking for the user data in `getServerSideProps`. Unauthenticated users will be redirected to the home page.
+
+Since you're calling Supabse from `getServerSideProps`, use the client from `@/utils/supabase/server-props.ts`.
+
+
+
+Be careful when protecting pages. The server gets the user session from the cookies, which can be spoofed by anyone.
+
+Always use `supabase.auth.getUser()` to protect pages and user data.
+
+_Never_ trust `supabase.auth.getSession()` inside server code. It isn't guaranteed to revalidate the Auth token.
+
+It's safe to trust `getUser()` because it sends a request to the Supabase Auth server every time to revalidate the Auth token.
+
+
+
+
+
+
+
+```ts pages/private.tsx
+import type { User } from '@supabase/supabase-js'
+import type { GetServerSidePropsContext } from 'next'
+
+import { createClient } from '@/utils/supabase/server-props'
+
+export default function PrivatePage({ user }: { user: User }) {
+ return
Hello, {user.email || 'user'}!
+}
+
+export async function getServerSideProps(context: GetServerSidePropsContext) {
+ const supabase = createClient(context)
+
+ const { data, error } = await supabase.auth.getUser()
+
+ if (error || !data) {
+ return {
+ redirect: {
+ destination: '/',
+ permanent: false,
+ },
+ }
+ }
+
+ return {
+ props: {
+ user: data.user,
+ },
+ }
+}
+```
+
+
+
+
+
+
+
+
+
+You can also fetch static data at build time using Supabase. Note that there's no session or user at build time, so the data will be the same for everyone who sees the page.
+
+Add some countries data to your database by running the [Countries Quickstart](https://supabase.com/dashboard/project/_/sql/quickstarts) in the dashboard.
+
+Then fetch the countries data using `getStaticProps` with the client from `@/utils/supabase/static-props.ts`.
+
+
+
+
+
+```ts pages/public.tsx
+import { createClient } from '@/utils/supabase/static-props'
+
+export default function PublicPage({ data }: { data?: any[] }) {
+ return
{data && JSON.stringify(data, null, 2)}
+}
+
+export async function getStaticProps() {
+ const supabase = createClient()
+
+ const { data, error } = await supabase.from('countries').select()
+
+ if (error || !data) {
+ return { props: {} }
+ }
+
+ return { props: { data } }
+}
+```
+
+
+
+
+
+
+
+## Congratulations
+
+You're done! To recap, you've successfully:
+
+- Called Supabase from a component
+- Called Supabase from an API route
+- Called Supabase from `getServerSideProps`
+- Called Supabase from `getStaticProps`
+
+You can now use any Supabase features from your client or server code!
+
+
+
+
+
+You can use both the App and Pages Routers together.
+
+Follow the instructions for both the App and Pages Routers. Whenever you need to connect to Supabase, import the `createClient` utility that you need:
+
+| Router | Code location | Which `createClient` to use |
+| ------------ | ------------------------------------------------- | --------------------------- |
+| App Router | Server Component, Server Action, or Route Handler | `server.ts` |
+| | Client Component | `client.ts` |
+| Pages Router | `getServerSideProps` | `server-props.ts` |
+| | `getStaticProps` | `static-props.ts` |
+| | Component | `component.ts` |
+| | API route | `api.ts` |
+
+Remember to create the `middleware.ts` file for the App Router so the session refreshes for App Router pages.
+
+
+
+
diff --git a/apps/docs/pages/guides/auth/server-side/oauth-with-pkce-flow-for-ssr.mdx b/apps/docs/content/guides/auth/server-side/oauth-with-pkce-flow-for-ssr.mdx
similarity index 92%
rename from apps/docs/pages/guides/auth/server-side/oauth-with-pkce-flow-for-ssr.mdx
rename to apps/docs/content/guides/auth/server-side/oauth-with-pkce-flow-for-ssr.mdx
index 884460b3c92..9ff80b227e0 100644
--- a/apps/docs/pages/guides/auth/server-side/oauth-with-pkce-flow-for-ssr.mdx
+++ b/apps/docs/content/guides/auth/server-side/oauth-with-pkce-flow-for-ssr.mdx
@@ -1,12 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- title: 'OAuth with PKCE flow for SSR',
- description:
- 'Learn how to configure OAuth authentication in your server-side rendering (SSR) application to work with the PKCE flow.',
- subtitle:
- 'Learn how to configure OAuth authentication in your server-side rendering (SSR) application to work with the PKCE flow.',
-}
+---
+title: 'OAuth with PKCE flow for SSR'
+description: 'Learn how to configure OAuth authentication in your server-side rendering (SSR) application to work with the PKCE flow.'
+subtitle: 'Learn how to configure OAuth authentication in your server-side rendering (SSR) application to work with the PKCE flow.'
+---
### Setting up SSR client
@@ -219,7 +215,3 @@ await supabase.auth.signInWithOAuth({
},
})
```
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/server-side/overview.mdx b/apps/docs/content/guides/auth/server-side/overview.mdx
similarity index 58%
rename from apps/docs/pages/guides/auth/server-side/overview.mdx
rename to apps/docs/content/guides/auth/server-side/overview.mdx
index 18e4c186f9a..eb2d1c1c9d8 100644
--- a/apps/docs/pages/guides/auth/server-side/overview.mdx
+++ b/apps/docs/content/guides/auth/server-side/overview.mdx
@@ -1,21 +1,27 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'index',
- title: 'Server-Side Auth Overview',
- description: 'Configure Supabase Auth to use Cookies',
- sidebar_label: 'Overview',
-}
+---
+id: 'index'
+title: 'Server-Side Auth Overview'
+description: 'Configure Supabase Auth to use Cookies'
+sidebar_label: 'Overview'
+---
When using Supabase with server-side languages and frameworks - such as Next.js, SvelteKit and Remix - it is important to configure your Supabase client to use cookies for storing user sessions. We have developed an `@supabase/ssr` package to make this process as simple as possible. This package is currently in `beta`. Adoption is recommended but be aware that the API is still unstable and may have breaking changes in the future.
## Framework quickstarts
-
- {quickstarts.map((item) => {
+
+ {[
+ {
+ title: 'Next.js',
+ href: '/guides/auth/server-side/nextjs',
+ description:
+ 'Automatically configure Supabase to use cookies, making your user and their session available on the client and server.',
+ icon: '/docs/img/icons/nextjs-icon',
+ },
+ ].map((item) => {
return (
-
-
+
+
{item.description}
@@ -35,17 +41,3 @@ If you're currently using the [Auth Helpers package](https://github.com/supabase
- [Email Auth with PKCE flow for SSR](/docs/guides/auth/server-side/email-based-auth-with-pkce-flow-for-ssr)
- [OAuth with PKCE flow for SSR](/docs/guides/auth/server-side/oauth-with-pkce-flow-for-ssr)
- [Learn more about SSR](/docs/guides/auth/server-side-rendering)
-
-export const quickstarts = [
- {
- title: 'Next.js',
- href: '/guides/auth/quickstarts/nextjs',
- description:
- 'Automatically configure Supabase to use cookies, making your user and their session available on the client and server.',
- icon: '/docs/img/icons/nextjs-icon',
- },
-]
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/sessions.mdx b/apps/docs/content/guides/auth/sessions.mdx
similarity index 90%
rename from apps/docs/pages/guides/auth/sessions.mdx
rename to apps/docs/content/guides/auth/sessions.mdx
index 5e8f5fe32d0..15484293d0d 100644
--- a/apps/docs/pages/guides/auth/sessions.mdx
+++ b/apps/docs/content/guides/auth/sessions.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'sessions',
- title: 'User Sessions',
- description: 'Control and manage user sessions.',
-}
+---
+id: 'sessions'
+title: 'User Sessions'
+description: 'Control and manage user sessions.'
+---
Supabase Auth provides fine-grained control over your user's sessions.
@@ -16,9 +14,9 @@ A session is created when a user signs in. By default, it lasts indefinitely and
A session is represented by the Supabase Auth access token in the form of a JWT, and a refresh token which is a unique string.
-Access tokens are designed to be short lived, usually between 5 minutes and 1 hour while refresh tokens never expire but can only be used once. You can exchange a refresh token only once to get a new access and refresh token pair.
+Access tokens are designed to be short lived, usually between 5 minutes and 1 hour while refresh tokens never expire but can only be used once. You can exchange a refresh token only once to get a new access and refresh token pair.
-This process is called **refreshing the session.**
+This process is called **refreshing the session.**
A session terminates, depending on configuration, when:
@@ -54,7 +52,7 @@ Upon sign out, all refresh tokens and potentially other database objects related
-Access tokens of revoked sessions remain valid until their expiry time, encoded in the `exp` claim. The user won't be immediately logged out and will only be logged out when the access token expires.
+Access tokens of revoked sessions remain valid until their expiry time, encoded in the `exp` claim. The user won't be immediately logged out and will only be logged out when the access token expires.
@@ -74,7 +72,7 @@ There are three ways to limit the lifetime of a session:
- Time-boxed sessions, which terminate after a fixed amount of time.
- Set an inactivity timeout, which terminates sessions that haven't been refreshed within the timeout duration.
-- Enforce a single-session per user, which only keeps the most recently active session.
+- Enforce a single-session per user, which only keeps the most recently active session.
To make sure that users are required to re-authenticate periodically, you can set a positive value for the **Time-box user sessions** option in the [Auth settings](/dashboard/project/_/settings/auth) for your project.
@@ -82,7 +80,7 @@ To make sure that sessions expire after a period of inactivity, you can set a po
You can also enforce only one active session per user per device or browser. When this is enabled, the session from the most recent sign in will remain active, while the rest are terminated. Enable this via the _Single session per user_ option in the [Auth settings](/dashboard/project/_/settings/auth).
-Sessions are not proactively destroyed when you change these settings, but rather the check is enforced whenever a session is refreshed next. This can confuse developers because the actual druation of a session is the configured timeout plus the JWT expiration time. For single session per user, the effect will only be noticed at intervals of the JWT expiration time. Please make sure you adjust this setting depending on your needs. We do not recommend going below 5 minutes for the JWT expiration time.
+Sessions are not proactively destroyed when you change these settings, but rather the check is enforced whenever a session is refreshed next. This can confuse developers because the actual duration of a session is the configured timeout plus the JWT expiration time. For single session per user, the effect will only be noticed at intervals of the JWT expiration time. Please make sure you adjust this setting depending on your needs. We do not recommend going below 5 minutes for the JWT expiration time.
Otherwise sessions are progressively deleted from the database 24 hours after they expire, which prevents you from causing a high load on your project by accident and allows you some freedom to undo changes without adversely affecting all users.
@@ -108,11 +106,11 @@ As your users continue using your app, refresh tokens are being constantly excha
The general rule is that a refresh token can only be used once. However, strictly enforcing this can cause certain issues to arise. There are two exceptions to this design to prevent the early and unexpected termination of user's sessions:
- A refresh token can be used more than once within a defined reuse interval. By default this is 10 seconds and we do not recommend changing this value. This exception is granted for legitimate situations such as:
- - Using server-side rendering where the same refresh token needs to be reused on the server and soon after on the client
- - To allow some leeway for bugs or issues with serializing access to the refresh token request
+ - Using server-side rendering where the same refresh token needs to be reused on the server and soon after on the client
+ - To allow some leeway for bugs or issues with serializing access to the refresh token request
- If the parent of the currently active refresh token for the user's session is being used, the active token will be returned. This exception solves an important and often common situation:
- - All clients such as browsers, mobile or desktop apps, and even some servers are inherently unreliable due to network issues. A request does not indicate that they received a response or even processed the response they received.
- - If a refresh token is revoked after being used only once, and the response wasn't received and processed by the client, when the client comes back online, it will attempt to use the refresh token that was already used. Since this might happen outside of the reuse interval, it can cause sudden and unexpected session termination.
+ - All clients such as browsers, mobile or desktop apps, and even some servers are inherently unreliable due to network issues. A request does not indicate that they received a response or even processed the response they received.
+ - If a refresh token is revoked after being used only once, and the response wasn't received and processed by the client, when the client comes back online, it will attempt to use the refresh token that was already used. Since this might happen outside of the reuse interval, it can cause sudden and unexpected session termination.
Should the reuse attempt not fall under these two exceptions, the whole session is regarded as terminated and all refresh tokens belonging to it are marked as revoked. You can disable this behavior in the Advanced Settings of the [Auth settings](/dashboard/project/_/settings/auth) page, though it is generally not recommended.
@@ -161,7 +159,3 @@ const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY, {
The `customStorageObject` should implement the `getItem`, `setItem`, and `removeItem` methods from the [`Storage` interface](https://developer.mozilla.org/en-US/docs/Web/API/Storage). Async versions of these methods are also supported.
When using cookies to store access and refresh tokens, make sure that the [`Expires` or `Max-Age` attributes](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie#attributes) of the cookies is set to a timestamp very far into the future. Browsers will clear the cookies, but the session will remain active in Supabase Auth. Therefore it's best to let Supabase Auth control the validity of these tokens and instruct the browser to always store the cookies indefinitely.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login.mdx b/apps/docs/content/guides/auth/social-login.mdx
similarity index 77%
rename from apps/docs/pages/guides/auth/social-login.mdx
rename to apps/docs/content/guides/auth/social-login.mdx
index f5e9b16a66c..73b1f211573 100644
--- a/apps/docs/pages/guides/auth/social-login.mdx
+++ b/apps/docs/content/guides/auth/social-login.mdx
@@ -1,12 +1,7 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { IconPanel } from 'ui'
-import Link from 'next/link'
-import { SocialLoginItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
-
-export const meta = {
- title: 'Social Login',
- description: 'Logging in with social accounts',
-}
+---
+title: 'Social Login'
+description: 'Logging in with social accounts'
+---
Social Login (OAuth) is an open standard for authentication that allows users to log in to one website or application using their credentials from another website or application. OAuth allows users to grant third-party applications access to their online accounts without sharing their passwords.
OAuth is commonly used for things like logging in to a social media account from a third-party app. It is a secure and convenient way to authenticate users and share information between applications.
@@ -26,32 +21,37 @@ There are several reasons why you might want to add social login to your applica
Supabase supports a suite of social providers. Follow these guides to configure a social provider for your platform.
## Provider tokens
-
-You can use the provider token and provider refresh token returned to make API calls to the OAuth provider. For example, you can use the Google provider token to access Google APIs on behalf of your user.
+
+You can use the provider token and provider refresh token returned to make API calls to the OAuth provider. For example, you can use the Google provider token to access Google APIs on behalf of your user.
Supabase Auth does not manage refreshing the provider token for the user. Your application will need to use the provider refresh token to obtain a new provider token. If no provider refresh token is returned, then it could mean one of the following:
+
- The OAuth provider does not return a refresh token
- Additional scopes need to be specified in order for the OAuth provider to return a refresh token.
-
+
Provider tokens are intentionally not stored in your project's database. This is because provider tokens give access to potentially sensitive user data in third-party systems. Different applications have different needs, and one application's OAuth scopes may be significantly more permissive than another. If you want to use the provider token outside of the browser that completed the OAuth flow, it is recommended to send it to a trusted and secure server you control.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx b/apps/docs/content/guides/auth/social-login/auth-apple.mdx
similarity index 83%
rename from apps/docs/pages/guides/auth/social-login/auth-apple.mdx
rename to apps/docs/content/guides/auth/social-login/auth-apple.mdx
index d121be46da3..ade47b772e3 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-apple.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-apple.mdx
@@ -1,12 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import AppleSecretGenerator from '~/components/AppleSecretGenerator'
-
-export const meta = {
- id: 'auth-apple',
- title: 'Login with Apple',
- description: 'Use Sign in with Apple with Supabase',
- tocVideo: '-tpcZzTdvN0',
-}
+---
+id: 'auth-apple'
+title: 'Login with Apple'
+description: 'Use Sign in with Apple with Supabase'
+tocVideo: '-tpcZzTdvN0'
+---
Supabase Auth supports using [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) on the web and in native apps for iOS, macOS, watchOS or tvOS.
@@ -200,9 +197,9 @@ When developing with Expo, you can test Sign in with Apple via the Expo Go app,
- ## Using native sign in with Apple in Flutter
+ ## Apple sign in on iOS and macOS
- You can perform Apple sign in using the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package on Flutter.
+ You can perform Apple sign in using the [sign_in_with_apple](https://pub.dev/packages/sign_in_with_apple) package on Flutter apps running on iOS or macOS.
Follow the instructions in the package README to set up native Apple sign in on iOS and macOS.
Once the setup is complete on the Flutter app, add the bundle ID of your app to your Supabase dashboard in `Authentication -> Providers -> Apple` in order to register your app with Supabase.
@@ -249,6 +246,32 @@ When developing with Expo, you can test Sign in with Apple via the Expo Go app,
+ ## Apple sign in on Android, Web, Windows and Linux
+
+ For platforms that doesn't support native Apple sign in, you can use the `signInWithOAuth()` method to perform the Apple sign in.
+ This method of signing in is web based, and will open a browser window to perform the sign in. For non-web platforms, the user is brought back to the app via [deep linking](/docs/guides/auth/native-mobile-deep-linking?platform=flutter).
+
+ ```dart
+ supabase.auth.signInWithOAuth(
+ OAuthProvider.apple,
+ redirectTo: 'my-scheme://login-callback',
+ );
+ ```
+
+ This call takes the user to Apple's consent screen. Once the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your Flutter application with an access and refresh token representing the user's session.
+
+ ### Configuration [#flutter-configuration-web]
+
+ You will require the following information:
+
+ 1. Your Apple Developer account's **Team ID**, which is an alphanumeric string of 10 characters that uniquely identifies the developer of the app. It's often easily accessible in the upper right-side menu on the Apple Developer Console.
+ 2. Register email sources for _Sign in with Apple for Email Communication_ which can be found in the [Services](https://developer.apple.com/account/resources/services/list) section of the Apple Developer Console.
+ 3. An **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple once you create an App ID in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._)
+ 4. A **Services ID** which uniquely identifies the web services provided by the app you registered in the previous step. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.web`.
+ 5. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your Supabase project is hosted on. This is usually `.supabase.co` while the redirect URL is `https://.supabase.co/auth/v1/callback`.
+ 6. Create a signing **Key** in the [Keys](https://developer.apple.com/account/resources/authkeys/list) section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the `AuthKey_XXXXXXXXXX.p8` file. If you ever lose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring reminder in your calendar!
+ 7. Finally, add the information you configured above to the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers).
+
@@ -352,7 +375,3 @@ When developing with Expo, you can test Sign in with Apple via the Expo Go app,
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-azure.mdx b/apps/docs/content/guides/auth/social-login/auth-azure.mdx
similarity index 96%
rename from apps/docs/pages/guides/auth/social-login/auth-azure.mdx
rename to apps/docs/content/guides/auth/social-login/auth-azure.mdx
index 1fde454fc36..df8831ccc13 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-azure.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-azure.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-azure',
- title: 'Login with Azure (Microsoft)',
- description: 'Add Azure (Microsoft) OAuth to your Supabase project',
-}
+---
+id: 'auth-azure'
+title: 'Login with Azure (Microsoft)'
+description: 'Add Azure (Microsoft) OAuth to your Supabase project'
+---
To enable Azure (Microsoft) Auth for your project, you need to set up an Azure OAuth application and add the application credentials to your Supabase Dashboard.
@@ -103,6 +101,8 @@ A Microsoft Entra tenant is the directory of users who are allowed to access you
By default, Supabase Auth uses the _common_ Microsoft tenant (`https://login.microsoftonline.com/common`) which generally allows any Microsoft account to sign in to your project. Microsoft Entra further limits what accounts can access your project depending on the type of OAuth application you registered.
+If your app is registered as _Personal Microsoft accounts only_ for the _Supported account types_ set Microsoft tenant to _consumers_ (`https://login.microsoftonline.com/consumers`).
+
If your app is registered as _My organization only_ for the _Supported account types_ you may want to configure Supabase Auth with the organization's tenant URL. This will use the tenant's authorization flows instead, and will limit access at the Supabase Auth level to Microsoft accounts arising from only the specified tenant.
Configure this by storing a value under _Azure Tenant URL_ in the Supabase Auth provider configuration page for Azure that has the following format `https://login.microsoftonline.com/`.
@@ -227,7 +227,3 @@ suspend fun signInWithAzure() {
- [Azure Developer Account](https://portal.azure.com)
- [GitHub Discussion](https://github.com/supabase/gotrue/pull/54#issuecomment-757043573)
- [Potential Risk of Privilege Escalation in Azure AD Applications](https://msrc.microsoft.com/blog/2023/06/potential-risk-of-privilege-escalation-in-azure-ad-applications/)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx b/apps/docs/content/guides/auth/social-login/auth-bitbucket.mdx
similarity index 91%
rename from apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx
rename to apps/docs/content/guides/auth/social-login/auth-bitbucket.mdx
index a0284543d47..1cdde00d182 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-bitbucket.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-bitbucket',
- title: 'Login with Bitbucket',
- description: 'Add Bitbucket OAuth to your Supabase project',
-}
+---
+id: 'auth-bitbucket'
+title: 'Login with Bitbucket'
+description: 'Add Bitbucket OAuth to your Supabase project'
+---
To enable Bitbucket Auth for your project, you need to set up a BitBucket OAuth application and add the application credentials to your Supabase Dashboard.
@@ -117,7 +115,3 @@ suspend fun signOut() {
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Bitbucket Account](https://bitbucket.org)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-discord.mdx b/apps/docs/content/guides/auth/social-login/auth-discord.mdx
similarity index 91%
rename from apps/docs/pages/guides/auth/social-login/auth-discord.mdx
rename to apps/docs/content/guides/auth/social-login/auth-discord.mdx
index 043234a76e5..1c15e17249e 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-discord.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-discord.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-discord',
- title: 'Login with Discord',
- description: 'Add Discord OAuth to your Supabase project',
-}
+---
+id: 'auth-discord'
+title: 'Login with Discord'
+description: 'Add Discord OAuth to your Supabase project'
+---
To enable Discord Auth for your project, you need to set up a Discord Application and add the Application OAuth credentials to your Supabase Dashboard.
@@ -119,7 +117,3 @@ suspend fun signOut() {
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Discord Account](https://discord.com)
- [Discord Developer Portal](https://discord.com/developers)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-facebook.mdx b/apps/docs/content/guides/auth/social-login/auth-facebook.mdx
similarity index 93%
rename from apps/docs/pages/guides/auth/social-login/auth-facebook.mdx
rename to apps/docs/content/guides/auth/social-login/auth-facebook.mdx
index 46e9d05ccb7..b195edf22d2 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-facebook.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-facebook.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-facebook',
- title: 'Login with Facebook',
- description: 'Add Facebook OAuth to your Supabase project',
-}
+---
+id: 'auth-facebook'
+title: 'Login with Facebook'
+description: 'Add Facebook OAuth to your Supabase project'
+---
To enable Facebook Auth for your project, you need to set up a Facebook OAuth application and add the application credentials to your Supabase Dashboard.
@@ -136,7 +134,3 @@ You can read more about App Review [here](https://developers.facebook.com/docs/a
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Facebook Developers Dashboard](https://developers.facebook.com/)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-figma.mdx b/apps/docs/content/guides/auth/social-login/auth-figma.mdx
similarity index 91%
rename from apps/docs/pages/guides/auth/social-login/auth-figma.mdx
rename to apps/docs/content/guides/auth/social-login/auth-figma.mdx
index 6e9633a8313..0db6671df23 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-figma.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-figma.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-figma',
- title: 'Login with Figma',
- description: 'Add Figma OAuth to your Supabase project',
-}
+---
+id: 'auth-figma'
+title: 'Login with Figma'
+description: 'Add Figma OAuth to your Supabase project'
+---
To enable Figma Auth for your project, you need to set up a Figma OAuth application and add the application credentials to your Supabase Dashboard.
@@ -117,7 +115,3 @@ suspend fun signOut() {
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Figma Developers page](https://www.figma.com/developers)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-github.mdx b/apps/docs/content/guides/auth/social-login/auth-github.mdx
similarity index 92%
rename from apps/docs/pages/guides/auth/social-login/auth-github.mdx
rename to apps/docs/content/guides/auth/social-login/auth-github.mdx
index aba15f2401d..c0ffc5e8f04 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-github.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-github.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-github',
- title: 'Login with GitHub',
- description: 'Add GitHub OAuth to your Supabase project',
-}
+---
+id: 'auth-github'
+title: 'Login with GitHub'
+description: 'Add GitHub OAuth to your Supabase project'
+---
To enable GitHub Auth for your project, you need to set up a GitHub OAuth application and add the application credentials to your Supabase Dashboard.
@@ -128,7 +126,3 @@ suspend fun signOut() {
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [GitHub Developer Settings](https://github.com/settings/developers)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx b/apps/docs/content/guides/auth/social-login/auth-gitlab.mdx
similarity index 91%
rename from apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx
rename to apps/docs/content/guides/auth/social-login/auth-gitlab.mdx
index c08e3c33ab7..6dd71afa9be 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-gitlab.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-gitlab',
- title: 'Login with GitLab',
- description: 'Add GitLab OAuth to your Supabase project',
-}
+---
+id: 'auth-gitlab'
+title: 'Login with GitLab'
+description: 'Add GitLab OAuth to your Supabase project'
+---
To enable GitLab Auth for your project, you need to set up a GitLab OAuth application and add the application credentials to your Supabase Dashboard.
@@ -114,7 +112,3 @@ suspend fun signOut() {
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [GitLab Account](https://gitlab.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/content/guides/auth/social-login/auth-google.mdx
similarity index 98%
rename from apps/docs/pages/guides/auth/social-login/auth-google.mdx
rename to apps/docs/content/guides/auth/social-login/auth-google.mdx
index 09556ea8ba4..38f6936b717 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-google.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-google',
- title: 'Login with Google',
- description: 'Use Sign in with Google on the web, in native apps or with Chrome extensions',
- tocVideo: 'vojHmGUGUGc',
-}
+---
+id: 'auth-google'
+title: 'Login with Google'
+description: 'Use Sign in with Google on the web, in native apps or with Chrome extensions'
+tocVideo: 'vojHmGUGUGc'
+---
Supabase Auth supports Sign in with Google on the web, native Android applications and Chrome extensions.
@@ -424,7 +422,3 @@ Before you can use Sign in with Google, you need to obtain a [Google Cloud Platf
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-kakao.mdx b/apps/docs/content/guides/auth/social-login/auth-kakao.mdx
similarity index 93%
rename from apps/docs/pages/guides/auth/social-login/auth-kakao.mdx
rename to apps/docs/content/guides/auth/social-login/auth-kakao.mdx
index c80537d176b..f838a83641e 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-kakao.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-kakao.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-kakao',
- title: 'Login with Kakao',
- description: 'Add Kakao OAuth to your Supabase project',
-}
+---
+id: 'auth-kakao'
+title: 'Login with Kakao'
+description: 'Add Kakao OAuth to your Supabase project'
+---
To enable Kakao Auth for your project, you need to set up an Kakao OAuth application and add the application credentials to your Supabase Dashboard.
@@ -137,7 +135,3 @@ suspend fun signOut() {
## Resources
- [Kakao Developers Portal](https://developers.kakao.com).
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-keycloak.mdx b/apps/docs/content/guides/auth/social-login/auth-keycloak.mdx
similarity index 94%
rename from apps/docs/pages/guides/auth/social-login/auth-keycloak.mdx
rename to apps/docs/content/guides/auth/social-login/auth-keycloak.mdx
index 7826c312ad5..96cde43b5a3 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-keycloak.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-keycloak.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-keycloak',
- title: 'Login with Keycloak',
- description: 'Add Keycloak OAuth to your Supabase project',
-}
+---
+id: 'auth-keycloak'
+title: 'Login with Keycloak'
+description: 'Add Keycloak OAuth to your Supabase project'
+---
To enable Keycloak Auth for your project, you need to set up an Keycloak OAuth application and add the application credentials to your Supabase Dashboard.
@@ -136,7 +134,3 @@ suspend fun signOut() {
- You can find the keycloak openid endpoint configuration under the realm settings.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx b/apps/docs/content/guides/auth/social-login/auth-linkedin.mdx
similarity index 94%
rename from apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx
rename to apps/docs/content/guides/auth/social-login/auth-linkedin.mdx
index 1383fccdb1e..f6ed6125535 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-linkedin.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-linkedin',
- title: 'Login with LinkedIn',
- description: 'Add LinkedIn OAuth to your Supabase project',
-}
+---
+id: 'auth-linkedin'
+title: 'Login with LinkedIn'
+description: 'Add LinkedIn OAuth to your Supabase project'
+---
To enable LinkedIn Auth for your project, you need to set up a LinkedIn OAuth application and add the application credentials to your Supabase Dashboard.
@@ -140,7 +138,3 @@ Do reach out to support if you have any concerns around this change.
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [LinkedIn Developer Dashboard](https://api.LinkedIn.com/apps)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-notion.mdx b/apps/docs/content/guides/auth/social-login/auth-notion.mdx
similarity index 92%
rename from apps/docs/pages/guides/auth/social-login/auth-notion.mdx
rename to apps/docs/content/guides/auth/social-login/auth-notion.mdx
index 800e5682792..0c414ab4fdb 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-notion.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-notion.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-notion',
- title: 'Login with Notion',
- description: 'Add Notion OAuth to your Supabase project',
-}
+---
+id: 'auth-notion'
+title: 'Login with Notion'
+description: 'Add Notion OAuth to your Supabase project'
+---
To enable Notion Auth for your project, you need to set up a Notion Application and add the Application OAuth credentials to your Supabase Dashboard.
@@ -118,7 +116,3 @@ suspend fun signOut() {
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Notion Account](https://notion.so)
- [Notion Developer Portal](https://www.notion.so/my-integrations)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-slack.mdx b/apps/docs/content/guides/auth/social-login/auth-slack.mdx
similarity index 93%
rename from apps/docs/pages/guides/auth/social-login/auth-slack.mdx
rename to apps/docs/content/guides/auth/social-login/auth-slack.mdx
index 2b9e34f2da7..238b394b9d3 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-slack.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-slack.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-slack',
- title: 'Login with Slack',
- description: 'Add Slack OAuth to your Supabase project',
-}
+---
+id: 'auth-slack'
+title: 'Login with Slack'
+description: 'Add Slack OAuth to your Supabase project'
+---
To enable Slack Auth for your project, you need to set up a Slack OAuth application and add the application credentials to your Supabase Dashboard.
@@ -135,7 +133,3 @@ suspend fun signOut() {
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Slack Developer Dashboard](https://api.slack.com/apps)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-spotify.mdx b/apps/docs/content/guides/auth/social-login/auth-spotify.mdx
similarity index 83%
rename from apps/docs/pages/guides/auth/social-login/auth-spotify.mdx
rename to apps/docs/content/guides/auth/social-login/auth-spotify.mdx
index a4647b8c554..c74d07bb473 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-spotify.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-spotify.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-spotify',
- title: 'Login with Spotify',
- description: 'Add Spotify OAuth to your Supabase project',
-}
+---
+id: 'auth-spotify'
+title: 'Login with Spotify'
+description: 'Add Spotify OAuth to your Supabase project'
+---
To enable Spotify Auth for your project, you need to set up a Spotify OAuth application and add the application credentials to your Supabase Dashboard.
@@ -52,6 +50,14 @@ Under `Redirect URIs`:
## Add login code to your client app
+The following outlines the steps to sign in using Spotify with Supabase Auth.
+
+1. Call the signin method from the client library.
+1. The user is redirected to the Spotify login page.
+1. After completing the sign-in process, the user will be redirected to your app with an error that says the email address needs to be confirmed. Simultaneously the user receives a confirmation email from Supabase Auth.
+1. The user clicks the confirmation link in the email.
+1. The user is brought back to the app and is now signed in.
+
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-twitch.mdx b/apps/docs/content/guides/auth/social-login/auth-twitch.mdx
similarity index 92%
rename from apps/docs/pages/guides/auth/social-login/auth-twitch.mdx
rename to apps/docs/content/guides/auth/social-login/auth-twitch.mdx
index 0db9cf7070c..405477b5da4 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-twitch.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-twitch.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-twitch',
- title: 'Login with Twitch',
- description: 'Add Twitch OAuth to your Supabase project',
-}
+---
+id: 'auth-twitch'
+title: 'Login with Twitch'
+description: 'Add Twitch OAuth to your Supabase project'
+---
To enable Twitch Auth for your project, you need to set up a Twitch Application and add the Application OAuth credentials to your Supabase Dashboard.
@@ -133,7 +131,3 @@ suspend fun signOut() {
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Twitch Account](https://twitch.tv)
- [Twitch Developer Console](https://dev.twitch.tv/console)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx b/apps/docs/content/guides/auth/social-login/auth-twitter.mdx
similarity index 88%
rename from apps/docs/pages/guides/auth/social-login/auth-twitter.mdx
rename to apps/docs/content/guides/auth/social-login/auth-twitter.mdx
index f23283d9417..749029d3c9f 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-twitter.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-twitter.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
+---
+id: 'auth-twitter'
+title: 'Login with Twitter'
+description: 'Add Twitter OAuth to your Supabase project'
+---
-export const meta = {
- id: 'auth-twitter',
- title: 'Login with Twitter',
- description: 'Add Twitter OAuth to your Supabase project',
-}
-
-To enable Twitter Auth for your project, you need to set up a Twitter OAuth application with [elevated access](https://developer.twitter.com/en/portal/products/elevated) and add the application credentials in the Supabase Dashboard.
+To enable Twitter Auth for your project, you need to set up a Twitter OAuth application and add the application credentials in the Supabase Dashboard.
## Overview
@@ -123,7 +121,3 @@ suspend fun signOut() {
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Twitter Developer Dashboard](https://developer.twitter.com/en/portal/dashboard)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-workos.mdx b/apps/docs/content/guides/auth/social-login/auth-workos.mdx
similarity index 93%
rename from apps/docs/pages/guides/auth/social-login/auth-workos.mdx
rename to apps/docs/content/guides/auth/social-login/auth-workos.mdx
index 95ff6c4617e..77ed925c241 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-workos.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-workos.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-workos',
- title: 'Login with WorkOS',
- description: 'Add WorkOS OAuth to your Supabase project',
-}
+---
+id: 'auth-workos'
+title: 'Login with WorkOS'
+description: 'Add WorkOS OAuth to your Supabase project'
+---
To enable WorkOS Auth for your project, you need to set up WorkOS OAuth application and add the application credentials to your Supabase Dashboard.
@@ -134,7 +132,3 @@ suspend fun signOut() {
## Resources
- [WorkOS Documentation](https://workos.com/docs/sso/guide)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/social-login/auth-zoom.mdx b/apps/docs/content/guides/auth/social-login/auth-zoom.mdx
similarity index 91%
rename from apps/docs/pages/guides/auth/social-login/auth-zoom.mdx
rename to apps/docs/content/guides/auth/social-login/auth-zoom.mdx
index 9fd1ae7cdd4..37d6d07a8e8 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-zoom.mdx
+++ b/apps/docs/content/guides/auth/social-login/auth-zoom.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-zoom',
- title: 'Login with Zoom',
- description: 'Add Zoom OAuth to your Supabase project',
-}
+---
+id: 'auth-zoom'
+title: 'Login with Zoom'
+description: 'Add Zoom OAuth to your Supabase project'
+---
To enable Zoom Auth for your project, you need to set up a Zoom OAuth application and add the application credentials to your Supabase Dashboard.
@@ -130,7 +128,3 @@ suspend fun signOut() {
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Zoom App Marketplace](https://marketplace.zoom.us/)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx b/apps/docs/content/guides/auth/sso/auth-sso-saml.mdx
similarity index 98%
rename from apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx
rename to apps/docs/content/guides/auth/sso/auth-sso-saml.mdx
index c4b36288765..48a16a52779 100644
--- a/apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx
+++ b/apps/docs/content/guides/auth/sso/auth-sso-saml.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-sso-saml',
- 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',
-}
+---
+id: 'auth-sso-saml'
+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'
+---
@@ -406,7 +404,3 @@ Should you run into this problem, it is most likely a misconfiguration issue **o
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://supabase.com/dashboard/support/new) and we'll try to support you as best as possible.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/content/guides/functions.mdx b/apps/docs/content/guides/functions.mdx
new file mode 100644
index 00000000000..4889ef00ef0
--- /dev/null
+++ b/apps/docs/content/guides/functions.mdx
@@ -0,0 +1,170 @@
+---
+id: 'functions'
+title: 'Edge Functions'
+description: 'Globally distributed TypeScript functions.'
+subtitle: 'Globally distributed TypeScript functions.'
+sidebar_label: 'Overview'
+hideToc: true
+---
+
+Edge Functions are server-side TypeScript functions, distributed globally at the edge—close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties [like Stripe](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks). Edge Functions are developed using [Deno](https://deno.com), which offers a few benefits to you as a developer:
+
+- It is open source.
+- It is portable. Supabase Edge Functions run locally, and on any other Deno-compatible platform (including self-hosted infrastructure).
+- It is TypeScript first and supports WASM.
+- Edge Functions are globally distributed for low-latency.
+
+
+
+
+
+## Examples
+
+Check out the [Edge Function Examples](https://github.com/supabase/supabase/tree/master/examples/edge-functions) in our GitHub repository.
+
+
+ {[
+ {
+ name: 'With supabase-js',
+ description: 'Use the Supabase client inside your Edge Function.',
+ href: '/guides/functions/auth',
+ },
+ {
+ name: 'Type-Safe SQL with Kysely',
+ description:
+ 'Combining Kysely with Deno Postgres gives you a convenient developer experience for interacting directly with your Postgres database.',
+ href: '/guides/functions/kysely-postgres',
+ },
+ {
+ name: 'With CORS headers',
+ description: 'Send CORS headers for invoking from the browser.',
+ href: '/guides/functions/cors',
+ },
+ {
+ name: 'React Native with Stripe',
+ description: 'Full example for using Supabase and Stripe, with Expo.',
+ href: 'https://github.com/supabase-community/expo-stripe-payments-with-supabase-functions',
+ },
+ {
+ name: 'Flutter with Stripe',
+ description: 'Full example for using Supabase and Stripe, with Flutter.',
+ href: 'https://github.com/supabase-community/flutter-stripe-payments-with-supabase-functions',
+ },
+ {
+ name: 'Building a RESTful Service API',
+ description:
+ 'Learn how to use HTTP methods and paths to build a RESTful service for managing tasks.',
+ href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/restful-tasks/index.ts',
+ },
+ {
+ name: 'Working with Supabase Storage',
+ description: 'An example on reading a file from Supabase Storage.',
+ href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/read-storage/index.ts',
+ },
+ {
+ name: 'Open Graph Image Generation',
+ description: 'Generate Open Graph images with Deno and Supabase Edge Functions.',
+ href: '/guides/functions/examples/og-image',
+ },
+ {
+ name: 'OG Image Generation & Storage CDN Caching',
+ description: 'Cache generated images with Supabase Storage CDN.',
+ href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/og-image-with-storage-cdn',
+ },
+ {
+ name: 'Get User Location',
+ description: `Get user location data from user's IP address.`,
+ href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/location',
+ },
+ {
+ name: 'Cloudflare Turnstile',
+ description: `Protecting Forms with Cloudflare Turnstile.`,
+ href: '/guides/functions/examples/cloudflare-turnstile',
+ },
+ {
+ name: 'Connect to Postgres',
+ description: `Connecting to Postgres from Edge Functions.`,
+ href: '/guides/functions/connect-to-postgres',
+ },
+ {
+ name: 'Github Actions',
+ description: `Deploying Edge Functions with GitHub Actions.`,
+ href: '/guides/functions/examples/github-actions',
+ },
+ {
+ name: 'Oak Server Middleware',
+ description: `Request Routing with Oak server middleware.`,
+ href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/oak-server',
+ },
+ {
+ name: 'Hugging Face',
+ description: `Access 100,000+ Machine Learning models.`,
+ href: '/guides/ai/examples/huggingface-image-captioning',
+ },
+ {
+ name: 'OpenAI',
+ description: `Using OpenAI in Edge Functions.`,
+ href: '/guides/ai/examples/openai',
+ },
+ {
+ name: 'Stripe Webhooks',
+ description: `Handling signed Stripe Webhooks with Edge Functions.`,
+ href: '/guides/functions/examples/stripe-webhooks',
+ },
+ {
+ name: 'Send emails',
+ description: `Send emails in Edge Functions with Resend.`,
+ href: '/guides/functions/examples/send-emails',
+ },
+ {
+ name: 'Web Stream',
+ description: `Server-Sent Events in Edge Functions.`,
+ href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/streams',
+ },
+ {
+ name: 'Puppeteer',
+ description: `Generate screenshots with Puppeteer.`,
+ href: '/guides/functions/examples/screenshots',
+ },
+ {
+ name: 'Discord Bot',
+ description: `Building a Slash Command Discord Bot with Edge Functions.`,
+ href: '/guides/functions/examples/discord-bot',
+ },
+ {
+ name: 'Telegram Bot',
+ description: `Building a Telegram Bot with Edge Functions.`,
+ href: '/guides/functions/examples/telegram-bot',
+ },
+ {
+ name: 'Upload File',
+ description: `Process multipart/form-data.`,
+ href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/file-upload-storage',
+ },
+ {
+ name: 'Upstash Redis',
+ description: `Build an Edge Functions Counter with Upstash Redis.`,
+ href: '/guides/functions/examples/upstash-redis',
+ },
+ {
+ name: 'Rate Limiting',
+ description: `Rate Limiting Edge Functions with Upstash Redis.`,
+ href: '/guides/functions/examples/rate-limiting',
+ },
+ {
+ name: 'Slack Bot Mention Edge Function',
+ description: `Slack Bot handling Slack mentions in Edge Function`,
+ href: '/guides/functions/examples/slack-bot-mention',
+ },
+ ].map((x) => (
+
+
+
+ {x.description}
+
+
+
+ ))}
+
diff --git a/apps/docs/pages/guides/functions/auth.mdx b/apps/docs/content/guides/functions/auth.mdx
similarity index 88%
rename from apps/docs/pages/guides/functions/auth.mdx
rename to apps/docs/content/guides/functions/auth.mdx
index 963c7af0be7..609f18a46de 100644
--- a/apps/docs/pages/guides/functions/auth.mdx
+++ b/apps/docs/content/guides/functions/auth.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth',
- title: 'Integrating With Supabase Auth',
- description: 'Supabase Edge Functions and Auth.',
- subtitle: 'Supabase Edge Functions and Auth.',
-}
+---
+id: 'auth'
+title: 'Integrating With Supabase Auth'
+description: 'Supabase Edge Functions and Auth.'
+subtitle: 'Supabase Edge Functions and Auth.'
+---
Edge Functions work seamlessly with [Supabase Auth](/docs/guides/auth).
@@ -86,7 +84,3 @@ Deno.serve(async (req: Request) => {
## Example code
See a full [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/select-from-table-with-auth-rls/index.ts).
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/functions/cicd-workflow.mdx b/apps/docs/content/guides/functions/cicd-workflow.mdx
similarity index 84%
rename from apps/docs/pages/guides/functions/cicd-workflow.mdx
rename to apps/docs/content/guides/functions/cicd-workflow.mdx
index 05347734533..76cc5d3cafb 100644
--- a/apps/docs/pages/guides/functions/cicd-workflow.mdx
+++ b/apps/docs/content/guides/functions/cicd-workflow.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'cicd-workflow',
- title: 'Deploying with CI / CD pipelines',
- description: 'Use GitHub Actions, Bitbucket, and GitLab CI to deploy your Edge Functions.',
- subtitle: 'Use GitHub Actions, Bitbucket, and GitLab CI to deploy your Edge Functions.',
- tocVideo: '6OMVWiiycLs',
-}
+---
+id: 'cicd-workflow'
+title: 'Deploying with CI / CD pipelines'
+description: 'Use GitHub Actions, Bitbucket, and GitLab CI to deploy your Edge Functions.'
+subtitle: 'Use GitHub Actions, Bitbucket, and GitLab CI to deploy your Edge Functions.'
+tocVideo: '6OMVWiiycLs'
+---
You can use popular CI / CD tools like GitHub Actions, Bitbucket, and GitLab CI to automate Edge Function deployments.
@@ -116,7 +114,3 @@ verify_jwt = false
## Resources
- See the [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/.github/workflows/deploy.yaml).
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/functions/connect-to-postgres.mdx b/apps/docs/content/guides/functions/connect-to-postgres.mdx
similarity index 89%
rename from apps/docs/pages/guides/functions/connect-to-postgres.mdx
rename to apps/docs/content/guides/functions/connect-to-postgres.mdx
index b10c1f7c3ee..ac1da710b40 100644
--- a/apps/docs/pages/guides/functions/connect-to-postgres.mdx
+++ b/apps/docs/content/guides/functions/connect-to-postgres.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'examples-postgres-on-the-edge',
- title: 'Connecting directly to Postgres',
- description: 'Connecting to Postgres from Edge Functions.',
- subtitle: 'Connecting to Postgres from Edge Functions.',
- tocVideo: 'cl7EuF1-RsY',
-}
+---
+id: 'examples-postgres-on-the-edge'
+title: 'Connecting directly to Postgres'
+description: 'Connecting to Postgres from Edge Functions.'
+subtitle: 'Connecting to Postgres from Edge Functions.'
+tocVideo: 'cl7EuF1-RsY'
+---
Connect to your Postgres database from an Edge Function by using the `supabase-js` client.
You can also use other Postgres clients like [Deno Postgres](https://deno.land/x/postgres)
@@ -115,7 +113,3 @@ DENO_TLS_CA_STORE=mozilla,system
allowFullScreen
>
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/functions/cors.mdx b/apps/docs/content/guides/functions/cors.mdx
similarity index 80%
rename from apps/docs/pages/guides/functions/cors.mdx
rename to apps/docs/content/guides/functions/cors.mdx
index 758b90cce3d..dc357aae63d 100644
--- a/apps/docs/pages/guides/functions/cors.mdx
+++ b/apps/docs/content/guides/functions/cors.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'functions-cors',
- title: 'CORS (Cross-Origin Resource Sharing) support for Invoking from the browser',
- description: 'Add CORS headers to invoke Edge Functions from the browser.',
-}
+---
+id: 'functions-cors'
+title: 'CORS (Cross-Origin Resource Sharing) support for Invoking from the browser'
+description: 'Add CORS headers to invoke Edge Functions from the browser.'
+---
To invoke edge functions from the browser, you need to handle [CORS Preflight](https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request) requests.
@@ -52,7 +50,3 @@ Deno.serve(async (req) => {
}
})
```
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/functions/dart-edge.mdx b/apps/docs/content/guides/functions/dart-edge.mdx
similarity index 94%
rename from apps/docs/pages/guides/functions/dart-edge.mdx
rename to apps/docs/content/guides/functions/dart-edge.mdx
index 66b8c7513a8..32f89e469a4 100644
--- a/apps/docs/pages/guides/functions/dart-edge.mdx
+++ b/apps/docs/content/guides/functions/dart-edge.mdx
@@ -1,10 +1,8 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'functions-dart-edge',
- title: 'Dart Edge',
- description: 'Write your functions using Dart.',
-}
+---
+id: 'functions-dart-edge'
+title: 'Dart Edge'
+description: 'Write your functions using Dart.'
+---
[Dart Edge](https://docs.dartedge.dev/), a project built and maintained by [Invertase](https://invertase.io/), enables Dart code to be run on different edge environments. This guide will walk you through how you can start using Dart Edge to write your backend code using Dart and run it on Supabase.
@@ -156,7 +154,3 @@ supabase functions deploy dart_edge
```
You will be asked to provide the project reference of your Supabase instance to which you want to deploy the function. You can [link your local project to your Supabase instance](https://supabase.com/docs/guides/getting-started/local-development#link-your-project) to avoid having to provide the Supabase reference every time you deploy.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/functions/debugging.mdx b/apps/docs/content/guides/functions/debugging.mdx
similarity index 96%
rename from apps/docs/pages/guides/functions/debugging.mdx
rename to apps/docs/content/guides/functions/debugging.mdx
index afcd52d6e3a..c9bccc5c505 100644
--- a/apps/docs/pages/guides/functions/debugging.mdx
+++ b/apps/docs/content/guides/functions/debugging.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'functions-debugging',
- title: 'Debugging Edge Functions',
- description: 'Debugging tips and Edge Function limitations.',
- subtitle: 'Debugging tips and Edge Function limitations.',
-}
+---
+id: 'functions-debugging'
+title: 'Debugging Edge Functions'
+description: 'Debugging tips and Edge Function limitations.'
+subtitle: 'Debugging tips and Edge Function limitations.'
+---
## Logs & debugging
@@ -166,7 +164,3 @@ deno info --import-map=/path/to/import_map.json /path/to/function/index.ts
- Memory limit for the function: 150 MB (heap) + 150 MB (external - array buffers/ WASM)
- Wall clock limit: 400 s
- CPU Time: 2 s
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/functions/deploy.mdx b/apps/docs/content/guides/functions/deploy.mdx
similarity index 86%
rename from apps/docs/pages/guides/functions/deploy.mdx
rename to apps/docs/content/guides/functions/deploy.mdx
index e285c74f8e9..9e4c6eebef1 100644
--- a/apps/docs/pages/guides/functions/deploy.mdx
+++ b/apps/docs/content/guides/functions/deploy.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'functions-deploy',
- title: 'Deploy to Production',
- description: 'Deploy your Edge Functions to your remote Supabase Project.',
- subtitle: 'Deploy your Edge Functions to your remote Supabase Project.',
- tocVideo: 'rzglqRdZUQE',
-}
+---
+id: 'functions-deploy'
+title: 'Deploy to Production'
+description: 'Deploy your Edge Functions to your remote Supabase Project.'
+subtitle: 'Deploy your Edge Functions to your remote Supabase Project.'
+tocVideo: '5OWH9c4u68M'
+---
Once you have developed your Edge Functions locally, you can deploy them to your Supabase project.
@@ -101,7 +99,3 @@ const { data, error } = await supabase.functions.invoke('hello-world', {
You should receive the response `{ "message":"Hello Functions!" }`.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx b/apps/docs/content/guides/functions/examples/cloudflare-turnstile.mdx
similarity index 86%
rename from apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx
rename to apps/docs/content/guides/functions/examples/cloudflare-turnstile.mdx
index c1c0b694e14..2e6b1bd1355 100644
--- a/apps/docs/pages/guides/functions/examples/cloudflare-turnstile.mdx
+++ b/apps/docs/content/guides/functions/examples/cloudflare-turnstile.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'examples-cloudflare-turnstile',
- title: 'CAPTCHA support with Cloudflare Turnstile',
- description: 'Protecting Forms with Cloudflare Turnstile.',
- video: 'https://www.youtube.com/v/OwW0znboh60',
-}
+---
+id: 'examples-cloudflare-turnstile'
+title: 'CAPTCHA support with Cloudflare Turnstile'
+description: 'Protecting Forms with Cloudflare Turnstile.'
+video: 'https://www.youtube.com/v/OwW0znboh60'
+---
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/realtime/subscribing-to-database-changes.mdx b/apps/docs/content/guides/realtime/subscribing-to-database-changes.mdx
similarity index 85%
rename from apps/docs/pages/guides/realtime/subscribing-to-database-changes.mdx
rename to apps/docs/content/guides/realtime/subscribing-to-database-changes.mdx
index 95af82a7e66..05878e66d6e 100644
--- a/apps/docs/pages/guides/realtime/subscribing-to-database-changes.mdx
+++ b/apps/docs/content/guides/realtime/subscribing-to-database-changes.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'subscribing-to-database-changes',
- title: 'Subscribing to Database Changes',
- description: 'Listen to database changes in real-time from your website or application.',
- sidebar_label: 'Videos',
-}
+---
+id: 'subscribing-to-database-changes'
+title: 'Subscribing to Database Changes'
+description: 'Listen to database changes in real-time from your website or application.'
+sidebar_label: 'Videos'
+---
Supabase allows you to subscribe to real-time changes on your database from your client application.
@@ -97,7 +95,3 @@ const channel = supabase
- [Flutter](/docs/reference/dart/stream)
- [Python](/docs/reference/python/subscribe)
- [C#](/docs/reference/csharp/subscribe)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage.mdx b/apps/docs/content/guides/storage.mdx
similarity index 68%
rename from apps/docs/pages/guides/storage.mdx
rename to apps/docs/content/guides/storage.mdx
index 49274f6ca0d..fd840fdec13 100644
--- a/apps/docs/pages/guides/storage.mdx
+++ b/apps/docs/content/guides/storage.mdx
@@ -1,12 +1,11 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage',
- title: 'Storage',
- description: 'Use Supabase to store and serve files.',
- subtitle: 'Use Supabase to store and serve files.',
- sidebar_label: 'Overview',
-}
+---
+id: 'storage'
+title: 'Storage'
+description: 'Use Supabase to store and serve files.'
+subtitle: 'Use Supabase to store and serve files.'
+sidebar_label: 'Overview'
+hideToc: true
+---
Supabase Storage makes it simple to upload and serve files of any size, providing a robust framework for file access controls.
@@ -44,7 +43,18 @@ export const examples = [
Find the source code and documentation in the Supabase GitHub repository.
{x.description}
@@ -52,20 +62,3 @@ Find the source code and documentation in the Supabase GitHub repository.
))}
-
-export const integrations = [
- {
- name: 'Supabase Storage API',
- description: 'View the source code.',
- href: 'https://github.com/supabase/storage-api',
- },
- {
- name: 'OpenAPI Spec',
- description: 'See the Swagger Documentation for Supabase Storage.',
- href: 'https://supabase.github.io/storage/',
- },
-]
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/buckets/creating-buckets.mdx b/apps/docs/content/guides/storage/buckets/creating-buckets.mdx
similarity index 86%
rename from apps/docs/pages/guides/storage/buckets/creating-buckets.mdx
rename to apps/docs/content/guides/storage/buckets/creating-buckets.mdx
index cedf1723483..b63979bc8b1 100644
--- a/apps/docs/pages/guides/storage/buckets/creating-buckets.mdx
+++ b/apps/docs/content/guides/storage/buckets/creating-buckets.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-creating-buckets',
- title: 'Creating Buckets',
- description: 'Learn how to create Supabase Storage buckets.',
- sidebar_label: 'Buckets',
-}
+---
+id: 'storage-creating-buckets'
+title: 'Creating Buckets'
+description: 'Learn how to create Supabase Storage buckets.'
+sidebar_label: 'Buckets'
+---
You can create a bucket using the Supabase Dashboard. Since storage is interoperable with your Postgres database, you can also use SQL or our client libraries.
Here we create a bucket called "avatars":
@@ -87,7 +85,3 @@ const { data, error } = await supabase.storage.createBucket('avatars', {
If an upload request doesn't meet the above restrictions it will be rejected.
For more information check [File Limits](/docs/guides/storage/uploads/file-limits) Section.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/buckets/fundamentals.mdx b/apps/docs/content/guides/storage/buckets/fundamentals.mdx
similarity index 84%
rename from apps/docs/pages/guides/storage/buckets/fundamentals.mdx
rename to apps/docs/content/guides/storage/buckets/fundamentals.mdx
index be6447f45c4..ccc5785e512 100644
--- a/apps/docs/pages/guides/storage/buckets/fundamentals.mdx
+++ b/apps/docs/content/guides/storage/buckets/fundamentals.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-bucket-public-and-private',
- title: 'Storage Buckets',
- description: 'Learn how Supabase Storage Buckets works.',
- sidebar_label: 'Buckets',
-}
+---
+id: 'storage-bucket-public-and-private'
+title: 'Storage Buckets'
+description: 'Learn how Supabase Storage Buckets works.'
+sidebar_label: 'Buckets'
+---
Buckets allow you to keep your files organized and determines the [Access Model](#access-model) for your assets. [Upload restrictions](/docs/guides/storage/buckets/creating-buckets#restricting-uploads) like max file size and allowed content types are also defined at the bucket level.
@@ -40,7 +38,3 @@ Access control is still enforced for other types of operations including uploadi
- Blog post content
Public buckets are more performant than private buckets since they are [cached differently](/docs/guides/storage/cdn/fundamentals#public-vs-private-buckets).
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/cdn/fundamentals.mdx b/apps/docs/content/guides/storage/cdn/fundamentals.mdx
similarity index 88%
rename from apps/docs/pages/guides/storage/cdn/fundamentals.mdx
rename to apps/docs/content/guides/storage/cdn/fundamentals.mdx
index f9aea721fa9..3f0543e1d05 100644
--- a/apps/docs/pages/guides/storage/cdn/fundamentals.mdx
+++ b/apps/docs/content/guides/storage/cdn/fundamentals.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-cdn',
- title: 'Storage CDN',
- description: 'Learn how Supabase Storage caches objects with a CDN.',
- sidebar_label: 'CDN',
-}
+---
+id: 'storage-cdn'
+title: 'Storage CDN'
+description: 'Learn how Supabase Storage caches objects with a CDN.'
+sidebar_label: 'CDN'
+---
All assets uploaded to Supabase Storage are cached on a Content Delivery Network (CDN) to improve the latency for users all around the world. CDNs are a geographically distributed set of servers or **nodes** which cache content from an **origin server**. For Supabase Storage, the origin is the storage server running in the [same region as your project](https://supabase.com/dashboard/project/_/settings/general). Aside from performance, CDNs also help with security and availability by mitigating Distributed Denial of Service (DDoS) and other application attacks.
@@ -35,7 +33,3 @@ Objects in public buckets do not require any authorization to access objects. Th
For private buckets, permissions for accessing each object is checked on a per user level. For example, if two different users access the same object in a private bucket from the same region, it results in a cache miss for both the users since they might have different security policies attached to them.
On the other hand, if two different users access the same object in a public bucket from the same region, it results in a cache hit for the second user.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/cdn/metrics.mdx b/apps/docs/content/guides/storage/cdn/metrics.mdx
similarity index 89%
rename from apps/docs/pages/guides/storage/cdn/metrics.mdx
rename to apps/docs/content/guides/storage/cdn/metrics.mdx
index 9257fbb32d3..f6c6fd41072 100644
--- a/apps/docs/pages/guides/storage/cdn/metrics.mdx
+++ b/apps/docs/content/guides/storage/cdn/metrics.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-cdn',
- title: 'Cache Metrics',
- description: 'Learn how Supabase Storage caches objects with a CDN.',
- sidebar_label: 'CDN',
-}
+---
+id: 'storage-cdn'
+title: 'Cache Metrics'
+description: 'Learn how Supabase Storage caches objects with a CDN.'
+sidebar_label: 'CDN'
+---
Cache hits can be determined via the `metadata.response.headers.cf_cache_status` key in our [Logs Explorer](/docs/guides/platform/logs#logs-explorer). Any value that corresponds to either `HIT`, `STALE`, `REVALIDATED`, or `UPDATING` is categorized as a cache hit.
The following example query will show the top cache misses from the `edge_logs`:
@@ -50,7 +48,3 @@ order by timestamp desc;
```
Try out [this query](https://supabase.com/dashboard/project/_/logs/explorer?q=%0Aselect%0A++timestamp_trunc%28timestamp%2C+hour%29+as+timestamp%2C%0A++countif%28h.cf_cache_status+in+%28%27HIT%27%2C+%27STALE%27%2C+%27REVALIDATED%27%2C+%27UPDATING%27%29%29+%2F+count%28f.id%29+as+ratio%0Afrom%0A++edge_logs+as+f%0A++cross+join+unnest%28f.metadata%29+as+m%0A++cross+join+unnest%28m.request%29+as+r%0A++cross+join+unnest%28m.response%29+as+res%0A++cross+join+unnest%28res.headers%29+as+h%0Awhere+starts_with%28r.path%2C+%27%2Fstorage%2Fv1%2Fobject%27%29+and+r.method+%3D+%27GET%27%0Agroup+by+timestamp%0Aorder+by+timestamp+desc%3B) in the Logs Explorer.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/cdn/smart-cdn.mdx b/apps/docs/content/guides/storage/cdn/smart-cdn.mdx
similarity index 88%
rename from apps/docs/pages/guides/storage/cdn/smart-cdn.mdx
rename to apps/docs/content/guides/storage/cdn/smart-cdn.mdx
index 2ca47c9d7b2..e6b9f235cd9 100644
--- a/apps/docs/pages/guides/storage/cdn/smart-cdn.mdx
+++ b/apps/docs/content/guides/storage/cdn/smart-cdn.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-cdn',
- title: 'Smart CDN',
- description: 'Learn how Supabase Storage caches objects with a CDN.',
- sidebar_label: 'CDN',
-}
+---
+id: 'storage-cdn'
+title: 'Smart CDN'
+description: 'Learn how Supabase Storage caches objects with a CDN.'
+sidebar_label: 'CDN'
+---
With Smart CDN caching enabled, the asset metadata in your database is synchronized to the edge. This automatically revalidates the cache when the asset is changed or deleted.
@@ -38,7 +36,3 @@ If you anticipate that your asset might be deleted, it's advisable to set a shor
If you need to ensure assets refresh directly from the origin server and bypass the cache, you can achieve this by adding a unique query string to the URL.
For instance, you can use a URL like `/storage/v1/object/sign/profile-pictures/cat.jpg?version=1` with a long browser cache (e.g., 1 year). To update the picture, increment the version query parameter in the URL, like `/storage/v1/object/sign/profile-pictures/cat.jpg?version=2`. The CDN will recognize it as a new object and fetch the updated version from the origin.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/debugging/error-codes.mdx b/apps/docs/content/guides/storage/debugging/error-codes.mdx
similarity index 86%
rename from apps/docs/pages/guides/storage/debugging/error-codes.mdx
rename to apps/docs/content/guides/storage/debugging/error-codes.mdx
index 4625ce58818..a190912b3cd 100644
--- a/apps/docs/pages/guides/storage/debugging/error-codes.mdx
+++ b/apps/docs/content/guides/storage/debugging/error-codes.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-errors-codes',
- title: 'Error Codes',
- description: 'Supabase Error Codes',
- sidebar_label: 'Debugging',
-}
+---
+id: 'storage-errors-codes'
+title: 'Error Codes'
+description: 'Supabase Error Codes'
+sidebar_label: 'Debugging'
+---
Here's a list of the most common error codes and their potential resolutions:
@@ -57,7 +55,3 @@ This issue occurs where there is a unhandled error.
**Resolution:**
- File a support ticket to Storage team [here](https://supabase.com/dashboard/support/new)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/debugging/logs.mdx b/apps/docs/content/guides/storage/debugging/logs.mdx
similarity index 84%
rename from apps/docs/pages/guides/storage/debugging/logs.mdx
rename to apps/docs/content/guides/storage/debugging/logs.mdx
index 4202bd22355..c21d4b96757 100644
--- a/apps/docs/pages/guides/storage/debugging/logs.mdx
+++ b/apps/docs/content/guides/storage/debugging/logs.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-logs',
- title: 'Logs',
- description: 'Learn how to check Storage Logs',
- sidebar_label: 'Debugging',
-}
+---
+id: 'storage-logs'
+title: 'Logs'
+description: 'Learn how to check Storage Logs'
+sidebar_label: 'Debugging'
+---
Accessing the [Storage Logs](https://supabase.green/dashboard/project/__/logs/explorer?q=select+id%2C+storage_logs.timestamp%2C+event_message+from+storage_logs%0A++%0A++order+by+timestamp+desc%0A++limit+100%0A++) allows you to examine all incoming request logs to your Storage service. You can also filter logs and delve into specific aspects of your requests.
@@ -62,7 +60,3 @@ where r.remoteAddress in ("IP_ADDRESS")
order by timestamp desc
limit 100;
```
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/production/scaling.mdx b/apps/docs/content/guides/storage/production/scaling.mdx
similarity index 89%
rename from apps/docs/pages/guides/storage/production/scaling.mdx
rename to apps/docs/content/guides/storage/production/scaling.mdx
index 35e760fc98f..f1b2bfebb0c 100644
--- a/apps/docs/pages/guides/storage/production/scaling.mdx
+++ b/apps/docs/content/guides/storage/production/scaling.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-schema-optimizations',
- title: 'Storage Optimizations',
- description: 'Scaling Storage',
- subtitle: 'Scaling Storage',
- sidebar_label: 'Schema',
-}
+---
+id: 'storage-schema-optimizations'
+title: 'Storage Optimizations'
+description: 'Scaling Storage'
+subtitle: 'Scaling Storage'
+sidebar_label: 'Schema'
+---
Here are some optimizations that you can consider to improve performance and reduce costs as you start scaling Storage.
@@ -86,7 +84,3 @@ const { data, error } = await supabase.rpc('list_objects', {
## Optimizing RLS
When creating RLS policies against the storage tables you can add indexes to the interested columns to speed up the lookup
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/quickstart.mdx b/apps/docs/content/guides/storage/quickstart.mdx
similarity index 93%
rename from apps/docs/pages/guides/storage/quickstart.mdx
rename to apps/docs/content/guides/storage/quickstart.mdx
index 084fa5ba658..233d05e5738 100644
--- a/apps/docs/pages/guides/storage/quickstart.mdx
+++ b/apps/docs/content/guides/storage/quickstart.mdx
@@ -1,13 +1,11 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-quickstart',
- title: 'Storage Quickstart',
- description: 'Learn how to use Supabase to store and serve files.',
- subtitle: 'Learn how to use Supabase to store and serve files.',
- sidebar_label: 'Quickstart',
- tocVideo: 'J9mTPY8rIXE',
-}
+---
+id: 'storage-quickstart'
+title: 'Storage Quickstart'
+description: 'Learn how to use Supabase to store and serve files.'
+subtitle: 'Learn how to use Supabase to store and serve files.'
+sidebar_label: 'Quickstart'
+tocVideo: 'J9mTPY8rIXE'
+---
This guide shows the basic functionality of Supabase Storage. Find a full [example application on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-user-management).
@@ -238,7 +236,3 @@ create policy "Public Access"
allowFullScreen
>
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/schema/design.mdx b/apps/docs/content/guides/storage/schema/design.mdx
similarity index 80%
rename from apps/docs/pages/guides/storage/schema/design.mdx
rename to apps/docs/content/guides/storage/schema/design.mdx
index 5e1acef5493..2a55a2a2445 100644
--- a/apps/docs/pages/guides/storage/schema/design.mdx
+++ b/apps/docs/content/guides/storage/schema/design.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-schema-design',
- title: 'The Storage Schema',
- description: 'Learn about the storage schema',
- subtitle: 'Learn about the storage schema',
- sidebar_label: 'Schema',
-}
+---
+id: 'storage-schema-design'
+title: 'The Storage Schema'
+description: 'Learn about the storage schema'
+subtitle: 'Learn about the storage schema'
+sidebar_label: 'Schema'
+---
Storage uses Postgres to store metadata regarding your buckets and objects. Users can use RLS (Row-Level Security) policies for access control. This data is stored in a dedicated schema within your project called `storage`.
@@ -28,7 +26,3 @@ You have the option to query this table directly to retrieve information about y
We strongly recommend refraining from making any alterations to the `storage` schema and treating it as read-only. This approach is important because any modifications to the schema on your end could potentially clash with our future updates, leading to downtime.
However, we encourage you to add custom indexes as they can significantly improve the performance of the RLS policies you create for enforcing access control.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/schema/helper-functions.mdx b/apps/docs/content/guides/storage/schema/helper-functions.mdx
similarity index 80%
rename from apps/docs/pages/guides/storage/schema/helper-functions.mdx
rename to apps/docs/content/guides/storage/schema/helper-functions.mdx
index 53e1be7ad02..a29ab4bb17a 100644
--- a/apps/docs/pages/guides/storage/schema/helper-functions.mdx
+++ b/apps/docs/content/guides/storage/schema/helper-functions.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-schema',
- title: 'Storage Helper Functions',
- description: 'Learn the storage schema',
- subtitle: 'Learn the storage schema',
- sidebar_label: 'Schema',
-}
+---
+id: 'storage-schema'
+title: 'Storage Helper Functions'
+description: 'Learn the storage schema'
+subtitle: 'Learn the storage schema'
+sidebar_label: 'Schema'
+---
Supabase Storage provides SQL helper functions which you can use to write RLS policies.
@@ -63,7 +61,3 @@ with check (
bucket_id = 'cats' and storage.extension(name) = 'png'
);
```
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/security/access-control.mdx b/apps/docs/content/guides/storage/security/access-control.mdx
similarity index 90%
rename from apps/docs/pages/guides/storage/security/access-control.mdx
rename to apps/docs/content/guides/storage/security/access-control.mdx
index 6dc1219eb21..e6af3eee841 100644
--- a/apps/docs/pages/guides/storage/security/access-control.mdx
+++ b/apps/docs/content/guides/storage/security/access-control.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-access-control',
- title: 'Storage Access Control',
- description: 'Learn how to restrict Supabase file uploads.',
- sidebar_label: 'Uploads',
- tocVideo: '4ERX__Y908k',
-}
+---
+id: 'storage-access-control'
+title: 'Storage Access Control'
+description: 'Learn how to restrict Supabase file uploads.'
+sidebar_label: 'Uploads'
+tocVideo: '4ERX__Y908k'
+---
Supabase Storage is designed to work perfectly with Postgres [Row Level Security](https://supabase.com/docs/guides/database/postgres/row-level-security) (RLS).
@@ -103,7 +101,3 @@ using ( auth.uid() = owner_id );
If you exclusively use Storage from trusted clients, such as your own servers, and need to bypass the RLS policies, you can use the `service key` in the `Authorization` header. Service keys entirely bypass RLS policies, granting you unrestricted access to all Storage APIs.
Remember you should not share the service key publicly.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/serving/downloads.mdx b/apps/docs/content/guides/storage/serving/downloads.mdx
similarity index 69%
rename from apps/docs/pages/guides/storage/serving/downloads.mdx
rename to apps/docs/content/guides/storage/serving/downloads.mdx
index a603fbd8259..31256c46cb0 100644
--- a/apps/docs/pages/guides/storage/serving/downloads.mdx
+++ b/apps/docs/content/guides/storage/serving/downloads.mdx
@@ -1,13 +1,11 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-image-transformations',
- title: 'Serving assets from Storage',
- description: 'Serving assets from Storage',
- subtitle: 'Serving assets from Storage',
- sidebar_label: 'Serving assets',
- tocVideo: 'dLqSmxX3r7I',
-}
+---
+id: 'storage-image-transformations'
+title: 'Serving assets from Storage'
+description: 'Serving assets from Storage'
+subtitle: 'Serving assets from Storage'
+sidebar_label: 'Serving assets'
+tocVideo: 'dLqSmxX3r7I'
+---
## Public buckets
@@ -16,13 +14,15 @@ As mentioned in the [Buckets Fundamentals](/docs/guides/storage/buckets/fundamen
You can access them by using this conventional URL:
```
-https://[project_id].supabase.co/storage/v1/public/[bucket]/[asset-name]
+https://[project_id].supabase.co/storage/v1/object/public/[bucket]/[asset-name]
```
You can also use the Supabase SDK `getPublicUrl` to generate this url for you
```js
-const publicUrl = supabase.storage.from('bucket').getPublicUrl('filePath.jpg')
+const { data } = supabase.storage.from('bucket').getPublicUrl('filePath.jpg')
+
+console.log(data.publicUrl)
```
### Downloading
@@ -45,7 +45,7 @@ You can access them only by:
You can sign a time-limited URL that you can share to your users by invoking the `createSignedUrl` method on the SDK.
```js
-const { data, error } = supabase.storage
+const { data, error } = await supabase.storage
.from('bucket')
.createSignedUrl('private-document.pdf', 3600)
@@ -53,7 +53,3 @@ if (data) {
console.log(data.signedUrl)
}
```
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/serving/image-transformations.mdx b/apps/docs/content/guides/storage/serving/image-transformations.mdx
similarity index 95%
rename from apps/docs/pages/guides/storage/serving/image-transformations.mdx
rename to apps/docs/content/guides/storage/serving/image-transformations.mdx
index e247e421f68..d60dc23a173 100644
--- a/apps/docs/pages/guides/storage/serving/image-transformations.mdx
+++ b/apps/docs/content/guides/storage/serving/image-transformations.mdx
@@ -1,13 +1,11 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-image-transformations',
- title: 'Storage Image Transformations',
- description: 'Transform images with Storage',
- subtitle: 'Transform images with Storage',
- sidebar_label: 'Image Transformations',
- tocVideo: 'dLqSmxX3r7I',
-}
+---
+id: 'storage-image-transformations'
+title: 'Storage Image Transformations'
+description: 'Transform images with Storage'
+subtitle: 'Transform images with Storage'
+sidebar_label: 'Image Transformations'
+tocVideo: 'dLqSmxX3r7I'
+---
Supabase Storage offers the functionality to optimize and resize images on the fly. Any image stored in your buckets can be transformed and optimized for fast delivery.
@@ -383,7 +381,3 @@ IMGPROXY_URL=yourinternalimgproxyurl.internal.com
allowFullScreen
>
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/uploads/file-limits.mdx b/apps/docs/content/guides/storage/uploads/file-limits.mdx
similarity index 82%
rename from apps/docs/pages/guides/storage/uploads/file-limits.mdx
rename to apps/docs/content/guides/storage/uploads/file-limits.mdx
index 223203ef65e..84c816470ea 100644
--- a/apps/docs/pages/guides/storage/uploads/file-limits.mdx
+++ b/apps/docs/content/guides/storage/uploads/file-limits.mdx
@@ -1,11 +1,9 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'storage-file-limits',
- title: 'Limits',
- description: 'Learn how to increase Supabase file limits.',
- sidebar_label: 'Uploads',
-}
+---
+id: 'storage-file-limits'
+title: 'Limits'
+description: 'Learn how to increase Supabase file limits.'
+sidebar_label: 'Uploads'
+---
You can customize the Max file size for file uploads.
@@ -35,7 +33,3 @@ You can have different restrictions on a per bucket level.
You are able to restrict the file types (eg. `pdf`, `images`, `videos`) along with the max file size which should be lower than the global limit.
To apply these limit on a bucket level see [Creating Bucket](/docs/guides/storage/buckets/creating-buckets#restricting-uploads)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/uploads/resumable-uploads.mdx b/apps/docs/content/guides/storage/uploads/resumable-uploads.mdx
similarity index 94%
rename from apps/docs/pages/guides/storage/uploads/resumable-uploads.mdx
rename to apps/docs/content/guides/storage/uploads/resumable-uploads.mdx
index 4a8faed56d2..73e07e7067b 100644
--- a/apps/docs/pages/guides/storage/uploads/resumable-uploads.mdx
+++ b/apps/docs/content/guides/storage/uploads/resumable-uploads.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'resumable-uploads',
- title: 'Resumable Uploads',
- description: 'Learn how to upload files to Supabase Storage.',
- subtitle: 'Learn how to upload files to Supabase Storage.',
- sidebar_label: 'Uploads',
-}
+---
+id: 'resumable-uploads'
+title: 'Resumable Uploads'
+description: 'Learn how to upload files to Supabase Storage.'
+subtitle: 'Learn how to upload files to Supabase Storage.'
+sidebar_label: 'Uploads'
+---
The resumable upload method is recommended when:
@@ -149,7 +147,3 @@ We do advise against overwriting files when possible, as the CDN will take some
Uploading a file to a new path is the recommended way to avoid propagation delays and stale content.
To learn more, see the [CDN](/docs/guides/storage/cdn/fundamentals) guide.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/storage/uploads/standard-uploads.mdx b/apps/docs/content/guides/storage/uploads/standard-uploads.mdx
similarity index 89%
rename from apps/docs/pages/guides/storage/uploads/standard-uploads.mdx
rename to apps/docs/content/guides/storage/uploads/standard-uploads.mdx
index d3699892e13..90f219f5726 100644
--- a/apps/docs/pages/guides/storage/uploads/standard-uploads.mdx
+++ b/apps/docs/content/guides/storage/uploads/standard-uploads.mdx
@@ -1,12 +1,10 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'standard-uploads',
- title: 'Standard Uploads',
- description: 'Learn how to upload files to Supabase Storage.',
- subtitle: 'Learn how to upload files to Supabase Storage.',
- sidebar_label: 'Uploads',
-}
+---
+id: 'standard-uploads'
+title: 'Standard Uploads'
+description: 'Learn how to upload files to Supabase Storage.'
+subtitle: 'Learn how to upload files to Supabase Storage.'
+sidebar_label: 'Uploads'
+---
## Uploading
@@ -125,7 +123,3 @@ await supabase.storage.from('bucket_name').upload('file_path', file, {
When two or more clients upload a file to the same path, the first client to complete the upload will succeed and the other clients will receive a `400 Asset Already Exists` error.
If you provide the `x-upsert` header the last client to complete the upload will succeed instead.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/data/footer.ts b/apps/docs/data/footer.ts
index cdd4e567f3e..9ea6bba69ae 100644
--- a/apps/docs/data/footer.ts
+++ b/apps/docs/data/footer.ts
@@ -1,4 +1,5 @@
-import { IconCheckCircle, IconLifeBuoy, PrivacySettings } from 'ui'
+import { IconCheckCircle, IconLifeBuoy } from 'ui'
+import { PrivacySettings } from 'ui-patterns/PrivacySettings'
export const primaryLinks = [
{
diff --git a/apps/docs/docs/ref/javascript/release-notes.mdx b/apps/docs/docs/ref/javascript/release-notes.mdx
index edd38f4a762..e61166d7186 100644
--- a/apps/docs/docs/ref/javascript/release-notes.mdx
+++ b/apps/docs/docs/ref/javascript/release-notes.mdx
@@ -185,7 +185,7 @@ Supabase.js v2 release notes.
We're removing the `signIn()` method in favor of more explicit function signatures:
- `signInWithPassword()`, `signInWithOtp()`, and `signInWithOtp()`.
+ `signInWithPassword()`, `signInWithOtp()`, and `signInWithOAuth()`.
diff --git a/apps/docs/generator/legacy.ts b/apps/docs/generator/legacy.ts
index 9cb6dced62c..cf066ef1d0a 100644
--- a/apps/docs/generator/legacy.ts
+++ b/apps/docs/generator/legacy.ts
@@ -259,10 +259,10 @@ function extractParamTypeAsString(paramDefinition) {
x.value
? `${x.value}`
: x.name
- ? `${x.name}`
- : x.type
- ? `${x.type}`
- : ''
+ ? `${x.name}`
+ : x.type
+ ? `${x.type}`
+ : ''
)
.join(' | ')
}
diff --git a/apps/docs/internals/generate-sitemap.mjs b/apps/docs/internals/generate-sitemap.mjs
index 52c00e86bbc..c82e2709deb 100644
--- a/apps/docs/internals/generate-sitemap.mjs
+++ b/apps/docs/internals/generate-sitemap.mjs
@@ -53,7 +53,7 @@ async function generate() {
`
- const formatted = prettier.format(sitemap, {
+ const formatted = await prettier.format(sitemap, {
...prettierConfig,
parser: 'html',
})
diff --git a/apps/docs/layouts/DefaultGuideLayout.tsx b/apps/docs/layouts/DefaultGuideLayout.tsx
index d2c01704763..9bda33bb1df 100644
--- a/apps/docs/layouts/DefaultGuideLayout.tsx
+++ b/apps/docs/layouts/DefaultGuideLayout.tsx
@@ -12,7 +12,10 @@ interface Props {
}
children: any
toc?: any
+ // [Charis] Deprecate meta.hide_table_of_contents once the content migration is over
+ hideToc?: boolean
currentPage?: string
+ editLink?: string
}
const Layout: FC = (props) => {
diff --git a/apps/docs/layouts/SiteLayout.tsx b/apps/docs/layouts/SiteLayout.tsx
index 0b63909f289..ed1447aa80c 100644
--- a/apps/docs/layouts/SiteLayout.tsx
+++ b/apps/docs/layouts/SiteLayout.tsx
@@ -201,8 +201,8 @@ const MobileHeader = memo(function MobileHeader() {
{mobileMenuOpen
? 'Close'
: menuLevel
- ? levelsData[menuLevel].name
- : levelsData['home'].name}
+ ? levelsData[menuLevel].name
+ : levelsData['home'].name}
)
@@ -267,7 +267,7 @@ const Container = memo(function Container(props: PropsWithChildren) {
id="docs-content-container"
className={[
// 'overflow-x-auto',
- 'w-full h-screen transition-all ease-out',
+ 'w-full transition-all ease-out',
// 'absolute lg:relative',
mobileMenuOpen ? 'ml-[75%] sm:ml-[50%] md:ml-[33%] overflow-hidden' : 'overflow-auto',
// desktop override any margin styles
@@ -294,7 +294,6 @@ const NavContainer = memo(function NavContainer() {
'lg:left-0',
'transition-all',
'top-0',
- 'h-screen',
'flex flex-col ml-0',
].join(' ')}
>
@@ -352,8 +351,8 @@ const SiteLayout = ({ children }: PropsWithChildren<{}>) => {
Supabase Docs
-
-
+
+
diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx
index fc0fc87ae40..274d0748d3f 100644
--- a/apps/docs/layouts/guides/index.tsx
+++ b/apps/docs/layouts/guides/index.tsx
@@ -1,9 +1,11 @@
import { MDXProvider } from '@mdx-js/react'
import { NextSeo } from 'next-seo'
import Head from 'next/head'
+import { usePathname } from 'next/navigation'
import { useRouter } from 'next/router'
import { FC, useEffect, useRef, useState } from 'react'
-import { ExpandableVideo, IconExternalLink } from 'ui'
+import { IconExternalLink } from 'ui'
+import { ExpandableVideo } from 'ui-patterns/ExpandableVideo'
import components from '~/components'
import { highlightSelectedTocItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils'
import { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
@@ -23,6 +25,7 @@ interface Props {
tocVideo?: string
canonical?: string
}
+ editLink?: string
children: any
toc?: any
currentPage?: string
@@ -30,6 +33,7 @@ interface Props {
}
const Layout: FC = (props) => {
+ const pathname = usePathname()
const [hash] = useHash()
const articleRef = useRef()
@@ -60,7 +64,7 @@ const Layout: FC = (props) => {
return { text, link, level }
})
setTocList(newHeadings)
- }, [])
+ }, [pathname]) // Needed to recalculate the ToC when the page changes
const hasTableOfContents = tocList.length > 0
const tocVideoPreview = `http://img.youtube.com/vi/${props.meta.tocVideo}/0.jpg`
@@ -136,8 +140,12 @@ const Layout: FC = (props) => {
Edit this page on GitHub
diff --git a/apps/docs/lib/docs.ts b/apps/docs/lib/docs.ts
index 2ae4f8dfe80..b9ac429c1aa 100644
--- a/apps/docs/lib/docs.ts
+++ b/apps/docs/lib/docs.ts
@@ -1,98 +1,99 @@
-import fs from 'fs'
-import { join } from 'path'
+import { type CodeHikeConfig, remarkCodeHike } from '@code-hike/mdx'
import matter from 'gray-matter'
-import nonGeneratedReferencePages from 'data/nonGeneratedReferencePages'
-import { REFERENCES } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
+import { serialize } from 'next-mdx-remote/serialize'
+import type { SerializeOptions } from 'next-mdx-remote/dist/types'
+import { existsSync } from 'node:fs'
+import { readdir, readFile } from 'node:fs/promises'
+import { dirname, join, extname, sep } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import remarkGfm from 'remark-gfm'
-const docsDirectory = process.cwd()
+import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
-const getPathToGeneratedDoc = (slug: string) => {
- const sections = slug.split('/')
- const updatedSections = sections.slice()
- updatedSections.splice(updatedSections.length - 1, 0, 'generated')
- return updatedSections.join('/')
+const DOCS_DIRECTORY = join(dirname(fileURLToPath(import.meta.url)), '..')
+const GUIDES_DIRECTORY = join(DOCS_DIRECTORY, 'content/guides')
+
+type GuideFrontmatter = {
+ title: string
+ description?: string
+ hideToc?: boolean
}
-export function getDocsBySlug(slug: string) {
- const realSlug = slug.replace(/\.mdx$/, '')
+export function isValidGuideFrontmatter(obj: object): obj is GuideFrontmatter {
+ if (!('title' in obj) || typeof obj.title !== 'string') return false
+ if ('description' in obj && typeof obj.description !== 'string') return false
+ return true
+}
- const formattedSlug =
- (realSlug.includes('reference/javascript/') &&
- !nonGeneratedReferencePages.includes(realSlug)) ||
- (realSlug.includes('reference/dart/') && !nonGeneratedReferencePages.includes(realSlug)) ||
- (realSlug.includes('reference/cli/') && !nonGeneratedReferencePages.includes(realSlug)) ||
- (realSlug.includes('reference/api/') && !nonGeneratedReferencePages.includes(realSlug)) ||
- (realSlug.includes('reference/auth/') && !nonGeneratedReferencePages.includes(realSlug)) ||
- (realSlug.includes('reference/realtime/') && !nonGeneratedReferencePages.includes(realSlug)) ||
- (realSlug.includes('reference/storage/') && !nonGeneratedReferencePages.includes(realSlug))
- ? getPathToGeneratedDoc(realSlug)
- : realSlug
+export async function getGuidesStaticPaths(section: string) {
+ const directory = join(GUIDES_DIRECTORY, section)
+ const files = (await readdir(directory, { recursive: true }))
+ .filter((file) => extname(file) === '.mdx')
+ .map((file) => ({
+ params: {
+ slug: file.replace(/\.mdx$/, '').split(sep),
+ },
+ }))
- // files can either be .md or .mdx
- // we need to check which one exists
- let fullPath
- let fullPathMD = join(docsDirectory, `${formattedSlug}.md`)
- let fullPathMDX = join(docsDirectory, `${formattedSlug}.mdx`)
-
- if (fs.existsSync(fullPathMD)) {
- fullPath = fullPathMD
+ // Index page isn't included in the directory
+ const indexFile = join(GUIDES_DIRECTORY, `${section}.mdx`)
+ if (existsSync(indexFile)) {
+ files.push({ params: { slug: [] } })
}
- if (fs.existsSync(fullPathMDX)) {
- fullPath = fullPathMDX
+ return {
+ paths: files,
+ fallback: false,
+ }
+}
+
+export async function getGuidesStaticProps(
+ section: string,
+ { params }: { params?: { slug?: string | Array } }
+) {
+ let relPath: string
+ switch (typeof params?.slug) {
+ case 'string':
+ relPath = section + sep + params.slug
+ break
+ case 'object': // actually an array
+ relPath = section + sep + params.slug.join(sep)
+ break
+ case 'undefined':
+ relPath = section
}
- // if no match, 404
- if (!fs.existsSync(fullPath)) {
- console.log(`\nfile ${fullPath} not found, redirect to 404\n`)
- fullPath = join(docsDirectory, 'pages/404.mdx')
+ const fullPath = join(GUIDES_DIRECTORY, relPath + '.mdx')
+ const mdx = await readFile(fullPath, 'utf-8')
+
+ const editLink = `supabase/supabase/blob/master/apps/docs/content/guides/${relPath}.mdx`
+
+ const { data: frontmatter, content } = matter(mdx)
+ if (!isValidGuideFrontmatter(frontmatter)) {
+ throw Error('Type of frontmatter is not valid')
}
- const fileContents = fs.readFileSync(fullPath, 'utf8')
-
- const { data, content } = matter(fileContents)
-
- // Append the title as the h1 tag in the content
- const formattedContent = data.title !== undefined ? `# ${data.title} \n\n${content}` : content
-
- return { slug: realSlug, meta: data, content: formattedContent }
-}
-
-export function getAllDocs() {
- const slugs = walk('docs')
- const docs = slugs.map((slug) => getDocsBySlug(slug))
-
- return docs
-}
-
-function walk(dir: string) {
- let results: string[] = []
- const list = fs.readdirSync(dir)
- list.forEach(function (file) {
- file = dir + '/' + file
- let slugs = []
-
- fs.readdirSync(dir).forEach((file) => {
- let absolute = join(dir, file)
- if (fs.statSync(absolute).isDirectory()) {
- fs.readdirSync(absolute).forEach((subFile) => slugs.push(file.concat('/' + subFile)))
- }
- })
- })
- return results
-}
-
-// [Joshen] Initially tried to simplify the NavBar versioning by reading the directory
-// but caused some issues on Vercel. Just gonna park this for now.
-export function getLibraryVersions(slug: string) {
- const paths = slug.split('/')
- if (paths.includes('reference') && paths.length >= 3) {
- const reference = REFERENCES[paths[2]]
- if (reference?.library !== undefined) {
- const path = `data/nav/${reference.library}`
- const list = fs.readdirSync(path).map((file) => file.split('.')[0])
- return list.reverse()
- }
+ const codeHikeOptions: CodeHikeConfig = {
+ theme: codeHikeTheme,
+ lineNumbers: true,
+ showCopyButton: true,
+ skipLanguages: [],
+ autoImport: false,
+ }
+
+ const mdxOptions: SerializeOptions = {
+ mdxOptions: {
+ useDynamicImport: true,
+ remarkPlugins: [remarkGfm, [remarkCodeHike, codeHikeOptions]],
+ },
+ }
+ const mdxSource = await serialize(content, mdxOptions)
+
+ return {
+ props: {
+ frontmatter,
+ mdxSource,
+ editLink,
+ },
}
- return []
}
diff --git a/apps/docs/lib/mdx/generateOldRefMarkdown.tsx b/apps/docs/lib/mdx/generateOldRefMarkdown.tsx
deleted file mode 100644
index 2358fd5c698..00000000000
--- a/apps/docs/lib/mdx/generateOldRefMarkdown.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { serialize } from 'next-mdx-remote/serialize'
-
-import toc from 'markdown-toc'
-
-import { getDocsBySlug } from '~/lib/docs'
-
-async function generateOldRefMarkdown(slug) {
- let doc = getDocsBySlug(slug)
- const content = await serialize(doc.content ?? '', {
- // MDX's available options, see the MDX docs for more info.
- // https://mdxjs.com/packages/mdx/#compilefile-options
- // Indicates whether or not to parse the frontmatter from the mdx source
- })
- return {
- props: {
- /*
- * old reference docs are below
- */
- ...doc,
- content,
- toc: toc(doc.content, { maxdepth: 1, firsth1: false }),
- },
- }
-}
-
-export default generateOldRefMarkdown
diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
index 30da2ccad49..6e5f75eec60 100644
--- a/apps/docs/next.config.mjs
+++ b/apps/docs/next.config.mjs
@@ -1,11 +1,11 @@
// @ts-check
-import nextMdx from '@next/mdx'
-import remarkGfm from 'remark-gfm'
-import rehypeSlug from 'rehype-slug'
import { remarkCodeHike } from '@code-hike/mdx'
+import nextMdx from '@next/mdx'
+import rehypeSlug from 'rehype-slug'
+import remarkGfm from 'remark-gfm'
-import withYaml from 'next-plugin-yaml'
import configureBundleAnalyzer from '@next/bundle-analyzer'
+import withYaml from 'next-plugin-yaml'
import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
@@ -34,25 +34,11 @@ const withMDX = nextMdx({
/** @type {import('next').NextConfig} nextConfig */
const nextConfig = {
- outputFileTracing: true,
- experimental: {
- // Storybook 7.5 upgrade seems to causes dev deps to be included in build output, removing it here
- outputFileTracingExcludes: {
- '*': [
- './node_modules/@swc/core-linux-x64-gnu',
- './node_modules/@swc/core-linux-x64-musl',
- './node_modules/esbuild/**/*',
- './node_modules/webpack/**/*',
- './node_modules/rollup/**/*',
- ],
- },
- },
-
// Append the default value with md extensions
pageExtensions: ['ts', 'tsx', 'js', 'jsx', 'md', 'mdx'],
// reactStrictMode: true,
// swcMinify: true,
- basePath: '/docs',
+ basePath: process.env.NEXT_PUBLIC_BASE_PATH || '/docs',
images: {
dangerouslyAllowSVG: true,
domains: [
@@ -64,7 +50,7 @@ const nextConfig = {
'weweb-changelog.ghost.io',
'img.youtube.com',
'archbee-image-uploads.s3.amazonaws.com',
- 'obuldanrptloktxcffvn.supabase.co'
+ 'obuldanrptloktxcffvn.supabase.co',
],
},
// TODO: @next/mdx ^13.0.2 only supports experimental mdxRs flag. next ^13.0.2 will stop warning about this being unsupported.
@@ -74,7 +60,15 @@ const nextConfig = {
transform: 'lodash/{{member}}',
},
},
- transpilePackages: ['ui', 'common', 'mermaid', 'mdx-mermaid', 'dayjs', 'shared-data'],
+ transpilePackages: [
+ 'ui',
+ 'ui-patterns',
+ 'common',
+ 'mermaid',
+ 'mdx-mermaid',
+ 'dayjs',
+ 'shared-data',
+ ],
async headers() {
return [
{
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 0883cf3331c..8f6eadb9088 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -34,12 +34,12 @@
"@tanstack/react-query": "^5.13.4",
"common": "*",
"config": "*",
- "framer-motion": "^6.5.1",
+ "framer-motion": "^11.0.3",
"github-slugger": "^2.0.0",
"gray-matter": "^4.0.3",
"hast-util-has-property": "^2.0.1",
"isbot": "^3.6.5",
- "jsrsasign": "^10.5.26",
+ "jsrsasign": "^11.0.0",
"lodash": "^4.17.21",
"markdown-toc": "^1.2.0",
"mdast": "^3.0.0",
@@ -68,6 +68,7 @@
"remark-gfm": "^3.0.1",
"shared-data": "*",
"ui": "*",
+ "ui-patterns": "*",
"unist-builder": "^3.0.1",
"unist-util-filter": "^4.0.1",
"unist-util-visit": "^4.1.2",
@@ -89,7 +90,6 @@
"npm-run-all": "^4.1.5",
"openapi-types": "^12.0.2",
"openapi-typescript": "^6.7.2",
- "sass": "^1.68.0",
"tsconfig": "*",
"tsx": "^4.6.2",
"typescript": "^5.2.2"
diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
index 498dd08d20e..83852f73b22 100644
--- a/apps/docs/pages/_app.tsx
+++ b/apps/docs/pages/_app.tsx
@@ -9,18 +9,19 @@ import { createClient } from '@supabase/supabase-js'
import { QueryClientProvider, useQueryClient } from '@tanstack/react-query'
import { AuthProvider, ThemeProvider, useTelemetryProps, useThemeSandbox } from 'common'
import { useRouter } from 'next/router'
-import { type PropsWithChildren, useCallback, useEffect, useState } from 'react'
-import { AppPropsWithLayout } from 'types'
-import { CommandMenuProvider, PortalToast, useConsent } from 'ui'
-import { TabsProvider } from 'ui/src/components/Tabs'
+import { useCallback, useEffect, useState, type PropsWithChildren } from 'react'
+import { CommandMenuProvider, PortalToast, TabsProvider } from 'ui'
+import { useConsent } from 'ui-patterns/ConsentToast'
+
import Favicons from '~/components/Favicons'
import { IPv4DeprecationBanner } from '~/components/IPv4DeprecationBanner'
import SiteLayout from '~/layouts/SiteLayout'
import { IS_PLATFORM } from '~/lib/constants'
import { unauthedAllowedPost } from '~/lib/fetch/fetchWrappers'
import { useRootQueryClient } from '~/lib/fetch/queryClient'
-import { useOnLogout } from '~/lib/userAuth'
import { LOCAL_STORAGE_KEYS, remove } from '~/lib/storage'
+import { useOnLogout } from '~/lib/userAuth'
+import { AppPropsWithLayout } from '~/types'
/**
*
@@ -191,16 +192,18 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
<>
-
-
-
-
-
+
+
+
+
+
+
+
diff --git a/apps/docs/pages/api/ai/docs.ts b/apps/docs/pages/api/ai/docs.ts
new file mode 100644
index 00000000000..2f6ab7e7883
--- /dev/null
+++ b/apps/docs/pages/api/ai/docs.ts
@@ -0,0 +1,123 @@
+import { SupabaseClient } from '@supabase/supabase-js'
+import { ApplicationError, UserError, clippy } from 'ai-commands/edge'
+import { NextRequest } from 'next/server'
+import OpenAI from 'openai'
+
+export const runtime = 'edge'
+
+const openAiKey = process.env.OPENAI_KEY
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string
+const supabaseServiceKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string
+
+export default async function handler(req: NextRequest) {
+ if (!openAiKey) {
+ return new Response(
+ JSON.stringify({
+ error: 'No OPENAI_KEY set. Create this environment variable to use AI features.',
+ }),
+ {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ }
+ )
+ }
+
+ if (!supabaseUrl) {
+ return new Response(
+ JSON.stringify({
+ error:
+ 'No NEXT_PUBLIC_SUPABASE_URL set. Create this environment variable to use AI features.',
+ }),
+ {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ }
+ )
+ }
+
+ if (!supabaseServiceKey) {
+ return new Response(
+ JSON.stringify({
+ error:
+ 'No NEXT_PUBLIC_SUPABASE_ANON_KEY set. Create this environment variable to use AI features.',
+ }),
+ {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ }
+ )
+ }
+
+ const { method } = req
+
+ switch (method) {
+ case 'POST':
+ return handlePost(req)
+ default:
+ return new Response(
+ JSON.stringify({ data: null, error: { message: `Method ${method} Not Allowed` } }),
+ {
+ status: 405,
+ headers: { 'Content-Type': 'application/json', Allow: 'POST' },
+ }
+ )
+ }
+}
+
+async function handlePost(request: NextRequest) {
+ const openai = new OpenAI({ apiKey: openAiKey })
+
+ const body = await (request.json() as Promise<{
+ messages: { content: string; role: 'user' | 'assistant' }[]
+ }>)
+
+ const { messages } = body
+
+ if (!messages) {
+ throw new UserError('Missing messages in request data')
+ }
+
+ const supabaseClient = new SupabaseClient(supabaseUrl, supabaseServiceKey)
+
+ try {
+ const response = await clippy(openai, supabaseClient, messages)
+
+ // Proxy the streamed SSE response from OpenAI
+ return new Response(response.body, {
+ headers: {
+ 'Content-Type': 'text/event-stream',
+ },
+ })
+ } catch (error: unknown) {
+ console.error(error)
+ if (error instanceof UserError) {
+ return new Response(
+ JSON.stringify({
+ error: error.message,
+ data: error.data,
+ }),
+ {
+ status: 400,
+ headers: { 'Content-Type': 'application/json' },
+ }
+ )
+ } else if (error instanceof ApplicationError) {
+ // Print out application errors with their additional data
+ console.error(`${error.message}: ${JSON.stringify(error.data)}`)
+ } else {
+ // Print out unexpected errors as is to help with debugging
+ console.error(error)
+ }
+
+ // TODO: include more response info in debug environments
+ return new Response(
+ JSON.stringify({
+ error: 'There was an error processing your request',
+ }),
+ {
+ status: 500,
+ headers: { 'Content-Type': 'application/json' },
+ }
+ )
+ }
+}
diff --git a/apps/docs/pages/guides/ai/[[...slug]].tsx b/apps/docs/pages/guides/ai/[[...slug]].tsx
new file mode 100644
index 00000000000..af8cc713906
--- /dev/null
+++ b/apps/docs/pages/guides/ai/[[...slug]].tsx
@@ -0,0 +1,28 @@
+import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType } from 'next'
+import { MDXRemote } from 'next-mdx-remote'
+
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
+
+export const getStaticPaths = (async () => {
+ return getGuidesStaticPaths('ai')
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (args) => {
+ return getGuidesStaticProps('ai', args)
+}) satisfies GetStaticProps
+
+export default function AiGuide({
+ frontmatter,
+ mdxSource,
+ editLink,
+}: InferGetStaticPropsType) {
+ const { hideToc, ...meta } = frontmatter
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/docs/pages/guides/auth/[[...slug]].tsx b/apps/docs/pages/guides/auth/[[...slug]].tsx
new file mode 100644
index 00000000000..777f65e6ddd
--- /dev/null
+++ b/apps/docs/pages/guides/auth/[[...slug]].tsx
@@ -0,0 +1,28 @@
+import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType } from 'next'
+import { MDXRemote } from 'next-mdx-remote'
+
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
+
+export const getStaticPaths = (async () => {
+ return getGuidesStaticPaths('auth')
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (args) => {
+ return getGuidesStaticProps('auth', args)
+}) satisfies GetStaticProps
+
+export default function AuthGuide({
+ frontmatter,
+ mdxSource,
+ editLink,
+}: InferGetStaticPropsType) {
+ const { hideToc, ...meta } = frontmatter
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/docs/pages/guides/auth/auth-password-reset.mdx b/apps/docs/pages/guides/auth/auth-password-reset.mdx
deleted file mode 100644
index 7490f1edb1f..00000000000
--- a/apps/docs/pages/guides/auth/auth-password-reset.mdx
+++ /dev/null
@@ -1,250 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { Accordion } from 'ui'
-
-export const meta = {
- id: 'auth-password-reset',
- title: 'Password Reset',
- description: 'How to reset password with Supabase Auth',
-}
-
-- Send email for password reset using [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) while providing a `redirectTo` parameter
-- Email link will work as a magic link and log the user in then take them to the url specified in the `redirectTo` parameter
-- Create form to update the password and call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method with the new password
-
-## Single Page Application (SPA)
-
-### Sending password reset email
-
-
-
-
-Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to the update password page. This URL must be saved in your allowed [Redirect URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) list found at [Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't redirect the user.
-
-```js
-await supabase.auth.resetPasswordForEmail('hello@example.com', {
- redirectTo: 'http://example.com/account/update-password',
-})
-```
-
-
-
-
-Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/kotlin/auth-resetpasswordforemail) to reset a user password. This method takes a parameter of `redirectUrl` which we will use to pass an absolute URL to the update password page. This URL must be saved in your allowed [Redirect URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) list found at [Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't redirect the user.
-
-```kotlin
-supabase.auth.resetPasswordForEmail(
- email = "hello@example.com",
- redirectUrl = "http://example.com/account/update-password"
-)
-```
-
-If you are on one of the Kotlin targets that have built-in support for redirect url handling like Android, you may want to checkout [OAuth and OTP link verification](https://supabase.com/docs/reference/kotlin/initializing).
-
-
-
-
-### Email link
-
-The email link you receive will work like a magic link. This way when you click the link you will be logged into the website. Since we passed a redirect URL to the [`.resetPasswordForEmail`](https://supabase.com/docs/reference/javascript/auth-resetpasswordforemail) method the user should be sent to the update password page.
-
-### Update password
-
-
-
-
-To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and pass along the new password to this method.
-
-```js
-await supabase.auth.updateUser({ password: new_password })
-```
-
-
-
-
-To update the password we call the [`.modifyUser`](/docs/reference/kotlin/auth-updateuser) method and pass along the new password to this method.
-
-```kotlin
-supabase.auth.modifyUser {
- password = "new_password"
-}
-```
-
-
-
-
-## Server-Side Rendering (SSR)
-
-### Sending password reset email
-
-
-
-
-Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail) to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to the callback page along with a query parameter to the update password page. This URL must be saved in your allowed [Redirect URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) list found at [Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't redirect the user.
-
-```js
-await supabase.auth.resetPasswordForEmail('hello@example.com', {
- redirectTo: 'http://example.com/api/auth/callback?next=/account/update-password',
-})
-```
-
-
-
-We are using `next` as our query parameter, but this can name whatever you like.
-
-
-
-
-
-
-Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/kotlin/auth-resetpasswordforemail) to reset a user password. This method takes a parameter of `redirectUrl` which we will use to pass an absolute URL to the update password page. This URL must be saved in your allowed [Redirect URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) list found at [Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't redirect the user.
-
-```kotlin
-supabase.auth.resetPasswordForEmail(
- email = "hello@example.com",
- redirectUrl = "http://example.com/api/auth/callback?next=/account/update-password"
-)
-```
-
-If you are on one of the Kotlin targets that have built-in support for redirect url handling like Android, you may want to checkout [OAuth and OTP link verification](https://supabase.com/docs/reference/kotlin/initializing).
-
-
-
-
-### Email link
-
-The email link you receive will behave like a magic link. When the link is clicked you will be sent to the `redirectTo` URL you specified that points to the path with the exchange code.
-
-### Exchange authorization code
-
-
-
-
-After redirecting to the server page, we need to retrieve the code from the query parameter called `code` and pass it to the `.exchangeCodeForSession` function.
-
-```js
-// api/auth/callback.ts
-
-// The code is retrieved from the query parameter - use whichever mechanism is recommended
-// for your app/framework. This is just an example.
-const code = url.searchParams.get('code')
-
-// call the Supabase API to exchange the code for a session
-await supabase.auth.exchangeCodeForSession(code)
-```
-
-
-
-The query parameter is always `code` for the authorization code returned from the Supabase API
-
-
-
-We will also need to check for the `next` query parameter to redirect the user to the update password page.
-
-```ts
-// api/auth/callback.ts
-
-// The password page path is retrieved from the query parameter - use whichever mechanism is recommended
-// for your app/framework. This is just an example.
-const next = url.searchParams.get('next')
-
-// using Next.js API response object in this example
-res.redirect(next)
-```
-
-
-
-
-Here is an example on Android:
-
-```kotlin
-//Wherever you initialize your SupabaseClient:
-val client = createSupabaseClient(supabaseUrl, supabaseKey) {
- install(GoTrue) {
- flowType = FlowType.PKCE
- scheme = "exampleApp"
- host = "callback"
- }
-}
-```
-
-```xml
-
-
-
-
-
-
-
-
-```
-
-```kotlin
-//MainActivity.kt
-override fun onCreate() {
- client.handleDeeplinks(intent)
-}
-```
-
-That's it! `supabase-kt` will take care of parsing and importing the session. Other targets are similar, you can check [OAuth and OTP link verification](https://supabase.com/docs/reference/kotlin/initializing) for more information.
-
-
-
-
-### Update password
-
-
-
-
-To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and pass along the new password to this method.
-
-```js
-await supabase.auth.updateUser({ password: new_password })
-```
-
-
-
-
-To update the password we call the [`.modifyUser`](/docs/reference/kotlin/auth-updateuser) method and pass along the new password to this method.
-
-```kotlin
-supabase.auth.modifyUser {
- password = "new_password"
-}
-```
-
-
-
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/enterprise-sso.mdx b/apps/docs/pages/guides/auth/enterprise-sso.mdx
deleted file mode 100644
index 5ca0dffcd0c..00000000000
--- a/apps/docs/pages/guides/auth/enterprise-sso.mdx
+++ /dev/null
@@ -1,12 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- 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 [with SAML 2.0](/docs/guides/auth/sso/auth-sso-saml).
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/phone-login.mdx b/apps/docs/pages/guides/auth/phone-login.mdx
deleted file mode 100644
index 6d7169e74b1..00000000000
--- a/apps/docs/pages/guides/auth/phone-login.mdx
+++ /dev/null
@@ -1,52 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { IconPanel, GlassPanel, IconMail } from 'ui'
-import Link from 'next/link'
-import { PhoneLoginsItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
-
-export const meta = {
- title: 'Phone Login',
- description: 'Learn about logging in to your platform using SMS one-time passwords.',
-}
-
-
-
- Authenticating users via SMS can become expensive. Adjust your project's rate limits and [configure CAPTCHA](/docs/guides/auth/auth-captcha) to control the bill. Read more about this in the [Production Checklist](/docs/guides/platform/going-into-prod).
-
-
-
-Phone Login is a method of authentication that allows users to log in to a website or application without using a password. Instead of entering a password, the user provides another form of authentication through a one-time code sent via SMS.
-
-## Benefits
-
-There are several reasons why you might want to add phone login to your applications:
-
-- **Improved user experience**: By eliminating the need for users to remember and enter complex passwords, phone login can make it easier and more convenient for users to log in to your application. This can improve the overall user experience and make it more enjoyable for users to interact with your application.
-
-- **Increased security**: Phone login can improve the security of your application by reducing the risk of password-related security breaches, such as password reuse and weak passwords. By using alternative forms of authentication, such as one-time codes or biometric factors, you can make it more difficult for unauthorized users to access your application.
-
-- **Reduced support burden**: Phone login can also help reduce the support burden for your team by eliminating the need to handle password recovery flows or deal with other password-related issues. This can free up your team to focus on other important tasks and improve the efficiency of your operation.
-
-## Set up a provider with Supabase Auth
-
-Supabase supports Phone Login with several communications platforms. Follow the guides below to set up a provider with Supabase Auth.
-
-
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/phone-login/messagebird.mdx b/apps/docs/pages/guides/auth/phone-login/messagebird.mdx
deleted file mode 100644
index d88a23d153a..00000000000
--- a/apps/docs/pages/guides/auth/phone-login/messagebird.mdx
+++ /dev/null
@@ -1,357 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-messagebird',
- title: 'Phone Auth with MessageBird',
- description: 'How to set up and use Mobile OTP with MessageBird and Supabase.',
-}
-
-
-
-Authenticating users via SMS can become expensive. Adjust your project's rate limits and [configure CAPTCHA](/docs/guides/auth/auth-captcha) to control the bill. Read more about this in the [Production Checklist](/docs/guides/platform/going-into-prod).
-
-
-
-## Overview
-
-In this guide we'll show you how to authenticate your users with SMS based OTP (One-Time Password) tokens.
-
-There are two reasons to use Supabase SMS OTP tokens:
-
-- You want users to log in with mobile + password, and the mobile should be verified via SMS
-- You want users to log in with mobile ONLY (i.e. passwordless login)
-
-We'll cover:
-
-- [Finding your MessageBird credentials](#finding-your-messagebird-credentials)
-- [Using OTP with password based logins](#using-otp-with-password-based-logins)
-- [Using OTP as a passwordless sign-in mechanism](#using-otp-as-a-passwordless-sign-in-mechanism)
-
-What you'll need:
-
-- A MessageBird account (sign up here: https://dashboard.messagebird.com/en/sign-up)
-- A Supabase project (create one here: https://supabase.com/dashboard)
-- A mobile phone capable of receiving SMS
-
-## Steps
-
-### Finding your MessageBird credentials
-
-Start by logging into your MessageBird account and verify the mobile number you'll be using to test with: https://dashboard.messagebird.com/en/getting-started/sms
-
-This is the number that will be receiving the SMS OTPs.
-
-
-
-
-
-Navigate to the [dashboard settings](https://dashboard.messagebird.com/en/settings/sms) to set the default originator. The messagebird originator is the name or number from which the message is sent.
-For more information, you can refer to the messagebird article on choosing an originator [here](https://support.messagebird.com/hc/en-us/articles/115002628665-Choosing-an-originator)
-
-
-
-You will need the following values to get started:
-
-- Live API Key / Test API Key
-- MessageBird originator
-
-Now go to the [Auth > Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the Supabase dashboard and select "Phone" from the Auth Providers list.
-
-You should see an option to enable the Phone provider.
-
-Toggle it on, and copy the 2 values over from the Messagebird dashboard. Click save.
-
-Note: If you use the Test API Key, the OTP will not be delivered to the mobile number specified but messagebird will log the response in the dashboard.
-If the Live API Key is used instead, the OTP will be delivered and there will be a deduction in your free credits.
-
-Plugin MessageBird credentials
-
-Now the backend should be setup, we can proceed to add our client-side code!
-
-#### SMS custom template
-
-The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
-
-Go to [Auth > Templates](https://supabase.com/dashboard/project/_/auth/templates) page in the Supabase dashboard.
-
-Use the variable `.Code` in the template to display the code.
-
-### Using OTP with password based logins
-
-In this use scenario we'll be using the user's mobile phone number as an alternative to an email address when signing up along with a password. You may want to think hard about the permanency of this however. It is not uncommon for mobile phone numbers to be recycled by phone networks when users cancel their phone contracts or move countries, therefore granting access to the user's account to whoever takes over the phone number in the future. Soon we'll add multi-factor auth, which will mitigate this risk, but for now you may want to give some thought to allowing your users to recover their account by some other means in an emergency.
-
-
-
-
-Using supabase-js on the client you'll want to use the same `signUp` method that you'd use for email based sign ups, but with the `phone` param instead of the `email param`:
-
-```js
-const {
- data: { user, session },
- error,
-} = await supabase.auth.signUp({
- phone: '+13334445555',
- password: 'some-password',
-})
-```
-
-
-
-
-```kotlin
-supabase.auth.signUpWith(Phone) {
- phone = "+13334445555"
- password = "some-password"
-}
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/signup' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "phone": "+13334445555",
- "password": "some-password"
-}'
-```
-
-
-
-
-The user will now receive an SMS with a 6-digit pin that you will need to receive from them within 60-seconds before they can login to their account.
-
-
-
-
-You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyOtp`:
-
-```js
-const {
- data: { session },
- error,
-} = await supabase.auth.verifyOtp({
- phone: '+13334445555',
- token: '123456',
-})
-```
-
-
-
-
-You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyPhoneOtp`:
-
-```kotlin
-supabase.auth.verifyPhoneOtp(
- type = OtpType.Phone.SMS,
- phone = "+13334445555",
- token = "123456"
-)
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/verify' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "type": "sms",
- "phone": "+13334445555",
- "token": "123456"
-}'
-```
-
-
-
-
-If successful the user will now be logged in and you should receive a valid session like:
-
-```json
-{
- "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM",
- "token_type": "bearer",
- "expires_in": 3600,
- "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ"
-}
-```
-
-The access token can be sent in the Authorization header as a Bearer token for any CRUD operations on supabase-js. See our guide on [Row Level Security](/docs/guides/auth#row-level-security) for more info on restricting access on a user basis.
-
-Also now that the mobile has been verified, the user can use the number and password to sign in without needing to verify their number each time:
-
-
-
-
-```js
-const { user, error } = await supabase.auth.signInWithPassword({
- phone: '+13334445555',
- password: 'some-password',
-})
-```
-
-
-
-
-```kotlin
-supabase.auth.signInWith(Phone) {
- phone = "+13334445555"
- password = "some-password"
-}
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/token?grant_type=password' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "phone": "+13334445555",
- "password": "some-password"
-}'
-```
-
-
-
-
-### Using OTP as a passwordless sign-in mechanism
-
-In this scenario you are granting your user's the ability to login to their account without needing to set a password on their account, all they have to do to log in is verify their mobile each time using the OTP.
-
-
-
-
-In JavaScript we can use the `signIn` method with a single parameter: `phone`
-
-```js
-const { data, error } = await supabase.auth.signInWithOtp({
- phone: '+13334445555',
-})
-```
-
-
-
-
-In Kotlin, we can use the `signInWith(OTP)` method and change the property `phone`
-
-```kotlin
-supabase.auth.signInWith(OTP) {
- phone = "+13334445555"
-}
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/otp' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "phone": "+13334445555"
-}'
-```
-
-
-
-
-The second step is the same as the previous section, you need to collect the 6-digit pin from the user and pass it along with their phone number to the verify method:
-
-
-
-
-```js
-const {
- data: { session },
- error,
-} = await supabase.auth.verifyOtp({
- phone: '+13334445555',
- token: '123456',
-})
-```
-
-
-
-
-```kotlin
-supabase.auth.verifyPhoneOtp(
- type = OtpType.Phone.SMS,
- phone = "+13334445555",
- token = "123456"
-)
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/verify' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "type": "sms",
- "phone": "+13334445555",
- "token": "123456"
-}'
-```
-
-
-
-
-and the response should also be the same as above:
-
-```json
-{
- "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM",
- "token_type": "bearer",
- "expires_in": 3600,
- "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ"
-}
-```
-
-The user does not have a password therefore will need to sign in via this method each time they want to access your service.
-
-## Resources
-
-- [MessageBird Signup](https://dashboard.messagebird.com/en/sign-up)
-- [Supabase Dashboard](https://supabase.com/dashboard)
-- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/phone-login/twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
deleted file mode 100644
index 64639092dce..00000000000
--- a/apps/docs/pages/guides/auth/phone-login/twilio.mdx
+++ /dev/null
@@ -1,471 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-twilio',
- title: 'Phone Auth with Twilio',
- description: 'How to set up and use Mobile OTP with Twilio and Supabase.',
- video: 'https://www.youtube.com/v/akScoPO01bc',
-}
-
-
-
-Authenticating users via SMS can become expensive. Adjust your project's rate limits and [configure CAPTCHA](/docs/guides/auth/auth-captcha) to control the bill. Read more about this in the [Production Checklist](/docs/guides/platform/going-into-prod).
-
-
-
-In this guide we'll show you how to authenticate your users with SMS based One-Time Password (OTP) tokens.
-
-There are two reasons to use Supabase SMS OTP tokens:
-
-- You want users to log in with a phone number and password, and verify the phone number on signup with SMS
-- You want users to log in with a phone number ONLY (i.e. passwordless login)
-
-What you'll need:
-
-- Twilio account ([sign up](https://www.twilio.com/try-twilio))
-- Supabase project (create one [here](https://supabase.com/dashboard))
-- Mobile phone capable of receiving SMS
-
-SMS Authentication can be done with either Twilio Verify or Twilio Programmable Messaging. [Twilio Verify](https://www.twilio.com/en-us/trusted-activation/verify) is a specialized OTP solution and is recommended for most developers that need over-the-phone authentication. Alternatively you can use [Twilio Programmable Messaging](https://www.twilio.com/docs/messaging) which offers generic SMS sending support.
-
-## Twilio Verify
-
-To set up Twilio Verify, you will need to:
-
-1. Create a new [verification service](https://support.twilio.com/hc/en-us/articles/360033309133-Getting-Started-with-Twilio-Verify-V2) in the Twilio dashboard.
-2. [Switch Phone Provider to Twilio Verify](https://supabase.com/dashboard/project/_/auth/providers)
-3. Configure the Twilio Verify Service ID field using the Verification Service ID obtained in 1.
-
-When using Twilio Verify, OTPs are generated by Twilio. This means that:
-
-- Unlike other providers, the OTP expiry duration and message content fields are not configurable via the Supabase dashboard. Please head to Twilio Verify to configure these settings.
-- The token remains the same during its validity period until the verification is successful. This means if your user make another request within that period, they will receive the same token.
-- Twilio Verify has a separate set of rate limits that apply. Visit Twilio's [Rate Limit and Timeouts page](https://www.twilio.com/docs/verify/api/rate-limits-and-timeouts) to find out more.
-
-
-
-At this time, Twilio Verify is only supported on the `whatsapp` and `sms` channels.
-
-
-
-## Twilio (Programmable Messaging)
-
-In this section we'll cover:
-
-- [Finding your Twilio credentials](#finding-your-twilio-credentials)
-- [Using OTP with password based logins](#using-otp-with-password-based-logins)
-- [Using OTP as a passwordless sign-in mechanism](#using-otp-as-a-passwordless-sign-in-mechanism)
-
-What you'll need:
-
-- A Twilio account (sign up here: https://www.twilio.com/try-twilio)
-- A Supabase project (create one here: https://supabase.com/dashboard)
-- A mobile phone capable of receiving SMS
-
-## Video
-
-
-
-
-
-## Steps
-
-### Finding your Twilio credentials
-
-Start by logging into your Twilio account and starting a new project: https://www.twilio.com/console/projects/create
-
-Give your project a name and verify the mobile number you'll be using to test with. This is the number that will be receiving the SMS OTPs.
-
-
-
-
-Select 'SMS', 'Identity & Verification', and 'With code' as options on the welcome form.
-
-
-
-When you're back on the [Twilio console screen](https://www.twilio.com/console), you need to scroll down and click 'Get a trial phone number' - this is the number that you'll be sending SMSs from.
-
-
-
-
-
-You should now be able to see all three values you'll need to get started:
-
-- Account SID
-- Auth Token
-- Sender Phone Number
-
-
-
-Now go to the [Auth > Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the Supabase dashboard and select "Phone" from the Auth Providers list.
-
-You should see an option to enable the Phone provider.
-
-Toggle it on, and copy the 3 values over from the Twilio dashboard. Click save.
-
-Note: for "Twilio Message Service SID" you can use the Sender Phone Number generated above.
-
-
-
-Now the backend should be setup, we can proceed to add our client-side code!
-
-
- The `Twilio Content SID` field is specific to Twilio Programmable Messaging (WhatsApp) senders.
- Disregard this field if you are only sending SMS messages. Refer to the section on WhatsApp OTP
- Logins for further details.
-
-
-#### SMS custom template
-
-The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
-
-Go to the [Auth > Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the Supabase dashboard and select "Phone" from the Auth Providers list. Scroll to the very bottom of the "Phone" section to the "SMS Message" input - you can customize the SMS message here.
-
-Use the variable `.Code` in the template to display the OTP code. Here's an example in the SMS template.
-
-
-
-### Using OTP with password based logins
-
-In this scenario we'll be using the user's mobile phone number and a corresponding password as an alternative to signing up with an email address. Note: please thoroughly consider potential security implications when signing up with a combination of phone number and password. Phone numbers are sometimes recycled by phone networks when users cancel their phone contracts or move countries, thereby granting access to the user's account to the subsequent owner of the phone number. In the near future Supabase will support multifactor authentication, which will mitigate this risk, but for now you may want to consider allowing your users to recover their account by some other means in an emergency.
-
-
-
-
-Using supabase-js on the client you'll want to use the same `signUp` method that you'd use for email based sign ups, but with the `phone` param instead of the `email param`:
-
-```js
-const {
- data: { user, session },
- error,
-} = await supabase.auth.signUp({
- phone: '+13334445555',
- password: 'some-password',
-})
-```
-
-
-
-
-```kotlin
-supabase.auth.signUpWith(Phone) {
- phone = "+13334445555"
- password = "some-password"
-}
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/signup' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "phone": "+13334445555",
- "password": "some-password"
-}'
-```
-
-
-
-
-The user will now receive an SMS with a 6-digit pin that you will need to receive from them within 60-seconds before they can login to their account.
-
-
-
-
-You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyOtp`:
-
-```js
-const {
- data: { session },
- error,
-} = await supabase.auth.verifyOtp({
- phone: '+13334445555',
- token: '123456',
- type: 'sms',
-})
-```
-
-
-
-
-You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyPhoneOtp`:
-
-```kotlin
-supabase.auth.verifyPhoneOtp(
- type = OtpType.Phone.SMS,
- phone = "+13334445555",
- token = "123456"
-)
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/verify' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "type": "sms",
- "phone": "+13334445555",
- "token": "123456"
-}'
-```
-
-
-
-
-If successful the user will now be logged in and you should receive a valid session like:
-
-```json
-{
- "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM",
- "token_type": "bearer",
- "expires_in": 3600,
- "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ"
-}
-```
-
-The access token can be sent in the Authorization header as a Bearer token for any CRUD operations on supabase-js. See our guide on [Row Level Security](/docs/guides/auth#row-level-security) for more info on restricting access on a user basis.
-
-Also now that the mobile has been verified, the user can use the number and password to sign in without needing to verify their number each time:
-
-
-
-
-```js
-const { user, error } = await supabase.auth.signInWithPassword({
- phone: '+13334445555',
- password: 'some-password',
-})
-```
-
-
-
-
-```kotlin
-supabase.auth.signInWith(Phone) {
- phone = "+13334445555"
- password = "some-password"
-}
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/token?grant_type=password' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "phone": "+13334445555",
- "password": "some-password"
-}'
-```
-
-
-
-
-### Using OTP as a passwordless sign-in mechanism
-
-In this scenario you are granting your user's the ability to login to their account without needing to set a password on their account, all they have to do to log in is verify their mobile each time using the OTP.
-
-
-
-
-In JavaScript we can use the `signIn` method with a single parameter: `phone`
-
-```js
-const { data, error } = await supabase.auth.signInWithOtp({
- phone: '+13334445555',
-})
-```
-
-
-
-
-In Kotlin, we can use the `signInWith(OTP)` method and change the property `phone`
-
-```kotlin
-supabase.auth.signInWith(OTP) {
- phone = "+13334445555"
-}
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/otp' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "phone": "+13334445555"
-}'
-```
-
-
-
-
-The second step is the same as the previous section, you need to collect the 6-digit pin from the user and pass it along with their phone number to the verify method:
-
-
-
-
-```js
-const {
- data: { session },
- error,
-} = await supabase.auth.verifyOtp({
- phone: '+13334445555',
- token: '123456',
- type: 'sms',
-})
-```
-
-
-
-
-```kotlin
-supabase.auth.verifyPhoneOtp(
- type = OtpType.Phone.SMS,
- phone = "+13334445555",
- token = "123456"
-)
-```
-
-
-
-
-```bash
-curl -X POST 'https://cvwawazfelidkloqmbma.supabase.co/auth/v1/verify' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "type": "sms",
- "phone": "+13334445555",
- "token": "123456"
-}'
-```
-
-
-
-
-and the response should also be the same as above:
-
-```json
-{
- "access_token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJhdXRoZW50aWNhdGVkIiwiZXhwIjoxNjI3MjkxNTc3LCJzdWIiOiJmYTA2NTQ1Zi1kYmI1LTQxY2EtYjk1NC1kOGUyOTg4YzcxOTEiLCJlbWFpbCI6IiIsInBob25lIjoiNjU4NzUyMjAyOSIsImFwcF9tZXRhZGF0YSI6eyJwcm92aWRlciI6InBob25lIn0sInVzZXJfbWV0YWRhdGEiOnt9LCJyb2xlIjoiYXV0aGVudGljYXRlZCJ9.1BqRi0NbS_yr1f6hnr4q3s1ylMR3c1vkiJ4e_N55dhM",
- "token_type": "bearer",
- "expires_in": 3600,
- "refresh_token": "LSp8LglPPvf0DxGMSj-vaQ"
-}
-```
-
-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
-
-Twilio Verify can be used with WhatsApp OTPs with no additional configuration.
-
-Complete the following steps to use WhatsApp OTP with Twilio Programmable Messaging:
-
-1. Go through the [Twilio self sign up guide for WhatsApp](https://www.twilio.com/docs/whatsapp/self-sign-up).
-2. Register a Twilio Content Template via the [API](https://www.twilio.com/docs/content/whatsappauthentication) and note the corresponding Twilio Content SID. You can also use the Template Builder on the Twilio dashboard to create a Content Template
- 
-3. Register the Twilio Content SID on the Supabase dashboard under Authentication > Providers > Phone > Twilio Content SID. Ensure you have Twilio selected as your phone provider.
-
-Note that you may only use one Twilio Content SID at a time and that Supabase Auth will use the Content Template over the `SMS Message` field when sending WhatsApp messages. Use Twilio Verify if you need to use more than one message template.
-
-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
-const {
- data: { session },
- error,
-} = await supabase.auth.verifyOtp({
- phone: '+57336567365',
- token: '123456',
- type: 'sms',
-})
-```
-
-## Resources
-
-- [Reasons to use Twilio Verify](https://www.twilio.com/blog/9-reasons-to-use-the-verify-api)
-- [Twilio Verify Documentation](https://www.twilio.com/docs/verify)
-- [Twilio Signup](https://www.twilio.com/try-twilio)
-- [Supabase Dashboard](https://supabase.com/dashboard)
-- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/phone-login/vonage.mdx b/apps/docs/pages/guides/auth/phone-login/vonage.mdx
deleted file mode 100644
index ac260899565..00000000000
--- a/apps/docs/pages/guides/auth/phone-login/vonage.mdx
+++ /dev/null
@@ -1,352 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-vonage',
- title: 'Phone Auth with Vonage',
- description: 'How to set up and use Mobile OTP with Vonage and Supabase.',
-}
-
-
-
-Authenticating users via SMS can become expensive. Adjust your project's rate limits and [configure CAPTCHA](/docs/guides/auth/auth-captcha) to control the bill. Read more about this in the [Production Checklist](/docs/guides/platform/going-into-prod).
-
-
-
-## Overview
-
-In this guide we'll show you how to authenticate your users with SMS based OTP (One-Time Password) tokens.
-
-There are two reasons to use Supabase SMS OTP tokens:
-
-- You want users to log in with mobile + password, and the mobile should be verified via SMS
-- You want users to log in with mobile ONLY (i.e. passwordless login)
-
-We'll cover:
-
-- [Getting your Vonage API Key](#finding-your-vonage-api-key)
-- [Using OTP with password based logins](#using-otp-with-password-based-logins)
-- [Using OTP as a passwordless sign-in mechanism](#using-otp-as-a-passwordless-sign-in-mechanism)
-
-What you'll need:
-
-- A Vonage account (sign up here: https://dashboard.nexmo.com/sign-up)
-- A Supabase project (create one here: https://supabase.com/dashboard)
-- A mobile phone capable of receiving SMS
-
-## Steps
-
-### Getting your Vonage credentials
-
-Start by logging into your Vonage Dashboard at https://dashboard.nexmo.com/
-
-You will see you API Key and API Secret here, which is actually all you need to get started.
-
-In most countries, a phone number is actually optional and you can also use any Alphanumeric Sender ID of up to 11 characters length (8 for India) as a Sender ID (from). This means you do not need a number to test with in most cases.
-
-To find out more about supported countries for Alphanumeric Sender ID, check this overview: https://help.nexmo.com/hc/en-us/articles/115011781468-SMS-Features-Overview-Outbound-only-
-
-Hint: Some countries might need a Sender ID Registration to allow sending with an Alphanumeric Sender ID. You can find this information in the help article as well. If Alpha Sender IDs are not supported, you will need to buy a phone number.
-
-### Getting a phone number (optional)
-
-If you want a phone number to send SMS from, you can buy one from the Vonage Dashboard under Numbers > Buy Numbers (https://dashboard.nexmo.com/buy-numbers).
-
-Select the country you want a number for. You will need a mobile phone number with SMS or SMS+Voice capability. After you have bought the number, you will be able to send SMS from it.
-
-### Configure Supabase
-
-Now go to the [Auth > Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the Supabase dashboard and select "Phone" from the Auth Providers list.
-
-You should see an option to enable the Phone provider.
-
-Toggle it on, and copy the API key, API secret and phone number values over from the Vonage dashboard. Click save.
-
-Now the backend should be setup, we can proceed to add our client-side code!
-
-#### SMS custom template
-
-The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
-
-Go to [Auth > Templates](https://supabase.com/dashboard/project/_/auth/templates) page in the Supabase dashboard.
-
-Use the variable `.Code` in the template to display the code.
-
-### Using OTP with password based logins
-
-In this use scenario we'll be using the user's mobile phone number as an alternative to an email address when signing up along with a password. You may want to think hard about the permanency of this however. It is not uncommon for mobile phone numbers to be recycled by phone networks when users cancel their phone contracts or move countries, therefore granting access to the user's account to whoever takes over the phone number in the future.
-
-
-
-
-Using supabase-js on the client you'll want to use the same `signUp` method that you'd use for email based sign ups, but with the `phone` param instead of the `email param`:
-
-```js
-const {
- data: { user, session },
- error,
-} = await supabase.auth.signUp({
- phone: '491512223334444',
- password: 'some-password',
-})
-```
-
-
-
-
-```kotlin
-supabase.auth.signUpWith(Phone) {
- phone = "+13334445555"
- password = "some-password"
-}
-```
-
-
-
-
-```bash
-curl -X POST 'https://xxx.supabase.co/auth/v1/signup' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "phone": "491512223334444",
- "password": "some-password"
-}'
-```
-
-
-
-
-The user will now receive an SMS with a 6-digit pin that you will need to receive from them within 60-seconds before they can login to their account.
-
-
-
-
-You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyOtp`:
-
-```js
-const {
- data: { session },
- error,
-} = await supabase.auth.verifyOtp({
- phone: '491512223334444',
- token: '123456',
-})
-```
-
-
-
-
-You should present a form to the user so they can input the 6 digit pin, then send it along with the phone number to `verifyPhoneOtp`:
-
-```kotlin
-supabase.auth.verifyPhoneOtp(
- type = OtpType.Phone.SMS,
- phone = "+13334445555",
- token = "123456"
-)
-```
-
-
-
-
-```bash
-curl -X POST 'https://xxx.supabase.co/auth/v1/verify' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "type": "sms",
- "phone": "491512223334444",
- "token": "123456"
-}'
-```
-
-
-
-
-If successful the user will now be logged in and you should receive a valid session like:
-
-```json
-{
- "access_token": "eyJxxx...",
- "token_type": "bearer",
- "expires_in": 3600,
- "refresh_token": "yyy..."
-}
-```
-
-The access token can be sent in the Authorization header as a Bearer token for any CRUD operations on supabase-js. See our guide on [Row Level Security](/docs/guides/auth#row-level-security) for more info on restricting access on a user basis.
-
-Also now that the mobile has been verified, the user can use the number and password to sign in without needing to verify their number each time:
-
-
-
-
-```js
-const { user, error } = await supabase.auth.signInWithPassword({
- phone: '491512223334444',
- password: 'some-password',
-})
-```
-
-
-
-
-```kotlin
-supabase.auth.signInWith(Phone) {
- phone = "+13334445555"
- password = "some-password"
-}
-```
-
-
-
-
-```bash
-curl -X POST 'https://xxx.supabase.co/auth/v1/token?grant_type=password' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "phone": "491512223334444",
- "password": "some-password"
-}'
-```
-
-
-
-
-### Using OTP as a passwordless sign-in mechanism
-
-In this scenario you are granting your user's the ability to login to their account without needing to set a password on their account, all they have to do to log in is verify their mobile each time using the OTP.
-
-
-
-
-In JavaScript we can use the `signIn` method with a single parameter: `phone`
-
-```js
-const { data, error } = await supabase.auth.signInWithOtp({
- phone: '491512223334444',
-})
-```
-
-
-
-
-In Kotlin, we can use the `signInWith(OTP)` method and change the property `phone`
-
-```kotlin
-supabase.auth.signInWith(OTP) {
- phone = "+13334445555"
-}
-```
-
-
-
-
-```bash
-curl -X POST 'https://xxx.supabase.co/auth/v1/otp' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "phone": "491512223334444"
-}'
-```
-
-
-
-
-The second step is the same as the previous section, you need to collect the 6-digit pin from the user and pass it along with their phone number to the verify method:
-
-
-
-
-```js
-const {
- data: { session },
- error,
-} = await supabase.auth.verifyOtp({
- phone: '491512223334444',
- token: '123456',
-})
-```
-
-
-
-
-```kotlin
-supabase.auth.verifyPhoneOtp(
- type = OtpType.Phone.SMS,
- phone = "+13334445555",
- token = "123456"
-)
-```
-
-
-
-
-```bash
-curl -X POST 'https://xxx.supabase.co/auth/v1/verify' \
--H "apikey: SUPABASE_KEY" \
--H "Content-Type: application/json" \
--d '{
- "type": "sms",
- "phone": "491512223334444",
- "token": "123456"
-}'
-```
-
-
-
-
-and the response should also be the same as above:
-
-```json
-{
- "access_token": "eyJxxx...",
- "token_type": "bearer",
- "expires_in": 3600,
- "refresh_token": "yyy..."
-}
-```
-
-The user does not have a password therefore will need to sign in via this method each time they want to access your service.
-
-## Resources
-
-- [Vonage Signup](https://dashboard.nexmo.com/sign-up)
-- [Supabase Dashboard](https://supabase.com/dashboard)
-- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/cli/managing-environments.mdx b/apps/docs/pages/guides/cli/managing-environments.mdx
index 17428200b1b..a373ab6f507 100644
--- a/apps/docs/pages/guides/cli/managing-environments.mdx
+++ b/apps/docs/pages/guides/cli/managing-environments.mdx
@@ -11,7 +11,13 @@ export const meta = {
This guide shows you how to set up your local Supabase development environment that integrates with GitHub Actions to automatically test and release schema changes to staging and production Supabase projects.
-
+
## Set up a local environment
@@ -153,7 +159,13 @@ Without the `-f` file flag, the output is written to stdout by default.
In a production environment, we recommend using a CI/CD pipeline to deploy new migrations with GitHub Actions rather than deploying from your local machine.
-
+
This example uses two Supabase projects, one for production and one for staging.
diff --git a/apps/docs/pages/guides/database/connecting-to-postgres.mdx b/apps/docs/pages/guides/database/connecting-to-postgres.mdx
index e5ea17fb32c..9b836b3b3f5 100644
--- a/apps/docs/pages/guides/database/connecting-to-postgres.mdx
+++ b/apps/docs/pages/guides/database/connecting-to-postgres.mdx
@@ -12,12 +12,12 @@ export const meta = {
Supabase provides several options for programmatically connecting to your Postgres database:
1. Programmatic access using the Data APIs
-1. Direct connections using the built-in Postgres connection system
1. Connection pooling for scalable connections
+1. Direct connections using the built-in Postgres connection system
-Starting on , direct database connections will start resolving to an IPv6 address. If you connect to your database using the REST and GraphQL endpoints, this doesn't affect you. If you use the database connection string, see the GitHub discussion on [how to prepare for IPv6](https://github.com/orgs/supabase/discussions/17817).
+Direct database connections will start resolving to an IPv6 address. Starting from January 26, 2024, projects will be gradually migrated to this behavior. If you connect to your database using the REST or GraphQL endpoints, this doesn't affect you. If you use the database connection string, see the GitHub discussion on [how to prepare for IPv6](https://github.com/orgs/supabase/discussions/17817).
@@ -31,37 +31,61 @@ Supabase provides auto-updating Data APIs. These are the easiest way to get star
## Connection pooler
-Every Supabase project comes with a connection pooler for managing connections to your Postgres database.
+A "connection pool" is a system (external to Postgres) which manages Postgres connections.
-A connection pooler is useful for managing a large number of _temporary_ connections - for example, if you are using Prisma, Drizzle, Kysely, or anything deployed to a Serverless environment (AWS Lambdas or Edge Functions). Supabase's connection pooler also supports ipv4 out of the box.
+When a client makes a request, the pooler "allocates" an available connection to the client. When the client transaction or session is completed the connection is returned to the pool and is free to be used by another client.
+
+
+
+
+ Connecting to the database directly vs using a Connection Pooler
+
+
+Every Supabase project comes with a connection pooler for managing connections to your database. The pooler provides 2 important services:
+
+1. It manages connections for applications that connect and disconnect from the database frequently. For example, serverless functions and ORMs such as Prisma, Drizzle, and Kysely often make and drop connections to the database. If they connected directly each time, they would quickly exhaust your database server's memory. To connect to your database efficiently with such tools, you need a pooler.
+2. It provides an IPv4 endpoint to connect to your database, which you can use if your network provider doesn't support IPv6. This is unlike the direct database connection, which resolves to an IPv6 address, unless you've enabled the [IPv4 add-on](https://supabase.com/docs/guides/platform/ipv4-address).
+
+
+
+The connection pooler is available in 2 modes: `Transaction` and `Session`.
+
+
+
+Transaction mode is recommended if you are connecting from serverless environments. A connection is assigned to the client for the duration of a transaction. Two consecutive transactions from the same client can be executed over two different connections. Some session-based Postgres features such as prepared statements are _not available_ with this option.
+
+Session mode is similar to connecting to your database directly. There is full support for prepared statements in this mode. When a new client connects, a connection is assigned to the client until it disconnects. You might run into pooler connection limits since the connection is held till the client disconnects.
You can find the connection pool config in the [Database settings](/dashboard/project/_/settings/database) inside the dashboard:
1. Go to the `Settings` section.
2. Click `Database`.
-3. Under `Connect to your database via connection pooling`, copy your `Connection string`.
+3. Under `Connection string`, make sure `Use connection pooling` is checked. Copy the URI.
## Direct connections
-You can use a direct connection to connect directly to your Postgres database. By default, this connection uses ipv6, which isn't supported by all network providers. If you need an ipv4 address, use the [connection pooler](#connection-pooler) instead.
+You can also use a direct connection to connect directly to your Postgres database. By default, you can connect to it via IPv6, which isn't supported by all networks. If you need an IPv4 address, use the [connection pooler](#connection-pooler) instead or enable the [IPv4 add-on](https://supabase.com/docs/guides/platform/ipv4-address).
You can find the direct connection string in the [Database settings](https://supabase.com/dashboard/project/_/settings/database) inside the dashboard:
1. Go to the `Settings` section.
2. Click `Database`.
-3. Under `Connect to your database directly`, copy your `Connection string`.
+3. Under `Connection string`, make sure `Use connection pooling` is unchecked. Copy the URI.
## Choosing a connection method
-- The Data APIs provide programmatic access and have [built-in connection pooling](https://postgrest.org/en/stable/references/connection_pool.html). You can use these for all browser and application interactions. We recommend using these wherever possible.
-- A "connection pooler" is a tool which keeps connections "alive". You should use this for serverless functions and tools which disconnect from the database frequently, like Prisma, Drizzle, Kysely, etc. You should also use this if your network doesn't support ipv6.
-- A "direct connection" is Postgres' native connection system. You can use this for tools which are always alive, such as long-running server, as long as your network supports ipv6.
-
-Why would you use a connection pool? Primarily because the way that Postgres handles connections isn't very scalable for a large number of _temporary_ connections. You can use these simple questions to determine which connection method to use:
-
-- Are you on a network that doesn't support ipv6? Use the connection pooler.
-- Are you connecting to your database and then _disconnecting_ immediately (e.g. a serverless environment)? Use the connection pooler.
-- Are you connecting to a database and _maintaining_ a connection, and does your network support ipv6? If yes, use a direct connection.
+- Are you performing operations supported by the Data APIs? We recommend using the APIs.
+- Are you connecting to your database and then _disconnecting_ immediately (for example, are you running your code in a serverless environment)? Use the connection pooler in transaction mode.
+- Are you on a network that doesn't support IPv6? Use the connection pooler. (If you need a long-lived connection, for example for prepared statements, use session mode.)
+- Are you connecting to your database and _maintaining_ a connection, and does your network support IPv6? Use a direct connection.
## Connecting with SSL
@@ -108,7 +132,7 @@ You can obtain your connection info and Server root certificate from your applic
- ```ts
+ ```ts schema.ts
import { pgTable, serial, text, varchar } from "drizzle-orm/pg-core";
export const users = pgTable('users', {
@@ -126,24 +150,25 @@ You can obtain your connection info and Server root certificate from your applic
- Connect to your database using the Connection Pooler for serverless environments, and the Direct Connection for long-running servers.
+ Connect to your database using the Connection Pooler.
+
+ In your [`Database Settings`](https://supabase.com/dashboard/project/_/settings/database), make sure `Use connection pooler` is checked, then copy the URI and save it as the `DATABASE_URL` environment variable. Remember to replace the password placeholder with your actual database password.
- ```ts
+ ```ts db.ts
+ import 'dotenv/config'
+
import { drizzle } from 'drizzle-orm/postgres-js'
import postgres from 'postgres'
- import { users } from './schema'
const connectionString = process.env.DATABASE_URL
// Disable prefetch as it is not supported for "Transaction" pool mode
- const client = postgres(connectionString, { prepare: false })
- const db = drizzle(client);
-
- const allUsers = await db.select().from(users);
+ export const client = postgres(connectionString, { prepare: false })
+ export const db = drizzle(client);
```
@@ -168,7 +193,16 @@ You can obtain your connection info and Server root certificate from your applic
- 
+
+
@@ -184,7 +218,7 @@ You can obtain your connection info and Server root certificate from your applic
- 
+ 
@@ -194,13 +228,13 @@ You can obtain your connection info and Server root certificate from your applic
- Add the connection info. You can use the "Direct connection" config, which you can find in your Supabase dashboard.
+ Add the connection info. Go to your [`Database Settings`](https://supabase.com/dashboard/project/_/settings/database). Make sure `Use connection pooling` is enabled. Switch the connection mode to `Session` and copy your connection parameters.
- 
+ 
@@ -216,7 +250,7 @@ You can obtain your connection info and Server root certificate from your applic
- 
+ 
@@ -228,10 +262,12 @@ You can obtain your connection info and Server root certificate from your applic
[`psql`](https://www.postgresql.org/docs/current/app-psql.html) is a command-line tool that comes with Postgres.
-Assuming you've downloaded your SSL certificate to `$HOME/Downloads/prod-supabase.cer`, and your host address is `db.ref.supabase.co` you connect to your database via SSL:
+Download your [SSL certificate](#connecting-with-ssl) to `/path/to/prod-supabase.cer`.
+
+Find your connection settings. Go to your [`Database Settings`](https://supabase.com/dashboard/project/_/settings/database) and make sure `Use connection pooling` is checked. Change the connection mode to `Session`, and copy the parameters into the connection string:
```shell
-psql "sslmode=verify-full sslrootcert=$HOME/Downloads/prod-supabase.cer host=db.ref.supabase.co dbname=postgres user=postgres"
+psql "sslmode=verify-full sslrootcert=/path/to/prod-supabase.cer host=[CLOUD_PROVIDER]-0-[REGION].pooler.supabase.com dbname=postgres user=postgres.[PROJECT_REF]"
```
### Connecting with Prisma
@@ -266,7 +302,9 @@ Refer to our [Prisma integration guide](https://supabase.com/partners/integratio
- Create a `db.js` file with the connection details. Use the Connection Pooler for serverless environments, and the Direct Connection for long-running servers.
+ Create a `db.js` file with the connection details.
+
+ To get your connection details, go to your [`Database Settings`](https://supabase.com/dashboard/project/_/settings/database). Make sure `Use connection pooling` is enabled. Choose `Transaction Mode` if you're on a platform with transient connections, such as a serverless function, and `Session Mode` if you have a long-lived connection. Copy the URI and save it as the environment variable `DATABASE_URL`.
@@ -316,39 +354,30 @@ Refer to our [Prisma integration guide](https://supabase.com/partners/integratio
-## How connection pooling works
+## Troubleshooting Supavisor
-A "connection pool" is a system (external to Postgres) which manages Postgres connections.
+Connection pooler logs are found [here](https://supabase.com/dashboard/project/_/logs/pooler-logs). The following are common errors and their solutions:
-When a client makes a request, the pooler "allocates" an available connection to the client. When the client transaction or session is completed the connection is returned to the pool and is free to be used by another client.
+- Max client connections reached
+ This error happens when the number of connections to Supavisor is more than [the allowed limit of your compute add-on](https://supabase.com/docs/guides/platform/compute-add-ons). Upgrade the database to a higher compute add-on to increase the number of Supavisor connections.
-
+- Connection failed \{:error, :eaddrnotavail} to 'db.xxx.supabase.co':5432
+ Supavisor cannot connect to the customer database. This is usually caused if the target database is unable to respond.
-There are several pool modes, each handling connections differently:
+- Connection failed \{:error, :nxdomain} to 'db.xxx.supabase.co':5432
+ Supavisor cannot connect to the customer database. This is usually caused if the target database is unable to respond.
-### Session
+- Connection closed when state was authentication
+ This error happens when either the database doesn’t exist or if the user doesn't have the right credentials.
-When a new client connects, a connection is assigned to the client until it disconnects. Afterward, the connection is returned back to the pool.
+- Subscribe error: \{:error, :worker_not_found}
+ This log event is emitted when the client tries to connect to the database, but Supavisor does not have the necessary information to route the connection. Try reconnecting to the database as it can take some time for the project information to propagate to Supavisor.
-All Postgres features can be used with this option.
+- Subscribe error: \{:error, \{:badrpc, \{:error, \{:erpc, :timeout}}}}
+ This is a timeout error when the communication between different Supavisor nodes takes longer than expected. Try reconnecting to the database.
-### Transaction
-
-This is the suggested option for serverless functions. A connection is assigned to the client for the duration of a transaction. Two consecutive transactions from the same client could be executed over two different connections. Some session-based Postgres features such as prepared statements are not available with this option.
-
-### Statement
-
-This is the most granular option. Connections are returned to the pool after every statement. Transactions with multiple statements are not allowed. This is best used when `AUTOCOMMIT` is in use.
-
-### Supavisor vs PgBouncer
-
-Supabase previously used PgBouncer for connection pooling. We have now deprecated PgBouncer in favor of Supavisor. Supavisor is available on all new and existing projects.
-
-[Supavisor](https://github.com/supabase/supavisor) is a new connection pooler by Supabase that runs on a high-availability cluster, segregated from your database. This means more resources are available for your database. No Application changes are required to switch from PgBouncer to Supavisor, you simply need to choose the new connection string from the "Connection Pooling" section on [Database settings](https://supabase.com/dashboard/project/_/settings/database).
-
-PgBouncer is now deprecated and is in the process of being removed from the platform, you can [see full details and timelines of the deprecation on Github Discussions](https://github.com/orgs/supabase/discussions/17817). Additionally, your Supabase database domain (db.projectref.supabase.co) will start resolving to an IPv6 address. No changes are required if your network supports IPv6. Otherwise, update your applications to use Supavisor which will continue to support IPv4 connections.
-
-[Read the full pgBouncer and IPv4 deprecation details](https://github.com/orgs/supabase/discussions/17817).
+- Terminating with reason :client_termination when state was :busy
+ This error happens when the client terminates the connection before the connection with the database is completed.
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/database/extensions.mdx b/apps/docs/pages/guides/database/extensions.mdx
index daaf0921efb..8a55c4f4a5c 100644
--- a/apps/docs/pages/guides/database/extensions.mdx
+++ b/apps/docs/pages/guides/database/extensions.mdx
@@ -57,6 +57,10 @@ In addition to the pre-configured extensions, you can also install your own SQL
+### Upgrade Extensions
+
+If a new version of an extension becomes available on Supabase, you need to initiate a software upgrade in the [Infrastructure Settings](https://supabase.com/dashboard/project/_/settings/infrastructure) to access it. Software upgrades can also be initiated by restarting your server in the [General Settings](https://supabase.com/dashboard/project/_/settings/general).
+
### Full list of extensions
Supabase is pre-configured with over 50 extensions. You can also install your own SQL extensions directly in the database through our SQL editor.
diff --git a/apps/docs/pages/guides/database/extensions/index_advisor.mdx b/apps/docs/pages/guides/database/extensions/index_advisor.mdx
index 282e429e131..2330ea15892 100644
--- a/apps/docs/pages/guides/database/extensions/index_advisor.mdx
+++ b/apps/docs/pages/guides/database/extensions/index_advisor.mdx
@@ -6,7 +6,7 @@ export const meta = {
description: 'Automatically optimize SQL queries',
}
-[Index advisor](https://github.com/supabase/index_advisor) is a Postgres extension for recommending indexes to improve query performance.
+[Index advisor](https://database.dev/olirice/index_advisor) is a Postgres extension for recommending indexes to improve query performance.
For example:
@@ -154,7 +154,8 @@ from
## Resources
-- Official [`index_advisor` GitHub Repository](https://github.com/supabase/index_advisor)
+- dbdev [`index_advisor`](https://database.dev/olirice/index_advisor) docs
+- dbdev [Github Repository](https://github.com/supabase/dbdev)
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/database/extensions/pg_cron.mdx b/apps/docs/pages/guides/database/extensions/pg_cron.mdx
index 02c15a88180..486d11ae6aa 100644
--- a/apps/docs/pages/guides/database/extensions/pg_cron.mdx
+++ b/apps/docs/pages/guides/database/extensions/pg_cron.mdx
@@ -147,6 +147,24 @@ Unschedules a job called `'nightly-vacuum'`
select cron.unschedule('nightly-vacuum');
```
+### Viewing previously ran jobs
+
+View the last ten jobs that have ran
+
+```sql
+select
+ *
+from cron.job_run_details
+order by start_time desc
+limit 10;
+```
+
+
+
+The records in cron.job_run_details are not cleaned automatically which will take up disk space in your datbabase.
+
+
+
## Resources
- [pg_cron GitHub Repository](https://github.com/citusdata/pg_cron)
diff --git a/apps/docs/pages/guides/database/extensions/plv8.mdx b/apps/docs/pages/guides/database/extensions/plv8.mdx
index ae1fd4b018d..3ade38a3688 100644
--- a/apps/docs/pages/guides/database/extensions/plv8.mdx
+++ b/apps/docs/pages/guides/database/extensions/plv8.mdx
@@ -85,6 +85,13 @@ select function_name();
const { data, error } = supabase.rpc('function_name')
```
+
+
+
+```kotlin
+val data = supabase.postgrest.rpc("function_name")
+```
+
diff --git a/apps/docs/pages/guides/database/extensions/postgis.mdx b/apps/docs/pages/guides/database/extensions/postgis.mdx
index 158d9899680..c85e0c8f4dd 100644
--- a/apps/docs/pages/guides/database/extensions/postgis.mdx
+++ b/apps/docs/pages/guides/database/extensions/postgis.mdx
@@ -141,6 +141,25 @@ await supabase.from('restaurants').insert([
]);
```
+
+
+
+```kotlin
+@Serializable
+data class Restaurant(
+ val name: String,
+ val location: String //you could also use a custom type with a custom serializer for more type safety
+)
+```
+
+```kotlin
+val data = supabase.from("restaurants").insert(listOf(
+ Restaurant("Supa Burger", "POINT(-73.946823 40.807416)"),
+ Restaurant("Supa Pizza", "POINT(-73.94581 40.807475)"),
+ Restaurant("Supa Taco", "POINT(-73.945826 40.80629)"),
+))
+```
+
@@ -198,6 +217,19 @@ final data = await supabase.rpc('nearby_restaurants',params: {
});
```
+
+
+
+```kotlin
+val data = supabase.postgrest.rpc(
+ function = "nearby_restaurants",
+ parameters = buildJsonObject { //You can put here any serializable object including your own classes
+ put("lat", 40.807313)
+ put("lon", -73.946713)
+ }
+)
+```
+
@@ -284,6 +316,21 @@ final data = await supabase.rpc('restaurants_in_view', params: {
});
```
+
+
+
+```kotlin
+val data = supabase.postgrest.rpc(
+ function = "restaurants_in_view",
+ parameters = buildJsonObject { //You can put here any serializable object including your own classes
+ put("min_lat", 40.807)
+ put("min_lon", -73.946)
+ put("max_lat", 40.808)
+ put("max_lon", -73.945)
+ }
+)
+```
+
diff --git a/apps/docs/pages/guides/database/extensions/uuid-ossp.mdx b/apps/docs/pages/guides/database/extensions/uuid-ossp.mdx
index 7cc9a02f4dd..30e18a67355 100644
--- a/apps/docs/pages/guides/database/extensions/uuid-ossp.mdx
+++ b/apps/docs/pages/guides/database/extensions/uuid-ossp.mdx
@@ -88,7 +88,6 @@ create table contacts (
id uuid default uuid_generate_v4(),
first_name text,
last_name text,
-
primary key (id)
);
```
diff --git a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
index 2363a4ce7d0..64e70309bb7 100644
--- a/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
+++ b/apps/docs/pages/guides/database/extensions/wrappers/[slug].tsx
@@ -80,11 +80,12 @@ interface WrappersDocsProps {
title: string
description?: string
}
+ editLink?: string
}
-export default function WrappersDocs({ source, meta }: WrappersDocsProps) {
+export default function WrappersDocs({ source, meta, editLink }: WrappersDocsProps) {
return (
-
+
)
@@ -101,10 +102,9 @@ export const getStaticProps: GetStaticProps = async ({ params
}
const { remoteFile, meta } = page
-
- const response = await fetch(
- `https://raw.githubusercontent.com/${org}/${repo}/${branch}/${docsDir}/${remoteFile}`
- )
+ const repoPath = `${org}/${repo}/${branch}/${docsDir}/${remoteFile}`
+ const repoEditPath = `${org}/${repo}/blob/${branch}/${docsDir}/${remoteFile}`
+ const response = await fetch(`https://raw.githubusercontent.com/${repoPath}`)
const source = await response.text()
@@ -119,7 +119,6 @@ export const getStaticProps: GetStaticProps = async ({ params
if (hostname !== placeholderHostname || pathname === '/') {
return url
}
-
const relativePage = (
pathname.endsWith('.md')
? pathname.replace(/\.md$/, '')
@@ -166,7 +165,7 @@ export const getStaticProps: GetStaticProps = async ({ params
},
})
- return { props: { source: mdxSource, meta } }
+ return { props: { source: mdxSource, meta, editLink: repoEditPath } }
}
export const getStaticPaths: GetStaticPaths = async () => {
diff --git a/apps/docs/pages/guides/database/full-text-search.mdx b/apps/docs/pages/guides/database/full-text-search.mdx
index 3c00b29a21d..a4aebb2c62b 100644
--- a/apps/docs/pages/guides/database/full-text-search.mdx
+++ b/apps/docs/pages/guides/database/full-text-search.mdx
@@ -136,6 +136,17 @@ final result = await client
.eq('title', 'Harry');
```
+
+
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ eq("title", "Harry")
+ }
+}
+```
+
@@ -174,6 +185,17 @@ final result = await client
.textSearch('title', "'Harry'");
```
+
+
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ textSearch("title", "'Harry'", TextSearchType.NONE)
+ }
+}
+```
+
@@ -219,6 +241,17 @@ final result = await client
.textSearch('description', "'big'");
```
+
+
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ textSearch("description", "'big'", TextSearchType.NONE)
+ }
+}
+```
+
@@ -287,6 +320,23 @@ final result = await client
.textSearch('title_description', "little")
```
+
+
+
+```sql
+create function title_description(books) returns text as $$
+ select $1.title || ' ' || $1.description;
+$$ language sql immutable;
+```
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ textSearch("title_description", "title", TextSearchType.NONE)
+ }
+}
+```
+
@@ -341,6 +391,17 @@ final result = await client
.textSearch('description', "'little' & 'big'");
```
+
+
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ textSearch("description", "'title' & 'big'", TextSearchType.NONE)
+ }
+}
+```
+
@@ -394,6 +455,17 @@ final result = await client
.textSearch('description', "'little' | 'big'");
```
+
+
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ textSearch("description", "'title' | 'big'", TextSearchType.NONE)
+ }
+}
+```
+
@@ -494,6 +566,17 @@ final result = await client
.textSearch('fts', "'little' & 'big'");
```
+
+
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ textSearch("fts", "'title' & 'big'", TextSearchType.NONE)
+ }
+}
+```
+
@@ -552,6 +635,17 @@ final result = await client
.textSearch('description', "'big' <-> 'dreams'");
```
+
+
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ textSearch("description", "'big' <-> 'dreams'", TextSearchType.NONE)
+ }
+}
+```
+
@@ -595,6 +689,17 @@ final result = await client
.textSearch('description', "'year' <2> 'school'");
```
+
+
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ textSearch("description", "'year' <2> 'school'", TextSearchType.NONE)
+ }
+}
+```
+
@@ -641,6 +746,17 @@ final result = await client
.textSearch('description', "'big' & !'little'");
```
+
+
+
+```kotlin
+val data = supabase.from("books").select {
+ filter {
+ textSearch("description", "'big' & !'little'", TextSearchType.NONE)
+ }
+}
+```
+
diff --git a/apps/docs/pages/guides/database/functions.mdx b/apps/docs/pages/guides/database/functions.mdx
index cd6c4b5447b..c6fcf35e80f 100644
--- a/apps/docs/pages/guides/database/functions.mdx
+++ b/apps/docs/pages/guides/database/functions.mdx
@@ -96,6 +96,15 @@ final data = await supabase
Reference: [rpc()](../../reference/dart/rpc)
+
+
+
+```kotlin
+val data = supabase.postgrest.rpc("hello_world")
+```
+
+Reference: [rpc()](../../reference/kotlin/rpc)
+
@@ -209,6 +218,17 @@ final data = await supabase
.eq('id', 1);
```
+
+
+
+```kotlin
+val data = supabase.postgrest.rpc("get_planets") {
+ filter {
+ eq("id", 1)
+ }
+}
+```
+
@@ -263,6 +283,18 @@ final data = await supabase
.rpc('add_planet', params: { 'name': 'Jakku' });
```
+
+
+
+```kotlin
+val data = supabase.postgrest.rpc(
+ function = "add_planet",
+ parameters = buildJsonObject { //You can put here any serializable object including your own classes
+ put("name", "Jakku")
+ }
+)
+```
+
diff --git a/apps/docs/pages/guides/database/joins-and-nesting.mdx b/apps/docs/pages/guides/database/joins-and-nesting.mdx
index c1f1ae42529..9848d66b6e9 100644
--- a/apps/docs/pages/guides/database/joins-and-nesting.mdx
+++ b/apps/docs/pages/guides/database/joins-and-nesting.mdx
@@ -137,6 +137,13 @@ const countriesWithCities: CountriesWithCities = data
final data = await supabase.from('countries').select('id, name, cities(id, name)');
```
+
+
+
+```kotlin
+val data = supabase.from("countries").select(Columns.raw("id, name, cities(id, name)"))
+```
+
@@ -217,6 +224,13 @@ const { data, error } = await supabase.from('teams').select(`
final data = await supabase.from('teams').select('id, team_name, users(id, name)');
```
+
+
+
+```kotlin
+val data = supabase.from("teams").select(Columns.raw("id, team_name, users(id, name)"));
+```
+
diff --git a/apps/docs/pages/guides/database/json.mdx b/apps/docs/pages/guides/database/json.mdx
index ddaf6520db1..5b9aba8d385 100644
--- a/apps/docs/pages/guides/database/json.mdx
+++ b/apps/docs/pages/guides/database/json.mdx
@@ -179,6 +179,35 @@ const { data, error } = await supabase.from('books').insert([
])
```
+
+
+
+```kotlin
+@Serializable
+data class BookMetadata(
+ val description: String,
+ val price: Double,
+ val ages: List
+)
+
+@Serializable
+data class Book(
+ val title: String,
+ val author: String,
+ val metadata: BookMetadata
+)
+```
+
+```kotlin
+val data = supabase.from("books").insert(listOf(
+ Book("The Poky Little Puppy", "Janette Sebring Lowrey", BookMetadata("Puppy is slower than other, bigger animals.", 5.95, listOf(3, 6))),
+ Book("Tale of Peter Rabbit", "Beatrix Potter", BookMetadata("Rabbit eats some vegetables.", 4.49, listOf(2, 5))),
+ Book("Tootle", "Gertrude Crampton", BookMetadata("Little toy train has big dreams.", 3.99, listOf(2, 5))),
+ Book("Green Eggs and Ham", "Dr. Seuss", BookMetadata("Sam has changing food preferences and eats unusually colored food.", 7.49, listOf(4, 8))),
+ Book("Harry Potter and the Goblet of Fire", "J.K. Rowling", BookMetadata("Fourth year of school starts, big drama ensues.", 24.95, listOf(10, 99)))
+))
+```
+
@@ -220,6 +249,19 @@ const { data, error } = await supabase.from('books').select(`
`)
```
+
+
+
+```kotlin
+val data = supabase.from("books").select(Columns.raw("""
+ title,
+ description: metadata->description,
+ price: metadata->price,
+ low_age: metadata->ages->0,
+ high_age: metadata->ages->1
+""".trimIndent()))
+```
+
diff --git a/apps/docs/pages/guides/database/managing-passwords.mdx b/apps/docs/pages/guides/database/managing-passwords.mdx
index 4fc8c3a8b36..52bda4776ae 100644
--- a/apps/docs/pages/guides/database/managing-passwords.mdx
+++ b/apps/docs/pages/guides/database/managing-passwords.mdx
@@ -8,7 +8,7 @@ export const meta = {
Your Postgres database is the core of your Supabase project, so it's important that it has a strong, secure password at all times.
-If you use special symbols in your postgres password, you must remember to [percent-encode](https://en.wikipedia.org/wiki/Percent-encoding) your password later if using the postgres connection string e.g. `postgresql://postgres:p%3Dword@db.cvwawazfelidkloqmbma.supabase.co:5432/postgres`
+If you use special symbols in your postgres password, you must remember to [percent-encode](https://en.wikipedia.org/wiki/Percent-encoding) your password later if using the postgres connection string e.g. `postgresql://postgres.projectref:p%3Dword@aws-0-us-east-1.pooler.supabase.com:6543/postgres`
## Changing your project password
diff --git a/apps/docs/pages/guides/database/partitions.mdx b/apps/docs/pages/guides/database/partitions.mdx
index e3c7df72de2..f109f8a6b97 100644
--- a/apps/docs/pages/guides/database/partitions.mdx
+++ b/apps/docs/pages/guides/database/partitions.mdx
@@ -157,7 +157,7 @@ partition by list(country);
create table customers_americas
partition of customers
- for values in ('US', 'CANADA')
+ for values in ('US', 'CANADA');
create table customers_asia
partition of customers
diff --git a/apps/docs/pages/guides/database/postgres/roles-superuser.mdx b/apps/docs/pages/guides/database/postgres/roles-superuser.mdx
new file mode 100644
index 00000000000..1ec3f5064b7
--- /dev/null
+++ b/apps/docs/pages/guides/database/postgres/roles-superuser.mdx
@@ -0,0 +1,25 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'roles',
+ title: 'Roles, superuser access and unsupported operations',
+ slug: 'roles',
+}
+
+Supabase provides the default `postgres` role to all instances deployed. Superuser access is not given as it allows destructive operations to be performed on the database.
+
+To ensure you are not impacted by this, additional privileges are granted to the `postgres` user to allow it to run some operations that are normally restricted to superusers.
+
+However, this does mean that some operations, that typically require `superuser` privileges, are not available on Supabase. These are documented below:
+
+## Unsupported operations
+
+- `CREATE ROLE ... WITH REPLICATION`
+- `CREATE SUBSCRIPTION`
+- `CREATE EVENT TRIGGER`
+- `COPY ... FROM PROGRAM`
+- `ALTER USER ... WITH SUPERUSER`
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/database/postgres/roles.mdx b/apps/docs/pages/guides/database/postgres/roles.mdx
index 1d3b785205a..a04ce85a9cc 100644
--- a/apps/docs/pages/guides/database/postgres/roles.mdx
+++ b/apps/docs/pages/guides/database/postgres/roles.mdx
@@ -40,7 +40,7 @@ Your Postgres database is the core of your Supabase project, so it's important t
### Special symbols in passwords
-If you use special symbols in your Postgres password, you must remember to [percent-encode](https://en.wikipedia.org/wiki/Percent-encoding) your password later if using the Postgres connection string e.g. `postgresql://postgres:p%3Dword@db.xxx.supabase.co:5432/postgres`.
+If you use special symbols in your postgres password, you must remember to [percent-encode](https://en.wikipedia.org/wiki/Percent-encoding) your password later if using the postgres connection string e.g. `postgresql://postgres.projectref:p%3Dword@aws-0-us-east-1.pooler.supabase.com:6543/postgres`
### Changing your project password
diff --git a/apps/docs/pages/guides/database/postgres/row-level-security.mdx b/apps/docs/pages/guides/database/postgres/row-level-security.mdx
index e287ada68dd..f0f4b265359 100644
--- a/apps/docs/pages/guides/database/postgres/row-level-security.mdx
+++ b/apps/docs/pages/guides/database/postgres/row-level-security.mdx
@@ -260,7 +260,7 @@ const { data } = supabase
.eq('user_id', userId)
```
-Even though this duplicates the contents of the Policy, Postgres can use the to construct a better query plan.
+Even though this duplicates the contents of the Policy, Postgres can use the filter to construct a better query plan.
#### Benchmarks
diff --git a/apps/docs/pages/guides/database/postgres/setup-replication-external.mdx b/apps/docs/pages/guides/database/postgres/setup-replication-external.mdx
new file mode 100644
index 00000000000..1633f40900b
--- /dev/null
+++ b/apps/docs/pages/guides/database/postgres/setup-replication-external.mdx
@@ -0,0 +1,68 @@
+import { createDecipheriv } from 'crypto'
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ title: 'Replicate to another Postgres database using Logical Replication',
+ description:
+ 'Example to setup logical replication using publish-subscribe to a Postgres database outside of Supabase',
+ footerHelpType: 'postgres',
+}
+
+For this example, you will need:
+
+- A Supabase project
+- A PostgreSQL database (running v10 or newer)
+
+You will be running commands on both of these databases to publish changes from the Supabase database to the external database.
+
+1. Create a `publication` on the **Supabase database**:
+
+```sql
+CREATE PUBLICATION example_pub;
+```
+
+2. Also on the **Supabase database**, create a `replication slot`:
+
+```sql
+select pg_create_logical_replication_slot('example_slot', 'pgoutput');
+```
+
+3. Now we will connect to our **external database** and subscribe to our `publication` Note: ):
+
+
+
+This will need a direct connection to your database and you can find the connection info in the [Dashboard](https://supabase.com/dashboard/project/_/settings/database).
+
+You will also need to ensure that ipv6 is supported by your replication destination.
+
+
+
+```sql
+CREATE SUBSCRIPTION example_sub
+CONNECTION 'host=db.oaguxblfdassqxvvwtfe.supabase.co user=postgres password=YOUR_PASS dbname=postgres'
+PUBLICATION example_pub
+WITH (copy_data = true, create_slot=false, slot_name=example_slot);
+```
+
+
+
+`create_slot` is set to `false` because `slot_name` is provided and the slot was already created in Step 2.
+To copy data from before the slot was created, set `copy_data` to `true`.
+
+
+
+4. Add all the tables that you want replicated to the publication.
+
+```sql
+ALTER PUBLICATION example_pub ADD TABLE example_table;
+```
+
+5. Check the replication status using `pg_stat_replication`
+
+```sql
+select * from pg_stat_replication;
+```
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/database/postgres/triggers.mdx b/apps/docs/pages/guides/database/postgres/triggers.mdx
index ff102f06153..81b2e67d74c 100644
--- a/apps/docs/pages/guides/database/postgres/triggers.mdx
+++ b/apps/docs/pages/guides/database/postgres/triggers.mdx
@@ -13,7 +13,7 @@ In Postgres, a trigger executes a set of actions automatically on table events s
Creating triggers involve 2 parts:
-1. A [Function](docs/guides/database/functions) which will be executed (called the Trigger Function)
+1. A [Function](/docs/guides/database/functions) which will be executed (called the Trigger Function)
2. The actual Trigger object, with parameters around when the trigger should be run.
An example of a trigger is:
@@ -27,7 +27,7 @@ execute function trigger_function();
## Trigger functions
-A trigger function is a user-defined [Function](docs/guides/database/functions) that Postgres executes when the trigger is fired.
+A trigger function is a user-defined [Function](/docs/guides/database/functions) that Postgres executes when the trigger is fired.
### Example trigger function
diff --git a/apps/docs/pages/guides/database/sql-to-api.mdx b/apps/docs/pages/guides/database/sql-to-api.mdx
index fa031db611b..9e8a486d0ae 100644
--- a/apps/docs/pages/guides/database/sql-to-api.mdx
+++ b/apps/docs/pages/guides/database/sql-to-api.mdx
@@ -13,7 +13,7 @@ Select a set of columns from a single table with where, order by, and limit clau
```sql
select first_name, last_name, team_id, age
from players
-where age between 20 and 24 and team_id <> 'STL'
+where age between 20 and 24 and team_id != 'STL'
order by last_name, first_name desc
limit 20;
```
@@ -52,7 +52,7 @@ Select all columns from a single table with a complex where clause: AND OR AND
```sql
select *
from players
-where ((team_id = 'CHN' and age > 35) or (team_id <> 'CHN' and age is not null));
+where ((team_id = 'CHN' and age > 35) or (team_id != 'CHN' and age is not null));
```
```js
diff --git a/apps/docs/pages/guides/database/tables.mdx b/apps/docs/pages/guides/database/tables.mdx
index 9590fe48157..4fa2dc22b68 100644
--- a/apps/docs/pages/guides/database/tables.mdx
+++ b/apps/docs/pages/guides/database/tables.mdx
@@ -202,22 +202,25 @@ values
-```sql
-const { data, error } = await supabase
- .from('movies')
- .insert([{
+```js
+const { data, error } = await supabase.from('movies').insert([
+ {
name: 'The Empire Strikes Back',
- description: 'After the Rebels are brutally overpowered by the Empire on the ice planet Hoth, Luke Skywalker begins Jedi training with Yoda.'
- }, {
+ description:
+ 'After the Rebels are brutally overpowered by the Empire on the ice planet Hoth, Luke Skywalker begins Jedi training with Yoda.',
+ },
+ {
name: 'Return of the Jedi',
- description: 'After a daring mission to rescue Han Solo from Jabba the Hutt, the Rebels dispatch to Endor to destroy the second Death Star.'
- }])
+ description:
+ 'After a daring mission to rescue Han Solo from Jabba the Hutt, the Rebels dispatch to Endor to destroy the second Death Star.',
+ },
+])
```
-```sql
+```dart
await supabase
.from('movies')
.insert([{
@@ -229,6 +232,26 @@ await supabase
}]);
```
+
+
+
+```kotlin
+@Serializable
+data class Movie(
+ val name: String,
+ val description: String
+)
+```
+
+```kotlin
+supabase
+ .from("movies")
+ .insert(listOf(
+ Movie("The Empire Strikes Back", "After the Rebels are brutally overpowered by the Empire on the ice planet Hoth, Luke Skywalker begins Jedi training with Yoda."),
+ Movie("Return of the Jedi", "After a daring mission to rescue Han Solo from Jabba the Hutt, the Rebels dispatch to Endor to destroy the second Death Star."),
+ ))
+```
+
diff --git a/apps/docs/pages/guides/functions.mdx b/apps/docs/pages/guides/functions.mdx
deleted file mode 100644
index 65233fe00e2..00000000000
--- a/apps/docs/pages/guides/functions.mdx
+++ /dev/null
@@ -1,178 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'functions',
- title: 'Edge Functions',
- description: 'Globally distributed TypeScript functions.',
- subtitle: 'Globally distributed TypeScript functions.',
- sidebar_label: 'Overview',
- hide_table_of_contents: true,
-}
-
-Edge Functions are server-side TypeScript functions, distributed globally at the edge—close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties [like Stripe](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks). Edge Functions are developed using [Deno](https://deno.com), which offers a few benefits to you as a developer:
-
-- It is open source.
-- It is portable. Supabase Edge Functions run locally, and on any other Deno-compatible platform (including self-hosted infrastructure).
-- It is TypeScript first and supports WASM.
-- Edge Functions are globally distributed for low-latency.
-
-
-
-
-
-## Examples
-
-Check out the [Edge Function Examples](https://github.com/supabase/supabase/tree/master/examples/edge-functions) in our GitHub repository.
-
-
- {examples.map((x) => (
-
-
-
- {x.description}
-
-
-
- ))}
-
-
-export const examples = [
- {
- name: 'With supabase-js',
- description: 'Use the Supabase client inside your Edge Function.',
- href: '/guides/functions/auth',
- },
- {
- name: 'Type-Safe SQL with Kysely',
- description:
- 'Combining Kysely with Deno Postgres gives you a convenient developer experience for interacting directly with your Postgres database.',
- href: '/guides/functions/kysely-postgres',
- },
- {
- name: 'With CORS headers',
- description: 'Send CORS headers for invoking from the browser.',
- href: '/guides/functions/cors',
- },
- {
- name: 'React Native with Stripe',
- description: 'Full example for using Supabase and Stripe, with Expo.',
- href: 'https://github.com/supabase-community/expo-stripe-payments-with-supabase-functions',
- },
- {
- name: 'Flutter with Stripe',
- description: 'Full example for using Supabase and Stripe, with Flutter.',
- href: 'https://github.com/supabase-community/flutter-stripe-payments-with-supabase-functions',
- },
- {
- name: 'Building a RESTful Service API',
- description:
- 'Learn how to use HTTP methods and paths to build a RESTful service for managing tasks.',
- href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/restful-tasks/index.ts',
- },
- {
- name: 'Working with Supabase Storage',
- description: 'An example on reading a file from Supabase Storage.',
- href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/read-storage/index.ts',
- },
- {
- name: 'Open Graph Image Generation',
- description: 'Generate Open Graph images with Deno and Supabase Edge Functions.',
- href: '/guides/functions/examples/og-image',
- },
- {
- name: 'OG Image Generation & Storage CDN Caching',
- description: 'Cache generated images with Supabase Storage CDN.',
- href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/og-image-with-storage-cdn',
- },
- {
- name: 'Get User Location',
- description: `Get user location data from user's IP address.`,
- href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/location',
- },
- {
- name: 'Cloudflare Turnstile',
- description: `Protecting Forms with Cloudflare Turnstile.`,
- href: '/guides/functions/examples/cloudflare-turnstile',
- },
- {
- name: 'Connect to Postgres',
- description: `Connecting to Postgres from Edge Functions.`,
- href: '/guides/functions/connect-to-postgres',
- },
- {
- name: 'Github Actions',
- description: `Deploying Edge Functions with GitHub Actions.`,
- href: '/guides/functions/examples/github-actions',
- },
- {
- name: 'Oak Server Middleware',
- description: `Request Routing with Oak server middleware.`,
- href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/oak-server',
- },
- {
- name: 'Hugging Face',
- description: `Access 100,000+ Machine Learning models.`,
- href: '/guides/ai/examples/huggingface-image-captioning',
- },
- {
- name: 'OpenAI',
- description: `Using OpenAI in Edge Functions.`,
- href: '/guides/ai/examples/openai',
- },
- {
- name: 'Stripe Webhooks',
- description: `Handling signed Stripe Webhooks with Edge Functions.`,
- href: '/guides/functions/examples/stripe-webhooks',
- },
- {
- name: 'Send emails',
- description: `Send emails in Edge Functions with Resend.`,
- href: '/guides/functions/examples/send-emails',
- },
- {
- name: 'Web Stream',
- description: `Server-Sent Events in Edge Functions.`,
- href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/streams',
- },
- {
- name: 'Puppeteer',
- description: `Generate screenshots with Puppeteer.`,
- href: '/guides/functions/examples/screenshots',
- },
- {
- name: 'Discord Bot',
- description: `Building a Slash Command Discord Bot with Edge Functions.`,
- href: '/guides/functions/examples/discord-bot',
- },
- {
- name: 'Telegram Bot',
- description: `Building a Telegram Bot with Edge Functions.`,
- href: '/guides/functions/examples/telegram-bot',
- },
- {
- name: 'Upload File',
- description: `Process multipart/form-data.`,
- href: 'https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/file-upload-storage',
- },
- {
- name: 'Upstash Redis',
- description: `Build an Edge Functions Counter with Upstash Redis.`,
- href: '/guides/functions/examples/upstash-redis',
- },
- {
- name: 'Rate Limiting',
- description: `Rate Limiting Edge Functions with Upstash Redis.`,
- href: '/guides/functions/examples/rate-limiting',
- },
- {
- name: 'Slack Bot Mention Edge Function',
- description: `Slack Bot handling Slack mentions in Edge Function`,
- href: '/guides/functions/examples/slack-bot-mention',
- },
-]
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/functions/[[...slug]].tsx b/apps/docs/pages/guides/functions/[[...slug]].tsx
new file mode 100644
index 00000000000..8e41b131d3e
--- /dev/null
+++ b/apps/docs/pages/guides/functions/[[...slug]].tsx
@@ -0,0 +1,28 @@
+import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType } from 'next'
+import { MDXRemote } from 'next-mdx-remote'
+
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
+
+export const getStaticPaths = (async () => {
+ return getGuidesStaticPaths('functions')
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (args) => {
+ return getGuidesStaticProps('functions', args)
+}) satisfies GetStaticProps
+
+export default function FunctionsGuide({
+ frontmatter,
+ mdxSource,
+ editLink,
+}: InferGetStaticPropsType) {
+ const { hideToc, ...meta } = frontmatter
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/docs/pages/guides/getting-started.mdx b/apps/docs/pages/guides/getting-started.mdx
index eb92573d7a0..af87b8fe2bd 100644
--- a/apps/docs/pages/guides/getting-started.mdx
+++ b/apps/docs/pages/guides/getting-started.mdx
@@ -1,6 +1,8 @@
import Layout from '~/layouts/DefaultLayout'
import Link from 'next/link'
-import { GlassPanel, IconPanel, Button, IconChevronRight } from 'ui'
+import { Button, IconChevronRight } from 'ui'
+import { GlassPanel } from 'ui-patterns/GlassPanel'
+import { IconPanel } from 'ui-patterns/IconPanel'
export const meta = {
id: 'getting-started',
diff --git a/apps/docs/pages/guides/getting-started/architecture.mdx b/apps/docs/pages/guides/getting-started/architecture.mdx
index c5ab7d932e3..50c2e80fde4 100644
--- a/apps/docs/pages/guides/getting-started/architecture.mdx
+++ b/apps/docs/pages/guides/getting-started/architecture.mdx
@@ -21,7 +21,13 @@ Our goal at Supabase is to make _all_ of Postgres easy to use. That doesn’t me
Each Supabase project consists of several tools:
-
+
### PostgreSQL (database)
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/laravel.mdx b/apps/docs/pages/guides/getting-started/quickstarts/laravel.mdx
index 258dd3071e8..e711fbd6fde 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/laravel.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/laravel.mdx
@@ -52,9 +52,13 @@ export const meta = {
Go to [database.new](https://database.new) and create a new Supabase project. Save your database password securely.
- When your project is up and running, navigate to the [database settings](https://supabase.com/dashboard/project/_/settings/database) to find the URI connection string.
+ When your project is up and running, navigate to the [database settings](https://supabase.com/dashboard/project/_/settings/database) to find the URI connection string. Make sure **Use connection pooling** is checked and **Session mode** is selected. Then copy the URI. Replace the password placeholder with your saved database password.
- Laravel ships with a Postgres adapter out of the box, you can simply configure it via the environment variables. You can find the database URL in your [Supabase Dashboard](/dashboard/project/_/settings/database).
+
+
+ If your network supports IPv6 connections, you can also use the direct connection string. Uncheck **Use connection pooling** and copy the new URI.
+
+
@@ -62,7 +66,7 @@ export const meta = {
```bash .env
DB_CONNECTION=pgsql
- DATABASE_URL=postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:6543/postgres
+ DATABASE_URL=postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:5432/postgres
```
@@ -123,7 +127,7 @@ export const meta = {
- Run the development server. Go to http://127.0.0.1:8000 in a browser to see your application. You can also nvaigate to http://127.0.0.1:8000/register and http://127.0.0.1:8000/login to register and log in users.
+ Run the development server. Go to http://127.0.0.1:8000 in a browser to see your application. You can also navigate to http://127.0.0.1:8000/register and http://127.0.0.1:8000/login to register and log in users.
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx
index ab22feac195..c9c9d408b22 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/nextjs.mdx
@@ -97,11 +97,9 @@ export const meta = {
```ts app/notes/page.tsx
import { createClient } from '@/utils/supabase/server';
- import { cookies } from 'next/headers';
export default async function Notes() {
- const cookieStore = cookies()
- const supabase = createClient(cookieStore);
+ const supabase = createClient();
const { data: notes } = await supabase.from("notes").select();
return
{JSON.stringify(notes, null, 2)}
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx
index 37b59f5e735..a7035770b70 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/redwoodjs.mdx
@@ -22,7 +22,7 @@ export const meta = {
- 
+ 
@@ -48,7 +48,7 @@ export const meta = {
- 
+ 
diff --git a/apps/docs/pages/guides/getting-started/quickstarts/ruby-on-rails.mdx b/apps/docs/pages/guides/getting-started/quickstarts/ruby-on-rails.mdx
index 0ae0e7fb31e..5779a84cfc0 100644
--- a/apps/docs/pages/guides/getting-started/quickstarts/ruby-on-rails.mdx
+++ b/apps/docs/pages/guides/getting-started/quickstarts/ruby-on-rails.mdx
@@ -34,16 +34,20 @@ export const meta = {
Go to [database.new](https://database.new) and create a new Supabase project. Save your database password securely.
- When your project is up and running, navigate to the [database settings](https://supabase.com/dashboard/project/_/settings/database) to find the URI connection string.
+ When your project is up and running, navigate to the [database settings](https://supabase.com/dashboard/project/_/settings/database) to find the URI connection string. Make sure **Use connection pooling** is checked and **Session mode** is selected. Then copy the URI. Replace the password placeholder with your saved database password.
- Rails ships with a Postgres adapter included, you can simply configure it via the environment variables. You can find the database URL in your [Supabase Dashboard](/dashboard/project/_/settings/database).
+
+
+ If your network supports IPv6 connections, you can also use the direct connection string. Uncheck **Use connection pooling** and copy the new URI.
+
+
```bash Terminal
- export DATABASE_URL=postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:6543/postgres
+ export DATABASE_URL=postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:5432/postgres
```
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx
index a21b2410a15..cae2ef8bba7 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-angular.mdx
@@ -230,7 +230,10 @@ export class AccountComponent implements OnInit {
avatar_url: '',
})
- constructor(private readonly supabase: SupabaseService, private formBuilder: FormBuilder) {}
+ constructor(
+ private readonly supabase: SupabaseService,
+ private formBuilder: FormBuilder
+ ) {}
async ngOnInit(): Promise {
await this.getProfile()
@@ -421,7 +424,10 @@ export class AvatarComponent {
@Output() upload = new EventEmitter()
- constructor(private readonly supabase: SupabaseService, private readonly dom: DomSanitizer) {}
+ constructor(
+ private readonly supabase: SupabaseService,
+ private readonly dom: DomSanitizer
+ ) {}
async downloadImage(path: string) {
try {
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-expo-react-native.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-expo-react-native.mdx
index 647a20c842b..c5b9b7279a7 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-expo-react-native.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-expo-react-native.mdx
@@ -451,10 +451,10 @@ photos and videos.
### Additional dependency installation
-You will need a file picker that works on the environment you will build the project for, we will use react-native-document-picker in this example.
+You will need an image picker that works on the environment you will build the project for, we will use `expo-image-picker` in this example.
```bash
-expo install react-native-document-picker
+expo install expo-image-picker
```
### Create an upload widget
@@ -466,7 +466,7 @@ We can start by creating a new component:
import { useState, useEffect } from 'react'
import { supabase } from '../lib/supabase'
import { StyleSheet, View, Alert, Image, Button } from 'react-native'
-import DocumentPicker, { isCancel, isInProgress, types } from 'react-native-document-picker'
+import * as ImagePicker from 'expo-image-picker'
interface Props {
size: number
@@ -507,39 +507,43 @@ export default function Avatar({ url, size = 150, onUpload }: Props) {
try {
setUploading(true)
- const file = await DocumentPicker.pickSingle({
- presentationStyle: 'fullScreen',
- copyTo: 'cachesDirectory',
- type: types.images,
- mode: 'open',
+ const result = await ImagePicker.launchImageLibraryAsync({
+ mediaTypes: ImagePicker.MediaTypeOptions.Images, // Restrict to only images
+ allowsMultipleSelection: false, // Can only select one image
+ allowsEditing: true, // Allows the user to crop / rotate their photo before uploading it
+ quality: 1,
+ exif: false, // We don't want nor need that data.
})
- const photo = {
- uri: file.fileCopyUri,
- type: file.type,
- name: file.name,
+ if (result.canceled || !result.assets || result.assets.length === 0) {
+ console.log('User cancelled image picker.')
+ return
}
- const formData = new FormData()
- formData.append('file', photo)
+ const image = result.assets[0]
+ console.log('Got image', image)
- const fileExt = file.name.split('.').pop()
- const filePath = `${Math.random()}.${fileExt}`
-
- const { error } = await supabase.storage.from('avatars').upload(filePath, formData)
-
- if (error) {
- throw error
+ if (!image.uri) {
+ throw new Error('No image uri!') // Realistically, this should never happen, but just in case...
}
- onUpload(filePath)
+ const arraybuffer = await fetch(image.uri).then((res) => res.arrayBuffer())
+
+ const fileExt = image.uri?.split('.').pop()?.toLowerCase() ?? 'jpeg'
+ const path = `${Date.now()}.${fileExt}`
+ const { data, error: uploadError } = await supabase.storage
+ .from('avatars')
+ .upload(path, arraybuffer, {
+ contentType: image.mimeType ?? 'image/jpeg',
+ })
+
+ if (uploadError) {
+ throw uploadError
+ }
+
+ onUpload(data.path)
} catch (error) {
- if (isCancel(error)) {
- console.warn('cancelled')
- // User cancelled the picker, exit any dialogs or menus and move on
- } else if (isInProgress(error)) {
- console.warn('multiple pickers were opened, only the last will be considered')
- } else if (error instanceof Error) {
+ if (error instanceof Error) {
Alert.alert(error.message)
} else {
throw error
@@ -583,7 +587,9 @@ const styles = StyleSheet.create({
},
noImage: {
backgroundColor: '#333',
- border: '1px solid rgb(200, 200, 200)',
+ borderWidth: 1,
+ borderStyle: 'solid',
+ borderColor: 'rgb(200, 200, 200)',
borderRadius: 5,
},
})
@@ -598,23 +604,22 @@ And then we can add the widget to the Account page:
import Avatar from './Avatar'
// ...
- return (
+return (
+
+ {/* Add to the body */}
- {/* Add to the body */}
-
- {
- setAvatarUrl(url)
- updateProfile({ username, website, avatar_url: url })
- }}
- />
-
- {/* ... */}
+ {
+ setAvatarUrl(url)
+ updateProfile({ username, website, avatar_url: url })
+ }}
+ />
- )
-}
+ {/* ... */}
+
+)
// ...
```
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
index 2bf0b17035e..e0d3f53b4fd 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
@@ -47,7 +47,7 @@ Now that we have the dependencies installed let's setup deep links.
Setting up deep links is required to bring back the user to the app when they click on the magic link to sign in.
We can setup deep links with just a minor tweak on our Flutter application.
-We will use `io.supabase.flutterquickstart` as the scheme, and `login-callback` as the host for our deep link in this example, but you can change it to whatever you would like.
+We have to use `io.supabase.flutterquickstart` as the scheme. In this example, we will use `login-callback` as the host for our deep link, but you can change it to whatever you would like.
First, add `io.supabase.flutterquickstart://login-callback/` as a new [redirect URL](https://supabase.com/dashboard/project/_/auth/url-configuration) in the Dashboard.
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx
index 1c082b246cf..19f4343bcda 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx
@@ -70,7 +70,10 @@ export interface Profile {
export class SupabaseService {
private supabase: SupabaseClient
- constructor(private loadingCtrl: LoadingController, private toastCtrl: ToastController) {
+ constructor(
+ private loadingCtrl: LoadingController,
+ private toastCtrl: ToastController
+ ) {
this.supabase = createClient(environment.supabaseUrl, environment.supabaseKey)
}
@@ -252,7 +255,10 @@ export class AccountPage implements OnInit {
email = ''
- constructor(private readonly supabase: SupabaseService, private router: Router) {}
+ constructor(
+ private readonly supabase: SupabaseService,
+ private router: Router
+ ) {}
ngOnInit() {
this.getEmail()
this.getProfile()
@@ -319,7 +325,10 @@ import { SupabaseService } from './supabase.service'
styleUrls: ['app.component.scss'],
})
export class AppComponent {
- constructor(private supabase: SupabaseService, private router: Router) {
+ constructor(
+ private supabase: SupabaseService,
+ private router: Router
+ ) {
this.supabase.authChanges((_, session) => {
console.log(session)
if (session?.user) {
@@ -474,7 +483,10 @@ export class AvatarComponent {
@Output() upload = new EventEmitter()
- constructor(private readonly supabase: SupabaseService, private readonly dom: DomSanitizer) {
+ constructor(
+ private readonly supabase: SupabaseService,
+ private readonly dom: DomSanitizer
+ ) {
addIcons({ person })
}
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
index f5634a1db9b..f250a8f7631 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
@@ -121,11 +121,11 @@ Let's create a new component for that called `Account.svelte`.
```html src/lib/Account.svelte
-
```
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-swift.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-swift.mdx
index 7ab17387e78..f16baa2d46a 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-swift.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-swift.mdx
@@ -274,7 +274,7 @@ struct AppView: View {
}
}
.task {
- for await state in await supabase.auth.onAuthStateChange() {
+ for await state in await supabase.auth.authStateChanges {
if [.initialSession, .signedIn, .signedOut].contains(state.event) {
isAuthenticated = state.session != nil
}
diff --git a/apps/docs/pages/guides/platform/backups.mdx b/apps/docs/pages/guides/platform/backups.mdx
index ddf4e9e16da..a0515b0d6fc 100644
--- a/apps/docs/pages/guides/platform/backups.mdx
+++ b/apps/docs/pages/guides/platform/backups.mdx
@@ -16,6 +16,12 @@ export const mutuallyExclusiveNote = (
Database backups are an integral part of any disaster recovery plan. Disasters come in many shapes and sizes. It could be as simple as accidentally deleting a table column, the database crashing, or even a natural calamity wiping out the underlying hardware a database is running on. The risks and impact brought by these scenarios can never be fully eliminated, but only minimized or even mitigated. Having database backups is a form of insurance policy. They are essentially snapshots of the database at various points in time. When disaster strikes, database backups allow the project to be brought back to any of these points in time, therefore averting the crisis.
+
+
+The Supabase team regularly monitors the status of backups. In case of any issues, you can [contact support](https://supabase.com/dashboard/support/new). Also you can check out our [status page](https://status.supabase.com/) at any time.
+
+
+
## Frequency of backups
When deciding how often a database should be backed up, the key business metric Recovery Point Objective (RPO) should be considered. RPO is the threshold for how much data, measured in time, a business could lose when disaster strikes. This amount is fully dependent on a business and its underlying requirements. A low RPO would mean that database backups would have to be taken at an increased cadence throughout the day. Each Supabase project has access to two forms of backups, Daily Backups and Point-in-Time Recovery (PITR). The agreed upon RPO would be a deciding factor in choosing which solution best fits a project.
@@ -62,6 +68,8 @@ When selecting a backup to restore to, select the closest available one made bef
The Dashboard will then prompt for a confirmation before proceeding with the restoration. The project will be inaccessible following this. As such, do ensure to allot downtime beforehand. This is dependent on the size of the database. The larger it is, the longer the downtime will be. Once the confirmation has been given, the underlying SQL of the chosen backup is then run against the project. The PostgreSQL utility [psql](https://www.postgresql.org/docs/current/app-psql.html) is used to facilitate the restoration. The Dashboard will display a notification once the restoration completes.
+If your project is using subscriptions or replication slots, you will need to drop them prior to the restoration, and re-create them afterwards. The slot used by Realtime is exempted from this, and will be handled automatically.
+
{/* screenshot of the Dashboard of the project completing restoration */}
## Point-in-Time recovery
diff --git a/apps/docs/pages/guides/platform/billing-faq.mdx b/apps/docs/pages/guides/platform/billing-faq.mdx
new file mode 100644
index 00000000000..018ab1bd227
--- /dev/null
+++ b/apps/docs/pages/guides/platform/billing-faq.mdx
@@ -0,0 +1,178 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'billing-faq',
+ title: 'Billing FAQ',
+ description:
+ 'This documentation covers frequently asked questions around subscription plans, payments, invoices and billing in general',
+ subtitle:
+ 'This documentation covers frequently asked questions around subscription plans, payments, invoices and billing in general',
+}
+
+## Organizations and projects
+
+#### What are organizations and projects?
+
+The Supabase Platform has "organizations" and "projects". An organization may contain multiple projects. Each project is a dedicated Supabase instance with all of its sub-services including Storage, Auth, Functions and Realtime.
+Each organization only has a single subscription with a single plan (Free, Pro, Team or Enterprise). Project addons such as [Compute](https://supabase.com/docs/guides/platform/compute-add-ons), [Custom Domains](https://supabase.com/docs/guides/platform/custom-domains) and [PITR](https://supabase.com/docs/guides/platform/backups#point-in-time-recovery) are configured per project and are added to your organization subscription.
+Read more on [how billing is organized](https://supabase.com/docs/guides/platform/org-based-billing#how-billing-is-organized).
+
+#### How many free projects can I have?
+
+You are entitled to two active free projects. Paused projects do not count towards your quota. Note that within an organization, we count the free project limits from all members that are either Owner or Admin. If you’ve got another organization member with the Admin or Owner role that has already exhausted their free project quota, you won’t be able to launch another free project in that organization. You can create simply create another free plan organization or change the role of the affected member in your [organization’s team settings](https://supabase.com/dashboard/org/_/team).
+
+#### Can I mix free and paid projects in a single organization?
+
+The subscription plan is set on the organization level and it is not possible to mix paid and non-paid projects inside a single organization. However, you can have a paid and a free organization and make use of the [self-serve project transfers](https://supabase.com/docs/guides/platform/project-transfer) to organize your projects. All projects in an organization benefit from the subscription plan. If your organization is on the Pro plan, all projects within the organization benefit from no project pausing, automated backups and so on.
+
+#### Can I transfer my projects to another organization?
+
+Yes, you can transfer your projects to another organization. You can find instructions on how to transfer your projects [here](https://supabase.com/docs/guides/platform/project-transfer).
+
+#### Can I transfer my credits to another organization?
+
+Yes, you can transfer the credits to another organization. Please submit a [support ticket](https://supabase.help).
+
+## Pricing
+
+See the [Pricing page](https://supabase.com/pricing) for details.
+
+#### Are there any charges for paused projects?
+
+No, we do not charge for paused projects. Compute hours are only counted for active instances. Paused projects do not incur any compute usage charges.
+
+#### How are multiple projects billed under a paid organization?
+
+We provide a dedicated server for every Supabase project. Each paid organization comes with $10 in Compute Credits to cover one project on the default instance size. Additional projects start at ~$10 a month (billed hourly). See how billing for compute works [here](https://supabase.com/docs/guides/platform/org-based-billing#usage-based-billing-for-compute).
+
+Running 3 projects in a Pro plan organization on the default micro instance:
+
+- $25 Pro plan
+- $30 for 3 projects on the default compute instance size
+- $10 Compute credits
+ ⇒ $45 / month
+
+Refer to our docs on [how billing works](https://supabase.com/docs/guides/platform/org-based-billing) for more [examples](https://supabase.com/docs/guides/platform/org-based-billing#billing-examples) and insights.
+
+#### How does compute billing work?
+
+Each Supabase project is a dedicated VM and Postgres database. By default, your instance runs on the Micro compute instance. You have the option to upgrade your compute size in your [Project settings](https://supabase.com/dashboard/project/_/settings/addons). See [Compute Add-ons](https://supabase.com/docs/guides/platform/compute-add-ons) for available options.
+
+When you change your compute size, there are no immediate upfront charges. Instead, you will be billed based on the compute runtime hours during your billing cycle reset.
+
+If you launch additional instances on your paid plan, we will add the corresponding compute hours to your final invoice.
+
+If you upgrade your project to a larger instance for 10 hours and then downgrade, you’ll only pay for the larger instance for the 10 hours of usage at the end of your billing cycle. You can see your current compute usage on your [organization’s usage page](https://supabase.com/dashboard/org/_/usage).
+
+Read more on [how billing for compute works](https://supabase.com/docs/guides/platform/org-based-billing#usage-based-billing-for-compute).
+
+#### What is unified egress and how is it billed?
+
+Unified egress refers to the total egress quota available to each organization. This quota can be utilized for various purposes such as Storage, Runtime, Auth, Functions, and Database. Each plan includes a specific egress quota, and any additional usage beyond that quota is billed accordingly.
+
+To learn more about unified egress and its details, please refer to the information provided [here](https://supabase.com/docs/guides/platform/org-based-billing#:~:text=running%20any%20projects.-,Unified%20egress,-%23).
+
+## Plans and subscriptions
+
+#### How do I change my subscription plan?
+
+Change your subscription plan in your [organization's billing settings](https://supabase.com/dashboard/org/_/billing). To upgrade to an Enterprise plan, complete the [Enterprise request form](https://forms.supabase.com/enterprise).
+
+#### What happens if I cancel my subscription?
+
+The organization is given credits for unused time on the subscription plan or addons. The credits will not expire and can be used again in the future.
+
+#### I mistakenly upgraded the wrong organization and then downgraded it. Could you please issue a refund?
+
+We can transfer the amount as credits to another organization of your choice. You can use these credits to upgrade the organization, or if you have already upgraded, the credits will be used to pay the next month's invoice. Please create a [support ticket](https://supabase.help) for this case.
+
+## Quotas and spend caps
+
+#### What will happen when I exceed the free plan quota?
+
+When you exceed the Free plan quota, we will monitor and notify you about the exceeding limits. It is important to take action at this point. If you continue to exceed the limits without reducing your usage, we will pause your projects. To avoid project pausing, you have two options: reduce your usage or upgrade to a paid plan.
+
+#### What will happen when I exceed the Pro plan quota and have the spend cap on?
+
+When you exceed the Pro plan quota, we will monitor and notify you about the exceeding limits. To unblock yourself, you can simply toggle off your spend cap in your [organization’s billing settings](https://supabase.com/dashboard/org/_/billing) to pay for over-usage beyond the Pro plans limits. If you continue to exceed the limits without reducing your usage or turning off the spend cap, we will pause your projects.
+
+#### How do I scale beyond the limits of my Pro plan?
+
+The Pro plan has a spend cap enabled by default to keep costs under control. If you want to scale beyond the plans included quota, ~~simply~~ switch off the spend cap to pay for additional usage beyond the plans included limits. You can toggle the spend cap in the [organization's billing settings](https://supabase.com/dashboard/org/_/billing). Read more about the [spend cap](https://supabase.com/docs/guides/platform/spend-cap).
+
+## Reports and invoices
+
+#### Where do I find my invoices?
+
+You can find all invoices from your organization on your [organization’s invoices page](https://supabase.com/dashboard/org/_/invoices).
+
+#### Where can I see a breakdown of usage?
+
+You can find the breakdown of your usage on your [organization’s usage page](https://supabase.com/dashboard/org/_/usage).
+
+#### Where can I check my credit balance?
+
+You can check your Credit balance on the [organization’s billing page](https://supabase.com/dashboard/org/_/billing). Credits will be used on future invoices before charging your payment method. If you have enough credits to cover an invoice, there is no charge at all.
+
+#### Can I include the VAT number?
+
+You can update your VAT number in the Tax ID section of your [organization’s billing page](https://supabase.com/dashboard/org/_/billing).
+
+#### Can I change the details of an existing invoice?
+
+Any changes made to your billing details will only be reflected in your upcoming invoices. Our payment provider cannot regenerate previous invoices. Therefore, please make sure to update the billing details before the upcoming invoices are finalized.
+
+## Payments and billing cycle
+
+#### What payment methods are available?
+
+We accept credit card payments only. If you cannot pay via credit card, we do offer alternatives for larger upfront payments. Please create a [support ticket](https://supabase.help) in case you’re interested.
+
+#### What currency can I pay in?
+
+All our invoices are issued in USD, but you can pay in any currency as long as your credit card provider allows charging in USD after conversion.
+
+#### Can I change the payment method?
+
+Yes, you will have to add the new payment method before being allowed to remove the old one.
+This can be done from your dashboard on the [organization’s billing page](https://supabase.com/dashboard/org/_/billing).
+
+#### When are payments taken?
+
+Payments are taken at the beginning of each billing cycle. You will be charged once a month. You can see the current billing cycle and upcoming invoice in your [organization's billing settings](https://supabase.com/dashboard/org/_/billing). The subscription plan, custom domain and PITR addons are charged upfront, whereas usage-charges, including compute, are charged in hindsight based on your usage.
+
+#### Where can I change my billing details?
+
+You can update your billing details on the [organization’s billing page](https://supabase.com/dashboard/org/_/billing).
+Please note that any changes made to your billing details will only be reflected in your upcoming invoices. Our payment provider cannot regenerate previous invoices.
+
+#### What happens if I am unable to make the payment?
+
+When an invoice becomes overdue, we will pause your projects and downgrade your organization to the Free plan. You will be able to restore your projects once you have paid all outstanding invoices.
+
+#### Why am I overdue?
+
+We were unable to charge your payment method. This likely means that the payment was not successfully processed with the credit card on your account profile.
+You can be overdue when
+
+- A card is expired
+- The bank declined the payment.
+- There was no card on record - No payment method was added.
+ To rectify, you can add a new payment method by navigating to your [organization’s billing page](https://supabase.com/dashboard/org/_/billing).
+ If you are facing any issues, please raise a [support ticket](https://supabase.help).
+
+#### Can I delay my payment?
+
+No, you cannot delay your payment.
+
+#### Can I get a refund of my unused credits?
+
+No, we do not provide refunds. Please refer to our [Terms of Service](https://supabase.com/terms#:~:text=5.-,Fees%20and%20Taxes.,-1.%20Fees.).
+
+#### What do I do if my bill looks wrong?
+
+Please submit a [support ticket](https://supabase.help) through the dashboard. Select the affected organization and provide the invoice number for us to look at your case.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/platform/branching.mdx b/apps/docs/pages/guides/platform/branching.mdx
index f3cbc8ff903..7421a6f9b14 100644
--- a/apps/docs/pages/guides/platform/branching.mdx
+++ b/apps/docs/pages/guides/platform/branching.mdx
@@ -7,11 +7,26 @@ export const meta = {
subtitle: 'Use Supabase Branches to test and preview changes',
}
-Use branching to safely and easily experiment with changes to your Supabase projects.
+
-
+Branching is an early access only feature, which must not be used in a production setting.
-We do not recommended Branching in a production environment while it is in Early Access.
+
+
+Use branching to safely and easily experiment with changes to your Supabase project.
+
+Supabase branches work like Git branches. They let you create and test changes like new configurations, database schemas, or features in a separate, temporary instance without affecting your production setup.
+
+When you're ready to ship your changes, merge your branch to update your production instance with the new changes.
+
+If you understand Git, you already understand Supabase Branching.
+
+
+
+Branching will move to Public Beta in future, but only available for Pro plan and above.
@@ -147,9 +162,9 @@ You can use the [Supabase CLI](/docs/guides/cli) to manage changes inside a loca
-
+
- Sync your database changes using `supabase db pull`. You can find your database URL in your [database settings](https://supabase.com/dashboard/project/_/settings/database), under the URI tab of the Connection String settings panel.
+ Pull your database changes using `supabase db pull`. You can find your database URL in your [database settings](https://supabase.com/dashboard/project/_/settings/database), under the URI tab of the Connection String settings panel. Make sure **Use connection pooling** is checked so you can use the IPv4-enabled connection pooler. (Without connection pooling, your database is only accessible over IPv6, which isn't yet supported by all network providers.)
diff --git a/apps/docs/pages/guides/platform/migrating-and-upgrading-projects.mdx b/apps/docs/pages/guides/platform/migrating-and-upgrading-projects.mdx
index 763a84b2ea2..a80f36d0853 100644
--- a/apps/docs/pages/guides/platform/migrating-and-upgrading-projects.mdx
+++ b/apps/docs/pages/guides/platform/migrating-and-upgrading-projects.mdx
@@ -119,17 +119,11 @@ Migrating projects can be achieved using the Supabase CLI. This is particularly
### Before you begin
- Install [Postgres](https://www.postgresql.org/download/) so you can run `psql` and `pg_dump`.
-- Install [Supabase CLI](/docs/guides/cli#installation).
+- Install the latest version of [Supabase CLI](/docs/guides/cli#installation).
- Create a new [Supabase project](https://supabase.com/dashboard).
- Install [Docker Desktop](https://www.docker.com) for your platform.
- Set environment variables for the old project's database URL as `$OLD_DB_URL` and the new project's as `$NEW_DB_URL`.
- To find the database URL for a project, go to the project's dashboard page [Project Settings/Database](https://supabase.com/dashboard/project/_/settings/database) and look at `Connection string / URI`. For example, to set the `$OLD_DB_URL` you would run `export OLD_DB_URL=postgresql://postgres:[YOUR-PASSWORD]@db.[YOUR-PROJECT-REF#].supabase.co:5432/postgres`.
-
-
-
-Note that this direct connection string to the database uses IPv6. If your network provider doesn't yet support IPv6, you can connect via the pooler connection string, available under the **Connection pooling** section of [**Database settings**](https://supabase.com/dashboard/project/_/settings/database). The connection string has the format `postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:6543/postgres`.
-
-
+ To find the database URL for a project, go to the project's dashboard page [Project Settings/Database](https://supabase.com/dashboard/project/_/settings/database) and look under `Connection string`. If your network provider supports IPv6, you can disable `Use connection pooling`. Otherwise, enable `Use connection pooling`. For the pooler mode, `Transaction` will work.
### Backup your old database
@@ -139,7 +133,6 @@ Note that this direct connection string to the database uses IPv6. If your netwo
supabase db dump --db-url "$OLD_DB_URL" -f roles.sql --role-only
supabase db dump --db-url "$OLD_DB_URL" -f schema.sql
supabase db dump --db-url "$OLD_DB_URL" -f data.sql --use-copy --data-only
-supabase db dump --db-url "$OLD_DB_URL" -f history.sql --use-copy --data-only --schema supabase_migrations
```
### Restore to your new project
@@ -173,7 +166,6 @@ psql \
--file schema.sql \
--command 'SET session_replication_role = replica' \
--file data.sql \
- --file history.sql \
--dbname "$NEW_DB_URL"
```
@@ -184,6 +176,21 @@ Troubleshooting notes:
- If you have created any [custom roles](https://supabase.com/dashboard/project/_/database/roles) with `login` attribute, you have to manually set their passwords in the new project.
- If you run into any permission errors related to `supabase_admin` during restore, edit the `schema.sql` file and comment out any lines containing `ALTER ... OWNER TO "supabase_admin"`.
+### Preserving migration history
+
+If you were using Supabase CLI for managing migrations on your old database and would like to preserve the migration history in your newly restored project, you need to insert the migration records separately using the following commands.
+
+```bash
+supabase db dump --db-url "$OLD_DB_URL" -f history_schema.sql --schema supabase_migrations
+supabase db dump --db-url "$OLD_DB_URL" -f history_data.sql --use-copy --data-only --schema supabase_migrations
+psql \
+ --single-transaction \
+ --variable ON_ERROR_STOP=1 \
+ --file history_schema.sql \
+ --file history_data.sql \
+ --dbname "$NEW_DB_URL"
+```
+
### Schema changes to `auth` and `storage`
If you have modified the `auth` and `storage` schemas in your old project, such as adding triggers or RLS policies, you have to restore them separately. The Supabase CLI can help you diff the changes to these schemas using the following commands.
diff --git a/apps/docs/pages/guides/platform/network-restrictions.mdx b/apps/docs/pages/guides/platform/network-restrictions.mdx
index e46e9b85225..9ffbb95e96d 100644
--- a/apps/docs/pages/guides/platform/network-restrictions.mdx
+++ b/apps/docs/pages/guides/platform/network-restrictions.mdx
@@ -77,8 +77,7 @@ Restrictions applied successfully: true
## Limitations
- The current iteration of Network Restrictions applies to connections to Postgres and the database pooler; it doesn't currently apply to APIs offered over HTTPS (e.g., PostgREST, Storage, and Auth). This includes using Supabase client libraries like [supabase-js](https://supabase.com/docs/reference/javascript).
-- Network Restrictions should not be used if you need to connect to your Postgres database using Edge Functions.
-- [Supavisor](https://github.com/supabase/supavisor/) does not currently support Network Restrictions. Network restrictions support will be enabled from 24th January 2024. Any changes to the network restrictions configuration will apply to both Supavisor and direct connections to Postgres after this date.
+- If network restrictions are enabled, direct access to your database from Edge Functions will always be blocked. Using the Supabase client library [supabase-js](https://supabase.com/docs/reference/javascript) is recommended to connect to a database with network restrictions from Edge Functions.
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/platform/read-replicas.mdx b/apps/docs/pages/guides/platform/read-replicas.mdx
index 5825b38a676..b43a62f5928 100644
--- a/apps/docs/pages/guides/platform/read-replicas.mdx
+++ b/apps/docs/pages/guides/platform/read-replicas.mdx
@@ -96,7 +96,7 @@ A read replica's API endpoint only supports `GET` requests to the [REST API](htt
### Dedicated connection pool
-A connection pool through Supavisor is also available for each read replica. Its unique connection string can be found in your [dashboard database settings](https://supabase.com/dashboard/project/_/settings/database) under **Connection Pooling Custom Configuration**.
+A connection pool through Supavisor is also available for each read replica. Its unique connection string can be found in your [dashboard database settings](https://supabase.com/dashboard/project/_/settings/database) under **Connection string**.
### Querying through the SQL editor
diff --git a/apps/docs/pages/guides/realtime/[[...slug]].tsx b/apps/docs/pages/guides/realtime/[[...slug]].tsx
new file mode 100644
index 00000000000..dddabae2a82
--- /dev/null
+++ b/apps/docs/pages/guides/realtime/[[...slug]].tsx
@@ -0,0 +1,28 @@
+import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType } from 'next'
+import { MDXRemote } from 'next-mdx-remote'
+
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
+
+export const getStaticPaths = (async () => {
+ return getGuidesStaticPaths('realtime')
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (args) => {
+ return getGuidesStaticProps('realtime', args)
+}) satisfies GetStaticProps
+
+export default function RealtimeGuide({
+ frontmatter,
+ mdxSource,
+ editLink,
+}: InferGetStaticPropsType) {
+ const { hideToc, ...meta } = frontmatter
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/docs/pages/guides/resources.mdx b/apps/docs/pages/guides/resources.mdx
index 6b239c60396..a125d86be09 100644
--- a/apps/docs/pages/guides/resources.mdx
+++ b/apps/docs/pages/guides/resources.mdx
@@ -1,6 +1,8 @@
import Layout from '~/layouts/DefaultLayout'
import Link from 'next/link'
-import { GlassPanel, IconPanel, Button, IconChevronRight } from 'ui'
+import { Button, IconChevronRight } from 'ui'
+import { GlassPanel } from 'ui-patterns/GlassPanel'
+import { IconPanel } from 'ui-patterns/IconPanel'
export const meta = {
title: 'Resources',
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/amazon-rds.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/amazon-rds.mdx
index 63ba35b2bda..32ad2fa7240 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/amazon-rds.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/amazon-rds.mdx
@@ -24,11 +24,12 @@ Supabase's core is Postgres, enabling the use of row-level security and providin
## Retrieve your Supabase host [#retrieve-supabase-host]
1. If you're new to Supabase, [create a project](https://supabase.com/dashboard).
+ Make a note of your password, you will need this later. If you forget it, you can [reset it here](https://supabase.com/dashboard/project/_/settings/database).
+
1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
1. Under **Connection Info**, note your Host (`$SUPABASE_HOST`).
-1. Save your password or [reset it](https://supabase.com/dashboard/project/_/settings/database) if you forgot it.
-
+
## Migrate the database
@@ -57,10 +58,12 @@ Alternatively, you can use [pgloader](https://github.com/dimitri/pgloader), a fl
Install pgloader.
Create a configuration file (e.g., config.load).
+ For your destination, use your Supabase connection string with `Use connection pooling` enabled, and the mode set to `Session`. You can get the string from your [`Database Settings`](https://supabase.com/dashboard/project/_/settings/general).
+
```sql
load database
from mysql://user:password@host/source_db
- into postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:6543/postgres
+ into postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:5432/postgres
alter schema 'public' owner to 'postgres';
set wal_buffers = '64MB', max_wal_senders = 0, statement_timeout = 0, work_mem to '2GB';
```
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-auth.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-auth.mdx
index 9b898785f38..958a84a9c4e 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-auth.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-auth.mdx
@@ -33,7 +33,7 @@ git clone https://github.com/supabase-community/firebase-to-supabase.git
```
1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
-1. Under **Connection Info**, copy the Host string and replace the entry in your `supabase-service.json` file.
+1. Under `Connection parameters`, enable `Use connection pooling` and set the mode to `Session`. Replace the `Host` and `User` fields with the values shown.
1. Enter the password you used when you created your Supabase project in the `password` entry in the `supabase-service.json` file.
## Generate a Firebase private key [#generate-firebase-private-key]
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/firestore-data.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/firestore-data.mdx
index c8d30b87b40..40e89473890 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/firestore-data.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/firestore-data.mdx
@@ -32,7 +32,7 @@ git clone https://github.com/supabase-community/firebase-to-supabase.git
```
1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
-1. Under **Connection Info**, copy the Host string and replace the entry in your `supabase-service.json` file.
+1. Under `Connection parameters`, enable `Use connection pooling` and set the mode to `Session`. Replace the `Host` and `User` fields with the values shown.
1. Enter the password you used when you created your Supabase project in the `password` entry in the `supabase-service.json` file.
## Generate a Firebase private key [#generate-firebase-private-key]
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/heroku.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/heroku.mdx
index dc96741d70a..9e222e55203 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/heroku.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/heroku.mdx
@@ -34,11 +34,11 @@ Alternatively, use the [Heroku to Supabase migration tool](https://migrate.supab
- User (`$HEROKU_USER`)
- Password (`$HEROKU_PASSWORD`)
-## Retrieve your Supabase host [#retrieve-supabase-host]
+## Retrieve your Supabase connection string [#retrieve-supabase-connection-string]
1. If you're new to Supabase, [create a project](https://supabase.com/dashboard).
1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
-1. Under **Connection Info**, note your Host (`$SUPABASE_HOST`).
+1. Under **Connection string**, make sure `Use connection pooling` is enabled. Copy the URI and replace the password placeholder with your database password.
## Export your Heroku database to a file [#export-heroku-database]
@@ -55,7 +55,7 @@ pg_dump --clean --if-exists --quote-all-identifiers \
Use `psql` to import the Heroku database file to your Supabase project.
```bash
-psql -h $SUPABASE_HOST -U postgres -f heroku_dump.sql
+psql -d "$YOUR_CONNECTION_STRING" -f heroku_dump.sql
```
## Additional options
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/mssql.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/mssql.mdx
index 012529761b7..f4c70cdafd8 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/mssql.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/mssql.mdx
@@ -21,11 +21,12 @@ Before you begin the migration, you need to collect essential information about
## Retrieve your Supabase host [#retrieve-supabase-host]
1. If you're new to Supabase, [create a project](https://supabase.com/dashboard).
+ Make a note of your password, you will need this later. If you forget it, you can [reset it here](https://supabase.com/dashboard/project/_/settings/database).
+
1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
1. Under **Connection Info**, note your Host (`$SUPABASE_HOST`).
-1. Save your password or [reset it](https://supabase.com/dashboard/project/_/settings/database) if you forgot it.
-
+
## Migrate the database
@@ -54,10 +55,12 @@ Alternatively, you can use [pgloader](https://github.com/dimitri/pgloader), a fl
Install pgloader.
Create a configuration file (e.g., config.load).
+ For your destination, use your Supabase connection string with `Use connection pooling` enabled, and the mode set to `Session`. You can get the string from your [`Database Settings`](https://supabase.com/dashboard/project/_/settings/general).
+
```sql
LOAD DATABASE
FROM mssql://USER:PASSWORD@HOST/SOURCE_DB
- INTO postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:6543/postgres
+ INTO postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:5432/postgres
ALTER SCHEMA 'public' OWNER TO 'postgres';
set wal_buffers = '64MB', max_wal_senders = 0, statement_timeout = 0, work_mem to '2GB';
```
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/mysql.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/mysql.mdx
index 5ca1c587670..0699182b9c9 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/mysql.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/mysql.mdx
@@ -22,11 +22,12 @@ Before you begin the migration, you need to collect essential information about
## Retrieve your Supabase host [#retrieve-supabase-host]
1. If you're new to Supabase, [create a project](https://supabase.com/dashboard).
+ Make a note of your password, you will need this later. If you forget it, you can [reset it here](https://supabase.com/dashboard/project/_/settings/database).
+
1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
1. Under **Connection Info**, note your Host (`$SUPABASE_HOST`).
-1. Save your password or [reset it](https://supabase.com/dashboard/project/_/settings/database) if you forgot it.
-
+
## Migrate the database
@@ -55,10 +56,12 @@ Alternatively, you can use [pgloader](https://github.com/dimitri/pgloader), a fl
Install pgloader.
Create a configuration file (e.g., config.load).
+ For your destination, use your Supabase connection string with `Use connection pooling` enabled, and the mode set to `Session`. You can get the string from your [`Database Settings`](https://supabase.com/dashboard/project/_/settings/general).
+
```sql
load database
from mysql://user:password@host/source_db
- into postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:6543/postgres
+ into postgres://postgres.xxxx:password@xxxx.pooler.supabase.com:5432/postgres
alter schema 'public' owner to 'postgres';
set wal_buffers = '64MB', max_wal_senders = 0, statement_timeout = 0, work_mem to '2GB';
```
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/postgres.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/postgres.mdx
index 4ada6ef3f15..e4df0bb4a78 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/postgres.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/postgres.mdx
@@ -21,14 +21,15 @@ Example:
%env PSQL_COMMAND=PGPASSWORD=RgaMDfTS_password_FTPa7 psql -h dpg-a_server_in.oregon-postgres.provider.com -U my_db_pxl0_user my_db_pxl0
```
-## Retrieve your Supabase host [#retrieve-supabase-host]
+## Retrieve your Supabase connection string [#retrieve-supabase-connection-string]
1. If you're new to Supabase, [create a project](https://supabase.com/dashboard).
-1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
-1. Under **Connection Info**, note your Host (`$SUPABASE_HOST`).
-1. Save your password or [reset it](https://supabase.com/dashboard/project/_/settings/database) if you forgot it.
+ Make a note of your password, you will need this later. If you forget it, you can [reset it here](https://supabase.com/dashboard/project/_/settings/database).
-
+1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
+1. Under **Connection string**, make sure `Use connection pooling` is enabled. Copy the URI and replace the password placeholder with your database password.
+
+
## Migrate the database
@@ -65,7 +66,7 @@ pg_dump --clean --if-exists --quote-all-identifiers \
Use `psql` to import the Postgres database file to your Supabase project.
```bash
-psql -h $SUPA_URL -U postgres --file dump.sql -p 6543 -d postgres
+psql -d "$YOUR_CONNECTION_STRING" -f dump.sql
```
### Additional options
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/render.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/render.mdx
index f8178141fc5..b64d1e250b6 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/render.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/render.mdx
@@ -25,14 +25,13 @@ Example:
%env PSQL_COMMAND=PGPASSWORD=RgaMDfTS_password_FTPa7 psql -h dpg-a_server_in.oregon-postgres.render.com -U my_db_pxl0_user my_db_pxl0
```
-## Retrieve your Supabase host [#retrieve-supabase-host]
+## Retrieve your Supabase connection string [#retrieve-supabase-connection-string]
1. If you're new to Supabase, [create a project](https://supabase.com/dashboard).
-1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
-1. Under **Connection Info**, note your Host (`$SUPABASE_HOST`).
-1. Save your password or [reset it](https://supabase.com/dashboard/project/_/settings/database) if you forgot it.
+ Make a note of your password, you will need this later. If you forget it, you can [reset it here](https://supabase.com/dashboard/project/_/settings/database).
-
+1. Go to the [Database settings](https://supabase.com/dashboard/project/_/settings/database) for your project in the Supabase Dashboard.
+1. Under **Connection string**, make sure `Use connection pooling` is enabled. Copy the URI and replace the password placeholder with your database password.
## Migrate the database
@@ -69,7 +68,7 @@ pg_dump --clean --if-exists --quote-all-identifiers \
Use `psql` to import the Render database file to your Supabase project.
```bash
-psql -h $SUPA_URL -U postgres --file render_dump.sql -p 6543 -d postgres
+psql -d "$YOUR_CONNECTION_STRING" -f render_dump.sql
```
### Additional options
diff --git a/apps/docs/pages/guides/self-hosting/docker.mdx b/apps/docs/pages/guides/self-hosting/docker.mdx
index dc455d227ac..adc6dd1deaa 100644
--- a/apps/docs/pages/guides/self-hosting/docker.mdx
+++ b/apps/docs/pages/guides/self-hosting/docker.mdx
@@ -187,7 +187,13 @@ Supabase is a combination of open source tools, each specifically chosen for Ent
If the tools and communities already exist, with an MIT, Apache 2, or equivalent open license, we will use and support that tool.
If the tool doesn't exist, we build and open source it ourselves.
-
+
- [Kong](https://github.com/Kong/kong) is a cloud-native API gateway.
- [GoTrue](https://github.com/supabase/gotrue) is an JWT based API for managing users and issuing JWT tokens.
diff --git a/apps/docs/pages/guides/storage/[[...slug]].tsx b/apps/docs/pages/guides/storage/[[...slug]].tsx
new file mode 100644
index 00000000000..c3ae4c4b3c3
--- /dev/null
+++ b/apps/docs/pages/guides/storage/[[...slug]].tsx
@@ -0,0 +1,28 @@
+import { type GetStaticPaths, type GetStaticProps, type InferGetStaticPropsType } from 'next'
+import { MDXRemote } from 'next-mdx-remote'
+
+import components from '~/components'
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getGuidesStaticPaths, getGuidesStaticProps } from '~/lib/docs'
+
+export const getStaticPaths = (async () => {
+ return getGuidesStaticPaths('storage')
+}) satisfies GetStaticPaths
+
+export const getStaticProps = (async (args) => {
+ return getGuidesStaticProps('storage', args)
+}) satisfies GetStaticProps
+
+export default function StorageGuide({
+ frontmatter,
+ mdxSource,
+ editLink,
+}: InferGetStaticPropsType) {
+ const { hideToc, ...meta } = frontmatter
+
+ return (
+
+
+
+ )
+}
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 6a7a8195082..4c1a02b59a2 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -1,14 +1,8 @@
import HomeLayout from '~/layouts/HomeLayout'
import Link from 'next/link'
-import {
- Button,
- GlassPanel,
- IconBackground,
- IconChevronRight,
- IconPanel,
- IconPlay,
- TextLink,
-} from 'ui'
+import { Button, IconBackground, IconChevronRight, IconPlay, TextLink } from 'ui'
+import { GlassPanel } from 'ui-patterns/GlassPanel'
+import { IconPanel } from 'ui-patterns/IconPanel'
import HomeMenuIconPicker from '~/components/Navigation/NavigationMenu/HomeMenuIconPicker'
diff --git a/apps/docs/public/humans.txt b/apps/docs/public/humans.txt
index 7c6ee7b83e0..b2f25cf9f0d 100644
--- a/apps/docs/public/humans.txt
+++ b/apps/docs/public/humans.txt
@@ -68,6 +68,7 @@ Terry Sutton
Thomas E
Thor Schaeff
Tom Ashley
+Tyler Hillery
Tyler Fontaine
Tyler Shukert
TzeYiing L
diff --git a/apps/docs/public/img/guides/cli/cicd-github.png b/apps/docs/public/img/guides/cli/cicd-github.png
deleted file mode 100644
index 01577b44525..00000000000
Binary files a/apps/docs/public/img/guides/cli/cicd-github.png and /dev/null differ
diff --git a/apps/docs/public/img/guides/database/add-pg-server-conn-info.png b/apps/docs/public/img/guides/database/add-pg-server-conn-info.png
deleted file mode 100644
index 1198e74ee66..00000000000
Binary files a/apps/docs/public/img/guides/database/add-pg-server-conn-info.png and /dev/null differ
diff --git a/apps/docs/public/img/guides/database/connecting-to-postgres/how-connection-pooling-works--light.png b/apps/docs/public/img/guides/database/connecting-to-postgres/how-connection-pooling-works--light.png
new file mode 100644
index 00000000000..4be79ad2ba2
Binary files /dev/null and b/apps/docs/public/img/guides/database/connecting-to-postgres/how-connection-pooling-works--light.png differ
diff --git a/apps/docs/public/img/guides/database/connecting-to-postgres/how-connection-pooling-works.png b/apps/docs/public/img/guides/database/connecting-to-postgres/how-connection-pooling-works.png
new file mode 100644
index 00000000000..24d330919b0
Binary files /dev/null and b/apps/docs/public/img/guides/database/connecting-to-postgres/how-connection-pooling-works.png differ
diff --git a/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/add-pg-server-conn-info.png b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/add-pg-server-conn-info.png
new file mode 100644
index 00000000000..e2962480fcc
Binary files /dev/null and b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/add-pg-server-conn-info.png differ
diff --git a/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/database-settings-host.png b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/database-settings-host.png
new file mode 100644
index 00000000000..f8f453c5d6f
Binary files /dev/null and b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/database-settings-host.png differ
diff --git a/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/name-pg-server.png b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/name-pg-server.png
new file mode 100644
index 00000000000..05fa52fc4fb
Binary files /dev/null and b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/name-pg-server.png differ
diff --git a/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/register-server-pgAdmin--light.png b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/register-server-pgAdmin--light.png
new file mode 100644
index 00000000000..4f2e088b45e
Binary files /dev/null and b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/register-server-pgAdmin--light.png differ
diff --git a/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/register-server-pgAdmin.png b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/register-server-pgAdmin.png
new file mode 100644
index 00000000000..682797773ad
Binary files /dev/null and b/apps/docs/public/img/guides/database/connecting-to-postgres/pgadmin/register-server-pgAdmin.png differ
diff --git a/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/new-project.png b/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/new-project.png
new file mode 100644
index 00000000000..85d58b26c0d
Binary files /dev/null and b/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/new-project.png differ
diff --git a/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/pooled-connection-strings.png b/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/pooled-connection-strings.png
new file mode 100644
index 00000000000..ef60a412a6b
Binary files /dev/null and b/apps/docs/public/img/guides/getting-started/quickstarts/redwoodjs/pooled-connection-strings.png differ
diff --git a/apps/docs/public/img/guides/resources/migrating-to-supabase/amazon-rds/database-settings-host.png b/apps/docs/public/img/guides/resources/migrating-to-supabase/amazon-rds/database-settings-host.png
new file mode 100644
index 00000000000..1206b19d479
Binary files /dev/null and b/apps/docs/public/img/guides/resources/migrating-to-supabase/amazon-rds/database-settings-host.png differ
diff --git a/apps/docs/public/img/guides/resources/migrating-to-supabase/mssql/database-settings-host.png b/apps/docs/public/img/guides/resources/migrating-to-supabase/mssql/database-settings-host.png
new file mode 100644
index 00000000000..6e912bc8359
Binary files /dev/null and b/apps/docs/public/img/guides/resources/migrating-to-supabase/mssql/database-settings-host.png differ
diff --git a/apps/docs/public/img/guides/resources/migrating-to-supabase/mysql/database-settings-host.png b/apps/docs/public/img/guides/resources/migrating-to-supabase/mysql/database-settings-host.png
new file mode 100644
index 00000000000..67a653b47b0
Binary files /dev/null and b/apps/docs/public/img/guides/resources/migrating-to-supabase/mysql/database-settings-host.png differ
diff --git a/apps/docs/public/img/guides/resources/migrating-to-supabase/postgres/database-settings-host.png b/apps/docs/public/img/guides/resources/migrating-to-supabase/postgres/database-settings-host.png
new file mode 100644
index 00000000000..67a653b47b0
Binary files /dev/null and b/apps/docs/public/img/guides/resources/migrating-to-supabase/postgres/database-settings-host.png differ
diff --git a/apps/docs/public/img/guides/resources/migrating-to-supabase/render/database-settings-host.png b/apps/docs/public/img/guides/resources/migrating-to-supabase/render/database-settings-host.png
new file mode 100644
index 00000000000..67a653b47b0
Binary files /dev/null and b/apps/docs/public/img/guides/resources/migrating-to-supabase/render/database-settings-host.png differ
diff --git a/apps/docs/public/img/local-dev-environment--light.svg b/apps/docs/public/img/local-dev-environment--light.svg
new file mode 100644
index 00000000000..42c706a40e9
--- /dev/null
+++ b/apps/docs/public/img/local-dev-environment--light.svg
@@ -0,0 +1,83 @@
+
diff --git a/apps/docs/public/img/local-dev-environment.svg b/apps/docs/public/img/local-dev-environment.svg
new file mode 100644
index 00000000000..1003ad44a52
--- /dev/null
+++ b/apps/docs/public/img/local-dev-environment.svg
@@ -0,0 +1,83 @@
+
diff --git a/apps/docs/public/img/supabase-architecture--light.svg b/apps/docs/public/img/supabase-architecture--light.svg
new file mode 100644
index 00000000000..53627538876
--- /dev/null
+++ b/apps/docs/public/img/supabase-architecture--light.svg
@@ -0,0 +1,174 @@
+
diff --git a/apps/docs/public/img/supabase-architecture.png b/apps/docs/public/img/supabase-architecture.png
deleted file mode 100644
index 4c82d648533..00000000000
Binary files a/apps/docs/public/img/supabase-architecture.png and /dev/null differ
diff --git a/apps/docs/public/img/supabase-architecture.svg b/apps/docs/public/img/supabase-architecture.svg
new file mode 100644
index 00000000000..2b0ad6325a9
--- /dev/null
+++ b/apps/docs/public/img/supabase-architecture.svg
@@ -0,0 +1,174 @@
+
diff --git a/apps/docs/scripts/codemod/mdx-meta.mjs b/apps/docs/scripts/codemod/mdx-meta.mjs
index 8e00d256604..99c9b212fc1 100644
--- a/apps/docs/scripts/codemod/mdx-meta.mjs
+++ b/apps/docs/scripts/codemod/mdx-meta.mjs
@@ -3,8 +3,12 @@
/**
* Copies MDX files from the `pages` directory to the `content` directory,
* replacing frontmatter in `meta` with YAML frontmatter.
+ *
+ * Also deletes import and export statements.
*/
+let SUB_DIR = 'ai'
+
import { parse } from 'acorn'
import { fromMarkdown } from 'mdast-util-from-markdown'
import { mdxFromMarkdown } from 'mdast-util-mdx'
@@ -15,8 +19,13 @@ import { fileURLToPath } from 'node:url'
const __dirname = dirname(fileURLToPath(import.meta.url))
const ROOT_DIR = join(__dirname, '../..')
-const PAGES_DIR = join(ROOT_DIR, 'pages/guides')
-const CONTENT_DIR = join(ROOT_DIR, 'content/guides')
+let PAGES_DIR = join(ROOT_DIR, 'pages/guides')
+let CONTENT_DIR = join(ROOT_DIR, 'content/guides')
+
+if (SUB_DIR) {
+ PAGES_DIR = join(PAGES_DIR, SUB_DIR)
+ CONTENT_DIR = join(CONTENT_DIR, SUB_DIR)
+}
function convertToYaml(properties) {
let result = '---\n'
@@ -48,26 +57,55 @@ async function main() {
const meta = mdxTree.children.find(
(node) => node.type === 'mdxjsEsm' && node.value.trim().startsWith('export const meta')
)
- if (!meta) return
- const linesIncl = [meta.position.start.line, meta.position.end.line]
+ let yamlString = ''
+ if (meta) {
+ // @ts-ignore
+ const parsedMeta = parse(meta.value, { ecmaVersion: 2020, sourceType: 'module' })
+ yamlString = convertToYaml(
+ // @ts-ignore
+ parsedMeta.body[0].declaration.declarations[0].init.properties
+ )
+ }
- const parsedMeta = parse(meta.value, { ecmaVersion: 2020, sourceType: 'module' })
- const yamlString = convertToYaml(
- parsedMeta.body[0].declaration.declarations[0].init.properties
+ const importStatements = mdxTree.children.filter(
+ (node) => node.type === 'mdxjsEsm' && node.value.trim().match(/^import \w+ from/)
)
+ const exportStatements = mdxTree.children.filter(
+ (node) =>
+ node.type === 'mdxjsEsm' &&
+ (node.value.trim().match(/^export const (?!meta)/) ||
+ node.value.trim().startsWith('export default'))
+ )
+
+ const positions = [meta, ...importStatements, ...exportStatements]
+ // @ts-ignore
+ .map(({ position }) => [position.start.line, position.end.line])
+ // splicing them out in reverse order means we don't have to worry about line numbers shifting
+ .sort((a, b) => b[0] - a[0])
+
+ let index = 0
+ while (index < positions.length - 1) {
+ const overlapsNext = positions[index][0] <= positions[index + 1][1]
+ if (overlapsNext) {
+ positions[index][0] = positions[index + 1][0]
+ positions.splice(index + 1, 1)
+ } else {
+ index++
+ }
+ }
+
const lines = content.split('\n')
- lines.splice(
- meta.position.start.line - 1,
- meta.position.end.line - meta.position.start.line + 1
- )
- const contentWithoutMeta = lines.join('\n')
- const contentWithFrontmatter = yamlString + contentWithoutMeta
+ for (const position of positions) {
+ lines.splice(position[0] - 1, position[1] - position[0] + 1)
+ }
+ const splicedLines = lines.join('\n')
+ const splicedWithFrontmatter = yamlString + splicedLines
const destinationPath = join(CONTENT_DIR, filename)
await mkdir(dirname(destinationPath), { recursive: true })
- writeFile(destinationPath, contentWithFrontmatter)
+ writeFile(destinationPath, splicedWithFrontmatter)
})
)
} catch (err) {
diff --git a/apps/docs/scripts/search/generate-embeddings.ts b/apps/docs/scripts/search/generate-embeddings.ts
index c9f7e004f75..a6931a1836b 100644
--- a/apps/docs/scripts/search/generate-embeddings.ts
+++ b/apps/docs/scripts/search/generate-embeddings.ts
@@ -23,6 +23,8 @@ async function generateEmbeddings() {
'NEXT_PUBLIC_SUPABASE_URL',
'SUPABASE_SERVICE_ROLE_KEY',
'OPENAI_KEY',
+ 'NEXT_PUBLIC_MISC_USE_URL',
+ 'NEXT_PUBLIC_MISC_USE_ANON_KEY',
'SEARCH_GITHUB_APP_ID',
'SEARCH_GITHUB_APP_INSTALLATION_ID',
'SEARCH_GITHUB_APP_PRIVATE_KEY',
@@ -71,7 +73,13 @@ async function generateEmbeddings() {
checksum,
sections,
meta = {},
- }: { checksum: string; sections: Section[]; meta?: Json } = embeddingSource.process()
+ ragIgnore = false,
+ }: {
+ checksum: string
+ sections: Section[]
+ ragIgnore?: boolean
+ meta?: Json
+ } = embeddingSource.process()
// Check for existing page in DB and compare checksums
const { error: fetchPageError, data: existingPage } = await supabaseClient
@@ -175,6 +183,7 @@ async function generateEmbeddings() {
content,
token_count: embeddingResponse.usage.total_tokens,
embedding: responseData.embedding,
+ rag_ignore: ragIgnore,
})
.select()
.limit(1)
diff --git a/apps/docs/scripts/search/sources/base.ts b/apps/docs/scripts/search/sources/base.ts
index 0a0aea98a98..931a57290f7 100644
--- a/apps/docs/scripts/search/sources/base.ts
+++ b/apps/docs/scripts/search/sources/base.ts
@@ -12,7 +12,10 @@ export type Section = {
export abstract class BaseLoader {
type: string
- constructor(public source: string, public path: string) {}
+ constructor(
+ public source: string,
+ public path: string
+ ) {}
abstract load(): Promise
}
@@ -23,9 +26,12 @@ export abstract class BaseSource {
meta?: Json
sections?: Section[]
- constructor(public source: string, public path: string) {}
+ constructor(
+ public source: string,
+ public path: string
+ ) {}
- abstract process(): { checksum: string; meta?: Json; sections: Section[] }
+ abstract process(): { checksum: string; meta?: Json; ragIgnore?: boolean; sections: Section[] }
abstract extractIndexedContent(): string
}
diff --git a/apps/docs/scripts/search/sources/github-discussion.ts b/apps/docs/scripts/search/sources/github-discussion.ts
index 5a27de92c39..429a14af5c0 100644
--- a/apps/docs/scripts/search/sources/github-discussion.ts
+++ b/apps/docs/scripts/search/sources/github-discussion.ts
@@ -77,7 +77,10 @@ export async function fetchDiscussions(owner: string, repo: string, categoryId:
export class GitHubDiscussionLoader extends BaseLoader {
type = 'github-discussions' as const
- constructor(source: string, public discussion: Discussion) {
+ constructor(
+ source: string,
+ public discussion: Discussion
+ ) {
super(source, discussion.url)
}
@@ -89,7 +92,11 @@ export class GitHubDiscussionLoader extends BaseLoader {
export class GitHubDiscussionSource extends BaseSource {
type = 'github-discussions' as const
- constructor(source: string, path: string, public discussion: Discussion) {
+ constructor(
+ source: string,
+ path: string,
+ public discussion: Discussion
+ ) {
super(source, path)
}
diff --git a/apps/docs/scripts/search/sources/index.ts b/apps/docs/scripts/search/sources/index.ts
index 605120453c8..2c93c69ba6a 100644
--- a/apps/docs/scripts/search/sources/index.ts
+++ b/apps/docs/scripts/search/sources/index.ts
@@ -1,16 +1,17 @@
import {
GitHubDiscussionLoader,
- GitHubDiscussionSource,
+ type GitHubDiscussionSource,
fetchDiscussions,
} from './github-discussion'
-import { MarkdownLoader, MarkdownSource } from './markdown'
+import { MarkdownLoader, type MarkdownSource } from './markdown'
+import { IntegrationLoader, type IntegrationSource, fetchPartners } from './partner-integrations'
import {
CliReferenceLoader,
- CliReferenceSource,
+ type CliReferenceSource,
ClientLibReferenceLoader,
- ClientLibReferenceSource,
+ type ClientLibReferenceSource,
OpenApiReferenceLoader,
- OpenApiReferenceSource,
+ type OpenApiReferenceSource,
} from './reference-doc'
import { walk } from './util'
@@ -22,6 +23,7 @@ export type SearchSource =
| ClientLibReferenceSource
| CliReferenceSource
| GitHubDiscussionSource
+ | IntegrationSource
/**
* Fetches all the sources we want to index for search
@@ -91,11 +93,22 @@ export async function fetchSources() {
'spec/common-cli-sections.json'
).load()
- const guideSources = (await walk('pages'))
+ const pagesSources = (await walk('pages'))
.filter(({ path }) => /\.mdx?$/.test(path))
.filter(({ path }) => !ignoredFiles.includes(path))
.map((entry) => new MarkdownLoader('guide', entry.path).load())
+ const contentSources = (await walk('content'))
+ .filter(({ path }) => /\.mdx?$/.test(path))
+ .filter(({ path }) => !ignoredFiles.includes(path))
+ .map((entry) => new MarkdownLoader('guide', entry.path, { yaml: true }).load())
+
+ const guideSources = [...pagesSources, ...contentSources]
+
+ const partnerIntegrationSources = (await fetchPartners()).map((partner) =>
+ new IntegrationLoader(partner.slug, partner).load()
+ )
+
const githubDiscussionSources = (
await fetchDiscussions(
'supabase',
@@ -115,6 +128,7 @@ export async function fetchSources() {
ktLibReferenceSource,
cliReferenceSource,
...githubDiscussionSources,
+ ...partnerIntegrationSources,
...guideSources,
])
).flat()
diff --git a/apps/docs/scripts/search/sources/markdown.ts b/apps/docs/scripts/search/sources/markdown.ts
index 49c5f42b373..5682c094ffb 100644
--- a/apps/docs/scripts/search/sources/markdown.ts
+++ b/apps/docs/scripts/search/sources/markdown.ts
@@ -2,6 +2,7 @@ import { createHash } from 'crypto'
import { ObjectExpression } from 'estree'
import { readFile } from 'fs/promises'
import GithubSlugger from 'github-slugger'
+import matter from 'gray-matter'
import { Content, Root } from 'mdast'
import { fromMarkdown } from 'mdast-util-from-markdown'
import { MdxjsEsm, mdxFromMarkdown } from 'mdast-util-mdx'
@@ -118,15 +119,28 @@ export function parseHeading(heading: string): { heading: string; customAnchor?:
* It extracts metadata, strips it of all JSX,
* and splits it into sub-sections based on criteria.
*/
-export function processMdxForSearch(content: string): ProcessedMdx {
- const checksum = createHash('sha256').update(content).digest('base64')
+export function processMdxForSearch(_content: string, options?: { yaml?: boolean }): ProcessedMdx {
+ const checksum = createHash('sha256').update(_content).digest('base64')
+
+ let frontmatter: Record = {}
+ let content = _content
+ if (options?.yaml) {
+ const parsed = matter(_content)
+ frontmatter = parsed.data
+ content = parsed.content
+ }
const mdxTree = fromMarkdown(content, {
extensions: [mdxjs()],
mdastExtensions: [mdxFromMarkdown()],
})
- const meta = extractMetaExport(mdxTree)
+ let meta: Record
+ if (options?.yaml) {
+ meta = frontmatter
+ } else {
+ meta = extractMetaExport(mdxTree)
+ }
const serializableMeta: Json = meta && JSON.parse(JSON.stringify(meta))
@@ -192,26 +206,35 @@ export type ProcessedMdx = {
export class MarkdownLoader extends BaseLoader {
type = 'markdown' as const
- constructor(source: string, public filePath: string) {
- const path = filePath.replace(/^pages/, '').replace(/\.mdx?$/, '')
+ constructor(
+ source: string,
+ public filePath: string,
+ public options?: { yaml?: boolean }
+ ) {
+ const path = filePath.replace(/^(pages|content)/, '').replace(/\.mdx?$/, '')
super(source, path)
}
async load() {
const contents = await readFile(this.filePath, 'utf8')
- return [new MarkdownSource(this.source, this.path, contents)]
+ return [new MarkdownSource(this.source, this.path, contents, this.options)]
}
}
export class MarkdownSource extends BaseSource {
type = 'markdown' as const
- constructor(source: string, path: string, public contents: string) {
+ constructor(
+ source: string,
+ path: string,
+ public contents: string,
+ public options?: { yaml?: boolean }
+ ) {
super(source, path)
}
process() {
- const { checksum, meta, sections } = processMdxForSearch(this.contents)
+ const { checksum, meta, sections } = processMdxForSearch(this.contents, this.options)
this.checksum = checksum
this.meta = meta
diff --git a/apps/docs/scripts/search/sources/partner-integrations.ts b/apps/docs/scripts/search/sources/partner-integrations.ts
new file mode 100644
index 00000000000..e675a1149a6
--- /dev/null
+++ b/apps/docs/scripts/search/sources/partner-integrations.ts
@@ -0,0 +1,86 @@
+import { type SupabaseClient, createClient } from '@supabase/supabase-js'
+import { upperFirst } from 'lodash'
+
+import { BaseLoader, BaseSource } from './base'
+import { processMdxForSearch } from './markdown'
+
+type PartnerData = {
+ slug: string // The partner slug corresponding to the last part of the URL
+ overview: string // The Markdown content for indexing
+}
+
+let supabaseClient: SupabaseClient
+function getSupabaseClient() {
+ if (!supabaseClient) {
+ supabaseClient = createClient(
+ process.env.NEXT_PUBLIC_MISC_USE_URL!,
+ process.env.NEXT_PUBLIC_MISC_USE_ANON_KEY!
+ )
+ return supabaseClient
+ }
+}
+
+export async function fetchPartners() {
+ const supabase = getSupabaseClient()
+ const { data: partners } = await supabase
+ .from('partners')
+ .select('slug,overview')
+ .eq('approved', true)
+ // We want to show technology integrations, not agencies, in search
+ .neq('type', 'expert')
+ return partners
+}
+
+export class IntegrationLoader extends BaseLoader {
+ type = 'partner-integration' as const
+
+ constructor(
+ source: string,
+ public partnerData: PartnerData
+ ) {
+ const relPath = `/partners/integrations/${partnerData.slug}`
+ super(source, relPath)
+ }
+
+ async load() {
+ return [new IntegrationSource(this.source, this.path, this.partnerData)]
+ }
+}
+
+export class IntegrationSource extends BaseSource {
+ type = 'partner-integration' as const
+
+ constructor(
+ source: string,
+ path: string,
+ public partnerData: PartnerData
+ ) {
+ super(source, path)
+ }
+
+ process() {
+ const { checksum, sections } = processMdxForSearch(this.partnerData.overview)
+ const meta = {
+ title: upperFirst(this.partnerData.slug),
+ subtitle: 'Integration',
+ }
+
+ this.checksum = checksum
+ this.meta = meta
+ this.sections = sections
+
+ return {
+ checksum,
+ meta,
+ ragIgnore: true,
+ sections,
+ }
+ }
+
+ extractIndexedContent() {
+ const sections = this.sections ?? []
+ const result =
+ (this.meta?.title ?? '') + '\n\n' + sections.map(({ content }) => content).join('\n\n')
+ return result
+ }
+}
diff --git a/apps/docs/spec/cli_v1_commands.yaml b/apps/docs/spec/cli_v1_commands.yaml
index e9bcaddbf65..89450174217 100644
--- a/apps/docs/spec/cli_v1_commands.yaml
+++ b/apps/docs/spec/cli_v1_commands.yaml
@@ -1,7 +1,7 @@
clispec: '001'
info:
id: cli
- version: 1.131.5
+ version: 1.142.1
title: Supabase CLI
language: sh
source: https://github.com/supabase/cli
@@ -150,6 +150,15 @@ commands:
name: --project-ref
description: Project ref of the Supabase project.
default_value: ''
+ - id: supabase-unlink
+ title: supabase unlink
+ summary: Unlink a Supabase project
+ tags:
+ - local-dev
+ links: []
+ usage: supabase unlink
+ subcommands: []
+ flags: []
- id: supabase-test
title: supabase test
summary: Run tests on local Supabase containers
@@ -287,6 +296,18 @@ commands:
usage: supabase storage cp [flags]
subcommands: []
flags:
+ - id: cache-control
+ name: --cache-control
+ description: Custom Cache-Control header for HTTP upload.
+ default_value: max-age=3600
+ - id: content-type
+ name: --content-type
+ description: Custom Content-Type header for HTTP upload.
+ default_value: auto-detect
+ - id: jobs
+ name: -j, --jobs
+ description: Maximum number of parallel jobs.
+ default_value: '1'
- id: recursive
name: -r, --recursive
description: Recursively copy a directory.
@@ -1386,7 +1407,7 @@ commands:
Repaired migration history: 20230222032233 => applied
tags: []
links: []
- usage: supabase migration repair [flags]
+ usage: supabase migration repair [version] ... [flags]
subcommands: []
flags:
- id: db-url
@@ -2362,6 +2383,11 @@ commands:
name: --local
description: Generate types from the local dev database.
default_value: 'false'
+ - id: postgrest-v9-compat
+ name: --postgrest-v9-compat
+ description: |
+ Generate types compatible with PostgREST v9 and below. Only use together with --db-url.
+ default_value: 'false'
- id: project-id
name: --project-id
description: Generate types from a project ID.
@@ -2960,6 +2986,10 @@ commands:
name: --dry-run
description: Prints the pg_dump script that would be executed.
default_value: 'false'
+ - id: exclude
+ name: -x, --exclude
+ description: List of schema.tables to exclude from data-only dump.
+ default_value: '[]'
- id: file
name: -f, --file
description: File path to save the dumped contents.
diff --git a/apps/docs/spec/parser/package.json b/apps/docs/spec/parser/package.json
index 2129f457569..963b826eb15 100644
--- a/apps/docs/spec/parser/package.json
+++ b/apps/docs/spec/parser/package.json
@@ -25,7 +25,7 @@
"@types/lodash": "^4.14.202",
"json-stringify-safe": "^5.0.1",
"lodash": "^4.17.21",
- "prettier": "^2.8.8",
+ "prettier": "^4.0.0-alpha.8",
"tsx": "^4.7.0"
},
"prettier": {
diff --git a/apps/docs/spec/supabase_dart_v1.yml b/apps/docs/spec/supabase_dart_v1.yml
index ff5861f284f..56b84f652e0 100644
--- a/apps/docs/spec/supabase_dart_v1.yml
+++ b/apps/docs/spec/supabase_dart_v1.yml
@@ -381,7 +381,7 @@ functions:
notes: |
- Resends a signup confirmation, email change or phone change email to the user.
- Passwordless sign-ins can be resent by calling the `signInWithOtp()` method again.
- - Password recovery emails can be resent by calling the `resetPassswordForEmail()` method again.
+ - Password recovery emails can be resent by calling the `resetPasswordForEmail()` method again.
- This method will only resend an email or phone OTP to the user if there was an initial signup, email change or phone change request being made.
examples:
- id: resend-email-signup-confirmation
diff --git a/apps/docs/spec/supabase_dart_v2.yml b/apps/docs/spec/supabase_dart_v2.yml
index 84b48a1bfdd..31004c3cc7d 100644
--- a/apps/docs/spec/supabase_dart_v2.yml
+++ b/apps/docs/spec/supabase_dart_v2.yml
@@ -274,7 +274,7 @@ functions:
isSpotlight: true
code: |
```dart
- await supabase.auth.signInWithOAuth(Provider.github);
+ await supabase.auth.signInWithOAuth(OAuthProvider.github);
```
- id: sign-in-using-a-third-party-provider-with-redirect
name: With `redirectTo`
@@ -284,7 +284,7 @@ functions:
code: |
```dart
await supabase.auth.signInWithOAuth(
- Provider.github,
+ OAuthProvider.github,
redirectTo: kIsWeb ? null : 'io.supabase.flutter://reset-callback/',
);
```
@@ -296,7 +296,7 @@ functions:
code: |
```dart
await supabase.auth.signInWithOAuth(
- Provider.github,
+ OAuthProvider.github,
scopes: 'repo gist notifications'
);
...
@@ -477,7 +477,7 @@ functions:
notes: |
- Resends a signup confirmation, email change, or phone change email to the user.
- Passwordless sign-ins can be resent by calling the `signInWithOtp()` method again.
- - Password recovery emails can be resent by calling the `resetPassswordForEmail()` method again.
+ - Password recovery emails can be resent by calling the `resetPasswordForEmail()` method again.
- This method only resend an email or phone OTP to the user if an initial signup, email change, or phone change request was made.
examples:
- id: resend-email-signup-confirmation
@@ -945,12 +945,13 @@ functions:
- id: query-the-same-referenced-table-multiple-times
name: Query the same referenced table multiple times
description: |
- Sometimes you will need to query the same referenced table twice.
- In this case, you can use the name of the joined column to identify
- which join you intend to use. For convenience, you can also give an
- alias for each column. For example, if we had a shop of products,
- and we wanted to get the supplier and the purchaser at the same time
- (both in the users) table:
+ Sometimes you will need to query the same referenced table twice. In
+ this case, you can use the name of the joined column to identify which
+ join you intend to use. For convenience, you can also give an alias
+ for each column. This example queries a `messages` table that is
+ joined to a `users` table via `sender_id` and `receiver_id`. Since you
+ want the `name` for both sender and receiver, you can alias the
+ columns as `to` and `from`.
code: |
```dart
final data = await supabase
@@ -1920,7 +1921,7 @@ functions:
description: |
Filters allow you to only return rows that match certain conditions.
- Filters can be used on `select()`, `update()`, and `delete()` queries.
+ Filters can be used on `select()`, `update()`, `upsert()`, and `delete()` queries.
If a Database function returns a table response, you can also apply filters.
examples:
@@ -1945,9 +1946,7 @@ functions:
- id: chaining-filters
name: Chaining Filters
description: |
- Filters must be applied after any of `select()`, `update()`, `upsert()`,
- `delete()`, and `rpc()` and before
- [modifiers](/docs/reference/dart/using-modifiers).
+ Filters can be chained together to produce advanced queries as shown in the example code.
code: |
```dart
final data = await supabase
@@ -1970,16 +1969,14 @@ functions:
.from('cities')
.select('name, country_id');
- if (filterByName != null) { query = query.eq('name', filterByName); }
- if (filterPopLow != null) { query = query.gte('population', filterPopLow); }
- if (filterPopHigh != null) { query = query.lt('population', filterPopHigh); }
+ if (filterByName != null) query = query.eq('name', filterByName);
+ if (filterPopLow != null) query = query.gte('population', filterPopLow);
+ if (filterPopHigh != null) query = query.lt('population', filterPopHigh);
final data = await query;
```
- id: filter-by-value-within-json-column
name: Filter by values within a JSON column
- description: |
- Filters can be built up one step at a time and then executed. For example:
data:
sql: |
```sql
@@ -1998,19 +1995,15 @@ functions:
```
response: |
```json
- {
- "data": [
- {
- "id": 1,
- "name": "Michael",
- "address": {
- "postcode": 90210
- }
+ [
+ {
+ "id": 1,
+ "name": "Michael",
+ "address": {
+ "postcode": 90210
}
- ],
- "status": 200,
- "statusText": "OK"
- }
+ }
+ ]
```
code: |
```dart
@@ -2056,23 +2049,22 @@ functions:
(1, 2, 'Bali'),
(2, 1, 'Munich');
```
- response: |
+ response: |
```json
- {
- "data": [
- {
- "name": "Indonesia",
- "cities": [
- {
- "name": "Bali"
- }
- ]
- }
- ],
- "status": 200,
- "statusText": "OK"
- }
+ [
+ {
+ "name": "Indonesia",
+ "cities": [
+ {
+ "name": "Bali"
+ }
+ ]
+ }
+ ]
```
+ description: |
+ You can filter on referenced tables in your `select()` query using dot
+ notation.
- id: or
title: or()
description: |
@@ -2105,6 +2097,52 @@ functions:
.select('name, country_id')
.or('id.gt.20,and(name.eq.New Zealand,name.eq.France)');
```
+ - id: use-or-on-referenced-tables
+ name: Use `or` on referenced tables
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select('name, cities!inner(name)')
+ .or('country_id.eq.1,name.eq.Beijing', referencedTable: 'cities');
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+ create table
+ cities (
+ id int8 primary key,
+ country_id int8 not null references countries,
+ name text
+ );
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Germany'),
+ (2, 'Indonesia');
+ insert into
+ cities (id, country_id, name)
+ values
+ (1, 2, 'Bali'),
+ (2, 1, 'Munich');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "name": "Germany",
+ "cities": [
+ {
+ "name": "Munich"
+ }
+ ]
+ }
+ ]
+ ```
+ hideCodeBlock: true
- id: not
title: not()
@@ -2166,84 +2204,75 @@ functions:
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .match({ 'id': 2, 'name': 'Albania' });
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "name": "Albania"
+ }
+ ]
+ ```
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .match({'name': 'Beijing', 'country_id': 156});
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .match({'name': 'Beijing', 'country_id': 156});
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .match({'name': 'Beijing', 'country_id': 156});
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .match({'name': 'Beijing', 'country_id': 156});
- ```
- id: eq
title: eq()
description: |
- Finds all rows whose value on the stated `column` exactly matches the specified `value`.
+ Match only rows where `column` is equal to `value`.
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .eq('name', 'Albania');
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 2,
+ "name": "Albania"
+ }
+ ]
+ ```
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .eq('name', 'The shire');
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .eq('name', 'San Francisco');
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .eq('name', 'Mordor');
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .eq('name', 'San Francisco');
- ```
- id: neq
title: neq()
@@ -2252,41 +2281,41 @@ functions:
examples:
- id: with-select
name: With `select()`
- isSpotlight: true
code: |
```dart
final data = await supabase
- .from('cities')
+ .from('countries')
.select('name, country_id')
- .neq('name', 'The shire');
+ .neq('name', 'Albania');
```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .neq('name', 'San Francisco');
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .neq('name', 'Mordor');
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .neq('name', 'Lagos');
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "name": "Afghanistan"
+ },
+ {
+ "id": 3,
+ "name": "Algeria"
+ }
+ ]
```
+ hideCodeBlock: true
+ isSpotlight: true
- id: gt
title: gt()
@@ -2295,41 +2324,37 @@ functions:
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .gt('id', 2);
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 3,
+ "name": "Algeria"
+ }
+ ]
+ ```
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .gt('country_id', 250);
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .gt('country_id', 250);
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .gt('country_id', 250);
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .gt('country_id', 250);
- ```
- id: gte
title: gte()
@@ -2338,41 +2363,41 @@ functions:
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .gte('id', 2);
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 2,
+ "name": "Albania"
+ },
+ {
+ "id": 3,
+ "name": "Algeria"
+ }
+ ]
+ ```
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .gte('country_id', 250);
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .gte('country_id', 250);
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .gte('country_id', 250);
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .gte('country_id', 250);
- ```
- id: lt
title: lt()
@@ -2381,85 +2406,80 @@ functions:
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .lt('id', 2);
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "name": "Afghanistan"
+ }
+ ]
+ ```
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .lt('country_id', 250);
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .lt('country_id', 250);
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .lt('country_id', 250);
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .lt('country_id', 250);
- ```
- id: lte
title: lte()
description: |
Finds all rows whose value on the stated `column` is less than or equal to the specified `value`.
- $ref: '@supabase/postgrest-js.PostgrestFilterBuilder.lte'
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .lte('id', 2);
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "name": "Afghanistan"
+ },
+ {
+ "id": 2,
+ "name": "Albania"
+ }
+ ]
+ ```
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .lte('country_id', 250);
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .lte('country_id', 250);
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .lte('country_id', 250);
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .lte('country_id', 250);
- ```
- id: like
title: like()
@@ -2469,41 +2489,37 @@ functions:
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .like('name', '%Alba%');
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 2,
+ "name": "Albania"
+ }
+ ]
+ ```
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .like('name', '%la%');
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .like('name', '%la%');
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .like('name', '%la%');
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .like('name', '%la%');
- ```
- id: ilike
title: ilike()
@@ -2512,84 +2528,81 @@ functions:
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .ilike('name', '%alba%');
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 2,
+ "name": "Albania"
+ }
+ ]
+ ```
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .ilike('name', '%la%');
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .ilike('name', '%la%');
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .ilike('name', '%la%');
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .ilike('name', '%la%');
- ```
- id: is
title: isFilter()
description: |
A check for exact equality (null, true, false), finds all rows whose value on the stated `column` exactly match the specified `value`.
examples:
- - id: with-select
- name: With `select()`
+ - id: checking-nullness
+ name: Checking for nullness, true or false
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .isFilter('name', null);
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'null'),
+ (2, null);
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "name": "null"
+ }
+ ]
+ ```
+ description: |
+ Using the `eq()` filter doesn't work when filtering for `null`.
+
+ Instead, you need to use `isFilter()`.
+
+ `isFilter()` is equivalent to `is()` in SDKs for other languages. It's named `isFilter()` in Dart to avoid a conflict with the `is` keyword in Dart.
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .isFilter('name', null);
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .isFilter('name', null);
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .isFilter('name', null);
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .isFilter('name', null);
- ```
- id: in
title: inFilter()
@@ -2598,246 +2611,411 @@ functions:
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('countries')
+ .select()
+ .inFilter('name', ['Albania', 'Algeria']);
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Afghanistan'),
+ (2, 'Albania'),
+ (3, 'Algeria');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 2,
+ "name": "Albania"
+ },
+ {
+ "id": 3,
+ "name": "Algeria"
+ }
+ ]
+ ```
+ description: |
+ `inFilter()` is equivalent to `in()` in SDKs for other languages. It's named `inFilter()` in Dart to avoid a conflict with the `in` keyword in Dart.
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .select('name, country_id')
- .inFilter('name', ['Rio de Janeiro', 'San Francisco']);
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .update({ 'name': 'Mordor' })
- .inFilter('name', ['Rio de Janeiro', 'San Francisco']);
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('cities')
- .delete()
- .inFilter('name', ['Rio de Janeiro', 'San Francisco']);
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_cities')
- .inFilter('name', ['Rio de Janeiro', 'San Francisco']);
- ```
- id: contains
title: contains()
examples:
- - id: with-select
- name: With `select()`
+ - id: on-array-columns
+ name: On array columns
isSpotlight: true
code: |
```dart
final data = await supabase
- .from('countries')
- .select('name, id, main_exports')
- .contains('main_exports', ['oil']);
+ .from('issues')
+ .select()
+ .contains('tags', ['is:open', 'priority:low']);
```
- - id: with-update
- name: With `update()`
+ data:
+ sql: |
+ ```sql
+ create table
+ issues (
+ id int8 primary key,
+ title text,
+ tags text[]
+ );
+
+ insert into
+ issues (id, title, tags)
+ values
+ (1, 'Cache invalidation is not working', array['is:open', 'severity:high', 'priority:low']),
+ (2, 'Use better names', array['is:open', 'severity:low', 'priority:medium']);
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "title": "Cache invalidation is not working",
+ "tags": ["is:open", "severity:high", "priority:low"]
+ }
+ ]
+ ```
+ hideCodeBlock: true
+ - id: on-range-columns
+ name: On range columns
code: |
```dart
final data = await supabase
- .from('countries')
- .update({ 'name': 'Mordor' })
- .contains('main_exports', ['oil']);
+ .from('reservations')
+ .select()
+ .contains('during', '[2000-01-01 13:00, 2000-01-01 13:30)');
```
- - id: with-delete
- name: With `delete()`
+ data:
+ sql: |
+ ```sql
+ create table
+ reservations (
+ id int8 primary key,
+ room_name text,
+ during tsrange
+ );
+
+ insert into
+ reservations (id, room_name, during)
+ values
+ (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
+ (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "room_name": "Emerald",
+ "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
+ }
+ ]
+ ```
+ description: |
+ Postgres supports a number of [range
+ types](https://www.postgresql.org/docs/current/rangetypes.html). You
+ can filter on range columns using the string representation of range
+ values.
+ hideCodeBlock: true
+ - id: on-jsonb-columns
+ name: On `jsonb` columns
code: |
```dart
final data = await supabase
- .from('countries')
- .delete()
- .contains('main_exports', ['oil']);
+ .from('users')
+ .select('name')
+ .contains('address', { 'street': 'Melrose Place' });
```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_countries')
- .contains('main_exports', ['oil']);
+ data:
+ sql: |
+ ```sql
+ create table
+ users (
+ id int8 primary key,
+ name text,
+ address jsonb
+ );
+
+ insert into
+ users (id, name, address)
+ values
+ (1, 'Michael', '{ "postcode": 90210, "street": "Melrose Place" }'),
+ (2, 'Jane', '{"postcode": 90210}');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "name": "Michael"
+ }
+ ]
```
+ hideCodeBlock: true
- id: contained-by
title: containedBy()
examples:
- - id: with-select
- name: With `select()`
+ - id: on-array-columns
+ name: On array columns
isSpotlight: true
code: |
```dart
final data = await supabase
- .from('countries')
- .select('name, id, main_exports')
- .containedBy('main_exports', ['cars', 'food', 'machine']);
+ .from('classes')
+ .select('name')
+ .containedBy('days', ['monday', 'tuesday', 'wednesday', 'friday']);
```
- - id: with-update
- name: With `update()`
+ data:
+ sql: |
+ ```sql
+ create table
+ classes (
+ id int8 primary key,
+ name text,
+ days text[]
+ );
+
+ insert into
+ classes (id, name, days)
+ values
+ (1, 'Chemistry', array['monday', 'friday']),
+ (2, 'History', array['monday', 'wednesday', 'thursday']);
+ ```
+ response: |
+ ```json
+ [
+ {
+ "name": "Chemistry"
+ }
+ ]
+ ```
+ hideCodeBlock: true
+ - id: on-range-columns
+ name: On range columns
code: |
```dart
final data = await supabase
- .from('countries')
- .update({ 'name': 'Mordor' })
- .containedBy('main_exports', ['orks', 'surveillance', 'evil']);
+ .from('reservations')
+ .select()
+ .containedBy('during', '[2000-01-01 00:00, 2000-01-01 23:59)');
```
- - id: with-delete
- name: With `delete()`
+ data:
+ sql: |
+ ```sql
+ create table
+ reservations (
+ id int8 primary key,
+ room_name text,
+ during tsrange
+ );
+
+ insert into
+ reservations (id, room_name, during)
+ values
+ (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
+ (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "room_name": "Emerald",
+ "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
+ }
+ ]
+ ```
+ description: |
+ Postgres supports a number of [range
+ types](https://www.postgresql.org/docs/current/rangetypes.html). You
+ can filter on range columns using the string representation of range
+ values.
+ hideCodeBlock: true
+ - id: on-jsonb-columns
+ name: On `jsonb` columns
code: |
```dart
final data = await supabase
- .from('countries')
- .delete()
- .containedBy('main_exports', ['cars', 'food', 'machine']);
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_countries')
- .containedBy('main_exports', ['cars', 'food', 'machine']);
+ .from('users')
+ .select('name')
+ .containedBy('address', {'postcode': 90210});
```
+ data:
+ sql: |
+ ```sql
+ create table
+ users (
+ id int8 primary key,
+ name text,
+ address jsonb
+ );
+
+ insert into
+ users (id, name, address)
+ values
+ (1, 'Michael', '{ "postcode": 90210, "street": "Melrose Place" }'),
+ (2, 'Jane', '{"postcode": 90210}');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "name": "Jane"
+ }
+ ]
+ ```
+ hideCodeBlock: true
- id: range-lt
title: rangeLt()
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('reservations')
+ .select()
+ .rangeLt('during', '[2000-01-01 15:00, 2000-01-01 16:00)');
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ reservations (
+ id int8 primary key,
+ room_name text,
+ during tsrange
+ );
+
+ insert into
+ reservations (id, room_name, during)
+ values
+ (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
+ (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "room_name": "Emerald",
+ "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
+ }
+ ]
+ ```
+ description: |
+ Postgres supports a number of [range
+ types](https://www.postgresql.org/docs/current/rangetypes.html). You
+ can filter on range columns using the string representation of range
+ values.
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .select('name, id, population_range_millions')
- .rangeLt('population_range_millions', '[150, 250]');
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .update({ 'name': 'Mordor' })
- .rangeLt('population_range_millions', '[150, 250]');
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .delete()
- .rangeLt('population_range_millions', '[150, 250]');
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_countries')
- .rangeLt('population_range_millions', '[150, 250]');
- ```
- id: range-gt
title: rangeGt()
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('reservations')
+ .select()
+ .rangeGt('during', '[2000-01-02 08:00, 2000-01-02 09:00)');
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ reservations (
+ id int8 primary key,
+ room_name text,
+ during tsrange
+ );
+
+ insert into
+ reservations (id, room_name, during)
+ values
+ (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
+ (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 2,
+ "room_name": "Topaz",
+ "during": "[\"2000-01-02 09:00:00\",\"2000-01-02 10:00:00\")"
+ }
+ ]
+ ```
+ description: |
+ Postgres supports a number of [range
+ types](https://www.postgresql.org/docs/current/rangetypes.html). You
+ can filter on range columns using the string representation of range
+ values.
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .select('name, id, population_range_millions')
- .rangeGt('population_range_millions', '[150, 250]');
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .update({ 'name': 'Mordor' })
- .rangeGt('population_range_millions', '[150, 250]');
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .delete()
- .rangeGt('population_range_millions', '[150, 250]');
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_countries')
- .rangeGt('population_range_millions', '[150, 250]');
- ```
- id: range-gte
title: rangeGte()
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('reservations')
+ .select()
+ .rangeGte('during', '[2000-01-02 08:30, 2000-01-02 09:30)');
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ reservations (
+ id int8 primary key,
+ room_name text,
+ during tsrange
+ );
+
+ insert into
+ reservations (id, room_name, during)
+ values
+ (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
+ (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 2,
+ "room_name": "Topaz",
+ "during": "[\"2000-01-02 09:00:00\",\"2000-01-02 10:00:00\")"
+ }
+ ]
+ ```
+ description: |
+ Postgres supports a number of [range
+ types](https://www.postgresql.org/docs/current/rangetypes.html). You
+ can filter on range columns using the string representation of range
+ values.
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .select('name, id, population_range_millions')
- .rangeGte('population_range_millions', '[150, 250]');
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .update({ 'name': 'Mordor' })
- .rangeGte('population_range_millions', '[150, 250]');
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .delete()
- .rangeGte('population_range_millions', '[150, 250]');
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_countries')
- .rangeGte('population_range_millions', '[150, 250]');
- ```
- id: range-lte
title: rangeLte()
@@ -2845,123 +3023,172 @@ functions:
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('reservations')
+ .select()
+ .rangeLte('during', '[2000-01-01 15:00, 2000-01-01 16:00)');
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ reservations (
+ id int8 primary key,
+ room_name text,
+ during tsrange
+ );
+
+ insert into
+ reservations (id, room_name, during)
+ values
+ (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
+ (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "room_name": "Emerald",
+ "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
+ }
+ ]
+ ```
+ description: |
+ Postgres supports a number of [range
+ types](https://www.postgresql.org/docs/current/rangetypes.html). You
+ can filter on range columns using the string representation of range
+ values.
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .select('name, id, population_range_millions')
- .rangeLte('population_range_millions', '[150, 250]');
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .update({ 'name': 'Mordor' })
- .rangeLte('population_range_millions', '[150, 250]');
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .delete()
- .rangeLte('population_range_millions', '[150, 250]');
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_countries')
- .rangeLte('population_range_millions', [150, 250]);
- ```
- id: range-adjacent
title: rangeAdjacent()
examples:
- id: with-select
name: With `select()`
+ code: |
+ ```dart
+ final data = await supabase
+ .from('reservations')
+ .select()
+ .rangeAdjacent('during', '[2000-01-01 12:00, 2000-01-01 13:00)');
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ reservations (
+ id int8 primary key,
+ room_name text,
+ during tsrange
+ );
+
+ insert into
+ reservations (id, room_name, during)
+ values
+ (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
+ (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "room_name": "Emerald",
+ "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
+ }
+ ]
+ ```
+ description: |
+ Postgres supports a number of [range
+ types](https://www.postgresql.org/docs/current/rangetypes.html). You
+ can filter on range columns using the string representation of range
+ values.
+ hideCodeBlock: true
isSpotlight: true
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .select('name, id, population_range_millions')
- .rangeAdjacent('population_range_millions', '[70, 185]');
- ```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .update({ 'name': 'Mordor' })
- .rangeAdjacent('population_range_millions', '[70, 185]');
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .delete()
- .rangeAdjacent('population_range_millions', '[70, 185]');
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_countries')
- .rangeAdjacent('population_range_millions', '[70, 185]');
- ```
- id: overlaps
title: overlaps()
examples:
- - id: with-select
- name: With `select()`
+ - id: on-array-columns
+ name: On array columns
+ code: |
+ ```dart
+ final data = await supabase
+ .from('issues')
+ .select('title')
+ .overlaps('tags', ['is:closed', 'severity:high']);
+ ```
+ data:
+ sql: |
+ ```sql
+ create table
+ issues (
+ id int8 primary key,
+ title text,
+ tags text[]
+ );
+
+ insert into
+ issues (id, title, tags)
+ values
+ (1, 'Cache invalidation is not working', array['is:open', 'severity:high', 'priority:low']),
+ (2, 'Use better names', array['is:open', 'severity:low', 'priority:medium']);
+ ```
+ response: |
+ ```json
+ [
+ {
+ "title": "Cache invalidation is not working"
+ }
+ ]
+ ```
+ hideCodeBlock: true
isSpotlight: true
+ - id: on-range-columns
+ name: On range columns
code: |
```dart
final data = await supabase
- .from('countries')
- .select('name, id, main_exports')
- .overlaps('main_exports', ['computers', 'minerals']);
+ .from('reservations')
+ .select()
+ .overlaps('during', '[2000-01-01 12:45, 2000-01-01 13:15)');
```
- - id: with-update
- name: With `update()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .update({ 'name': 'Mordor' })
- .overlaps('main_exports', ['computers', 'minerals']);
- ```
- - id: with-delete
- name: With `delete()`
- code: |
- ```dart
- final data = await supabase
- .from('countries')
- .delete()
- .overlaps('main_exports', ['computers', 'minerals']);
- ```
- - id: with-rpc
- name: With `rpc()`
- code: |
- ```dart
- // Only valid if the Stored Procedure returns a table type.
- final data = await supabase
- .rpc('echo_all_countries')
- .overlaps('main_exports', ['computers', 'minerals']);
+ data:
+ sql: |
+ ```sql
+ create table
+ reservations (
+ id int8 primary key,
+ room_name text,
+ during tsrange
+ );
+
+ insert into
+ reservations (id, room_name, during)
+ values
+ (1, 'Emerald', '[2000-01-01 13:00, 2000-01-01 15:00)'),
+ (2, 'Topaz', '[2000-01-02 09:00, 2000-01-02 10:00)');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "id": 1,
+ "room_name": "Emerald",
+ "during": "[\"2000-01-01 13:00:00\",\"2000-01-01 15:00:00\")"
+ }
+ ]
```
+ description: |
+ Postgres supports a number of [range
+ types](https://www.postgresql.org/docs/current/rangetypes.html). You
+ can filter on range columns using the string representation of range
+ values.
+ hideCodeBlock: true
- id: text-search
title: textSearch()
@@ -3078,12 +3305,49 @@ functions:
.rpc('echo_all_cities')
.filter('name', 'in', '("Paris","Tokyo")');
```
- - id: filter-embedded-resources
- name: Filter embedded resources
+ - id: on-a-referenced-table
+ name: On a referenced table
code: |
```dart
final data = await supabase
- .from('cities')
- .select('name, countries ( name )')
- .filter('countries.name', 'in', '("France","Japan")');
+ .from('countries')
+ .select('name, countries!inner( name )')
+ .filter('cities.name', 'eq', 'Bali');
```
+ data:
+ sql: |
+ ```sql
+ create table
+ countries (id int8 primary key, name text);
+ create table
+ cities (
+ id int8 primary key,
+ country_id int8 not null references countries,
+ name text
+ );
+
+ insert into
+ countries (id, name)
+ values
+ (1, 'Germany'),
+ (2, 'Indonesia');
+ insert into
+ cities (id, country_id, name)
+ values
+ (1, 2, 'Bali'),
+ (2, 1, 'Munich');
+ ```
+ response: |
+ ```json
+ [
+ {
+ "name": "Indonesia",
+ "cities": [
+ {
+ "name": "Bali"
+ }
+ ]
+ }
+ ]
+ ```
+ hideCodeBlock: true
diff --git a/apps/docs/spec/supabase_js_v2.yml b/apps/docs/spec/supabase_js_v2.yml
index ea0e1db6ba5..674c329b3d4 100644
--- a/apps/docs/spec/supabase_js_v2.yml
+++ b/apps/docs/spec/supabase_js_v2.yml
@@ -239,10 +239,8 @@ functions:
- To fetch the currently logged-in user, refer to [`getUser()`](/docs/reference/javascript/auth-getuser).
examples:
- id: sign-up
- name: Sign up
+ name: Sign up with an email and password
isSpotlight: true
- description: |
- If the password is larger than 72 chars, it will be truncated to the first 72 chars.
code: |
```js
const { data, error } = await supabase.auth.signUp({
@@ -250,6 +248,34 @@ functions:
password: 'example-password',
})
```
+ - id: sign-up-phone
+ name: Sign up with a phone number and password (SMS)
+ isSpotlight: true
+ code: |
+ ```js
+ const { data, error } = await supabase.auth.signUp({
+ phone: '123456789',
+ password: 'example-password',
+ options: {
+ channel: 'sms'
+ }
+ })
+ ```
+ - id: sign-up-phone-whatsapp
+ name: Sign up with a phone number and password (whatsapp)
+ isSpotlight: true
+ description: |
+ The user will be sent a WhatsApp message which contains a OTP. By default, a given user can only request a OTP once every 60 seconds. Note that a user will need to have a valid WhatsApp account that is linked to Twilio in order to use this feature.
+ code: |
+ ```js
+ const { data, error } = await supabase.auth.signUp({
+ phone: '123456789',
+ password: 'example-password',
+ options: {
+ channel: 'whatsapp'
+ }
+ })
+ ```
- id: sign-up-with-additional-user-metadata
name: Sign up with additional user metadata
isSpotlight: false
@@ -338,7 +364,7 @@ functions:
isSpotlight: true
code: |
```js
- const subscription = supabase.auth.onAuthStateChange((event, session) => {
+ const { data } = supabase.auth.onAuthStateChange((event, session) => {
console.log(event, session)
if (event === 'INITIAL_SESSION') {
@@ -357,7 +383,7 @@ functions:
})
// call unsubscribe to remove the callback
- subscription.unsubscribe()
+ data.subscription.unsubscribe()
```
- id: listen-to-sign-out
name: Listen to sign out
@@ -505,12 +531,6 @@ functions:
phone: '+13334445555',
password: 'some-password',
})
-
- // After receiving a SMS with a OTP.
- const { data, error } = await supabase.auth.verifyOtp({
- phone: '+13334445555',
- token: '123456',
- })
```
- id: sign-in-with-otp
title: 'signInWithOtp()'
@@ -836,16 +856,28 @@ functions:
isSpotlight: false
code: |
```js
- const { data, error } = await supabase.auth.updateUser({email: 'new@email.com'})
+ const { data, error } = await supabase.auth.updateUser({
+ email: 'new@email.com'
+ })
+ ```
+ - id: update-the-phone-for-an-authenticated-user
+ name: Update the phone number for an authenticated user
+ description: Sends a one-time password (OTP) to the new phone number.
+ isSpotlight: false
+ code: |
+ ```js
+ const { data, error } = await supabase.auth.updateUser({
+ phone: '123456789'
+ })
```
- id: update-the-password-for-an-authenticated-user
name: Update the password for an authenticated user
isSpotlight: false
- description: |
- If the password is larger than 72 chars, it will be truncated to the first 72 chars.
code: |
```js
- const { data, error } = await supabase.auth.updateUser({password: 'new password'})
+ const { data, error } = await supabase.auth.updateUser({
+ password: 'new password'
+ })
```
- id: update-the-users-metadata
name: Update the user's metadata
@@ -944,7 +976,7 @@ functions:
notes: |
- Resends a signup confirmation, email change or phone change email to the user.
- Passwordless sign-ins can be resent by calling the `signInWithOtp()` method again.
- - Password recovery emails can be resent by calling the `resetPassswordForEmail()` method again.
+ - Password recovery emails can be resent by calling the `resetPasswordForEmail()` method again.
- This method will only resend an email or phone OTP to the user if there was an initial signup, email change or phone change request being made.
- You can specify a redirect url when you resend an email link using the `emailRedirectTo` option.
examples:
@@ -1007,7 +1039,7 @@ functions:
isSpotlight: true
code: |
```js
- const { data, error } = supabase.auth.setSession({
+ const { data, error } = await supabase.auth.setSession({
access_token,
refresh_token
})
@@ -1236,8 +1268,6 @@ functions:
- id: create-a-new-user-with-custom-user-metadata
name: With custom user metadata
isSpotlight: true
- description: |
- If the password is larger than 72 chars, it will be truncated to the first 72 chars.
code: |
```js
const { data, error } = await supabase.auth.admin.createUser({
@@ -4055,7 +4085,7 @@ functions:
name
)
`)
- .or('country_id.eq.1,name.eq.Beijing', { referenceTable: 'cities' })
+ .or('country_id.eq.1,name.eq.Beijing', { referencedTable: 'cities' })
```
data:
sql: |
diff --git a/apps/docs/spec/supabase_kt_v2.yml b/apps/docs/spec/supabase_kt_v2.yml
index dfd761dc4e2..00a385f9bad 100644
--- a/apps/docs/spec/supabase_kt_v2.yml
+++ b/apps/docs/spec/supabase_kt_v2.yml
@@ -2528,6 +2528,7 @@ functions:
- Requires either an email or phone number.
- This method is used for passwordless sign-ins where a OTP is sent to the user's email or phone number.
- If the user doesn't exist, `signInWith(OTP)` will signup the user instead. To restrict this behavior, you can set `createUser` to `false`.
+ - The method `signUpWith(OTP)` does the exact same thing as `signInWith(OTP)`, so it doesn't matter which one you use.
- If you're using an email, you can configure whether you want the user to receive a magiclink or a OTP.
- If you're using phone, you can configure whether you want the user to receive a OTP.
- The magic link's destination URL is determined by the [`SITE_URL`](/docs/reference/auth/config#site_url).
@@ -2677,22 +2678,24 @@ functions:
title: 'Verify OTPs'
$ref: '@supabase/gotrue-js.GoTrueClient.verifyOtp'
notes: |
- Log in a user given a User supplied OTP received via mobile.
+ - Verifying an OTP is done through either `verifyPhoneOtp` or `verifyEmailOtp`.
+ - The verification type used should be determined based on the corresponding auth method called before using `verifyPhoneOtp`/`verifyEmailOtp` to sign up / sign-in a user.
examples:
- id: verify-email-otp(otp)
name: Verify an Email OTP
isSpotlight: true
code: |
```kotlin
- supabase.auth.verifyEmailOtp(type = OtpType.Email.INVITE, email = "example@email.com", token = "token")
+ supabase.auth.verifyEmailOtp(type = OtpType.Email.EMAIL, email = "example@email.com", token = "token")
```
description: |
Available types are:
- - `OtpType.Email.MAGIC_LINK`
- - `OtpType.Email.SIGNUP`
+ - `OtpType.Email.MAGIC_LINK` (deprecated)
+ - `OtpType.Email.SIGNUP` (deprecated)
- `OtpType.Email.INVITE`
- `OtpType.Email.RECOVERY`
- `OtpType.Email.EMAIL_CHANGE`
+ - `OtpType.Email.EMAIL`
- id: verify-phone-otp(otp)
name: Verify an Phone OTP
isSpotlight: false
@@ -3502,6 +3505,7 @@ functions:
- Realtime is disabled by default for new Projects for better database performance and security. You can turn it on by [managing replication](/docs/guides/database/api#managing-realtime).
- If you want to receive the "previous" data for updates and deletes, you will need to set `REPLICA IDENTITY` to `FULL`, like this: `ALTER TABLE your_table REPLICA IDENTITY FULL;`
- When using a method with a generic type like `track`, `broadcast` or `broadcastFlow`, you have to provide a [serializable class](/docs/reference/kotlin/installing#serialization) as the type parameter.
+ - Presence, Broadcast and Database updates are sent through a [Flow](https://kotlinlang.org/docs/flow.html)
examples:
- id: liste-to-broadcasts
name: Listen to broadcasts
@@ -3516,7 +3520,7 @@ functions:
val broadcastFlow = channel.broadcastFlow(event = "message")
- //in a new coroutine (or use Flow.onEach().launchIn(scope)):
+ //Collect the flow
broadcastFlow.collect { //it: Message
println(it)
}
@@ -3532,22 +3536,27 @@ functions:
@Serializable
data class PresenceState(val username: String)
- val connectedUsers = mutableSetOf()
val channel = supabase.channel("channelId") {
//optional config
}
+
+ //if you want more control and want to receive the raw data, use the `presenceChangeFlow` method
+ val presenceFlow = channel.presenceDataFlow()
- val presenceChangeFlow = channel.presenceChangeFlow()
-
- //in a new coroutine (or use Flow.onEach().launchIn(scope)):
- presenceChangeFlow.collect {
- connectedUsers += it.decodeJoinsAs()
- connectedUsers -= it.decodeLeavesAs()
+ //Collect the flow
+ presenceFlow.collect {
+ for (presence in it) {
+ println(presence.username)
+ }
}
channel.subscribe(blockUntilSubscribed = true)
- //send own state
+ //send your own state
channel.track(PresenceState(username = "John"))
+ description: |
+ You have two methods you can use to listen for presence updates:
+ - `presenceDataFlow` takes care of caching presences based on their id and automatically emits the updated list.
+ - `presenceChangeFlow` emits the raw data received by realtime. Can be used if more control is required.
- id: listen-to-all-database-changes
name: Listen to all database changes
code: |
@@ -3557,7 +3566,7 @@ functions:
}
val changeFlow = channel.postgresChangeFlow(schema = "public")
- //in a new coroutine (or use Flow.onEach().launchIn(scope)):
+ //Collect the flow
changeFlow.collect {
when(it) {
is PostgresAction.Delete -> println("Deleted: ${it.oldRecord}")
@@ -3576,11 +3585,17 @@ functions:
val channel = supabase.channel("channelId") {
//optional config
}
+
+ //This flow will automatically emit the initial data of all messages (which can be restricted by specifying a filter) and then listens for updates.
+ //The data is cached automatically by the primary key you specify
+ val users: Flow> = channel.postgresListDataFlow(schema = "public", table = "users", primaryKey = User::id)
+
+ //If you want more control and want to receive the raw data use the `postgresChangeFlow` method:
val changeFlow = channel.postgresChangeFlow(schema = "public") {
table = "users"
}
- //in a new coroutine (or use Flow.onEach().launchIn(scope)):
+ //Collect the flow
changeFlow.collect {
when(it) {
is PostgresAction.Delete -> println("Deleted: ${it.oldRecord}")
@@ -3592,6 +3607,10 @@ functions:
channel.subscribe()
```
+ description: |
+ You have two methods you can use if you want to listen for database updates on a specific table:
+ - `postgresListDataFlow` fetches the initial data of all database entries matching your filter (or all entries if you didn't specify one) and then caches the data based on their primary key. Inserts, Updates and Deletes are handled automatically and you will get the updated list through the flow.
+ - `postgresChangeFlow` emits the raw data received by realtime. Events can be filtered by specifying a `PostgresAction` type parameter (see examples), or all by specifying only `PostgresAction`. Can be used if more control is required.
- id: listen-to-inserts
name: Listen to inserts
code: |
@@ -3603,7 +3622,7 @@ functions:
table = "users"
}
- //in a new coroutine (or use Flow.onEach().launchIn(scope)):
+ //Collect the flow
changeFlow.collect {
println(it.record)
}
@@ -3624,11 +3643,12 @@ functions:
val channel = supabase.channel("channelId") {
//optional config
}
+
val changeFlow = channel.postgresChangeFlow(schema = "public") {
table = "users"
}
- //in a new coroutine (or use Flow.onEach().launchIn(scope)):
+ //Collect the flow
changeFlow.collect {
println(it.record)
println(it.oldRecord)
@@ -3650,11 +3670,12 @@ functions:
val channel = supabase.channel("channelId") {
//optional config
}
+
val changeFlow = channel.postgresChangeFlow(schema = "public") {
table = "users"
}
- //in a new coroutine (or use Flow.onEach().launchIn(scope)):
+ //Collect the flow
changeFlow.collect {
println(it.oldRecord)
}
@@ -3663,24 +3684,35 @@ functions:
```
- id: listening-to-row-level-changes
name: Listen to row level changes
- description: You can listen to individual rows using the format `{table}:{col}=eq.{val}` - where `{col}` is the column name, and `{val}` is the value which you want to match.
code: |
```kotlin
val channel = supabase.channel("channelId") {
//optional config
}
+
+ //This flow will automatically emit the user's initial data and then emits new values on update. The flow ends on deletion
+ val user: Flow = channel.postgresSingleDataFlow(schema = "public", table = "users", primaryKey = User::id) {
+ //This is the same filter as used in postgrest, so you could use complex queries, but only one entry is fetched
+ eq("id", 1)
+ }
+
+ //If you want more control, use the `postgresChangeFlow` method which works the same as the other examples
val changeFlow = channel.postgresChangeFlow(schema = "public") {
table = "users"
- filter = "id=eq.1"
+ filter("id", FilterOperator.EQ, 1)
}
- //in a new coroutine:
+ //Collect the flow
changeFlow.collect {
println(it.oldRecord)
}
channel.subscribe()
```
+ description: |
+ You have two methods you can use if you want to listen for updates on a specific database row:
+ - `postgresSingleDataFlow` fetches the initial data matching the filter and then emits updates based on realtime events.
+ - `postgresChangeFlow` emits the raw data received by realtime. To filter the realtime queries, use the `filter` method.
- id: remove-channel
description: |
@@ -3689,6 +3721,7 @@ functions:
notes: |
- Removing a channel is a great way to maintain the performance of your project's Realtime service as well as your database if you're listening to Postgres changes.
- Supabase will automatically handle cleanup 30 seconds after a client is disconnected, but unused channels may cause degradation as more clients are simultaneously subscribed.
+ - If you removed all channels, the client automatically disconnects from the Realtime websocket. This can be disabled in the Realtime config by setting `disconnectOnNoSubscriptions` to false.
examples:
- id: removes-a-channel
name: Remove a channel
@@ -3718,6 +3751,7 @@ functions:
notes: |
Unsubscribes and removes all Realtime channels from Realtime client.
- Removing channels is a great way to maintain the performance of your project's Realtime service as well as your database if you're listening to Postgres changes. Supabase will automatically handle cleanup 30 seconds after a client is disconnected, but unused channels may cause degradation as more clients are simultaneously subscribed.
+ - If you removed all channels, the client automatically disconnects from the Realtime websocket. This can be disabled in the Realtime config by setting `disconnectOnNoSubscriptions` to false.
examples:
- id: remove-all-channels
name: Remove all channels
diff --git a/apps/docs/spec/supabase_py_v2.yml b/apps/docs/spec/supabase_py_v2.yml
index 5bb793efb3f..1b9bb492e5f 100644
--- a/apps/docs/spec/supabase_py_v2.yml
+++ b/apps/docs/spec/supabase_py_v2.yml
@@ -144,7 +144,7 @@ functions:
code: |
```
data = supabase.auth.sign_in_with_otp({
- phone: '+13334445555',
+ "phone": '+13334445555',
})
```
- id: sign-in-with-oauth
@@ -761,7 +761,7 @@ functions:
code: |
```python
data, count = supabase.table('countries')
- .update({'name': 'Austrailia'})
+ .update({'name': 'Australia'})
.eq('id', 1)
.execute()
```
@@ -778,7 +778,7 @@ functions:
```
response: |
```
- APIResponse(data=[{'id': 1, 'name': 'Austrailia'}], count=None)
+ APIResponse(data=[{'id': 1, 'name': 'Australia'}], count=None)
```
hideCodeBlock: true
isSpotlight: true
@@ -792,7 +792,7 @@ functions:
code: |
```python
data, count = supabase.table('countries')
- .upsert({'id': 1, 'name': 'Austrailia'})
+ .upsert({'id': 1, 'name': 'Australia'})
.execute()
```
data:
@@ -808,7 +808,7 @@ functions:
```
response: |
```
- APIResponse(data=[{'id': 1, 'name': 'Austrailia'}], count=None)
+ APIResponse(data=[{'id': 1, 'name': 'Australia'}], count=None)
```
hideCodeBlock: true
isSpotlight: true
@@ -1906,7 +1906,7 @@ functions:
name: Error handling
description: |
Returns one of the following errors:
-
+
- `FunctionsHttpError`: if your function throws an error
- `FunctionsRelayError`: if the Supabase Relay encounters an error processing your function
isSpotlight: true
@@ -1933,7 +1933,7 @@ functions:
name: Passing custom headers
description: |
The library accepts custom headers via the `headers` option.
-
+
Note: `supabase-py` automatically populates the `Authorization` header if there is a signed in user.
isSpotlight: true
code: |
diff --git a/apps/docs/spec/supabase_swift_v1.yml b/apps/docs/spec/supabase_swift_v1.yml
index 0f865246717..5e76cc23425 100644
--- a/apps/docs/spec/supabase_swift_v1.yml
+++ b/apps/docs/spec/supabase_swift_v1.yml
@@ -94,8 +94,6 @@ functions:
- id: sign-up
name: Sign up
isSpotlight: true
- description: |
- If the password is larger than 72 chars, it will be truncated to the first 72 chars.
code: |
```swift
try await supabase.auth.signUp(
@@ -360,8 +358,6 @@ functions:
- id: update-the-password-for-an-authenticated-user
name: Update the password for an authenticated user
isSpotlight: false
- description: |
- If the password is larger than 72 chars, it will be truncated to the first 72 chars.
code: |
```swift
try await supabase.auth.update(user: UserAttributes(password: "newPassw0rd?"))
diff --git a/apps/docs/spec/supabase_swift_v2.yml b/apps/docs/spec/supabase_swift_v2.yml
index 586ceb850a0..4e1413ba8ff 100644
--- a/apps/docs/spec/supabase_swift_v2.yml
+++ b/apps/docs/spec/supabase_swift_v2.yml
@@ -94,8 +94,6 @@ functions:
- id: sign-up
name: Sign up
isSpotlight: true
- description: |
- If the password is larger than 72 chars, it will be truncated to the first 72 chars.
code: |
```swift
try await supabase.auth.signUp(
@@ -360,8 +358,6 @@ functions:
- id: update-the-password-for-an-authenticated-user
name: Update the password for an authenticated user
isSpotlight: false
- description: |
- If the password is larger than 72 chars, it will be truncated to the first 72 chars.
code: |
```swift
try await supabase.auth.update(user: UserAttributes(password: "newPassw0rd?"))
@@ -384,7 +380,7 @@ functions:
notes: |
- Resends a signup confirmation, email change, or phone change email to the user.
- Passwordless sign-ins can be resent by calling the `signInWithOTP()` method again.
- - Password recovery emails can be resent by calling the `resetPassswordForEmail()` method again.
+ - Password recovery emails can be resent by calling the `resetPasswordForEmail()` method again.
- This method only resends an email or phone OTP to the user if there an initial signup, email change, or phone change request was made.
- You can specify a redirect URL when you resend an email link using the `emailRedirectTo` option.
examples:
@@ -1208,17 +1204,17 @@ functions:
```swift
struct City: Decodable {
let name: String
- let countries: [Country]
}
struct Country: Decodable {
let name: String
+ let cities: [City]
}
- let cities: [City] = try await supabase.database
- .from("cities")
- .select("name, countries!inner(name)")
- .eq("countries.name", value: "Indonesia")
+ let countries: [Country] = try await supabase.database
+ .from("countries")
+ .select("name, cities!inner(name)")
+ .eq("name", value: "united kingdom")
.execute()
.value
```
@@ -1251,8 +1247,21 @@ functions:
{
"data": [
{
- "name": "Bali",
- "countries": {"name": "Indonesia"}
+ "name": "united kingdom",
+ "cities": [
+ {
+ "name": "London"
+ },
+ {
+ "name": "Manchester"
+ },
+ {
+ "name": "Liverpool"
+ },
+ {
+ "name": "Bristol"
+ }
+ ]
}
],
"status": 200,
diff --git a/apps/docs/styles/Home.module.css b/apps/docs/styles/Home.module.css
index 6d7be21e752..d113f01f909 100644
--- a/apps/docs/styles/Home.module.css
+++ b/apps/docs/styles/Home.module.css
@@ -91,7 +91,9 @@
text-decoration: none;
border: 1px solid #eaeaea;
border-radius: 10px;
- transition: color 0.15s ease, border-color 0.15s ease;
+ transition:
+ color 0.15s ease,
+ border-color 0.15s ease;
max-width: 300px;
}
diff --git a/apps/docs/styles/main.scss b/apps/docs/styles/main.scss
index d0b9484711d..088cade3e5a 100644
--- a/apps/docs/styles/main.scss
+++ b/apps/docs/styles/main.scss
@@ -4,11 +4,13 @@
@import './../../../packages/ui/build/css/source/global.css';
@import './../../../packages/ui/build/css/themes/dark.css';
+@import './../../../packages/ui/build/css/themes/deep-dark.css';
@import './../../../packages/ui/build/css/themes/light.css';
@font-face {
font-family: 'custom-font';
- src: url(../../../packages/common/assets/fonts/CustomFont-Book.woff2) format('woff2'),
+ src:
+ url(../../../packages/common/assets/fonts/CustomFont-Book.woff2) format('woff2'),
url(../../../packages/common/assets/fonts/CustomFont-Book.woff) format('woff');
font-weight: 400;
font-style: normal;
@@ -17,7 +19,8 @@
@font-face {
font-family: 'custom-font';
- src: url(../../../packages/common/assets/fonts/CustomFont-Medium.woff2) format('woff2'),
+ src:
+ url(../../../packages/common/assets/fonts/CustomFont-Medium.woff2) format('woff2'),
url(../../../packages/common/assets/fonts/CustomFont-Medium.woff) format('woff');
font-weight: 500;
font-style: normal;
@@ -29,7 +32,7 @@
}
body {
- @apply bg-background;
+ @apply bg-background text-foreground;
scroll-behavior: smooth;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
diff --git a/apps/docs/tailwind.config.js b/apps/docs/tailwind.config.js
index c8bf2490119..9b04f141695 100644
--- a/apps/docs/tailwind.config.js
+++ b/apps/docs/tailwind.config.js
@@ -2,12 +2,13 @@ const config = require('config/tailwind.config')
module.exports = config({
content: [
- '../../packages/ui/src/**/*.{tsx,ts,js}',
- './pages/**/*.{tsx,mdx}',
'./components/**/*.tsx',
- './layouts/**/*.tsx',
- './src/**/*.{ts,tsx,mdx}',
+ './content/**/*.{ts,tsx,mdx}',
'./docs/**/*.{tsx,mdx}',
+ './layouts/**/*.tsx',
+ './pages/**/*.{tsx,mdx}',
+ './../../packages/ui/src/**/*.{tsx,ts,js}',
+ './../../packages/ui-patterns/**/*.{tsx,ts,js}',
],
plugins: [
function ({ addUtilities, addVariant }) {
diff --git a/apps/docs/types/api.d.ts b/apps/docs/types/api.d.ts
index 933a4402157..2c654f2efcb 100644
--- a/apps/docs/types/api.d.ts
+++ b/apps/docs/types/api.d.ts
@@ -9,8 +9,8 @@ type XOR = T | U extends object ? (Without & U) | (Without & T
type OneOf = T extends [infer Only]
? Only
: T extends [infer A, infer B, ...infer Rest]
- ? OneOf<[XOR, ...Rest]>
- : never
+ ? OneOf<[XOR, ...Rest]>
+ : never
export interface paths {
'/platform/notifications': {
@@ -3846,7 +3846,7 @@ export interface components {
message?: string
status?: string
},
- string
+ string,
]
>
result?: Record[]
diff --git a/apps/studio/.storybook/preview.css b/apps/studio/.storybook/preview.css
index 34e1f2acdc4..29b55284e98 100644
--- a/apps/studio/.storybook/preview.css
+++ b/apps/studio/.storybook/preview.css
@@ -6,7 +6,7 @@
.light,
.light .docs-story,
.dark .docs-story {
- @apply bg-background;
+ @apply bg-studio;
}
/* // date picker */
@@ -62,11 +62,11 @@
}
.react-datepicker__navigation--previous {
- @apply right-12 w-10 h-10 rounded transition flex items-center justify-center hover:bg-background;
+ @apply right-12 w-10 h-10 rounded transition flex items-center justify-center hover:bg-studio;
}
.react-datepicker__navigation--next {
- @apply right-4 w-10 h-10 rounded transition flex items-center justify-center hover:bg-background;
+ @apply right-4 w-10 h-10 rounded transition flex items-center justify-center hover:bg-studio;
}
.react-datepicker__day {
@@ -93,11 +93,11 @@
}
.react-datepicker__day--selecting-range-start {
- @apply bg-background;
+ @apply bg-studio;
}
.react-datepicker__day--selecting-range-end {
- @apply bg-background;
+ @apply bg-studio;
}
.react-datepicker__day--selected {
diff --git a/apps/studio/components/grid/SupabaseGrid.tsx b/apps/studio/components/grid/SupabaseGrid.tsx
index cb043aff661..6591f8e7e1a 100644
--- a/apps/studio/components/grid/SupabaseGrid.tsx
+++ b/apps/studio/components/grid/SupabaseGrid.tsx
@@ -204,7 +204,7 @@ const SupabaseGridLayout = (props: SupabaseGridProps) => {
onImportData={onImportData}
onEditForeignKeyColumnValue={onEditForeignKeyColumnValue}
/>
-
+
)}
diff --git a/apps/studio/components/grid/SupabaseGrid.utils.ts b/apps/studio/components/grid/SupabaseGrid.utils.ts
index 0371fe981d8..a654246490a 100644
--- a/apps/studio/components/grid/SupabaseGrid.utils.ts
+++ b/apps/studio/components/grid/SupabaseGrid.utils.ts
@@ -101,6 +101,7 @@ export async function initTable(
defaultWidth: props.gridProps?.defaultColumnWidth,
onAddColumn: props.editable ? props.onAddColumn : undefined,
onExpandJSONEditor: props.onExpandJSONEditor,
+ onExpandTextEditor: props.onExpandTextEditor,
})
dispatch({
diff --git a/apps/studio/components/grid/components/common/Hooks.tsx b/apps/studio/components/grid/components/common/Hooks.tsx
index b1d6ef0f778..1d52d6524ba 100644
--- a/apps/studio/components/grid/components/common/Hooks.tsx
+++ b/apps/studio/components/grid/components/common/Hooks.tsx
@@ -62,12 +62,12 @@ export function useKeyboardShortcuts(
return event.metaKey && event.shiftKey
? `Command+Shift+${event.key}`
: event.metaKey
- ? `Command+${event.key}`
- : event.shiftKey && event.key === 'Enter'
- ? `Shift+${event.key}`
- : event.ctrlKey && event.key
- ? `Control+${event.key}`
- : event.key
+ ? `Command+${event.key}`
+ : event.shiftKey && event.key === 'Enter'
+ ? `Shift+${event.key}`
+ : event.ctrlKey && event.key
+ ? `Control+${event.key}`
+ : event.key
}
React.useEffect(() => {
diff --git a/apps/studio/components/grid/components/common/Shortcuts.tsx b/apps/studio/components/grid/components/common/Shortcuts.tsx
index 9323fc1b874..e9d4ba0b56a 100644
--- a/apps/studio/components/grid/components/common/Shortcuts.tsx
+++ b/apps/studio/components/grid/components/common/Shortcuts.tsx
@@ -18,8 +18,8 @@ export function Shortcuts({ gridRef }: ShortcutsProps) {
return navigator?.appVersion.indexOf('Win') !== -1
? 'windows'
: navigator?.appVersion.indexOf('Mac') !== -1
- ? 'macos'
- : 'unknown'
+ ? 'macos'
+ : 'unknown'
}
const metakey = getClientOS() === 'windows' ? 'Control' : 'Command'
setMetaKey(metakey)
diff --git a/apps/studio/components/grid/components/editor/JsonEditor.tsx b/apps/studio/components/grid/components/editor/JsonEditor.tsx
index 1d6de055297..4423413f064 100644
--- a/apps/studio/components/grid/components/editor/JsonEditor.tsx
+++ b/apps/studio/components/grid/components/editor/JsonEditor.tsx
@@ -5,7 +5,7 @@ import { IconMaximize, Popover } from 'ui'
import { BlockKeys, MonacoEditor, NullValue } from 'components/grid/components/common'
import { useTrackedState } from 'components/grid/store'
-import { prettifyJSON, tryParseJson } from 'lib/helpers'
+import { prettifyJSON, tryParseJson, removeJSONTrailingComma } from 'lib/helpers'
import { isNil } from 'lodash'
interface JsonEditorProps
@@ -36,7 +36,8 @@ export const JsonEditor = ({
}, [])
const saveChanges = useCallback((newValue: string | null) => {
- if (newValue !== value) commitChange(newValue)
+ const updatedValue = newValue !== null ? removeJSONTrailingComma(newValue) : newValue
+ if (updatedValue !== value) commitChange(newValue)
}, [])
const onChange = (_value: string | undefined) => {
diff --git a/apps/studio/components/grid/components/editor/TextEditor.tsx b/apps/studio/components/grid/components/editor/TextEditor.tsx
index ed0488616db..e900ca36038 100644
--- a/apps/studio/components/grid/components/editor/TextEditor.tsx
+++ b/apps/studio/components/grid/components/editor/TextEditor.tsx
@@ -1,6 +1,7 @@
-import { RenderEditCellProps } from 'react-data-grid'
+import * as Tooltip from '@radix-ui/react-tooltip'
import { useCallback, useState } from 'react'
-import { Button, Popover } from 'ui'
+import { RenderEditCellProps } from 'react-data-grid'
+import { Button, IconMaximize, Popover } from 'ui'
import { useTrackedState } from '../../store'
import { BlockKeys, EmptyValue, MonacoEditor, NullValue } from '../common'
@@ -10,7 +11,12 @@ export const TextEditor = ({
isNullable,
isEditable,
onRowChange,
-}: RenderEditCellProps & { isNullable?: boolean; isEditable?: boolean }) => {
+ onExpandEditor,
+}: RenderEditCellProps & {
+ isNullable?: boolean
+ isEditable?: boolean
+ onExpandEditor: (column: string, row: TRow) => void
+}) => {
const state = useTrackedState()
const [isPopoverOpen, setIsPopoverOpen] = useState(true)
const gridColumn = state.gridColumns.find((x) => x.name == column.key)
@@ -27,6 +33,14 @@ export const TextEditor = ({
setIsPopoverOpen(false)
}, [])
+ const onSelectExpand = () => {
+ cancelChanges()
+ onExpandEditor(column.key, {
+ ...row,
+ [column.key]: value || (row as any)[column.key],
+ })
+ }
+
function onChange(_value: string | undefined) {
if (!isEditable) return
@@ -65,7 +79,32 @@ export const TextEditor = ({