dima/supabase
1
0 Fork 0
mirror of https://github.com/supabase/supabase.git synced 2026-10-05 17:35:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'supabase:master' into master

Browse Source
This commit is contained in:
Hieu Vu authored and GitHub committed 2023-07-24 23:04:36 +07:00
2 parents 024fec61e6 aba053986c
commit 342d1da9ea
1384 files changed
+61153 -25061
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

.gitignore
+4 -1
View File
@@ -125,9 +125,12 @@ apps/new-docs/*
# UI tokens
packages/ui/tokens/**/*.json
# UI Storybook build
packages/ui/storybook-static
# For self-hosted logs: https://github.com/supabase/supabase/blob/86e3ab20abfdb9c3e666334d3d2f8efeef9ccf2c/docker/docker-compose-logging.yml#L101
gcloud.json
# sitemaps
# apps/www/public/*.xml
# apps/docs/public/*.xml
# apps/docs/public/*.xml
DEVELOPERS.md
+25 -5
View File
@@ -69,11 +69,11 @@ To contribute code to [Supabase](https://supabase.com), you must fork the [Supab
Then visit, and edit, any of the following sites:
| Site | Directory | Scope name | Description | Local development server |
| ---------------------------------------------- | ------------ | ---------- | ------------------------------------ | -------------------------- |
| [supabase.com](https://supabase.com) | `/apps/www` | www | The main website | http://localhost:3000 |
| [app.supabase.com](https://app.supabase.com) | `/studio` | studio | Studio dashboard | http://localhost:8082 |
| [supabase.com/docs](https://supabase.com/docs) | `/apps/docs` | docs | Guides and Reference (Next.js based) | http://localhost:3001/docs |
| Site | Directory | Scope name | Description | Local development server |
| -------------------------------------------------------- | ------------ | ---------- | ------------------------------------ | -------------------------- |
| [supabase.com](https://supabase.com) | `/apps/www` | www | The main website | http://localhost:3000 |
| [supabase.com/dashboard](https://supabase.com/dashboard) | `/studio` | studio | Studio dashboard | http://localhost:8082 |
| [supabase.com/docs](https://supabase.com/docs) | `/apps/docs` | docs | Guides and Reference (Next.js based) | http://localhost:3001/docs |
#### Running sites individually
@@ -132,6 +132,26 @@ Create a new entry in the [`redirects.js`](https://github.com/supabase/supabase/
---
### Federated docs
We support "federating" docs, meaning doc content can come directly from external repos other than [`supabase/supabase`](https://github.com/supabase/supabase).
- It's great for things like client libs who have their own set of docs that we don't want to duplicate on the official Supabase docs (eg. [`supabase/vecs`](https://github.com/supabase/vecs)).
- No duplication or manual steps required - fetches and generates automatically as part of the docs build pipeline
- It's flexible - you can "embed" external docs nearly anywhere at any level in Supabase docs, but they will feel native
- If you are maintaining a repo containing docs that you think could also live in Supabase docs, feel free to create an issue and we can work together to integrate
Federated docs work using Next.js's build pipeline. We use `getStaticProps()` to fetch remote documentation (ie. markdown) at build time which is processed and passed to the respective page within the docs.
See the [Vecs Python source code](https://github.com/supabase/supabase/blob/master/apps/docs/pages/guides/ai/python/%5Bslug%5D.tsx) to see how we do this for [`supabase/vecs`](https://github.com/supabase/vecs). Use this as a starting point for federating other docs.
Some things to consider:
- Links will often need to be transformed. For example if you are bringing in external markdown content, they may contain relative links that may not translate 1-to-1 after rendering in the Supabase docs. Use the [Link Transform](https://github.com/supabase/supabase/blob/master/apps/docs/lib/mdx/plugins/rehypeLinkTransform.ts) rehype plugin to transform links.
- External markdown may contain syntax extensions that Supabase docs don't understand by default (eg. [mkdocs-material extensions](https://squidfunk.github.io/mkdocs-material/setup/extensions/python-markdown)). We've built a few remark plugins to support these extensions (eg. [MkDocs Admonition](https://github.com/supabase/supabase/blob/master/apps/docs/lib/mdx/plugins/remarkAdmonition.ts)). If there is a markdown extension that you need that isn't built yet, feel free to open an issue and we can work together to create it.
---
## Community channels
If you are stuck somewhere or have any questions, join our [Discord Community Server](https://discord.supabase.com/) or the [Github Discussions](https://github.com/supabase/supabase/discussions). We are here to help!
README.md
+3 -3
View File
@@ -40,7 +40,7 @@ To see how to Contribute, visit [Getting Started](./DEVELOPERS.md)
## Status
- [x] Alpha: We are testing Supabase with a closed set of customers
- [x] Public Alpha: Anyone can sign up over at [app.supabase.com](https://app.supabase.com). But go easy on us, there are a few kinks
- [x] Public Alpha: Anyone can sign up over at [supabase.com/dashboard](https://supabase.com/dashboard). But go easy on us, there are a few kinks
- [x] Public Beta: Stable enough for most non-enterprise use-cases
- [ ] Public: General Availability [[status](https://supabase.com/docs/guides/getting-started/features#feature-status)]
@@ -56,7 +56,7 @@ Supabase is a combination of open source tools. We’re building the features of
**Architecture**
Supabase is a [hosted platform](https://app.supabase.com). You can sign up and start using Supabase without installing anything.
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).
![Architecture](https://github.com/supabase/supabase/blob/master/apps/docs/public/img/supabase-architecture.png)
@@ -67,7 +67,7 @@ You can also [self-host](https://supabase.com/docs/guides/hosting/overview) and
- [pg_graphql](http://github.com/supabase/pg_graphql/) a PostgreSQL extension that exposes a GraphQL API
- [Storage](https://github.com/supabase/storage-api) provides a RESTful interface for managing Files stored in S3, using Postgres to manage permissions.
- [postgres-meta](https://github.com/supabase/postgres-meta) is a RESTful API for managing your Postgres, allowing you to fetch tables, add roles, and run queries, etc.
- [GoTrue](https://github.com/netlify/gotrue) is an SWT based API for managing users and issuing SWT tokens.
- [GoTrue](https://github.com/supabase/gotrue) is an JWT based API for managing users and issuing JWT tokens.
- [Kong](https://github.com/Kong/kong) is a cloud-native API gateway.
#### Client libraries
apps/docs/components/AppleSecretGenerator.tsx
+1 -2
View File
@@ -1,6 +1,5 @@
import { useState } from 'react'
import { Input, Button } from 'ui'
import Admonition from '~/components/Admonition'
import { Admonition, Button, Input } from 'ui'
function base64URL(value: string) {
return globalThis.btoa(value).replace(/[=]/g, '').replace(/[+]/g, '-').replace(/[\/]/g, '_')
apps/docs/components/Extensions.tsx
+19 -15
View File
@@ -3,14 +3,25 @@ import React, { useState } from 'react'
import { GlassPanel, IconLink, IconX, Input } from 'ui'
import extensions from '../data/extensions.json'
type extension = {
type Extension = {
name: string
comment: string
tags: string[]
link?: string
link: string
}
function getUniqueTags(json: extension[]) {
type LinkTarget = React.ComponentProps<'a'>['target']
function getLinkTarget(link: string): LinkTarget {
// Link is relative, open in the same tab
if (link.startsWith('/')) {
return '_self'
}
// Link is external, open in a new tab
return '_blank'
}
function getUniqueTags(json: Extension[]): string[] {
const tags = []
for (const item of json) {
if (item.tags) {
@@ -21,12 +32,12 @@ function getUniqueTags(json: extension[]) {
}
export default function Extensions() {
const [searchTerm, setSearchTerm] = useState('')
const [filters, setFilters] = useState([])
const [searchTerm, setSearchTerm] = useState<string>('')
const [filters, setFilters] = useState<string[]>([])
const tags = getUniqueTags(extensions)
function handleChecked(tag) {
function handleChecked(tag: string) {
if (filters.includes(tag)) {
setFilters(filters.filter((x) => x !== tag))
} else {
@@ -94,15 +105,8 @@ export default function Extensions() {
filters.length === 0 ? x : x.tags.some((item) => filters.includes(item))
)
.map((extension) => (
<Link
passHref
href={`${
extension.link
? `/guides/database/extensions/${extension.name}`
: '/guides/database/extensions#full-list-of-extensions'
}`}
>
<a target={`${extension.link ? '_blank' : '_self'}`} className="no-underline">
<Link passHref href={extension.link}>
<a target={getLinkTarget(extension.link)} className="no-underline">
<GlassPanel title={extension.name} background={false} key={extension.name}>
<p className="mt-4">
{extension.comment.charAt(0).toUpperCase() + extension.comment.slice(1)}
apps/docs/components/Frameworks.tsx
+8
View File
@@ -93,6 +93,14 @@ const Frameworks = () => {
},
href: '/guides/with-vue-3',
},
{
name: 'refine',
logo: {
light: '/docs/img/icons/refine-icon.svg',
dark: '/docs/img/icons/refine-icon.svg',
},
href: '/guides/getting-started/tutorials/with-refine',
},
]
return (
<div className="grid md:grid-cols-12 gap-4 not-prose">
apps/docs/components/HomePageCover.tsx
+8 -3
View File
@@ -48,6 +48,11 @@ const HomePageCover = (props) => {
icon: '/docs/img/icons/nuxt-icon',
href: '/guides/getting-started/quickstarts/nuxtjs',
},
{
tooltip: 'refine',
icon: '/docs/img/icons/refine-icon',
href: '/guides/getting-started/quickstarts/refine',
},
]
const GettingStarted = () => (
@@ -72,7 +77,7 @@ const HomePageCover = (props) => {
Discover how to set up a database to an app making queries in just a few minutes.
</p>
</div>
<div className="flex flex-wrap md:grid md:grid-cols-4 2xl:grid-cols-7 gap-2 sm:gap-3">
<div className="flex flex-wrap md:grid md:grid-cols-4 2xl:grid-cols-8 gap-2 sm:gap-3">
{frameworks.map((framework, i) => (
<Link key={i} href={framework.href} passHref>
<a className="no-underline">
@@ -93,7 +98,7 @@ const HomePageCover = (props) => {
return (
<div className="w-full bg-scale-100 border-b prose dark:prose-dar max-w-none mb-16 md:mb-12 xl:mb-0">
<div className="max-w-7xl px-5 mx-auto py-8 sm:pb-16 sm:pt-12 xl:pt-16 flex flex-col xl:flex-row justify-between gap-12 xl:gap-12">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-start sm:items-center w-full max-w-xl">
<div className="flex flex-col sm:flex-row gap-4 sm:gap-8 items-start sm:items-center w-full max-w-xl xl:max-w-[33rem]">
<DocsCoverLogo />
<div className="flex flex-col">
<h1 className="m-0 mb-3 text-2xl sm:text-3xl">{props.meta?.title}</h1>
@@ -103,7 +108,7 @@ const HomePageCover = (props) => {
</p>
</div>
</div>
<div className="w-full xl:max-w-[365px] 2xl:max-w-[608px] -mb-40">
<div className="w-full xl:max-w-[375px] 2xl:max-w-[620px] -mb-40">
<GettingStarted />
</div>
</div>
apps/docs/components/MDX/database_setup.mdx
+3 -3
View File
@@ -12,7 +12,7 @@ Your database will be available in less than a minute.
**Finding your credentials:**
You can find your project credentials inside the project [settings](https://app.supabase.com/project/_/settings/), including:
You can find your project credentials inside the project [settings](https://supabase.com/dashboard/project/_/settings/), including:
- [Database credentials](https://app.supabase.com/project/_/settings/database): connection strings and connection pooler details.
- [API credentials](https://app.supabase.com/project/_/settings/database): your serverless API URL and `anon` / `service_role` keys.
- [Database credentials](https://supabase.com/dashboard/project/_/settings/database): connection strings and connection pooler details.
- [API credentials](https://supabase.com/dashboard/project/_/settings/database): your serverless API URL and `anon` / `service_role` keys.
apps/docs/components/MDX/project_setup.mdx
+3 -3
View File
@@ -8,7 +8,7 @@ Before we start building we're going to set up our Database and API. This is as
### Create a project
1. [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
1. [Create a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
1. Enter your project details.
1. Wait for the new database to launch.
@@ -24,7 +24,7 @@ Now we are going to set up the database schema. We can use the "User Management
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [SQL Editor](https://app.supabase.com/project/_/sql) page in the Dashboard.
1. Go to the [SQL Editor](https://supabase.com/dashboard/project/_/sql) page in the Dashboard.
2. Click **User Management Starter**.
3. Click **Run**.
@@ -41,5 +41,5 @@ Now we are going to set up the database schema. We can use the "User Management
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
We just need to get the Project URL and `anon` key from the API settings.
1. Go to the [API Settings](https://app.supabase.com/project/_/settings/api) page in the Dashboard.
1. Go to the [API Settings](https://supabase.com/dashboard/project/_/settings/api) page in the Dashboard.
1. Find your Project `URL`, `anon`, and `service_role` keys on this page.
apps/docs/components/MDX/social_provider_settings_supabase.mdx
+2 -2
View File
@@ -1,6 +1,6 @@
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- Go to your [Supabase Project Dashboard](https://supabase.com/dashboard)
- In the left sidebar, click the `Authentication` icon (near the top)
- Click on [`Providers`](https://app.supabase.com/project/_/auth/providers) under the Configuration section
- Click on [`Providers`](https://supabase.com/dashboard/project/_/auth/providers) under the Configuration section
- Click on **{props.provider}** from the accordion list to expand and turn **{props.provider} Enabled** to ON
- Enter your **{props.provider} Client ID** and **{props.provider} Client Secret** saved in the previous step
- Click `Save`
apps/docs/components/MDX/social_provider_setup.mdx
+2 -2
View File
@@ -2,7 +2,7 @@ The next step requires a callback URL, which looks like this:
`https://<project-ref>.supabase.co/auth/v1/callback`
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- Go to your [Supabase Project Dashboard](https://supabase.com/dashboard)
- Click on the `Authentication` icon in the left sidebar
- Click on [`Providers`](https://app.supabase.com/project/_/auth/providers) under the Configuration section
- Click on [`Providers`](https://supabase.com/dashboard/project/_/auth/providers) under the Configuration section
- Click on **{props.provider}** from the accordion list to expand and you'll find your **Redirect URL**, you can click `Copy` to copy it to the clipboard
apps/docs/components/MDX/storage_management.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ triggers. Note that it is not sufficient to delete the objects from the
`storage.objects` table because that would orphan and leak the actual storage objects in
the S3 backend. Instead, invoke the storage API within Postgres via the `http` extension.
Enable the [http extension for the `extensions` schema](https://app.supabase.com/project/_/database/extensions) in the Dashboard.
Enable the [http extension for the `extensions` schema](https://supabase.com/dashboard/project/_/database/extensions) in the Dashboard.
Then, define the following SQL functions in the SQL Editor to delete
storage objects via the API:
apps/docs/components/Navigation/NavigationMenu/HomeMenuIcons.tsx
+8 -6
View File
@@ -1,3 +1,5 @@
import { products } from 'shared-data'
type HomeMenuIcon = {
width?: number
height?: number
@@ -50,7 +52,7 @@ export function IconMenuAuth({ width = 16, height = 16 }: HomeMenuIcon) {
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.494 9.975h5m-5 0v2h5v-2m-5 0v-2h5v2M10 5V3a2 2 0 1 0-4 0v2m6.473 0v9h-9V5h9Z"
d={products.authentication.icon[16]}
stroke="currentColor"
strokeMiterlimit="10"
strokeLinejoin="bevel"
@@ -107,7 +109,7 @@ export function IconMenuDatabase({ width = 16, height = 16 }: HomeMenuIcon) {
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M3.502 6h8.996v4H3.502V6ZM3 10.002h10v4H3v-4ZM3 2h10v4H3V2Z"
d={products.database.icon[16]}
stroke="currentColor"
strokeMiterlimit="10"
strokeLinejoin="bevel"
@@ -145,7 +147,7 @@ export function IconMenuEdgeFunctions({ width = 16, height = 16 }: HomeMenuIcon)
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M1.857 11.36a7 7 0 0 1 9.41-9.551M4.774 14.212a7 7 0 0 0 9.41-9.497m-8.812 7.845a2 2 0 1 1-4 0 2 2 0 0 1 4 0Zm9.296-9.13a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM12.5 8a4.5 4.5 0 1 1-9 0 4.5 4.5 0 0 1 9 0Z"
d={products.functions.icon[16]}
stroke="currentColor"
strokeMiterlimit="10"
strokeLinejoin="bevel"
@@ -297,7 +299,7 @@ export function IconMenuRealtime({ width = 16, height = 16 }: HomeMenuIcon) {
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M5.362.984v2.35m-1.866.144L1.365 1.282m2.052 3.92H1.052m8.023 9.653L4.557 4.523 15 9.115l-4.748 1.182-1.177 4.558Z"
d={products.realtime.icon[16]}
stroke="currentColor"
strokeMiterlimit="10"
strokeLinejoin="bevel"
@@ -354,7 +356,7 @@ export function IconMenuStorage({ width = 16, height = 16 }: HomeMenuIcon) {
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13 7.616V5.6l-3.618-3.6H3v4.03m9.964-.447L9.38 2v3.584h3.584ZM1.974 6v8h12V7.509h-7.59l-1.533-1.51H1.974Z"
d={products.storage.icon[16]}
stroke="currentColor"
strokeMiterlimit="10"
strokeLinejoin="bevel"
@@ -373,7 +375,7 @@ export function IconMenuAI({ width = 16, height = 16 }: HomeMenuIcon) {
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M7.99886 7.63216V14.4892M7.99886 7.63216L14.0488 4.11804M7.99886 7.63216L1.94922 4.11819M1.94922 4.11819V8.32332M1.94922 4.11819V4.08217L5.57319 1.97717M14.049 8.36007V4.08217L10.4251 1.97717M11.8165 12.4072L7.99913 14.6245L4.18177 12.4072"
d={products.vector.icon[16]}
stroke="currentColor"
strokeMiterlimit="10"
strokeLinecap="round"
apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+65 -92
View File
@@ -60,6 +60,12 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
},
],
[
{
label: 'Local Dev / CLI',
icon: 'reference-cli',
href: '/guides/cli',
level: 'reference_javascript',
},
{
label: 'Platform',
icon: 'platform',
@@ -78,13 +84,6 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
href: '/guides/self-hosting',
level: 'self_hosting',
},
{
label: 'Integrations',
icon: 'integrations',
hasLightIcon: true,
href: '/guides/integrations',
level: 'integrations',
},
],
[
{
@@ -131,7 +130,14 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
community: true,
},
{
label: 'Tools reference',
label: 'Tools',
},
{
label: 'Integrations',
icon: 'integrations',
hasLightIcon: true,
href: 'https://supabase.com/partners/integrations',
level: 'integrations',
},
{
label: 'Management API',
@@ -139,12 +145,6 @@ export const HOMEPAGE_MENU_ITEMS: HomepageMenuItems = [
href: '/reference/api/introduction',
level: 'reference_javascript',
},
{
label: 'Supabase CLI',
icon: 'reference-cli',
href: '/guides/cli',
level: 'reference_javascript',
},
],
[
{
@@ -206,7 +206,6 @@ export const gettingstarted: NavMenuConstant = {
items: [
{ name: 'Features', url: '/guides/getting-started/features' },
{ name: 'Architecture', url: '/guides/getting-started/architecture' },
{ name: 'Local Development', url: '/guides/getting-started/local-development' },
{
name: 'Framework Quickstarts',
items: [
@@ -219,6 +218,7 @@ export const gettingstarted: NavMenuConstant = {
{ name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit' },
{ name: 'SolidJS', url: '/guides/getting-started/quickstarts/solidjs' },
{ name: 'Vue', url: '/guides/getting-started/quickstarts/vue' },
{ name: 'refine', url: '/guides/getting-started/quickstarts/refine' },
],
},
{
@@ -260,6 +260,10 @@ export const gettingstarted: NavMenuConstant = {
name: 'SvelteKit',
url: '/guides/getting-started/tutorials/with-sveltekit',
},
{
name: 'refine',
url: '/guides/getting-started/tutorials/with-refine',
},
],
},
{
@@ -353,6 +357,11 @@ export const SocialLoginItems = [
icon: '/docs/img/icons/discord-icon',
url: '/guides/auth/social-login/auth-discord',
},
{
name: 'Kakao',
icon: '/docs/img/icons/kakao-icon',
url: '/guides/auth/social-login/auth-kakao',
},
{
name: 'Keycloak',
icon: '/docs/img/icons/keycloak-icon',
@@ -754,6 +763,7 @@ export const functions: NavMenuConstant = {
name: 'Connecting directly to Postgres',
url: '/guides/functions/connect-to-postgres',
},
{ name: 'Testing your Edge Functions', url: '/guides/functions/unit-test' },
{ name: 'Troubleshooting', url: '/guides/functions/troubleshooting' },
],
},
@@ -807,10 +817,6 @@ export const realtime: NavMenuConstant = {
name: 'Concepts',
url: '/guides/realtime/concepts',
},
{
name: 'Quickstart',
url: '/guides/realtime/quickstart',
},
{
name: 'Features',
url: undefined,
@@ -907,7 +913,8 @@ export const ai: NavMenuConstant = {
{ name: 'Managing indexes', url: '/guides/ai/managing-indexes' },
{ name: 'Vector columns', url: '/guides/ai/vector-columns' },
{ name: 'Engineering for scale', url: '/guides/ai/engineering-for-scale' },
{ name: 'Choosing instance type', url: '/guides/ai/choosing-instance-type' },
{ name: 'Choosing Compute Add-on', url: '/guides/ai/choosing-compute-addon' },
{ name: 'Going to Production', url: '/guides/ai/going-to-prod' },
],
},
{
@@ -967,14 +974,29 @@ export const ai: NavMenuConstant = {
export const supabase_cli: NavMenuConstant = {
icon: 'reference-cli',
title: 'Supabase CLI',
title: 'Local Dev / CLI',
url: '/guides/cli',
items: [
{ name: 'Overview', url: '/guides/cli' },
{ name: 'Managing Environments', url: '/guides/cli/managing-environments' },
{ name: 'Getting started', url: '/guides/cli' },
{ name: 'Local Development', url: '/guides/cli/local-development' },
{ name: 'Managing environments', url: '/guides/cli/managing-environments' },
{
name: 'Using environment variables in config.toml',
url: '/guides/cli/using-environment-variables-in-config',
name: 'Managing config and secrets',
url: '/guides/cli/managing-config',
},
{
name: 'Testing emails locally',
url: '/guides/cli/testing-emails',
},
{
name: 'GitHub Action',
url: undefined,
items: [
{
name: 'Generate types from your database',
url: '/guides/cli/github-action/generating-types',
},
],
},
{
name: 'Reference',
@@ -1057,6 +1079,24 @@ export const platform: NavMenuConstant = {
{ name: 'Production Checklist', url: '/guides/platform/going-into-prod' },
],
},
{
name: 'Integrations',
url: undefined,
items: [
{
name: 'Integrations Marketplace',
url: '/guides/platform/marketplace',
},
{
name: 'Publish an OAuth App',
url: '/guides/platform/oauth-apps/publish-an-oauth-app',
},
{
name: 'Sign in with Supabase',
url: '/guides/platform/oauth-apps/authorize-an-oauth-app',
},
],
},
{
name: 'Troubleshooting',
url: undefined,
@@ -1180,73 +1220,6 @@ export const migrate = {
],
}
export const integrations: NavMenuConstant = {
icon: 'integrations',
title: 'Integrations',
url: '/guides/integrations',
items: [
{ name: 'Overview', url: '/guides/integrations/integrations' },
{
name: 'Auth',
url: undefined,
items: [
{
name: 'Auth0',
url: '/guides/integrations/auth0',
},
{ name: 'Authsignal', url: '/guides/integrations/authsignal' },
{ name: 'Clerk', url: '/guides/integrations/clerk' },
{ name: 'keyri', url: '/guides/integrations/keyri' },
{ name: 'Passage', url: '/guides/integrations/passage' },
{ name: 'Stytch', url: '/guides/integrations/stytch' },
{ name: 'SuperTokens', url: '/guides/integrations/supertokens' },
],
},
{
name: 'Caching / Offline-first',
url: undefined,
items: [{ name: 'Polyscale', url: '/guides/integrations/polyscale' }],
},
{
name: 'Developer Tools',
url: undefined,
items: [
{ name: 'Cloudflare Workers', url: '/guides/integrations/cloudflare-workers' },
{ name: 'Estuary', url: '/guides/integrations/estuary' },
{ name: 'OpenAI', url: '/guides/ai/examples/openai' },
{ name: 'pgMustard', url: '/guides/integrations/pgmustard' },
{ name: 'Prisma', url: '/guides/integrations/prisma' },
{ name: 'Sequin', url: '/guides/integrations/sequin' },
{ name: 'Snaplet', url: '/guides/integrations/snaplet' },
{ name: 'Vercel', url: '/guides/integrations/vercel' },
{ name: 'Upstash Redis', url: '/guides/functions/examples/upstash-redis' },
{ name: 'WeWeb', url: '/guides/integrations/weweb' },
{ name: 'Zuplo', url: '/guides/integrations/zuplo' },
],
},
{
name: 'Low-code',
url: undefined,
items: [
{ name: 'Appsmith', url: '/guides/integrations/appsmith' },
{ name: 'Bracket', url: '/guides/integrations/bracket' },
{ name: 'DhiWise', url: '/guides/integrations/dhiwise' },
{ name: 'Directus', url: '/guides/integrations/directus' },
{ name: 'Draftbit', url: '/guides/integrations/draftbit' },
{ name: 'FlutterFlow', url: '/guides/integrations/flutterflow' },
{ name: 'Forest Admin', url: '/guides/integrations/forestadmin' },
{ name: 'Plasmic', url: '/guides/integrations/plasmic' },
{ name: 'ILLA', url: '/guides/integrations/illa' },
],
},
{
name: 'Messaging',
url: undefined,
items: [{ name: 'OneSignal', url: '/guides/integrations/onesignal' }],
},
],
}
export const reference = {
title: 'API Reference',
icon: 'reference',
apps/docs/components/index.tsx
+1 -1
View File
@@ -2,7 +2,6 @@ import Link from 'next/link'
import { Alert, Button, CodeBlock, GlassPanel, markdownComponents, Tabs } from 'ui'
import StepHikeCompact from '~/components/StepHikeCompact'
// Common components
import Admonition from './Admonition'
import ButtonCard from './ButtonCard'
import JwtGenerator from './JwtGenerator'
@@ -32,6 +31,7 @@ import CliGlobalFlagsHandler from '~/components/reference/enrichments/cli/CliGlo
import Options from '~/components/Options'
import Param from '~/components/Params'
import { Admonition } from 'ui'
import {
IconMenuJavascript,
IconMenuHome,
apps/docs/components/reference/OldVersionAlert.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import Link from 'next/link'
import { useRouter } from 'next/router'
import { Admonition } from 'ui'
import { useMenuActiveRefId } from '~/hooks/useMenuState'
import Admonition from '../Admonition'
import { ICommonSection } from './Reference.types'
export interface OldVersionAlertProps {
apps/docs/components/reference/RefFunctionSection.tsx
+8 -11
View File
@@ -114,7 +114,13 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
>
{item.examples &&
item.examples.map((example, exampleIndex) => {
const exampleString = ''
const exampleString =
'' +
(example.code &&
example.code
.trim()
.replace(/^```.*/, '')
.replace(/```$/, ''))
const codeBlockLang = example?.code?.startsWith('```js')
? 'js'
@@ -133,7 +139,6 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
// // Create a single supabase client for interacting with your database
// const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
// `
const currentExampleId = example.id
const staticExample = item.examples[exampleIndex]
const response = staticExample.response
@@ -152,15 +157,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
language={codeBlockLang}
hideLineNumbers={true}
>
{exampleString +
(example.code &&
example.code
.replace(/```/g, '')
.replace('js', '')
.replace('ts', '')
.replace('dart', '')
.replace('c#', '')
.replace('kotlin', ''))}
{exampleString}
</CodeBlock>
{((tables && tables.length > 0) || sql) && (
apps/docs/data/authProviders.ts
+10
View File
@@ -79,6 +79,16 @@ const authProviders = [
selfHosted: true,
authType: 'social',
},
{
name: 'Kakao',
logo: '/docs/img/icons/kakao-icon',
href: '/guides/auth/social-login/auth-kakao',
official: true,
supporter: 'Supabase',
platform: true,
selfHosted: true,
authType: 'social',
},
{
name: 'Keycloak',
logo: '/docs/img/icons/keycloak-icon',
apps/docs/data/extensions.json
+137 -183
View File
@@ -3,460 +3,414 @@
"name": "address_standardizer",
"comment": "Used to parse an address into constituent elements. Generally used to support geocoding address normalization step.",
"tags": ["Utility"],
"link": "http://supabase.com/docs/guides/extensions/etc/etc/etc"
},
{
"name": "address_standardizer-3",
"comment": "Used to parse an address into constituent elements. Generally used to support geocoding address normalization step.",
"tags": ["Utility"]
"link": "https://postgis.net/docs/manual-2.5/Address_Standardizer.html"
},
{
"name": "address_standardizer_data_us",
"comment": "Address Standardizer US dataset example",
"tags": ["Dataset"]
},
{
"name": "address_standardizer_data_us-3",
"comment": "Address Standardizer US dataset example",
"tags": ["Dataset"]
},
{
"name": "adminpack",
"comment": "administrative functions for PostgreSQL",
"tags": ["Admin", "Utility"]
"tags": ["Dataset"],
"link": "https://postgis.net/docs/manual-2.5/Address_Standardizer.html"
},
{
"name": "amcheck",
"comment": "functions for verifying relation integrity",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/amcheck.html"
},
{
"name": "autoinc",
"comment": "functions for autoincrementing fields",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "https://www.postgresql.org/docs/current/contrib-spi.html#id-1.11.7.50.6"
},
{
"name": "bloom",
"comment": "bloom access method - signature file based index",
"tags": ["Index"]
"tags": ["Index"],
"link": "https://www.postgresql.org/docs/current/bloom.html"
},
{
"name": "btree_gin",
"comment": "support for indexing common datatypes in GIN",
"tags": ["Index"]
"tags": ["Index"],
"link": "https://www.postgresql.org/docs/current/btree-gin.html"
},
{
"name": "btree_gist",
"comment": "support for indexing common datatypes in GiST",
"tags": ["Index"]
"tags": ["Index"],
"link": "https://www.postgresql.org/docs/current/btree-gist.html"
},
{
"name": "citext",
"comment": "data type for case-insensitive character strings",
"tags": ["Data Type"]
"tags": ["Data Type"],
"link": "https://www.postgresql.org/docs/current/citext.html"
},
{
"name": "cube",
"comment": "data type for multidimensional cubes",
"tags": ["Data Type"]
"tags": ["Data Type"],
"link": "https://www.postgresql.org/docs/current/cube.html"
},
{
"name": "dblink",
"comment": "connect to other PostgreSQL databases from within a database",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/contrib-dblink-function.html"
},
{
"name": "dict_int",
"comment": "text search dictionary template for integers",
"tags": ["Search"]
"tags": ["Search"],
"link": "https://www.postgresql.org/docs/current/dict-int.html"
},
{
"name": "dict_xsyn",
"comment": "text search dictionary template for extended synonym processing",
"tags": ["Search"]
"tags": ["Search"],
"link": "https://www.postgresql.org/docs/current/dict-xsyn.html"
},
{
"name": "earthdistance",
"comment": "calculate great-circle distances on the surface of the Earth",
"tags": ["Geo", "Utility"]
},
{
"name": "file_fdw",
"comment": "foreign-data wrapper for flat file access",
"tags": ["Admin", "Utility"]
"tags": ["Geo", "Utility"],
"link": "https://www.postgresql.org/docs/current/earthdistance.html"
},
{
"name": "fuzzystrmatch",
"comment": "determine similarities and distance between strings",
"tags": ["Search"]
"tags": ["Search"],
"link": "https://www.postgresql.org/docs/current/fuzzystrmatch.html"
},
{
"name": "hstore",
"comment": "data type for storing sets of (key, value) pairs",
"tags": ["Data Type"]
"tags": ["Data Type"],
"link": "https://www.postgresql.org/docs/current/hstore.html"
},
{
"name": "hypopg",
"comment": "Hypothetical indexes for PostgreSQL",
"link": "https://supabase.com/docs/guides/database/extensions/hypopg",
"tags": ["Admin", "Index"]
"tags": ["Admin", "Index"],
"link": "/guides/database/extensions/hypopg"
},
{
"name": "http",
"comment": "HTTP client for PostgreSQL, allows web page retrieval inside the database.",
"link": "https://supabase.com/docs/guides/database/extensions/http",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "/guides/database/extensions/http"
},
{
"name": "insert_username",
"comment": "functions for tracking who changed a table",
"tags": ["Audit", "Utility"]
"tags": ["Audit", "Utility"],
"link": "https://www.postgresql.org/docs/current/contrib-spi.html#id-1.11.7.50.7"
},
{
"name": "old_snapshot",
"comment": "utilities in support of old_snapshot_threshold",
"tags": ["Admin", "Utility"]
},
{
"name": "intagg",
"comment": "integer aggregator and enumerator (obsolete)",
"tags": ["Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/oldsnapshot.html"
},
{
"name": "intarray",
"comment": "functions, operators, and index support for 1-D arrays of integers",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "https://www.postgresql.org/docs/current/intarray.html"
},
{
"name": "isn",
"comment": "data types for international product numbering standards",
"tags": ["Data Type"]
"tags": ["Data Type"],
"link": "https://www.postgresql.org/docs/current/isn.html"
},
{
"name": "lo",
"comment": "Large Object maintenance",
"tags": ["Data Type"]
"tags": ["Data Type"],
"link": "https://www.postgresql.org/docs/current/lo.html"
},
{
"name": "ltree",
"comment": "data type for hierarchical tree-like structures",
"tags": ["Data Type"]
"tags": ["Data Type"],
"link": "https://www.postgresql.org/docs/current/ltree.html"
},
{
"name": "moddatetime",
"comment": "functions for tracking last modification time",
"tags": ["Audit", "Utility"]
},
{
"name": "pageinspect",
"comment": "inspect the contents of database pages at a low level",
"tags": ["Admin", "Utility"]
},
{
"name": "pg_buffercache",
"comment": "examine the shared buffer cache",
"tags": ["Admin", "Utility"]
"tags": ["Audit", "Utility"],
"link": "https://www.postgresql.org/docs/current/contrib-spi.html#id-1.11.7.50.8"
},
{
"name": "pg_cron",
"comment": "Job scheduler for PostgreSQL",
"link": "https://supabase.com/docs/guides/database/extensions/pgcron",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "/guides/database/extensions/pg_cron"
},
{
"name": "pg_freespacemap",
"comment": "examine the free space map (FSM)",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/pgfreespacemap.html"
},
{
"name": "pg_graphql",
"comment": "pg_graphql: GraphQL support",
"link": "https://supabase.com/docs/guides/database/extensions/pg_graphql",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "/guides/database/extensions/pg_graphql"
},
{
"name": "pg_hashids",
"comment": "pg_hashids",
"link": "https://supabase.com/docs/guides/database/extensions/pg_hashids",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "/guides/database/extensions/pg_hashids"
},
{
"name": "pg_jsonschema",
"comment": "pg_jsonschema",
"link": "https://supabase.com/docs/guides/database/extensions/pg_jsonschema",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "/guides/database/extensions/pg_jsonschema"
},
{
"name": "pg_net",
"comment": "Async HTTP",
"link": "https://supabase.com/docs/guides/database/extensions/pgnet",
"tags": ["Utility", "Notifications"]
"tags": ["Utility", "Notifications"],
"link": "/guides/database/extensions/pg_net"
},
{
"name": "pg_prewarm",
"comment": "prewarm relation data",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/pgprewarm.html"
},
{
"name": "pg_stat_monitor",
"comment": "The pg_stat_monitor is a PostgreSQL Query Performance Monitoring tool, based on PostgreSQL contrib module pg_stat_statements. pg_stat_monitor provides aggregated statistics, client information, plan details including plan, and histogram information.",
"link": "https://supabase.com/docs/guides/database/extensions/pg_stat_monitor",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "/guides/database/extensions/pg_stat_monitor"
},
{
"name": "pg_stat_statements",
"comment": "track execution statistics of all SQL statements executed",
"link": "https://supabase.com/docs/guides/database/extensions/pg_stat_statements",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "/guides/database/extensions/pg_stat_statements"
},
{
"name": "pg_surgery",
"comment": "extension to perform surgery on a damaged relation",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/pgsurgery.html"
},
{
"name": "pg_trgm",
"comment": "text similarity measurement and index searching based on trigrams",
"tags": ["Search"]
},
{
"name": "pg_visibility",
"comment": "examine the visibility map (VM) and page-level visibility info",
"tags": ["Admin", "Utility"]
"tags": ["Search"],
"link": "https://www.postgresql.org/docs/current/pgtrgm.html"
},
{
"name": "pgaudit",
"comment": "provides auditing functionality",
"link": "https://supabase.com/docs/guides/database/extensions/pgaudit",
"tags": ["Audit", "Utility"]
"tags": ["Audit", "Utility"],
"link": "/guides/database/extensions/pgaudit"
},
{
"name": "pg_walinspect",
"comment": "functions to inspect contents of PostgreSQL Write-Ahead Log",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/pgwalinspect.html"
},
{
"name": "pgcrypto",
"comment": "cryptographic functions",
"tags": ["Utility", "Cryptography"]
"tags": ["Utility", "Cryptography"],
"link": "https://www.postgresql.org/docs/current/pgcrypto.html"
},
{
"name": "pgjwt",
"comment": "JSON Web Token API for Postgresql",
"link": "https://supabase.com/docs/guides/database/extensions/pgjwt",
"tags": ["Utility", "Cryptography"]
"tags": ["Utility", "Cryptography"],
"link": "/guides/database/extensions/pgjwt"
},
{
"name": "pgroonga",
"comment": "Super fast and all languages supported full text search index based on Groonga",
"link": "https://supabase.com/docs/guides/database/extensions/pgroonga",
"tags": ["Search"]
"tags": ["Search"],
"link": "/guides/database/extensions/pgroonga"
},
{
"name": "pgroonga_database",
"comment": "PGroonga database management module",
"tags": ["Admin"]
"tags": ["Admin"],
"link": "https://pgroonga.github.io/reference/modules/pgroonga-database.html"
},
{
"name": "pgrouting",
"comment": "pgRouting Extension",
"link": "https://supabase.com/docs/guides/database/extensions/pgrouting",
"tags": ["Geo", "Utility"]
"tags": ["Geo", "Utility"],
"link": "/guides/database/extensions/pgrouting"
},
{
"name": "pgrowlocks",
"comment": "show row-level locking information",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/pgrowlocks.html"
},
{
"name": "pgsodium",
"comment": "Postgres extension for libsodium functions",
"link": "https://supabase.com/docs/guides/database/extensions/pgsodium",
"tags": ["Utility", "Cryptography"]
"tags": ["Utility", "Cryptography"],
"link": "/guides/database/extensions/pgsodium"
},
{
"name": "pgstattuple",
"comment": "show tuple-level statistics",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/pgstattuple.html"
},
{
"name": "pgtap",
"comment": "Unit testing for PostgreSQL",
"link": "https://supabase.com/docs/guides/database/extensions/pgtap",
"tags": ["Utility", "Testing"]
"tags": ["Utility", "Testing"],
"link": "/guides/database/extensions/pgtap"
},
{
"name": "plcoffee",
"comment": "PL/CoffeeScript (v8) trusted procedural language",
"tags": ["Language"]
"tags": ["Language"],
"link": "https://github.com/plv8/plv8/blob/master/doc/plv8.md#coffeescript-extension"
},
{
"name": "pljava",
"comment": "PL/Java procedural language (https://tada.github.io/pljava/)",
"tags": ["Language"]
"tags": ["Language"],
"link": "https://tada.github.io/pljava/"
},
{
"name": "plls",
"comment": "PL/LiveScript (v8) trusted procedural language",
"tags": ["Language"]
"tags": ["Language"],
"link": "https://github.com/plv8/plv8/blob/master/doc/plv8.md#livescript-extension"
},
{
"name": "plpgsql",
"comment": "PL/pgSQL procedural language",
"tags": ["Language"]
"tags": ["Language"],
"link": "https://www.postgresql.org/docs/current/plpgsql.html"
},
{
"name": "plpgsql_check",
"comment": "extended check for plpgsql functions",
"href": "https://supabase.com/docs/guides/database/extensions/plpgsql_check",
"tags": ["Utility", "Testing"]
"tags": ["Utility", "Testing"],
"link": "/guides/database/extensions/plpgsql_check"
},
{
"name": "plv8",
"comment": "PL/JavaScript (v8) trusted procedural language",
"link": "http://localhost:3001/docs/guides/database/extensions/plv8",
"tags": ["Language"]
"tags": ["Language"],
"link": "/guides/database/extensions/plv8"
},
{
"name": "postgis",
"comment": "PostGIS geometry and geography spatial types and functions",
"link": "https://supabase.com/docs/guides/database/extensions/postgis",
"tags": ["Geo"]
},
{
"name": "postgis-3",
"comment": "PostGIS geometry and geography spatial types and functions",
"tags": ["Geo"]
},
{
"name": "postgis_raster",
"comment": "PostGIS raster types and functions",
"tags": ["Geo"]
},
{
"name": "postgis_raster-3",
"comment": "PostGIS raster types and functions",
"tags": ["Geo"]
},
{
"name": "postgis_sfcgal",
"comment": "PostGIS SFCGAL functions",
"tags": ["Geo"]
},
{
"name": "postgis_sfcgal-3",
"comment": "PostGIS SFCGAL functions",
"tags": ["Geo"]
},
{
"name": "postgis_tiger_geocoder",
"comment": "PostGIS tiger geocoder and reverse geocoder",
"tags": ["Geo"]
},
{
"name": "postgis_tiger_geocoder-3",
"comment": "PostGIS tiger geocoder and reverse geocoder",
"tags": ["Geo"]
},
{
"name": "postgis_topology",
"comment": "PostGIS topology spatial types and functions",
"tags": ["Geo"]
},
{
"name": "postgis_topology-3",
"comment": "PostGIS topology spatial types and functions",
"tags": ["Geo"]
"tags": ["Geo"],
"link": "/guides/database/extensions/postgis"
},
{
"name": "postgres_fdw",
"comment": "foreign-data wrapper for remote PostgreSQL servers",
"tags": ["Admin"]
"tags": ["Admin"],
"link": "https://www.postgresql.org/docs/current/postgres-fdw.html"
},
{
"name": "refint",
"comment": "functions for implementing referential integrity (obsolete)",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "https://www.postgresql.org/docs/current/contrib-spi.html#id-1.11.7.50.5"
},
{
"name": "rum",
"comment": "GIN-like index for text search",
"link": "https://supabase.com/docs/guides/database/extensions/rum",
"tags": ["Index", "Search"]
"tags": ["Index", "Search"],
"link": "/guides/database/extensions/rum"
},
{
"name": "seg",
"comment": "data type for representing line segments or floating-point intervals",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "https://www.postgresql.org/docs/current/seg.html"
},
{
"name": "sslinfo",
"comment": "information about SSL certificates",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "https://www.postgresql.org/docs/current/sslinfo.html"
},
{
"name": "supautils",
"comment": "Supabase standard library",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "https://supabase.github.io/supautils/"
},
{
"name": "tablefunc",
"comment": "functions that manipulate whole tables, including crosstab",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "https://www.postgresql.org/docs/current/tablefunc.html"
},
{
"name": "tcn",
"comment": "Triggered change notifications",
"tags": ["Utility", "Notifications"]
"tags": ["Utility", "Notifications"],
"link": "https://www.postgresql.org/docs/current/tcn.html"
},
{
"name": "timescaledb",
"comment": "Enables scalable inserts and complex queries for time-series data",
"link": "https://supabase.com/docs/guides/database/extensions/timescaledb",
"tags": ["Time Series", "Data Type", "Utility"]
"tags": ["Time Series", "Data Type", "Utility"],
"link": "/guides/database/extensions/timescaledb"
},
{
"name": "tsm_system_rows",
"comment": "TABLESAMPLE method which accepts number of rows as a limit",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "https://www.postgresql.org/docs/current/tsm-system-rows.html"
},
{
"name": "tsm_system_time",
"comment": "TABLESAMPLE method which accepts time in milliseconds as a limit",
"tags": ["Utility"]
"tags": ["Utility"],
"link": "https://www.postgresql.org/docs/current/tsm-system-time.html"
},
{
"name": "unaccent",
"comment": "text search dictionary that removes accents",
"tags": ["Search"]
"tags": ["Search"],
"link": "https://www.postgresql.org/docs/current/unaccent.html"
},
{
"name": "uuid-ossp",
"comment": "generate universally unique identifiers (UUIDs)",
"link": "https://supabase.com/docs/guides/database/extensions/uuid-ossp",
"tags": ["Utility", "Data Type"]
"tags": ["Utility", "Data Type"],
"link": "/guides/database/extensions/uuid-ossp"
},
{
"name": "pgvector",
"comment": "vector data type with similarity search",
"link": "https://supabase.com/docs/guides/database/extensions/pgvector",
"tags": ["AI", "Data Type", "Search"]
"tags": ["AI", "Data Type", "Search"],
"link": "/guides/database/extensions/pgvector"
},
{
"name": "pg_repack",
"comment": "Optimize physical storage and remove bloat from tables and indexes",
"link": "https://supabase.com/docs/guides/database/extensions/pgrepack",
"tags": ["Admin", "Utility"]
"tags": ["Admin", "Utility"],
"link": "/guides/database/extensions/pg_repack"
},
{
"name": "wrappers",
"comment": "Foreign data wrappers developed by Supabase",
"link": "https://supabase.com/docs/guides/database/extensions/wrappers",
"tags": ["Admin", "Utility"]
},
{
"name": "xml2",
"comment": "XPath querying and XSLT",
"tags": ["Utility"]
"tags": ["Admin", "Utility"],
"link": "/guides/database/extensions/wrappers"
}
]
apps/docs/docs/ref/api/api.mdx
+1 -1
View File
@@ -15,7 +15,7 @@ The Management API is in `beta`. It is usable in it's current state, but it's li
## Authentication
All API requests require a Supabase Personal token to be included in the Authorization header: `Authorization Bearer <supabase_personal_token`.
To generate or manage your API token, visit your [account](https://app.supabase.com/account/tokens) page.
To generate or manage your API token, visit your [account](https://supabase.com/dashboard/account/tokens) page.
Your API tokens carry the same privileges as your user account, so be sure to keep it secret.
```bash
apps/docs/docs/ref/api/introduction.mdx
+1 -1
View File
@@ -23,7 +23,7 @@ hideTitle: true
## Authentication
All API requests require a Supabase Personal token to be included in the Authorization header: `Authorization Bearer <supabase_personal_token`.
To generate or manage your API token, visit your [account](https://app.supabase.com/account/tokens) page.
To generate or manage your API token, visit your [account](https://supabase.com/dashboard/account/tokens) page.
Your API tokens carry the same privileges as your user account, so be sure to keep it secret.
```bash
apps/docs/docs/ref/kotlin/installing.mdx
+134 -14
View File
@@ -181,12 +181,18 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
</RefSubLayout.EducationRow>
### Add KotlinX Serialization (required for PostgREST and Realtime serialization)
### Serialization
supabase-kt provides several different ways to encode and decode your custom objects.
By default, [KotlinX Serialization](https://github.com/Kotlin/kotlinx.serialization) is used.
<RefSubLayout.EducationRow>
<RefSubLayout.Examples>
<RefSubLayout.Details>
Add the serialization plugin
Use [KotlinX Serialization](https://github.com/Kotlin/kotlinx.serialization).
</RefSubLayout.Details>
<RefSubLayout.Examples>
<Tabs
size="small"
@@ -247,20 +253,134 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
</TabPanel>
</Tabs>
Now you can create serializable classes in your project:
```kotlin
@Serializable
data class Message(
val id: Int,
val content: String,
@SerialName("author_id")
val authorId: String
)
val client = createSupabaseClient(supabaseUrl, supabaseKey) {
//Already the default serializer
}
```
And use them in your Supabase queries:
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
Use [Moshi](https://github.com/square/moshi).
</RefSubLayout.Details>
<RefSubLayout.Examples>
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
implementation("io.github.jan-tennert.supabase:serializer-moshi:VERSION")
```
</TabPanel>
<TabPanel id="groovy" label="build.gradle">
```groovy
implementation 'io.github.jan-tennert.supabase:serializer-moshi:VERSION'
```
</TabPanel>
<TabPanel id="xml" label="pom.xml">
```xml
<dependency>
<groupId>io.github.jan-tennert.supabase</groupId>
<artifactId>serializer-moshi</artifactId>
<version>VERSION</version>
</dependency>
```
</TabPanel>
</Tabs>
```kotlin
val messages = client.postgrest["messages"].select().decodeList<Message>()
val client = createSupabaseClient(supabaseUrl, supabaseKey) {
defaultSerializer = MoshiSerializer()
}
```
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
Use [Jackson](https://github.com/FasterXML/jackson-module-kotlin).
</RefSubLayout.Details>
<RefSubLayout.Examples>
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
implementation("io.github.jan-tennert.supabase:serializer-jackson:VERSION")
```
</TabPanel>
<TabPanel id="groovy" label="build.gradle">
```groovy
implementation 'io.github.jan-tennert.supabase:serializer-jackson:VERSION'
```
</TabPanel>
<TabPanel id="xml" label="pom.xml">
```xml
<dependency>
<groupId>io.github.jan-tennert.supabase</groupId>
<artifactId>serializer-jackson</artifactId>
<version>VERSION</version>
</dependency>
```
</TabPanel>
</Tabs>
```kotlin
val client = createSupabaseClient(supabaseUrl, supabaseKey) {
defaultSerializer = JacksonSerializer()
}
```
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
Use custom serializer.
</RefSubLayout.Details>
<RefSubLayout.Examples>
```kotlin
class CustomSerializer: SupabaseSerializer {
override fun <T : Any> encode(type: KType, value: T): String {
//encode value to string
}
override fun <T : Any> decode(type: KType, value: String): T {
//decode value
}
}
```
```kotlin
val client = createSupabaseClient(supabaseUrl, supabaseKey) {
defaultSerializer = CustomSerializer()
}
```
</RefSubLayout.Examples>
apps/docs/docs/ref/kotlin/introduction.mdx
+18 -5
View File
@@ -18,15 +18,28 @@ This reference documents every object and method available in Supabase's Kotlin
Supported Kotlin targets:
- JVM
- Android
- iOS (Experimental)
- JS (Browser)
| **Module** | **GoTrue** | **Realtime** | **Postgrest** | **Storage** | **Functions** | **Apollo-GraphQL** |
| -------------------------------------- | ---------- | ------------ | ------------- | ----------- | ------------- | ------------------ |
| **JVM** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Android** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **JS** _(Browser)_ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **IOS** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **MacOS** _(macosX64 & macosArm64)_ 🚧 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Windows** _(mingwX64)_ 🚧 | ☑️ | ✅ | ✅ | ✅ | ✅ | ❌ |
| **Linux** _(linuxX64)_ 🚧 | ☑️ | ✅ | ✅ | ✅ | ✅ | ❌ |
✅ = full support
☑️ = partial support: no built-in OAuth/OTP link handling. Linux also has no persistent storage.
🚧 = experimental/needs feedback
❌ = not supported
</div>
<div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
<p>The Kotlin client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
<p>The Kotlin client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
<p>Huge thanks to official maintainer, [jan-tennert](https://github.com/jan-tennert).</p>
apps/docs/docs/ref/self-hosting-analytics/introduction.mdx
+4
View File
@@ -122,6 +122,10 @@ Download your Google Cloud API JWT and store it under gcloud.json in your workin
required.
</Admonition>
### Storage Location
Currently, all BigQuery datasets stored and managed by Analytics, whether via CLI or self-hosted, will default to the US region.
## Production Recommendations
To self-host in a production setting, we recommend performing the following for a better experience.
apps/docs/docs/reference/api.mdx
+1 -1
View File
@@ -15,7 +15,7 @@ The Management API is in `beta`. It is usable in it's current state, but it's li
## Authentication
All API requests require a Supabase Personal token to be included in the Authorization header: `Authorization Bearer <supabase_personal_token`.
To generate or manage your API token, visit your [account](https://app.supabase.com/account/tokens) page.
To generate or manage your API token, visit your [account](https://supabase.com/dashboard/account/tokens) page.
Your API tokens carry the same privileges as your user account, so be sure to keep it secret.
```bash
apps/docs/layouts/SiteLayout.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ const levelsData = {
},
reference_swift_v0: {
icon: '/docs/img/icons/menu/reference-swift',
name: 'Swift Reference v1.0',
name: 'Swift Reference v0.0',
},
reference_kotlin_v0: {
icon: '/docs/img/icons/menu/reference-kotlin',
apps/docs/layouts/guides/index.tsx
+1 -3
View File
@@ -1,17 +1,15 @@
import { MDXProvider } from '@mdx-js/react'
import { NextSeo } from 'next-seo'
import Head from 'next/head'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { FC, useEffect, useRef, useState } from 'react'
import { IconExternalLink } from 'ui'
import { ExpandableVideo, IconExternalLink } from 'ui'
import components from '~/components'
import { highlightSelectedTocItem } from '~/components/CustomHTMLElements/CustomHTMLElements.utils'
import { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
import GuidesTableOfContents from '~/components/GuidesTableOfContents'
import useHash from '~/hooks/useHash'
import { LayoutMainContent } from '../DefaultLayout'
import ExpandableVideo from 'ui/src/components/ExpandableVideo/ExpandableVideo'
interface Props {
meta: {
apps/docs/lib/mdx/generateRefMarkdown.tsx
+3 -2
View File
@@ -1,9 +1,10 @@
import fs from 'fs'
import { CodeHikeConfig, remarkCodeHike } from '@code-hike/mdx'
import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
import matter from 'gray-matter'
import { serialize } from 'next-mdx-remote/serialize'
import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
import remarkGfm from 'remark-gfm'
import { ICommonMarkdown } from '~/components/reference/Reference.types'
async function generateRefMarkdown(sections: ICommonMarkdown[], slug: string) {
@@ -52,7 +53,7 @@ async function generateRefMarkdown(sections: ICommonMarkdown[], slug: string) {
// https://mdxjs.com/packages/mdx/#compilefile-options
mdxOptions: {
useDynamicImport: true,
remarkPlugins: [[remarkCodeHike, codeHikeOptions]],
remarkPlugins: [remarkGfm, [remarkCodeHike, codeHikeOptions]],
},
// Indicates whether or not to parse the frontmatter from the mdx source
})
apps/docs/lib/mdx/plugins/remarkAdmonition.ts
+1 -1
View File
@@ -1,8 +1,8 @@
import { Content, Paragraph, Parent } from 'mdast'
import { MdxJsxFlowElement } from 'mdast-util-mdx'
import { AdmonitionProps } from 'ui'
import { Node } from 'unist'
import { visit } from 'unist-util-visit'
import { AdmonitionProps } from '~/components/Admonition'
/**
* Transforms an `mkdocs-material` Admonition to a Supabase Admonition.
apps/docs/pages/guides/ai/choosing-compute-addon.mdx
+167
View File
@@ -0,0 +1,167 @@
import Layout from '~/layouts/DefaultGuideLayout'
import { Tabs } from 'ui'
export const TabPanel = Tabs.Panel
export const meta = {
id: 'ai-choosing-compute-addon',
title: 'Choosing Compute Add-on',
description: 'Choosing the right Compute Add-on for your workload.',
subtitle: 'Choosing the right Compute Add-on for your workload.',
sidebar_label: 'Choosing Compute Add-on',
}
This guide will help you choose the right Compute Add-on for your workload. We'll provide general guidance, as it is impossible to provide specific instructions for every possible use case. The goal is to give you a starting point from which you can make your own benchmarks and optimizations.
Note that it is only useful for index searches, not for sequential scans. Sequential scans will result to significantly higher latencies and lower throughput, but will guarantee 100% precision and will not be RAM bound. Therefore it is possible to use a smaller plan for sequential scans.
For more information about engineering at scale, see our [Engineering for Scale](/docs/guides/ai/engineering-for-scale) guide.
## Simple workloads
We've run a set of benchmarks using
- The [dbpedia-entities-openai-1M](https://huggingface.co/datasets/KShivendu/dbpedia-entities-openai-1M) dataset. This dataset contains 1,000,000 embeddings for text, with each embedding being 1536 dimensions made using OpenAI API.
- The [gist-960-angular](http://corpus-texmex.irisa.fr/) dataset. This dataset contains 1,000,000 embeddings for images, with each embedding being 960 dimensions.
- The [GloVe Reddit comments](https://nlp.stanford.edu/projects/glove/) dataset, which contains 1,623,397 embeddings for words, with each embedding being 512 dimensions.
We used [Vecs](https://github.com/supabase/vecs) to create a collection, upload the embeddings to a single table, and create an `inner-product` index for the embedding column. We then ran a series of queries to measure the performance of different compute add-ons:
### Results
<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="dbpedia1536"
>
<TabPanel id="dbpedia1536" label="OpenAI-1536, probes = 10">
Emdeddings of 1536 dimensions by OpenAI for dbpedia dataset with 1,000,000 vectors.
| Plan | Vectors | Lists | RPS | Latency Mean | Latency p95 | RAM Usage | RAM |
| ------ | --------- | ----- | ---- | ------------ | ----------- | ------------------ | ------ |
| Free | 20,000 | 40 | 135 | 0.372 sec | 0.412 sec | 1 GB + 200 Mb Swap | 1 GB |
| Small | 50,000 | 100 | 140 | 0.357 sec | 0.398 sec | 1.8 GB | 2 GB |
| Medium | 100,000 | 200 | 130 | 0.383 sec | 0.446 sec | 3.7 GB | 4 GB |
| Large | 250,000 | 500 | 130 | 0.378 sec | 0.434 sec | 7 GB | 8 GB |
| XL | 500,000 | 1000 | 235 | 0.213 sec | 0.271 sec | 13.5 GB | 16 GB |
| 2XL | 1,000,000 | 2000 | 380 | 0.133 sec | 0.236 sec | 30 GB | 32 GB |
| 4XL | 1,000,000 | 2000 | 720 | 0.068 sec | 0.120 sec | 35 GB | 64 GB |
| 8XL | 1,000,000 | 2000 | 1250 | 0.039 sec | 0.066 sec | 38 GB | 128 GB |
| 12XL | 1,000,000 | 2000 | 1600 | 0.030 sec | 0.052 sec | 41 GB | 192 GB |
| 16XL | 1,000,000 | 2000 | 1790 | 0.029 sec | 0.051 sec | 45 GB | 256 GB |
For 1,000,000 vectors 10 probes results to precision of 0.91. And for 500,000 vectors and below 10 probes results to precision in the range of 0.95 - 0.99. To increase precision, you need to increase the number of probes.
</TabPanel>
<TabPanel id="dbpedia1536_40" label="OpenAI-1536, probes = 40">
Emdeddings of 1536 dimensions by OpenAI for dbpedia dataset with 1,000,000 vectors.
| Plan | Vectors | Lists | RPS | Latency Mean | Latency p95 | RAM Usage | RAM |
| ------ | --------- | ----- | --- | ------------ | ----------- | --------- | ------ |
| Free | 20,000 | 40 | - | - | - | - | 1 GB |
| Small | 50,000 | 100 | - | - | - | - | 2 GB |
| Medium | 100,000 | 200 | - | - | - | - | 4 GB |
| Large | 250,000 | 500 | - | - | - | - | 8 GB |
| XL | 500,000 | 1000 | - | - | - | - | 16 GB |
| 2XL | 1,000,000 | 2000 | 140 | 0.358 sec | 0.575 sec | 30 GB | 32 GB |
| 4XL | 1,000,000 | 2000 | 270 | 0.186 sec | 0.304 sec | 35 GB | 64 GB |
| 8XL | 1,000,000 | 2000 | 470 | 0.104 sec | 0.166 sec | 38 GB | 128 GB |
| 12XL | 1,000,000 | 2000 | 600 | 0.085 sec | 0.132 sec | 41 GB | 192 GB |
| 16XL | 1,000,000 | 2000 | 670 | 0.081 sec | 0.129 sec | 45 GB | 256 GB |
For 1,000,000 vectors 40 probes results to precision of 0.98. Note that exact values may vary depending on the dataset and queries, we recommend to run benchmarks with your own data to get precise results. Use this table as a reference.
</TabPanel>
<TabPanel id="gist960" label="gist-960, probes = 10">
Emdeddings of 960 dimensions from gist-960 dataset with 1,000,000 vectors.
| Plan | Vectors | Lists | RPS | Latency Mean | Latency p95 | RAM Usage | RAM |
| ------ | --------- | ----- | ---- | ------------ | ----------- | ------------------ | ------ |
| Free | 30,000 | 30 | 75 | 0.065 sec | 0.088 sec | 1 GB + 100 Mb Swap | 1 GB |
| Small | 100,000 | 100 | 78 | 0.064 sec | 0.092 sec | 1.8 GB | 2 GB |
| Medium | 250,000 | 250 | 58 | 0.085 sec | 0.129 sec | 3.2 GB | 4 GB |
| Large | 500,000 | 500 | 55 | 0.088 sec | 0.140 sec | 5 GB | 8 GB |
| XL | 1,000,000 | 1000 | 110 | 0.046 sec | 0.070 sec | 14 GB | 16 GB |
| 2XL | 1,000,000 | 1000 | 235 | 0.083 sec | 0.136 sec | 10 GB | 32 GB |
| 4XL | 1,000,000 | 1000 | 420 | 0.071 sec | 0.106 sec | 11 GB | 64 GB |
| 8XL | 1,000,000 | 1000 | 815 | 0.072 sec | 0.106 sec | 13 GB | 128 GB |
| 12XL | 1,000,000 | 1000 | 1150 | 0.052 sec | 0.078 sec | 15.5 GB | 192 GB |
| 16XL | 1,000,000 | 1000 | 1345 | 0.072 sec | 0.106 sec | 17.5 GB | 256 GB |
</TabPanel>
<TabPanel id="glove512" label="GloVe-512, probes = 10">
Emdeddings of 512 dimensions from GloVe Reddit comments dataset with 1,623,397 vectors.
| Plan | Vectors | Lists | RPS | Latency Mean | Latency p95 | RAM Usage | RAM |
| ------ | --------- | ----- | ---- | ------------ | ----------- | ------------------ | ------ |
| Free | 100,000 | 100 | 250 | 0.395 sec | 0.432 sec | 1 GB + 300 Mb Swap | 1 GB |
| Small | 250,000 | 250 | 440 | 0.223 sec | 0.250 sec | 2 GB + 200 Mb Swap | 2 GB |
| Medium | 500,000 | 500 | 425 | 0.116 sec | 0.143 sec | 3.7 GB | 4 GB |
| Large | 1,000,000 | 1000 | 515 | 0.096 sec | 0.116 sec | 7.5 GB | 8 GB |
| XL | 1,623,397 | 1275 | 465 | 0.212 sec | 0.272 sec | 14 GB | 16 GB |
| 2XL | 1,623,397 | 1275 | 1400 | 0.061 sec | 0.075 sec | 22 GB | 32 GB |
| 4XL | 1,623,397 | 1275 | 1800 | 0.027 sec | 0.043 sec | 20 GB | 64 GB |
| 8XL | 1,623,397 | 1275 | 2850 | 0.032 sec | 0.049 sec | 21 GB | 128 GB |
| 12XL | 1,623,397 | 1275 | 3700 | 0.020 sec | 0.036 sec | 26 GB | 192 GB |
| 16XL | 1,623,397 | 1275 | 3700 | 0.025 sec | 0.042 sec | 29 GB | 256 GB |
Random vectors were generated for queries.
</TabPanel>
<TabPanel id="glove512_60" label="GloVe-512, probes = 60">
Emdeddings of 512 dimensions from GloVe Reddit comments dataset with 1,623,397 vectors.
| Plan | Vectors | Lists | RPS | Latency Mean | Latency p95 | RAM Usage | RAM |
| ------ | --------- | ----- | --- | ------------ | ----------- | --------- | ------ |
| Free | 100,000 | 100 | - | - | - | - | 1 GB |
| Small | 250,000 | 250 | - | - | - | - | 2 GB |
| Medium | 500,000 | 500 | 75 | 0.656 sec | 0.750 sec | 3.7 GB | 4 GB |
| Large | 1,000,000 | 1000 | 102 | 0.488 sec | 0.580 sec | 7.5 GB | 8 GB |
| XL | 1,000,000 | 1000 | 188 | 0.525 sec | 0.596 sec | 14 GB | 16 GB |
| XL | 1,623,397 | 1275 | 75 | 0.679 sec | 0.798 sec | 14 GB | 16 GB |
| 2XL | 1,623,397 | 1275 | 160 | 0.314 sec | 0.384 sec | 22 GB | 32 GB |
| 4XL | 1,623,397 | 1275 | 300 | 0.083 sec | 0.113 sec | 20 GB | 64 GB |
| 8XL | 1,623,397 | 1275 | 565 | 0.105 sec | 0.141 sec | 21 GB | 128 GB |
| 12XL | 1,623,397 | 1275 | 840 | 0.093 sec | 0.124 sec | 26 GB | 192 GB |
| 16XL | 1,623,397 | 1275 | 940 | 0.084 sec | 0.108 sec | 29 GB | 256 GB |
Random vectors were generated for queries.
</TabPanel>
</Tabs>
<Admonition type="note">
It is possible to upload more vectors to a single table if Memory allows it (for example, 4XL plan and higher for OpenAI embeddings). But it will affect the performance of the queries: RPS will be lower, and latency will be higher. Scaling should be almost linear, but it is recommended to benchmark your workload to find the optimal number of vectors per table and per database instance.
</Admonition>
## Methodology
We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikbern/ann-benchmarks) methodology. A Python test runner is responsible for uploading the data, creating the index, and running the queries. The pgvector engine is implemented using [vecs](https://github.com/supabase/vecs), a Python client for pgvector.
<div>
<img
alt="multi database"
className="dark:hidden"
src="/docs/img/ai/instance-type/vecs-benchmark--light.png"
/>
<img
alt="multi database"
className="hidden dark:block"
src="/docs/img/ai/instance-type/vecs-benchmark--dark.png"
/>
</div>
Each test is run for a minimum of 30-40 minutes. They include a series of experiments executed at different concurrency levels to measure the engine's performance under different load types. The results are then averaged.
As a general recommendation, we suggest using a concurrency level of 5 or more for most workloads and 30 or more for high-load workloads.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/ai/choosing-instance-type.mdx
-79
View File
@@ -1,79 +0,0 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'ai-choosing-instance-type',
title: 'Choosing Instance Type',
description: 'Choosing the right instance type for your workload.',
subtitle: 'Choosing the right instance type for your workload.',
sidebar_label: 'Choosing Instance Type',
}
This guide will help you choose the right instance type for your workload. We'll provide general guidance, as it is impossible to provide specific instructions for every possible use case. The goal is to give you a starting point from which you can make your own benchmarks and optimizations.
For more information about engineering at scale, see our [Engineering for Scale](/docs/guides/ai/engineering-for-scale) guide.
## Simple workloads
We've run a set of benchmarks using the [gist-960-angular](http://corpus-texmex.irisa.fr/) dataset. This dataset contains 1,000,000 embeddings for images, with each embedding being 960 dimensions.
We used [Vecs](https://github.com/supabase/vecs) to create a collection, upload the embeddings to a single table, and create an `inner-product` index for the embedding column. We then ran a series of queries to measure the performance of different instance types:
### Results
The number of vectors in `gist-960-angular` was cut to fit the instance size.
| Plan | CPU | Memory | Vectors | RPS | Latency Mean | Latency p95 | CPU Usage - Max % | Memory Usage - Max |
| ------ | ------ | ------ | ------- | --- | ------------ | ----------- | ----------------- | ------------------ |
| Free | 2-core | 1 GB | 30,000 | 75 | 0.065 sec | 0.088 sec | 90% | 1 GB + 100 Mb Swap |
| Small | 2-core | 2 GB | 100,000 | 78 | 0.064 sec | 0.092 sec | 80% | 1.8 GB |
| Medium | 2-core | 4 GB | 250,000 | 58 | 0.085 sec | 0.129 sec | 90% | 3.2 GB |
| Large | 2-core | 8 GB | 500,000 | 55 | 0.088 sec | 0.140 sec | 90% | 5 GB |
The full number of vectors in `gist-960-angular` dataset - 1,000,000.
| Plan | CPU | Memory | Vectors | RPS | Latency Mean | Latency p95 | CPU Usage - Max % | Memory Usage - Max |
| ---- | ------- | ------ | --------- | ---- | ------------ | ----------- | ----------------- | ------------------ |
| XL | 4-core | 16 GB | 1,000,000 | 110 | 0.046 sec | 0.070 sec | 45% | 14 GB |
| 2XL | 8-core | 32 GB | 1,000,000 | 235 | 0.083 sec | 0.136 sec | 33% | 10 GB |
| 4XL | 16-core | 64 GB | 1,000,000 | 420 | 0.071 sec | 0.106 sec | 45% | 11 GB |
| 8XL | 32-core | 128 GB | 1,000,000 | 815 | 0.072 sec | 0.106 sec | 75% | 13 GB |
| 12XL | 48-core | 192 GB | 1,000,000 | 1150 | 0.052 sec | 0.078 sec | 70% | 15.5 GB |
| 16XL | 64-core | 256 GB | 1,000,000 | 1345 | 0.072 sec | 0.106 sec | 60% | 17.5 GB |
- Lists set to `Number of vectors / 1000`
- Probes set to `10`
<Admonition type="note">
It is possible to upload more than 1,000,000 vectors to a single table if Memory allows it (for example, 2XL instance and higher). But it will affect the performance of the queries: RPS will be lower, and latency will be higher. Scaling should be almost linear, but it is recommended to benchmark your workload to find the optimal number of vectors per table and per instance.
</Admonition>
## Methodology
We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikbern/ann-benchmarks) methodology. A Python test runner is responsible for uploading the data, creating the index, and running the queries. The pgvector engine is implemented using [vecs](https://github.com/supabase/vecs), a Python client for pgvector.
<div>
<img
alt="multi database"
className="dark:hidden"
src="/docs/img/ai/instance-type/vecs-benchmark--light.png"
/>
<img
alt="multi database"
className="hidden dark:block"
src="/docs/img/ai/instance-type/vecs-benchmark--dark.png"
/>
</div>
Each test is run for a minimum of 30-40 minutes. They include a series of experiments executed at different concurrency levels to measure the engine's performance under different load types. The results are then averaged.
As a general recommendation, we suggest using a concurrency level of 5 or more for most workloads and 30 or more for high-load workloads.
## Future benchmarks
We'll continue to add more benchmarks on datasets consisting of different vector dimensions, number of `lists` in the index, and number of `probes` in the index. Stay tuned for more information about how it may affect the performance and precision of your queries.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/ai/examples/headless-vector-search.mdx
+2 -2
View File
@@ -37,7 +37,7 @@ There are 3 steps to build similarity search inside your documentation:
### Prepare your database
To prepare, create a [new Supabase project](https://database.new) and store the database and API credentials, which you can find in the project [settings](https://app.supabase.com/_/settings).
To prepare, create a [new Supabase project](https://database.new) and store the database and API credentials, which you can find in the project [settings](https://supabase.com/dashboard/_/settings).
Now we can use the [Headless Vector Search](https://github.com/supabase/headless-vector-search#set-up) instructions to set up the database:
@@ -46,7 +46,7 @@ Now we can use the [Headless Vector Search](https://github.com/supabase/headless
3. Apply the database migrations: `supabase db push`
4. Set your OpenAI key as a secret: `supabase secrets set OPENAI_KEY=sk-xxx`
5. Deploy the Edge Functions: `supabase functions deploy --no-verify-jwt`
6. Expose `docs` schema via API in Supabase Dashboard [settings](https://app.supabase.com/project/_/settings/api) > `API Settings` > `Exposed schemas`
6. Expose `docs` schema via API in Supabase Dashboard [settings](https://supabase.com/dashboard/project/_/settings/api) > `API Settings` > `Exposed schemas`
### Ingest your documentation
apps/docs/pages/guides/ai/examples/huggingface-image-captioning.mdx
+3 -3
View File
@@ -20,15 +20,15 @@ We can combine Hugging Face with [Supabase Storage](https://supabase.com/storage
## Setup
- Open your Supabase project dashboard or [create a new project](https://app.supabase.com/projects).
- [Create a new bucket](https://app.supabase.com/project/_/storage/buckets) called `images`.
- Open your Supabase project dashboard or [create a new project](https://supabase.com/dashboard/projects).
- [Create a new bucket](https://supabase.com/dashboard/project/_/storage/buckets) called `images`.
- Generate TypeScript types from remote Database.
- Create a new Database table called `image_caption`.
- Create `id` column of type `uuid` which references `storage.objects.id`.
- Create a `caption` column of type `text`.
- Regenerate TypeScript types to include new `image_caption` table.
- Deploy the function to Supabase: `supabase functions deploy huggingface-image-captioning`.
- Create the Database Webhook in the [Supabase Dashboard](https://app.supabase.com/project/_/database/hooks) to trigger the `huggingface-image-captioning` function anytime a record is added to the `storage.objects` table.
- Create the Database Webhook in the [Supabase Dashboard](https://supabase.com/dashboard/project/_/database/hooks) to trigger the `huggingface-image-captioning` function anytime a record is added to the `storage.objects` table.
## Generate TypeScript Types
apps/docs/pages/guides/ai/examples/nextjs-vector-search.mdx
+3 -3
View File
@@ -22,13 +22,13 @@ We assume that you have a Next.js project with a collection of `.mdx` files nest
## Create a project
1. [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
1. [Create a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
1. Enter your project details.
1. Wait for the new database to launch.
## Prepare the database
Let's prepare the database schema. We can use the "OpenAI Vector Search" quickstart in the [SQL Editor](https://app.supabase.com/project/_/sql), or you can copy/paste the SQL below and run it yourself.
Let's prepare the database schema. We can use the "OpenAI Vector Search" quickstart in the [SQL Editor](https://supabase.com/dashboard/project/_/sql), or you can copy/paste the SQL below and run it yourself.
<Tabs
scrollable
@@ -38,7 +38,7 @@ Let's prepare the database schema. We can use the "OpenAI Vector Search" quickst
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [SQL Editor](https://app.supabase.com/project/_/sql) page in the Dashboard.
1. Go to the [SQL Editor](https://supabase.com/dashboard/project/_/sql) page in the Dashboard.
2. Click **OpenAI Vector Search**.
3. Click **Run**.
apps/docs/pages/guides/ai/examples/openai.mdx
+1 -1
View File
@@ -5,7 +5,7 @@ export const meta = {
title: 'Generating OpenAI GPT3 completions',
description: 'Generate GPT text completions using OpenAI and Supabase Edge Functions.',
subtitle: 'Generate GPT text completions using OpenAI and Supabase Edge Functions.',
video: 'https://www.youtube.com/v/29p8kIqyU_Y',
video: 'https://www.youtube-nocookie.com/v/29p8kIqyU_Y',
tocVideo: '29p8kIqyU_Y',
}
apps/docs/pages/guides/ai/going-to-prod.mdx
+100
View File
@@ -0,0 +1,100 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'ai-going-to-prod',
title: 'Going to Production',
description: 'Checklist for going to production with your AI application.',
subtitle: 'Going to production checklist for AI applications.',
sidebar_label: 'Going to Production',
}
This guide will help you to prepare your application for production. We'll provide actionable steps to help you scale your application, ensure that it is reliable, can handle the load, and provide optimal precision for your use case.
See our [Engineering for Scale](/docs/guides/ai/engineering-for-scale) guide for more information about engineering at scale.
## Do you need indexes?
Sequential scans will result in significantly higher latencies and lower throughput, guaranteeing 100% precision and not being RAM bound.
There are a couple of cases where you might not need indexes:
- You have a small dataset and don't need to scale it.
- You are not expecting high amounts of vector search queries per second.
- You need to guarantee 100% precision.
You don't have to create indexes in these cases and can use sequential scans instead. This type of workload will not be RAM bound and will not require any additional resources but will result in higher latencies and lower throughput. Extra CPU cores may help to improve queries per second, but it will not help to improve latency.
On the other hand, if you need to scale your application, you will need to create indexes. This will result in lower latencies and higher throughput, but will require additional RAM to make use of Postgres Caching. Also, using indexes will result in lower precision, since you are replacing exact (KNN) search with approximate (ANN) search.
## Understanding `probes` and `lists`
Indexes used for approximate vector similarity search in pgvector divides a dataset into partitions. The number of these partitions is defined by the `lists` constant. The `probes` controls how many lists are going to be searched during a query.
The values of lists and probes directly affect precision and requests per second (RPS).
- Higher `lists` means an index will be built slower, but you can achieve better RPS and precision.
- Higher `probes` means that select queries will be slower, but you can achieve better precision.
- `lists` and `probes` are not independent. Higher `lists` means that you will have to use higher `probes` to achieve the same precision.
You can find more examples of how `lists` and `probes` constants affect precision and RPS in [pgvector 0.4.0 performance](https://supabase.com/blog/pgvector-performance) blogpost.
<div>
<img
alt="multi database"
className="dark:hidden"
src="/docs/img/ai/going-prod/lists-count--light.png"
/>
<img
alt="multi database"
className="hidden dark:block"
src="/docs/img/ai/going-prod/lists-count--dark.png"
/>
</div>
## Performance Tips when using indexes
First, a few generic tips which you can pick and choose from:
1. The Supabase managed platform will automatically optimize Postgres configs for you based on your compute addon. But if you self-host, consider **adjusting your Postgres config** based on RAM & CPU cores. See [example optimizations](https://gist.github.com/egor-romanov/323e2847851bbd758081511785573c08) for more details.
2. Prefer `inner-product` to `L2` or `Cosine` distances if your vectors are normalized (like `text-embedding-ada-002`). If embeddings are not normalized, `Cosine` distance should give the best results with an index.
3. **Pre-warm your database.** Implement the warm-up technique before transitioning to production or running benchmarks.
- Execute 10,000 to 50,000 "warm-up" queries before each benchmark, matching the number of `probes` you are going to use in production. Additionally, you can execute about 1,000 queries with probes ranging from three to ten times the prod's probes. Both of these help to increase RAM utilization.
4. **Establish your workload.** Increasing the lists constant for the pgvector index can accelerate your queries (at the expense of a slower build). For instance, for benchmarks with 1,000,000 embeddings, we employed a `lists` constant of 2000 (`number of vectors / 500`) as opposed to the suggested 1000 (`number of vectors / 1000`).
5. **Benchmark your own specific workloads.** Doing this during cache warm-up helps gauge the best value for the `probes` constant, balancing precision with requests per second (RPS).
## Going into production
1. Decide if you are going to use indexes or not. You can skip the rest of this guide if you do not use indexes.
2. Over-provision RAM during preparation. You can scale down in step `5`, but it's better to start with a larger size to get the best results for RAM requirements. (We'd recommend at least 8XL if you're using Supabase.)
3. Upload your data to the database. If you use the [`vecs`](/docs/guides/ai/python/api) library, it will automatically generate an index with default parameters.
4. Run a benchmark using randomly generated queries and observe the results. Again, you can use the `vecs` library with the `ann-benchmarks` tool. Do it with probes set to 10 (default) and then with probes set to 100 or more, so RPS will be lower than 10.
5. Monitor the RAM usage, and save it as a note for yourself. You would likely want to use a compute add-on in the future that has the same amount of RAM that was used at the moment (both actual RAM usage and RAM used for cache and buffers).
6. Scale down your compute add-on to the one that would have the same amount of RAM used at the moment.
7. Repeat step 3 to load the data into RAM. You should see RPS increase on subsequent runs, and stop when it no longer increases. Then repeat the benchmark with probes set to a higher value if you haven't already performed it for that compute add-on size.
8. Run a benchmark using real queries and observe the results. You can use the `vecs` library for that as well with `ann-benchmarks` tool. Set probes to 10 (default) and then gradually increase/decrease probes until you see that both precision and RPS match your requirements.
9. If you want higher RPS and you don't expect to have frequent inserts and reindexing, you can increase `lists` constantly. You have to rebuild the index with a higher lists value and repeat steps 6-7 to find the best combination of `lists` and `probes` constants to achieve the best RPS and precision values. Higher `lists` mean that index will build slower, but you can achieve better RPS and precision. Higher probes mean that select queries will be slower, but you can achieve better precision.
## Useful links
Don't forget to check out the general [Production Checklist](/docs/guides/platform/going-into-prod) to ensure your project is secure, performant, and will remain available for your users.
You can look at our [Choosing Compute Add-on](/docs/guides/ai/choosing-compute-addon) guide to get a basic understanding of how much compute you might need for your workload.
Or take a look at our [pgvector 0.4.0 performance](https://supabase.com/blog/pgvector-performance) blog post to see what pgvector is capable of and how the above technique can be used to achieve the best results.
<div>
<img
alt="multi database"
className="dark:hidden"
src="/docs/img/ai/going-prod/size-to-rps--light.png"
/>
<img
alt="multi database"
className="hidden dark:block"
src="/docs/img/ai/going-prod/size-to-rps--dark.png"
/>
</div>
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/ai/google-colab.mdx
+3 -3
View File
@@ -17,7 +17,7 @@ export const meta = {
Google Colab is a hosted Jupyter Notebook service. It provides free access to computing resources, including GPUs and TPUs, and is well-suited to machine learning, data science, and education. We can use Colab to manage collections using [Supabase Vecs](/docs/guides/ai/vecs-python-client).
In this tutorial we'll connect to a database running on the Supabase [platform](https://app.supabase.com/). If you don't already have a database, you can create one here: [database.new](https://database.new).
In this tutorial we'll connect to a database running on the Supabase [platform](https://supabase.com/dashboard/). If you don't already have a database, you can create one here: [database.new](https://database.new).
## Create a new notebook
@@ -39,7 +39,7 @@ pip install vecs
## Connect to your database
Find the Postgres connection string for your Supabase project in the [database settings](https://app.supabase.com/_/settings/database) of the dashboard. Copy the "URI" format, which should look something like `postgresql:/postgres:<password>@<host>:5432/postgres`
Find the Postgres connection string for your Supabase project in the [database settings](https://supabase.com/dashboard/_/settings/database) of the dashboard. Copy the "URI" format, which should look something like `postgresql:/postgres:<password>@<host>:5432/postgres`
Create a new code block below the install block (`ctrl+m b`) and add the following code using the Postgres URI you copied above:
@@ -79,7 +79,7 @@ collection.upsert(
)
```
This will create a table inside your database within the `vecs` schema, called `colab_collection`. You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
This will create a table inside your database within the `vecs` schema, called `colab_collection`. You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/integrations/llamaindex.mdx
+1 -1
View File
@@ -52,7 +52,7 @@ Replace the `DB_CONNECTION` with your own connection string for your database, w
Now all that's left is to step through the notebook. You can do this by clicking the "execute" button (`ctrl+enter`) at the top left of each code cell. The notebook guides you through the process of creating a collection, adding data to it, and querying it.
You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/langchain.mdx
+20
View File
@@ -1,4 +1,6 @@
import Layout from '~/layouts/DefaultGuideLayout'
import { Tabs } from 'ui'
export const TabPanel = Tabs.Panel
export const meta = {
id: 'ai-lang-chain',
@@ -14,6 +16,21 @@ export const meta = {
Prepare you database with the relevant tables:
<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="dashboard"
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [SQL Editor](https://supabase.com/dashboard/project/_/sql) page in the Dashboard.
2. Click **LangChain** in the Quick start section.
3. Click **Run**.
</TabPanel>
<TabPanel id="sql" label="SQL">
```sql
-- Enable the pgvector extension to work with embedding vectors
create extension vector;
@@ -55,6 +72,9 @@ end;
$$;
```
</TabPanel>
</Tabs>
## Usage
You can now search your documents using any Node.js application. This is intended to be run on a secure server route.
apps/docs/pages/guides/ai/managing-collections.mdx
+1 -1
View File
@@ -9,7 +9,7 @@ export const meta = {
A collection is a group of vector records managed by the `vecs` Python library. Records can be added to or updated in a collection. Collections can be queried at any time, but should be indexed for scalable query performance.
Supabase provides a [Python client](/docs/guides/ai/vecs-python-client) called `vecs` for managing unstructured vector stores in Postgres. If you come from a data science background, this unstructured data approach will feel familiar. If you are more interested in a structured data approach, see [Vector columns](/docs/guides/ai/vector-columns) or read our guide on [Structured & Unstructured Embeddings](/docs/guides/ai/structured-unstructured-embeddings).
Supabase provides a [Python client](/docs/guides/ai/vecs-python-client) called `vecs` for managing unstructured vector stores in Postgres. If you come from a data science background, this unstructured data approach will feel familiar. If you are more interested in a structured data approach, see [Vector columns](/docs/guides/ai/vector-columns) or read our guide on [Structured & Unstructured Embeddings](/docs/guides/ai/structured-unstructured).
Under the hood `vecs` will manage the necessary Postgres tables and columns to store and query your collections.
apps/docs/pages/guides/ai/quickstarts/face-similarity.mdx
+1 -1
View File
@@ -49,7 +49,7 @@ Replace the `DB_CONNECTION` with your own connection string for your database, w
Now all that's left is to step through the notebook. You can do this by clicking the "execute" button (`ctrl+enter`) at the top left of each code cell. The notebook guides you through the process of creating a collection, adding data to it, and querying it.
You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/quickstarts/hello-world.mdx
+1 -1
View File
@@ -49,7 +49,7 @@ Replace the `DB_CONNECTION` with your own connection string for your database, w
Now all that's left is to step through the notebook. You can do this by clicking the "execute" button (`ctrl+enter`) at the top left of each code cell. The notebook guides you through the process of creating a collection, adding data to it, and querying it.
You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/quickstarts/text-deduplication.mdx
+1 -1
View File
@@ -50,7 +50,7 @@ Replace the `DB_CONNECTION` with your own connection string for your database, w
Now all that's left is to step through the notebook. You can do this by clicking the "execute" button (`ctrl+enter`) at the top left of each code cell. The notebook guides you through the process of creating a collection, adding data to it, and querying it.
You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/structured-unstructured.mdx
+2 -2
View File
@@ -23,7 +23,7 @@ create table docs (
);
insert into docs
(id, content, url, embedding)
(id, embedding, content, url)
values
('79409372-7556-4ccc-ab8f-5786a6cfa4f7', array[0.1, 0.2, 0.3], 'Hello world', '/hello-world');
```
@@ -89,7 +89,7 @@ create table docs (
);
insert into docs
(id, embedding, meta)
(id, embedding, content, url, meta)
values
(
'79409372-7556-4ccc-ab8f-5786a6cfa4f7',
apps/docs/pages/guides/ai/vector-columns.mdx
+1 -1
View File
@@ -23,7 +23,7 @@ Vectors in Supabase are enabled via [pgvector](https://github.com/pgvector/pgvec
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "vector" and enable the extension.
apps/docs/pages/guides/api.mdx
+3 -3
View File
@@ -50,7 +50,7 @@ Reference:
## GraphQL API [#graphql-api-overview]
Supabase uses [pg_graphql](https://supabase.github.io/pg_graphql/) to expose a GraphQL API endpoint at `https://<project_ref>.supabase.co/graphql/v1/`.
You can introspect and query the GraphQL API of an existing Supabase project within Studio [here](https://app.supabase.com/project/_/api/graphiql),
You can introspect and query the GraphQL API of an existing Supabase project within Studio [here](https://supabase.com/dashboard/project/_/api/graphiql),
or navigate there manually at `API Docs > GraphQL > GraphiQL`.
The GraphQL interface is automatically reflected from your database's schema and supports:
@@ -72,11 +72,11 @@ Reference:
Supabase provides a Realtime API using [Realtime](https://github.com/supabase/realtime). You can use this to listen to database changes over websockets.
Realtime leverages PostgreSQL's built-in logical replication. You can manage your Realtime API simply by managing Postgres publications.
Go to your project's [Replication section](https://app.supabase.com/project/_/database/replication) to get started.
Go to your project's [Replication section](https://supabase.com/dashboard/project/_/database/replication) to get started.
## API URL and Keys
You can find the API URL and Keys in the [Dashboard](https://app.supabase.com/project/_/settings/api).
You can find the API URL and Keys in the [Dashboard](https://supabase.com/dashboard/project/_/settings/api).
<video width="99%" muted playsInline controls={true}>
<source
apps/docs/pages/guides/api/api-keys.mdx
+2 -2
View File
@@ -6,9 +6,9 @@ export const meta = {
description: 'Securing your Serverless API with Postgres Row Level Security.',
}
Supabase provides two default keys when you create a project: an `anon` key, and a `service_role` key. You can find both keys in the [API Settings](https://app.supabase.com/project/_/settings/api).
Supabase provides two default keys when you create a project: an `anon` key, and a `service_role` key. You can find both keys in the [API Settings](https://supabase.com/dashboard/project/_/settings/api).
The Serverless APIs are designed to work with Postgres Row Level Security (RLS). These keys both map to Postgres roles. You can find an `anon` user and a `service_role` user in the [Roles](http://app.supabase.com/project/_/database/roles) section of the dashboard.
The Serverless APIs are designed to work with Postgres Row Level Security (RLS). These keys both map to Postgres roles. You can find an `anon` user and a `service_role` user in the [Roles](http://supabase.com/dashboard/project/_/database/roles) section of the dashboard.
The keys are both long-lived JWTs. If you decode these keys, you will see that they contain the "role", an "issued date", and an "expiry date" ~10 years in the future.
apps/docs/pages/guides/api/creating-routes.mdx
+3 -3
View File
@@ -22,7 +22,7 @@ This creates a corresponding route `todos` which can accept `GET`, `POST`, `PATC
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Go to the [Table editor](https://supabase.com/dashboard/project/_/editor) page in the Dashboard.
1. Click **New Table** and create a table with the name `todos`.
1. Click **Save**.
1. Click **New Column** and create a column with the name `task` and type `text`.
@@ -54,7 +54,7 @@ create table
Every Supabase project has a unique API URL. Your API is secured behind an API gateway which requires an API Key for every request.
1. Go to the [Settings](https://app.supabase.com/project/_/settings/general) page in the Dashboard.
1. Go to the [Settings](https://supabase.com/dashboard/project/_/settings/general) page in the Dashboard.
2. Click **API** in the sidebar.
3. Find your API `URL`, `anon`, and `service_role` keys on this page.
@@ -198,7 +198,7 @@ By default Realtime is disabled on your database. Let's turn on Realtime for the
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Replication** in the sidebar.
3. Control which database events are sent by toggling **Insert**, **Update**, and **Delete**.
4. Control which tables broadcast changes by selecting **Source** and toggling each table.
apps/docs/pages/guides/api/joins-and-nesting.mdx
+1 -1
View File
@@ -91,7 +91,7 @@ const { data, error } = await supabase.from('countries').select(`
<TabPanel id="dart" label="Dart">
```dart
final data = await supabase.from('todos').select('id, name, cities(id, name)');
final data = await supabase.from('countries').select('id, name, cities(id, name)');
```
</TabPanel>
apps/docs/pages/guides/api/quickstart.mdx
+4 -4
View File
@@ -16,9 +16,9 @@ We'll create a database table called `todos` for storing tasks. This creates a c
<StepHikeCompact.Step step={1}>
<StepHikeCompact.Details title="Set up a Supabase project with a 'todos' table">
[Create a new project](https://app.supabase.com) in the Supabase Dashboard.
[Create a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
After your project is ready, create a table in your Supabase database. You can do this with either the Table interface or the [SQL Editor](https://app.supabase.com/project/_/sql).
After your project is ready, create a table in your Supabase database. You can do this with either the Table interface or the [SQL Editor](https://supabase.com/dashboard/project/_/sql).
</StepHikeCompact.Details>
@@ -110,7 +110,7 @@ We'll create a database table called `todos` for storing tasks. This creates a c
<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Fetch the data">
Find your API URL and Keys in your Dashboard [API Settings](https://app.supabase.com/project/_/settings/api). You can now query your "todos" table by appending `/rest/v1/todos` to the API URL.
Find your API URL and Keys in your Dashboard [API Settings](https://supabase.com/dashboard/project/_/settings/api). You can now query your "todos" table by appending `/rest/v1/todos` to the API URL.
Copy this block of code, substitute `<PROJECT_REF>` and `<ANON_KEY>`, then run it from a terminal.
@@ -141,7 +141,7 @@ You can query the route in your browser, by appending the `anon` key as a query
### Client libraries
We provide a numerous [Client Libraries](https://github.com/supabase/supabase#client-libraries).
We provide a number of [Client Libraries](https://github.com/supabase/supabase#client-libraries).
<Tabs
scrollable
apps/docs/pages/guides/api/rest/auto-generated-docs.mdx
+2 -2
View File
@@ -6,9 +6,9 @@ export const meta = {
description: 'Supabase provides documentation that updates automatically.',
}
Supabase generates documentation in the [Dashboard](https://app.supabase.com) which updates as you make database changes.
Supabase generates documentation in the [Dashboard](https://supabase.com/dashboard) which updates as you make database changes.
1. Go to the [API](https://app.supabase.com/project/_/api) page in the Dashboard.
1. Go to the [API](https://supabase.com/dashboard/project/_/api) page in the Dashboard.
2. Select any table under **Tables and Views** in the sidebar.
3. Switch between the JavaScript and the cURL docs using the tabs.
apps/docs/pages/guides/api/securing-your-api.mdx
+1 -1
View File
@@ -22,7 +22,7 @@ To enable RLS on any table:
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Authentication](https://app.supabase.com/project/_/auth/users) page in the Dashboard.
1. Go to the [Authentication](https://supabase.com/dashboard/project/_/auth/users) page in the Dashboard.
2. Click on **Policies** in the sidebar.
3. Select **Enable RLS** to enable Row Level Security.
apps/docs/pages/guides/auth.mdx
+12 -12
View File
@@ -64,7 +64,7 @@ You can enable third-party providers with the click of a button by navigating to
### Redirect URLs and wildcards
When using third-party providers, the [Supabase client library](/docs/reference/javascript/auth-signinwithoauth#sign-in-using-a-third-party-provider-with-redirect) redirects the user to the provider. When the third-party provider successfully authenticates the user, the provider redirects the user to the Supabase Auth callback URL where they are further redirected to the URL specified in the `redirectTo` parameter. This parameter defaults to the [`SITE_URL`](/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional [redirect URLs](https://app.supabase.com/project/_/auth/url-configuration).
When using third-party providers, the [Supabase client library](/docs/reference/javascript/auth-signinwithoauth#sign-in-using-a-third-party-provider-with-redirect) redirects the user to the provider. When the third-party provider successfully authenticates the user, the provider redirects the user to the Supabase Auth callback URL where they are further redirected to the URL specified in the `redirectTo` parameter. This parameter defaults to the [`SITE_URL`](/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional [redirect URLs](https://supabase.com/dashboard/project/_/auth/url-configuration).
You can use wildcard match patterns to support preview URLs from providers like Netlify and Vercel. See the [full list of supported patterns](https://pkg.go.dev/github.com/gobwas/glob#Compile). Use [this tool](https://www.digitalocean.com/community/tools/glob?comments=true&glob=http%3A%2F%2Flocalhost%3A3000%2F%2A%2A&matches=false&tests=http%3A%2F%2Flocalhost%3A3000&tests=http%3A%2F%2Flocalhost%3A3000%2F&tests=http%3A%2F%2Flocalhost%3A3000%2F%3Ftest%3Dtest&tests=http%3A%2F%2Flocalhost%3A3000%2Ftest-test%3Ftest%3Dtest&tests=http%3A%2F%2Flocalhost%3A3000%2Ftest%2Ftest%3Ftest%3Dtest) to test your patterns.
@@ -84,27 +84,27 @@ For deployments with Vercel, set the `SITE_URL` to your official site URL. Add t
- `http://localhost:3000/**`
- `https://*-username.vercel.app/**`
Vercel provides an environment variable for the URL of the deployment called `NEXT_PUBLIC_VERCEL_URL`. See the [Vercel docs](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) for more details. You can use this variable to dynamically redirect depending on the environment:
Vercel provides an environment variable for the URL of the deployment called `NEXT_PUBLIC_VERCEL_URL`. See the [Vercel docs](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) for more details. You can use this variable to dynamically redirect depending on the environment. You should also set the value of the environment variable called NEXT_PUBLIC_SITE_URL, this should be set to your site URL in production environment to ensure that redirects function correctly.
```js
const getURL = () => {
let url =
process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
'http://localhost:3000/';
'http://localhost:3000/'
// Make sure to include `https://` when not localhost.
url = url.includes('http') ? url : `https://${url}`;
// Make sure to including trailing `/`.
url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
return url;
};
url = url.includes('http') ? url : `https://${url}`
// Make sure to include a trailing `/`.
url = url.charAt(url.length - 1) === '/' ? url : `${url}/`
return url
}
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'github'
provider: 'github',
options: {
redirectTo: getURL()
}
}
redirectTo: getURL(),
},
})
```
#### Mobile deep linking URIs
apps/docs/pages/guides/auth/auth-captcha.mdx
+4 -4
View File
@@ -51,7 +51,7 @@ In the Settings page, look for the **Sitekey** section and copy the key.
## Enable Captcha protection for your Supabase project
Navigate to the **[Authentication](https://app.supabase.com/project/_/settings/auth)** page in the Supabase Dashboard and find the **Enable Captcha protection** toggle under the **Security and Protection** section.
Navigate to the **[Authentication](https://supabase.com/dashboard/project/_/settings/auth)** page in the Supabase Dashboard and find the **Enable Captcha protection** toggle under the **Security and Protection** section.
![supabase_auth_general_settings.png](/docs/img/guides/auth-captcha/supabase_auth_general_settings.png)
@@ -165,18 +165,18 @@ Let's create an empty state to store our `captchaToken`
const [captchaToken, setCaptchaToken] = useState()
```
Now lets add the Cloudflare Turnstile component to the JSX section of our code
Now lets add the Cloudflare Turnstile component to the JSX section of our code:
```html
<Turnstile />
```
We will pass it the sitekey we copied from the Cloudflare website as a property along with a `onVerify` property which takes a callback function. This callback function will have a token as one of its properties. Let's set the token in the state using `setCaptchaToken`
We will pass it the sitekey we copied from the Cloudflare website as a property along with a `onSuccess` property which takes a callback function. This callback function will have a token as one of its properties. Let's set the token in the state using `setCaptchaToken`:
```jsx
<Turnstile
sitekey="your-sitekey"
onVerify={(token) => { setCaptchaToken(token) }
onSuccess={(token) => { setCaptchaToken(token) }
/>
```
apps/docs/pages/guides/auth/auth-email-templates.mdx
+27 -1
View File
@@ -22,7 +22,7 @@ The templating system provides the following variables for use:
| `{{ .ConfirmationURL }}` | Contains the confirmation URL. For example, a signup confirmation URL would look like: `https://project-ref.supabase.co/auth/v1/verify?token={{ .TokenHash }}&type=signup&redirect_to=https://example.com/path` . |
| `{{ .Token }}` | Contains a 6-digit One-Time-Password (OTP) that can be used instead of the `{{. ConfirmationURL }}` . |
| `{{ .TokenHash }}` | Contains a hashed version of the `{{ .Token }}`. This is useful for constructing your own email link in the email template. |
| `{{ .SiteURL }}` | Contains your application's Site URL. This can be configured in your project's [authentication settings](https://app.supabase.com/project/_/auth/url-configuration). |
| `{{ .SiteURL }}` | Contains your application's Site URL. This can be configured in your project's [authentication settings](https://supabase.com/dashboard/project/_/auth/url-configuration). |
## Limitations
@@ -45,6 +45,32 @@ To guard against this:
The user should be brought to a page on your site where they can confirm the action by clicking a button.
The button should contain the actual confirmation link which can be obtained from parsing the `confirmation_url={{ .ConfirmationURL }}` query parameter in the URL.
### Email Tracking
If you are using an external email provider that enables "email tracking", the links inside the Supabase email templates will be overwritten and won't perform as expected. We recommend disabling email tracking to ensure email links are not overwritten.
### Redirecting the user to a server-side endpoint
If you intend to use [Server-side rendering](/docs/guides/auth/server-side-rendering), you might want the email link to redirect the user to a server-side endpoint to check if they are authenticated before returning the page. However, the default email link will redirect the user after verification to the redirect URL with the session in the query fragments. Since the session is returned in the query fragments by default, you won't be able to access it on the server-side.
You can customize the email link in the email template to redirect the user to a server-side endpoint successfully. For example:
```html
<a href="https://api.example.com/v1/authenticate?token_hash={{ .TokenHash }}&type=invite"
>Accept the invite
</a>
```
When the user clicks on the link, the request will hit `https://api.example.com/v1/authenticate` and you can grab the `token_hash` and `type` query parameters from the URL. Then, you can call the [`verifyOtp`](/docs/reference/javascript/auth-verifyotp) method to get back an authenticated session before redirecting the user back to the client. Since the `verifyOtp` method makes a `POST` request to Supabase Auth to verify the user, the session will be returned in the response body, which can be read by the server. For example:
```js
const { token_hash, type } = Object.fromEntries(new URLSearchParams(window.location.search))
const { data: { session }, error } = supabase.auth.verifyOtp({ token_hash, type })
// subsequently redirect the user back to the client
// ...
```
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/auth/auth-email.mdx
+3 -3
View File
@@ -10,13 +10,13 @@ export const meta = {
Setting up Email logins for your Supabase application.
- Add Email authenticator to your [Supabase Project](https://app.supabase.com)
- Add Email authenticator to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your application - [JavaScript](https://github.com/supabase/supabase-js) | [Flutter](https://github.com/supabase/supabase-flutter)
## Configure email settings
1. For [Site URL](https://app.supabase.com/project/_/auth/url-configuration), enter the final (hosted) URL of your app.
1. For [Auth Providers](https://app.supabase.com/project/_/auth/providers), **enable email provider**.
1. For [Site URL](https://supabase.com/dashboard/project/_/auth/url-configuration), enter the final (hosted) URL of your app.
1. For [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers), **enable email provider**.
<Admonition type="info" label="Self hosting">
apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx
+1 -1
View File
@@ -31,7 +31,7 @@ npm install @supabase/auth-helpers-react
## Set up environment variables
Retrieve your project URL and anon key in your project's [API settings](https://app.supabase.com/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
Retrieve your project URL and anon key in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
```bash .env.local
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+7 -7
View File
@@ -43,7 +43,7 @@ This creates a new Next.js app configured with:
### Declare Environment Variables
Retrieve your project's URL and anon key from your [API settings](https://app.supabase.com/project/_/settings/api), and create a `.env.local` file with the following environment variables:
Retrieve your project's URL and anon key from your [API settings](https://supabase.com/dashboard/project/_/settings/api), and create a `.env.local` file with the following environment variables:
```bash .env.local
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
@@ -68,7 +68,7 @@ npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
### Declare Environment Variables
Retrieve your project's URL and anon key from your [API settings](https://app.supabase.com/project/_/settings/api), and create a `.env.local` file with the following environment variables:
Retrieve your project's URL and anon key from your [API settings](https://supabase.com/dashboard/project/_/settings/api), and create a `.env.local` file with the following environment variables:
```bash .env.local
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
@@ -79,7 +79,7 @@ NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
When using the Supabase client on the server, you must perform extra steps to ensure the user's auth session remains active. Since the user's session is tracked in a cookie, we need to read this cookie and update it if necessary.
In Next.js Server Components, you can read a cookie, but you can't write back to it. Middleware on the other hand, allow you to both read a write to cookies.
Next.js Server Components allow you to read a cookie but not write back to it. Middleware on the other hand allow you to both read and write to cookies.
Next.js [Middleware](https://nextjs.org/docs/app/building-your-application/routing/middleware) runs immediately before each route is rendered. We'll use Middleware to refresh the user's session before loading Server Component routes.
@@ -528,7 +528,7 @@ This allows for the Supabase client to be easily instantiated in the correct con
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/f4yAnVgcJqI"
src="https://www.youtube-nocookie.com/embed/6Sb8R1PYhTY"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
@@ -626,7 +626,7 @@ const supabase = createClientComponentClient({ isSingleton: false })
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/SUS1t6Kq7-8"
src="https://www.youtube-nocookie.com/embed/ywvXGW6P4Gs"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
@@ -696,7 +696,7 @@ Check out the [Next.js auth example repo](https://github.com/supabase/supabase/t
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/B5TUzTKO9CE"
src="https://www.youtube-nocookie.com/embed/4_epZIxqCho"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
@@ -784,7 +784,7 @@ TypeScript types can be [generated with the Supabase CLI](/docs/reference/javasc
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/3kK-40z0DHI"
src="https://www.youtube-nocookie.com/embed/r6q7ypXbPFI"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
apps/docs/pages/guides/auth/auth-helpers/remix.mdx
+2 -2
View File
@@ -32,7 +32,7 @@ This library supports the following tooling versions:
## Set up environment variables
Retrieve your project URL and anon key in your project's [API settings](https://app.supabase.com/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/remix/.env.example).
Retrieve your project URL and anon key in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/remix/.env.example).
```bash .env
SUPABASE_URL=YOUR_SUPABASE_URL
@@ -743,7 +743,7 @@ export default function Index() {
</Tabs>
> Ensure you have [enabled replication](https://app.supabase.com/project/_/database/replication) on the table you are subscribing to.
> Ensure you have [enabled replication](https://supabase.com/dashboard/project/_/database/replication) on the table you are subscribing to.
## Migration Guide
apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
+4 -2
View File
@@ -21,10 +21,10 @@ npm install @supabase/auth-helpers-sveltekit @supabase/supabase-js
### Declare Environment Variables
Retrieve your project's URL and anon key from your [API settings](https://app.supabase.com/project/_/settings/api), and create a `.env.local` file with the following environment variables:
Retrieve your project's URL and anon key from your [API settings](https://supabase.com/dashboard/project/_/settings/api), and create a `.env.local` file with the following environment variables:
```bash .env.local
# Find these in your Supabase project settings https://app.supabase.com/project/_/settings/api
# Find these in your Supabase project settings https://supabase.com/dashboard/project/_/settings/api
PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```
@@ -416,6 +416,8 @@ We can access the supabase instance in our `+page.svelte` file through the data
```js src/routes/login/+page.server.js
// src/routes/login/+page.server.js
import { fail } from '@sveltejs/kit'
export const actions = {
default: async ({ request, url, locals: { supabase } }) => {
const formData = await request.formData()
apps/docs/pages/guides/auth/auth-magic-link.mdx
+8 -2
View File
@@ -17,11 +17,17 @@ Setting up Magic Link logins for your Supabase application.
## Add Magic Link into your Supabase Project
1. For [Site URL](https://app.supabase.com/project/_/auth/url-configuration), enter the final (hosted) URL of your app.
1. For [Auth Providers](https://app.supabase.com/project/_/auth/providers), **enable email provider**.
1. For [Site URL](https://supabase.com/dashboard/project/_/auth/url-configuration), enter the final (hosted) URL of your app.
1. For [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers), **enable email provider**.
## Add login code to your client app
<Admonition type="caution">
When making use of Magic Links with [the PKCE Flow](https://supabase.com/blog/supabase-auth-sso-pkce#introducing-pkce) do bear in mind that links can only be used in the same browser that they are sent from. Consequently, a magic link sent from Chrome on Desktop will be invalid if used on a Mobile Device.
</Admonition>
<Tabs
scrollable
size="small"
apps/docs/pages/guides/auth/auth-mfa.mdx
+11 -4
View File
@@ -687,17 +687,24 @@ json_query_path(auth.jwt(), '$.amr[0]')
authentication method in the JWT.
Once you have extracted the most recent entry in the array, you can compare the
`method` and `timestamp` to enforce stricter rules.
`method` and `timestamp` to enforce stricter rules. For instance, you can mandate that access will be only be granted on a table to users who have recently signed in with a password.
Currently recognized methods are:
Currently recognized authentication methods are:
- `oauth` - any OAuth based sign in (social login).
- `password` - any password based sign in.
- `otp` - any one-time password based sign in (email code, SMS code, magic
link).
- `oauth` - any OAuth based sign in (social login).
- `totp` - a TOTP additional factor.
- `sso/saml` - any Single Sign On (SAML) method.
This list will expand in the future.
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 }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/auth-password-reset.mdx
+6 -17
View File
@@ -14,12 +14,7 @@ export const meta = {
## Single Page Application (SPA)
### Sending password reset email
Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail)
to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to
the update password page. This URL must be saved in your
allowed [Redirect URLs](https://app.supabase.com/project/_/auth/url-configuration) list found at
[Authentication > Redirect Configuration](https://app.supabase.com/project/_/auth/url-configuration) or it won't
redirect the user.
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.
```ts
await supabase.auth.resetPasswordForEmail('hello@example.com', {
@@ -28,9 +23,7 @@ await supabase.auth.resetPasswordForEmail('hello@example.com', {
```
### 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.
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.
@@ -42,12 +35,7 @@ await supabase.auth.updateUser({ password: new_password })
## Server-Side Rendering (SSR)
### Sending password reset email
Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail)
to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to
the callback page along with a query parameter to the update password page. This URL must be saved in your
allowed [Redirect URLs](https://app.supabase.com/project/_/auth/url-configuration) list found at
[Authentication > Redirect Configuration](https://app.supabase.com/project/_/auth/url-configuration) or it won't
redirect the user.
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.
```ts
await supabase.auth.resetPasswordForEmail('hello@example.com', {
@@ -66,6 +54,7 @@ The email link you receive will behave like a magic link. When the link is click
### 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.
```ts
// api/auth/callback.ts
@@ -84,6 +73,7 @@ The query parameter is always `code` for the authorization code returned from th
</Admonition>
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
@@ -96,8 +86,7 @@ res.redirect(next)
```
### Update Password
To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and
pass along the new password to this method.
To update the password we call the [`.updateUser`](/docs/reference/javascript/auth-updateuser) method and pass along the new password to this method.
```ts
await supabase.auth.updateUser({ password: new_password })
apps/docs/pages/guides/auth/phone-login/messagebird.mdx
+4 -4
View File
@@ -24,7 +24,7 @@ We'll cover:
What you'll need:
- A MessageBird account (sign up here: https://dashboard.messagebird.com/en/sign-up)
- A Supabase project (create one here: https://app.supabase.com)
- A Supabase project (create one here: https://supabase.com/dashboard)
- A mobile phone capable of receiving SMS
## Steps
@@ -49,7 +49,7 @@ You will need the following values to get started:
- Live API Key / Test API Key
- MessageBird originator
Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings).
Now go to the Auth > Settings page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/settings).
You should see an option to enable Phone Signup.
@@ -68,7 +68,7 @@ Now the backend should be setup, we can proceed to add our client-side code!
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 page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates).
Go to Auth > Templates page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/templates).
Use the variable `.Code` in the template to display the code.
@@ -276,7 +276,7 @@ The user does not have a password therefore will need to sign in via this method
## Resources
- [MessageBird Signup](https://dashboard.messagebird.com/en/sign-up)
- [Supabase Dashboard](https://app.supabase.com)
- [Supabase Dashboard](https://supabase.com/dashboard)
- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/phone-login/twilio.mdx
+4 -4
View File
@@ -25,7 +25,7 @@ We'll cover:
What you'll need:
- A Twilio account (sign up here: https://www.twilio.com/try-twilio)
- A Supabase project (create one here: https://app.supabase.com)
- A Supabase project (create one here: https://supabase.com/dashboard)
- A mobile phone capable of receiving SMS
## Video
@@ -68,7 +68,7 @@ You should now be able to see all three values you'll need to get started:
![All the credentials you'll need](/docs/img/guides/auth-twilio/6.png)
Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings).
Now go to the Auth > Settings page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/settings).
You should see an option to enable Phone Signup:
@@ -86,7 +86,7 @@ Now the backend should be setup, we can proceed to add our client-side code!
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 page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates).
Go to Auth > Templates page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/templates).
Use the variable `.Code` in the template to display the OTP code. Here's an example in the SMS template.
@@ -350,7 +350,7 @@ let { data, error } = await supabase.auth.verifyOtp({
## Resources
- [Twilio Signup](https://www.twilio.com/try-twilio)
- [Supabase Dashboard](https://app.supabase.com)
- [Supabase Dashboard](https://supabase.com/dashboard)
- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/phone-login/vonage.mdx
+4 -4
View File
@@ -24,7 +24,7 @@ We'll cover:
What you'll need:
- A Vonage account (sign up here: https://dashboard.nexmo.com/sign-up)
- A Supabase project (create one here: https://app.supabase.com)
- A Supabase project (create one here: https://supabase.com/dashboard)
- A mobile phone capable of receiving SMS
## Steps
@@ -49,7 +49,7 @@ Select the country you want a number for. You will need a mobile phone number wi
### Configure Supabase
Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings).
Now go to the Auth > Settings page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/settings).
You should see an option to enable Phone Signup.
@@ -61,7 +61,7 @@ Now the backend should be setup, we can proceed to add our client-side code!
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 page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates).
Go to Auth > Templates page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/templates).
Use the variable `.Code` in the template to display the code.
@@ -269,7 +269,7 @@ The user does not have a password therefore will need to sign in via this method
## Resources
- [Vonage Signup](https://dashboard.nexmo.com/sign-up)
- [Supabase Dashboard](https://app.supabase.com)
- [Supabase Dashboard](https://supabase.com/dashboard)
- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/quickstarts/nextjs.mdx
+3 -3
View File
@@ -12,9 +12,9 @@ export const meta = {
<StepHikeCompact.Step step={1}>
<StepHikeCompact.Details title="Create a new Supabase project">
[Launch a new project](https://app.supabase.com) in the Supabase Dashboard.
[Launch a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://app.supabase.com/project/_/sql).
Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://supabase.com/dashboard/project/_/sql).
</StepHikeCompact.Details>
@@ -52,7 +52,7 @@ export const meta = {
<StepHikeCompact.Step step={3}>
<StepHikeCompact.Details title="Declare Supabase Environment Variables">
Rename `.env.local.example` to `.env.local` and populate with [your project's URL and Anon Key](https://app.supabase.com/project/_/settings/api).
Rename `.env.local.example` to `.env.local` and populate with [your project's URL and Anon Key](https://supabase.com/dashboard/project/_/settings/api).
</StepHikeCompact.Details>
apps/docs/pages/guides/auth/quickstarts/react.mdx
+3 -3
View File
@@ -12,9 +12,9 @@ export const meta = {
<StepHikeCompact.Step step={1}>
<StepHikeCompact.Details title="Create a new Supabase project">
[Launch a new project](https://app.supabase.com) in the Supabase Dashboard.
[Launch a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://app.supabase.com/project/_/sql).
Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://supabase.com/dashboard/project/_/sql).
</StepHikeCompact.Details>
@@ -68,7 +68,7 @@ export const meta = {
<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Set up your login component">
In `index.js`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
In `index.js`, create a Supabase client using your [Project URL and public API (anon) key](https://supabase.com/dashboard/project/_/settings/api).
You can configure the Auth component to display whenever there is no session inside `supabase.auth.getSession()`
apps/docs/pages/guides/auth/row-level-security.mdx
+1 -1
View File
@@ -317,7 +317,7 @@ Initializing a client with a Service Key will not override RLS if a user token i
### Testing policies
To test policies on the database itself (i.e., from the [SQL Editor](https://app.supabase.com/project/_/sql) or from `psql`) without switching to your frontend and logging in as different users, you can utilize the following helper SQL procedures ([credits](https://github.com/supabase/supabase/issues/7311#issuecomment-1398648114)):
To test policies on the database itself (i.e., from the [SQL Editor](https://supabase.com/dashboard/project/_/sql) or from `psql`) without switching to your frontend and logging in as different users, you can utilize the following helper SQL procedures ([credits](https://github.com/supabase/supabase/issues/7311#issuecomment-1398648114)):
```sql
grant anon, authenticated to postgres;
apps/docs/pages/guides/auth/server-side-rendering.mdx
+1 -1
View File
@@ -36,7 +36,7 @@ Upon successful verification of the identity of the user, the Supabase Auth serv
<Admonition type="tip">
You can configure [redirects URLs](https://app.supabase.com/project/_/auth/url-configuration) in the Supabase Dashboard. You can use [wildcard match patterns](/docs/guides/auth#redirect-urls-and-wildcards) like `*` and `**` to allow redirects to different forms of URLs.
You can configure [redirects URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) in the Supabase Dashboard. You can use [wildcard match patterns](/docs/guides/auth#redirect-urls-and-wildcards) like `*` and `**` to allow redirects to different forms of URLs.
</Admonition>
apps/docs/pages/guides/auth/social-login/auth-apple.mdx
+123 -86
View File
@@ -4,95 +4,53 @@ import AppleSecretGenerator from '~/components/AppleSecretGenerator'
export const meta = {
id: 'auth-apple',
title: 'Login with Apple',
description: 'Add Apple OAuth to your Supabase project',
description: 'Use Sign in with Apple with Supabase',
}
To enable Apple Auth for your project, you need to set up an Apple OAuth application and add the application credentials to your Supabase Dashboard.
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.
## Overview
Apple OAuth consists of six broad steps:
To support Sign in with Apple, you need to configure the [Apple provider in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) for your project.
- Obtaining an `App Id` with “Sign In with Apple” capabilities.
- Obtaining a `Services Id` - this will serve as the `client_id`.
- Obtaining a `secret key` that will be used to get our `client_secret`.
- Generating the `client_secret` using the `secret key`.
- Add your `client id` and `client secret` keys to your [Supabase Project](https://app.supabase.com).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
There are three general ways to use Sign in with Apple, depending on the application you're trying to build:
## Access your Apple Developer account
- Sign in on the web or in web-based apps
- Using an OAuth flow initiated by Supabase Auth using the [Sign in with Apple REST API](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api).
- Using [Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) directly in the browser, usually suitable for websites.
- Sign in natively inside iOS, macOS, watchOS or tvOS apps using [Apple's Authentication Services](https://developer.apple.com/documentation/authenticationservices)
- Go to [developer.apple.com](https://developer.apple.com).
- Click on `Account` at the top right to log in.
In some cases you're able to use the OAuth flow within web-based native apps such as with [React Native](https://reactnative.dev), [Expo](https://expo.dev) or other similar frameworks. It is best practice to use native Sign in with Apple capabilities on those platforms instead.
![Apple Developer Portal.](/docs/img/guides/auth-apple/apple-developer-portal.png)
Before you can use Sign in with Apple, you need to obtain an [Apple Developer](https://developer.apple.com) account.
## Obtain an App ID
## Using the OAuth flow for web
- Go to `Certificates, Identifiers & Profiles`.
- Click on `Identifiers` at the left.
- Click on the `+` sign in the upper left next to `Identifiers`.
- Select `App IDs` and click `Continue`.
- Select type `App` and click `Continue`.
- Fill out your app information:
- App description.
- Bundle ID (Apple recommends reverse-domain name style, so if your domain is acme.com and your app is called roadrunner, use: "com.acme.roadrunner").
- Scroll down and check `Sign In With Apple`.
- Click `Continue` at the top right.
- Click `Register` at the top right.
Sign in with Apple's OAuth flow is designed for web or browser based sign in methods. It can be used on web-based apps as well as websites, though some users can benefit by using Sign in with Apple JS directly.
## Obtain a Services ID
Behind the scenes, Supabase Auth uses the [REST APIs](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api) provided by Apple.
This will serve as the `client_id` when you make API calls to authenticate the user.
To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library:
- Go to `Certificates, Identifiers & Profiles`.
- Click on `Identifiers` at the left.
- Click on the `+` sign in the upper left next to `Identifiers`.
- Select `Services IDs` and click `Continue`.
- Fill out your information:
- App description.
- Bundle ID (you can't use the same Bundle ID from the previous step, but you can just add something to the beginning, such as "app." to make it app.com.acme.roadrunner").
- SAVE THIS ID -- this ID will become your `client_id` later.
- Click `Continue` at the top right.
- Click `Register` at the top right.
```ts
supabase.auth.signInWithOAuth({
provider: 'apple',
})
```
## Find your callback URL
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 web application with an access and refresh token representing the user's session.
<SocialProviderSetup provider="Apple" />
### Configuration [#configuration-web]
## Configure your Services ID
You will require the following information:
- Under `Identifiers`, click on your newly-created Services ID.
- Check the box next to `Sign In With Apple` to enable it.
- Click `Configure` to the right.
- Make sure your newly created Bundle ID is selected under `Primary App ID`
- Add your domain to the `Domains and Subdomains` box (do not add `https://`, just add the domain).
- In the `Return URLs` box, type the callback URL of your app which you found in the previous step and click `Next` at the bottom right.
- Click `Done` at the bottom.
- Click `Continue` at the top right.
- Click `Save` at the top right.
## Download your secret key
Now you'll need to download a `secret key` file from Apple that will be used to generate your `client_secret`.
- Go to `Certificates, Identifiers & Profiles`.
- Click on `Keys` at the left.
- Click on the `+` sign in the upper left next to `Keys`.
- Enter a `Key Name`.
- Check `Sign In with Apple`.
- Click `Configure` to the right.
- Select your newly-created Services ID from the dropdown selector.
- Click `Save` at the top right.
- Click `Continue` at the top right.
- Click `Register` at the top right.
- Click `Download` at the top right.
- Save the downloaded file -- this contains your "secret key" that will be used to generate your `client_secret`.
- Click `Done` at the top right.
## Generate a client secret
You need to configure a client secret when using Sign in with Apple for Web. This is a specially crafted [JWT signed with a secret key downloaded from Apple's Developer Center](https://developer.apple.com/documentation/signinwithapplerestapi/generate_and_validate_tokens).
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 `<project-id>.supabase.co` while the redirect URL is `https://<project-id>.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 loose 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 meeting 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).
<Admonition>
Use this tool to generate a new Apple client secret. No keys leave your browser!
@@ -100,34 +58,113 @@ You need to configure a client secret when using Sign in with Apple for Web. Thi
<AppleSecretGenerator />
## Add your OAuth credentials to Supabase
## Using native sign in
<SocialProviderSettingsSupabase provider="Apple" />
Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Apple flow on iOS, macOS, watchOS or tvOS uses the [operating system's built-in functionalities](https://developer.apple.com/documentation/authenticationservices) to prompt the user for consent.
## Add login code to your client app
When the user provides consent, Apple issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth.
When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `apple` as the `provider`:
If you are building an iOS or macOS app using Flutter, you can use [apple_sign_in](https://pub.dev/packages/sign_in_with_apple) package to quickly get the user's consent and sign them in to your Supabase project:
```js
async function signInWithApple() {
const { data, error } = await supabase.auth.signInWithOAuth({
```dart
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'package:crypto/crypto.dart';
Future<AuthResponse> signInWithApple() {
// Generate a random string
final rawNonce = _generateRandomString();
final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
final credential = await SignInWithApple.getAppleIDCredential(
scopes: [
AppleIDAuthorizationScopes.email,
AppleIDAuthorizationScopes.fullName,
],
nonce: hashedNonce,
);
final idToken = credential.identityToken;
if (idToken == null) {
throw 'Could not find ID Token from generated credential.';
}
return signInWithIdToken(
provider: Provider.apple,
idToken: idToken,
nonce: rawNonce,
);
}
```
In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so:
```ts
await supabase.auth.signInWithIdToken({
provider: 'apple',
token: '<identity token received from the OS>',
})
```
Please take a look at these open-source projects which may help you obtain an ID token directly from the OS:
- [invertase/react-native-apple-authentication](https://github.com/invertase/react-native-apple-authentication)
- [Expo AppleAuthentication](https://docs.expo.dev/versions/latest/sdk/apple-authentication/)
For apps written in Swift, please consult the [community maintained library](/docs/reference/swift/introduction).
### Configuration [#configuration-native-app]
Native sign in requires less configuration steps than OAuth flow. You will need to perform these steps:
1. Have 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 for the App ID you created or already have, 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._)
2. Register all of the App IDs that will be using your Supabase project in the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
Note that if you're building a native app only, you do not need to setup the OAuth flow.
## Using Sign in with Apple JS
[Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) is an official Apple framework for authenticating Apple users on websites. Although it can be used in web-based apps, those use cases will benefit more with the OAuth flow described above. We recommend using this method on classic websites only.
You can use the `signInWithIdToken()` method from the Supabase JavaScript library on the website to obtain an access and refresh token once the user has given consent using Sign in with Apple JS:
```ts
function signIn() {
const data = await AppleID.auth.signIn()
await supabase.auth.signInWithIdToken({
provider: 'apple',
token: data.id_token,
nonce: '<nonce used in AppleID.auth.init>',
})
}
```
When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
Alternatively, you can use the `AppleIDSignInOnSuccess` event with the `usePopup` option:
```js
async function signout() {
const { error } = await supabase.auth.signOut()
}
```ts
// Listen for authorization success.
document.addEventListener('AppleIDSignInOnSuccess', async (event) => {
await supabase.auth.signInWithIdToken({
provider: 'apple',
token: event.data.id_token,
nonce: '<value used in appleid-signin-nonce meta tag>',
})
})
```
## Resources
Please make sure you request for the scope `name email` when initializing the library.
- [Apple Developer Account](https://developer.apple.com).
- Thanks to [Janak Amarasena](https://medium.com/@janakda) who did all the heavy lifting in [How to configure Sign In with Apple](https://medium.com/identity-beyond-borders/how-to-configure-sign-in-with-apple-77c61e336003).
### Configuration [#configuration-apple-js]
To use Sign in with Apple JS you need to configure these options:
1. Have 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 for the App ID you created or already have, 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._)
2. Obtain a **Services ID** attached to the App ID that uniquely identifies the website. Use this value as the client ID when initializing Sign in with Apple JS. 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.website`.
3. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your website is hosted on. The redirect URL must also point to a page on your website that will receive the callback from Apple.
4. Register the Services ID you created to your project's [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
Note that if you're using Sign in with Apple JS you do not need to configure the OAuth settings.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Bitbucket Auth for your project, you need to set up a BitBucket OAuth
Setting up Bitbucket logins for your application consists of 3 parts:
- Create and configure a Bitbucket OAuth Consumer on [Bitbucket](https://bitbucket.org)
- Add your Bitbucket OAuth Consumer keys to your [Supabase Project](https://app.supabase.com)
- Add your Bitbucket OAuth Consumer keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Bitbucket account
apps/docs/pages/guides/auth/social-login/auth-discord.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Discord Auth for your project, you need to set up a Discord Applicatio
Setting up Discord logins for your application consists of 3 parts:
- Create and configure a Discord Application [Discord Developer Portal](https://discord.com/developers)
- Add your Discord OAuth Consumer keys to your [Supabase Project](https://app.supabase.com)
- Add your Discord OAuth Consumer keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Discord account
apps/docs/pages/guides/auth/social-login/auth-facebook.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Facebook Auth for your project, you need to set up a Facebook OAuth ap
Setting up Facebook logins for your application consists of 3 parts:
- Create and configure a Facebook Application on the [Facebook Developers Site](https://developers.facebook.com)
- Add your Facebook keys to your [Supabase Project](https://app.supabase.com)
- Add your Facebook keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Facebook Developer account
apps/docs/pages/guides/auth/social-login/auth-github.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable GitHub Auth for your project, you need to set up a GitHub OAuth applic
Setting up GitHub logins for your application consists of 3 parts:
- Create and configure a GitHub OAuth App on [GitHub](https://github.com)
- Add your GitHub OAuth keys to your [Supabase Project](https://app.supabase.com)
- Add your GitHub OAuth keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your GitHub account
apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable GitLab Auth for your project, you need to set up a GitLab OAuth applic
Setting up GitLab logins for your application consists of 3 parts:
- Create and configure a GitLab Application on [GitLab](https://gitlab.com)
- Add your GitLab Application keys to your [Supabase Project](https://app.supabase.com)
- Add your GitLab Application keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your GitLab account
apps/docs/pages/guides/auth/social-login/auth-google.mdx
+257 -89
View File
@@ -3,120 +3,288 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'auth-google',
title: 'Login with Google',
description: 'Add Google OAuth to your Supabase project',
description: 'Use Sign in with Google on the web, in native apps or with Chrome extensions',
}
To enable Google Auth for your project, you need to set up a Google OAuth application and add the application credentials to your Supabase Dashboard.
Supabase Auth supports Sign in with Google on the web, native Android applications and Chrome extensions.
## Overview
Setting up Google logins for your application consists of 3 parts:
To support Sign in with Google you need to configure the [Google provider in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) for your project.
- Create and configure a Google Project on the [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard)
- Add your Google OAuth keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
There are three general ways to use Sign in with Google, depending on the application you're building:
## Access your Google Cloud Platform account
- Sign in on the web or in web-based apps
- Using an OAuth flow initiated by Supabase Auth using [Google Identity Authorization with OAuth 2.0 for Web Server Applications](https://developers.google.com/identity/protocols/oauth2/web-server).
- Using a [personalized sign-in button](https://developers.google.com/identity/gsi/web/guides/personalized-button) or [One Tap](https://developers.google.com/identity/gsi/web/guides/display-google-one-tap) and [automatic sign-in](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out) for users already logged in to their Google account.
- Sign in in native Android apps and Chrome extensions
- Go to [cloud.google.com](https://cloud.google.com).
- Click on `Sign in` at the top right to log in.
In some cases you're able to use the OAuth flow within web-based native apps such as with React Native, Expo or other similar frameworks. It is best practice to use native Sign in with Google capabilities whenever possible.
![Google Developer Portal.](/docs/img/guides/auth-google/google-portal.png)
Before you can use Sign in with Google, you need to obtain a [Google Cloud Platform](https://console.cloud.google.com/home/dashboard) account and have a project ready or create a new one.
## Create a Google Cloud Platform Project
## Using the OAuth flow for the web
- Click on `Select a Project` at the top left.
- (Or, if a project is currently selected, click on the current project name at the top left.)
- Click `New Project` at the top right.
- Fill in your app information, then click `Create`.
- (This can take a few minutes.)
- This should bring you to the dashboard for your new project.
Sign in with Google's OAuth flow is designed for web or browser based sign in methods. It can be used in web-based apps as well as in websites, though sometimes it is worthwhile considering using One Tap login directly.
## Create the OAuth Keys for your project
Behind the scenes, Supabase Auth uses the [Google OAuth 2.0 APIs](https://developers.google.com/identity/openid-connect/openid-connect), which are OpenID Connect certified, to perform the authentication.
From your project's dashboard screen:
To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library:
- In the search bar at the top labeled `Search products and resources` type `OAuth`.
- Click on `OAuth consent screen` from the list of results.
- On the `OAuth consent screen` page select `External`.
- Click `Create`.
## Edit your app information
- On the `Edit app registration` page fill out your app information.
- Click `Save and continue` at the bottom.
## Find your callback URL
<SocialProviderSetup provider="Google" />
## Create your Google credentials
- Click `Credentials` at the left to go to the `Credentials` page on the Google Cloud Platform console.
- Click `Create Credentials` near the top then select `OAuth client ID`
- On the `Create OAuth client ID` page, select your application type. If you're not sure, choose `Web application`.
- Fill in your app name.
- At the bottom, under `Authorized redirect URIs` click `Add URI`.
- Enter your callback URI under `Authorized redirect URIs` at the bottom.
- Enter your callback URI in the `Valid OAuth Redirect URIs` box.
- Click `Save Changes` at the bottom right.
- Click `Create`.
Copy your new OAuth credentials
- A box will appear called `OAuth client created`.
- Copy and save the values under `Your Client ID` and `Your Client Secret`.
## Enter your Google credentials into your Supabase Project
<SocialProviderSettingsSupabase provider="Google" />
## Add login code to your client app
When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `google` as the `provider`:
```js
async function signInWithGoogle() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
})
}
```ts
supabase.auth.signInWithOAuth({
provider: 'google',
})
```
You can view the full list of query parameters and their descriptions [here](https://developers.google.com/identity/protocols/oauth2/web-server#creatingclient).
This call takes the user to Google's consent screen. When the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session.
When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
You can additionally extract the `provider_token` from the session (on initial login only) which is the OAuth 2.0 access token issued by Google that grants your application access to the Google services for the authenticated users. Please store this token in local storage, cookies or in your database or server.
```js
async function signout() {
const { error } = await supabase.auth.signOut()
}
```
Google does not send out a refresh token by default, so you will need to pass parameters like these to `signInWithOAuth()` in order to extract the `provider_refresh_token`:
## Obtain the provider refresh token
Google OAuth2.0 doesn't return the `provider_refresh_token` by default. If you need the `provider_refresh_token` returned, you will need to add additional query parameters:
```js
async function signInWithGoogle() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
queryParams: {
access_type: 'offline',
prompt: 'consent',
hd: 'domain.com', // google will also allow OAuth logins to be restricted to a specified domain using the 'hd' parameter
},
```ts
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
queryParams: {
access_type: 'offline',
prompt: 'consent',
},
},
})
```
### Configuration [#configuration-web]
To use the OAuth 2.0 flow, you will require the following information:
1. Obtain OAuth credentials for your Google Cloud project in the [Credentials](https://console.developers.google.com/apis/credentials) page of the console. When creating a new credential, choose _Web application_. In _Authorized redirect URIs_ enter `https://<project-id>.supabase.co/auth/v1/callback`. This URL will be seen by your users, and you can customize it by configuring [custom domains](/docs/guides/platform/custom-domains).
2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. Within _Authorized domains_ make sure you add your Supabase project's domain `<project-id>.supabase.co`. Configure the non-sensitive scopes by making sure the following ones are selected: `.../auth/userinfo.email`, `.../auth/userinfo.profile`, `openid`. If you're selecting other sensitive scopes, your app may require additional verification. In those cases, it's best to use [custom domains](/docs/guides/platform/custom-domains).
3. Finally, add the client ID and secret from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers).
## Using native sign in
Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Google flow on Android uses the [operating system's built-in functionalities](https://developers.google.com/android/reference/com/google/android/gms/auth/api/identity/package-summary) to prompt the user for consent. Note that native sign-in has been rebranded as _One Tap sign-in on Android_ by Google, which you should not confuse with _One Tap sign in for web_, as mentioned below.
When the user provides consent, Google issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth.
If you are building a Flutter app, you can use [flutter_appauth](https://pub.dev/packages/flutter_appauth) package to sign a user into your Supabase project:
````dart
import 'package:crypto/crypto.dart';
import 'package:flutter_appauth/flutter_appauth.dart';
// Generate a random string
final rawNonce = generateRandomString();
final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
// Your registered Google client ID here.
// This will be different for iOS and Android
const clientId = 'YOUR_GOODLE_CLIENT_ID';
// bundle ID for iOS, package name for Android here
final packageName = 'io.supabase.example';
/// fixed for google login
final redirectUrl = '$packageName:/google_auth';
/// fixed for google login
const discoveryUrl =
'https://accounts.google.com/.well-known/openid-configuration';
final appAuth = FlutterAppAuth();
// authorize the user by opening the consent page
final result = await appAuth.authorize(
AuthorizationRequest(
clientId,
redirectUrl,
discoveryUrl: discoveryUrl,
nonce: hashedNonce,
scopes: [
'openid',
'email',
],
),
);
if (result == null) {
throw AuthException(
'Could not find AuthorizationResponse after authorizing');
}
// Request the access and id token to google
final tokenResponse = await appAuth.token(
TokenRequest(
clientId,
redirectUrl,
authorizationCode: result.authorizationCode,
discoveryUrl: discoveryUrl,
codeVerifier: result.codeVerifier,
nonce: result.nonce,
scopes: [
'openid',
'email',
],
),
);
final idToken = tokenResponse?.idToken;
if (idToken == null) {
throw AuthException('Could not find idToken from the token response');
}
await signInWithIdToken(
provider: Provider.google,
idToken: idToken,
accessToken: tokenResponse?.accessToken,
nonce: rawNonce,
);```
In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so:
```ts
await supabase.auth.signInWithIdToken({
provider: 'google',
token: '<identity token received from the OS>',
access_token: '<access token received from the OS>'
})
````
Please take a look at these open-source projects which may help you obtain an ID token directly from the OS:
- [react-native-google-signin/google-signin](https://github.com/react-native-google-signin/google-signin).
For apps written in Kotlin, please consult the [community maintained library](/docs/reference/kotlin/introduction).
### Configuration [#configuration-native-app]
1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Android_ or _iOS_ depending on the mobile operating system your app is built for.
- For Android, use the instructions on screen to provide the SHA-1 certificate fingerprint used to sign your Android app.
- For iOS, use the instructions on screen to provide the app Bundle ID, and App Store ID and Team ID if the app is already published on the Apple AppStore.
2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service.
3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_.
Note that you do not have to configure the OAuth flow in the Supabase Dashboard in order to use native sign in.
## Using native sign in for Chrome extensions
Similar to the native sign in for Android, you can use the Chrome browser's [identity APIs](https://developer.chrome.com/docs/extensions/reference/identity/) to launch an authentication flow.
First, you need to configure your `manifest.json` file like so:
```json
{
"permissions": ["identity"],
"oauth2": {
"client_id": "<client ID>",
"scopes": ["openid", "email", "profile"]
}
}
```
Then you should call the [`chrome.identity.launchWebAuthFlow()`](https://developer.chrome.com/docs/extensions/reference/identity/#method-launchWebAuthFlow) function to trigger the sign in flow. On success, call the `supabase.auth.signInWithIdToken()` function to complete sign in with your Supabase project.
```ts
const manifest = chrome.runtime.getManifest()
const url = new URL('https://accounts.google.com/o/oauth2/auth')
url.searchParams.set('client_id', manifest.oauth2.client_id)
url.searchParams.set('response_type', 'id_token')
url.searchParams.set('access_type', 'offline')
url.searchParams.set('redirect_uri', `https://${chrome.runtime.id}.chromiumapp.org`)
url.searchParams.set('scope', manifest.oauth2.scopes.join(' '))
chrome.identity.launchWebAuthFlow(
{
url: url.href,
interactive: true,
},
async (redirectedTo) => {
if (chrome.runtime.lastError) {
// auth was not successful
} else {
// auth was successful, extract the ID token from the redirectedTo URL
const url = new URL(redirectedTo)
const params = new URLSearchParams(url.hash)
const { data, error } = await supabase.auth.signInWithIdToken({
provider: 'google',
token: params.get('id_token'),
})
}
}
)
```
### Configuration [#configuration-chrome-extension]
You will need to configure a client ID for your Chrome extension:
1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Chrome extension_ for the application type. For _Item ID_ provide the unique ID of your Chrome extension. You can get this by calling `chrome.runtime.id` within the extension, or from the Web Store URL of the extension. For example, the [Google Translate extension](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb) has the Web Store URL `https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb` and the last part `aapbdbdomjkkjkaonfhkkikfgjllcleb` is its unique ID.
2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app.
3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_.
Note that you do not have to configure the OAuth flow in the Supabase Dashboard to sign in with Google inside Chrome extensions.
## Using personalized sign-in buttons, One Tap or automatic sign-in
Most web apps and websites can utilize Google's [personalized sign-in buttons](https://developers.google.com/identity/gsi/web/guides/personalized-button), [One Tap](https://developers.google.com/identity/gsi/web/guides/features) or [automatic sign-in](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out) for the best user experience.
Under the hood, these sign in methods end with an identity token being issued by [Sign in with Google for Web](https://developers.google.com/identity/gsi/web/guides/overview). You can then use the `supabase.auth.signInWithIdToken()` method to immediately issue an access and refresh tokens for the user, without needing to build any additional UIs or flows.
To get started, you can use the [HTML Code Generator](https://developers.google.com/identity/gsi/web/tools/configurator) to customize the look, feel, features and behavior of the Sign in with Google button. Make sure you pick the _Swap to JavaScript callback_ option and name the function that will receive a [`CredentialResponse`](https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse) when sign in completes.
For example, this HTML code shows a typical Sign in with Google button:
```html
<div
id="g_id_onload"
data-client_id="<client ID>"
data-context="signin"
data-ux_mode="popup"
data-callback="handleSignInWithGoogle"
data-nonce=""
data-auto_select="true"
data-itp_support="true"
></div>
<div
class="g_id_signin"
data-type="standard"
data-shape="pill"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left"
></div>
```
When the user signs in, the `handleSignInWithGoogle` function will be called:
```ts
async function handleSignInWithGoogle(response) {
const { data, error } = await supabase.auth.signInWithIdToken({
token: response.credential,
nonce: 'NONCE', // must be the same one as provided in data-nonce (if any)
})
}
```
## Resources
Use of nonce is recommended, though optional. Make sure each nonce is generated randomly and available both in the `data-nonce` attribute as well as in the `handleSignInWithGoogle` callback function; otherwise the ID token will not be accepted.
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard)
### Configuration [#configuration-personalized-sign-in-button]
1. Obtain OAuth credentials for your Google Cloud project in the [Credentials](https://console.developers.google.com/apis/credentials) page of the console. When creating a new credential, choose _Web application_. As you're using the Google sign in button, you should configure the _Authorized JavaScript origins_ and _Authorized redirect URIs_ to the website where the buttons appear. You should not use your Supabase project domain name. For this use case, the client secret provided is not needed and can be ignored.
2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service.
3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
Note that you do not have to configure the OAuth flow client ID and secret in the Supabase Dashboard when using this approach!
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/social-login/auth-kakao.mdx
+97
View File
@@ -0,0 +1,97 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
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.
## Overview
Kakao OAuth consists of six broad steps:
- Create and configure your app in the [Kakao Developer Portal](https://developers.kakao.com).
- Obtaining a `REST API key` - this will serve as the `client_id`.
- Generating the `Client secret code` - this will serve as the `client_secret`.
- Additional configurations on Kakao Developers Portal.
- Add your `client id` and `client secret` keys to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your Kakao Developer account
- Go to [Kakao Developers Portal](https://developers.kakao.com).
- Click on `Login` at the top right to log in.
![Kakao Developers Portal.](/docs/img/guides/auth-kakao/kakao-developers-page.png)
## Create and configure your app
- Go to `My Application`.
- Click on `Add an application` at the top.
- Fill out your app information:
- App icon.
- App name.
- Company name.
- Click `Save` at the bottom right.
## Obtain a REST API key
This will serve as the `client_id` when you make API calls to authenticate the user.
- Go to `My Application`.
- Click on your app.
- You will be redirected to `Summary` tab of your app.
- In the `App Keys` section you will see `REST API key` -- this ID will become your `client_id` later.
## Find your callback URL
<SocialProviderSetup provider="Kakao" />- To add callback URL on Kakao, go to `Product settings` >
`Kakao Login` > `Redirect URI`.
## Generate and activate a `client_secret`
- Go to `Product settings` > `Kakao Login` > `Security`.
- Click on the `Kakao Login` switch to enable Kakao Login.
- Click on `generate code` at the bottom to generate the `Client secret code` -- this will serve as a `client_secret` for your supabase project.
- Make sure you enabled `Client sercet code` by selecting `enable` from the `Activation state` section.
## Additional configurations on Kakao Developers Portal
- Make sure the Kakao Login is enabled in the `Kakao Login` tab.
- Set following scopes under the "Consent Items": account_email, profile_image, profile_nickname
![Consent items needs to be set.](/docs/img/guides/auth-kakao/kakao-developers-consent-items-set.png)
## Add your OAuth credentials to Supabase
<SocialProviderSettingsSupabase provider="Kakao" />
## Add login code to your client app
When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `kakao` as the `provider`:
```js
async function signInWithKakao() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'kakao',
})
}
```
When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
const { error } = await supabase.auth.signOut()
}
```
## Resources
- [Kakao Developers Portal](https://developers.kakao.com).
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable LinkedIn Auth for your project, you need to set up a LinkedIn OAuth ap
Setting up LinkedIn logins for your application consists of 3 parts:
- Create and configure a LinkedIn Project and App on the [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps).
- Add your LinkedIn `client_id` and `client_secret` to your [Supabase Project](https://app.supabase.com).
- Add your LinkedIn `client_id` and `client_secret` to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your LinkedIn Developer account
apps/docs/pages/guides/auth/social-login/auth-notion.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Notion Auth for your project, you need to set up a Notion Application
Setting up Notion logins for your application consists of 3 parts:
- Create and configure a Notion Application [Notion Developer Portal](https://www.notion.so/my-integrations)
- Retrieve your OAuth client ID and OAuth client secret and add them to your [Supabase Project](https://app.supabase.com)
- Retrieve your OAuth client ID and OAuth client secret and add them to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Create your notion integration
apps/docs/pages/guides/auth/social-login/auth-slack.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Slack Auth for your project, you need to set up a Slack OAuth applicat
Setting up Slack logins for your application consists of 3 parts:
- Create and configure a Slack Project and App on the [Slack Developer Dashboard](https://api.slack.com/apps).
- Add your Slack `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
- Add your Slack `API Key` and `API Secret Key` to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your Slack Developer account
apps/docs/pages/guides/auth/social-login/auth-spotify.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Spotify Auth for your project, you need to set up a Spotify OAuth appl
Setting up Spotify logins for your application consists of 3 parts:
- Create and configure a Spotify Project and App on the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/).
- Add your Spotify `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
- Add your Spotify `API Key` and `API Secret Key` to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your Spotify Developer account
apps/docs/pages/guides/auth/social-login/auth-twitch.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Twitch Auth for your project, you need to set up a Twitch Application
Setting up Twitch logins for your application consists of 3 parts:
- Create and configure a Twitch Application [Twitch Developer Console](https://dev.twitch.tv/console)
- Add your Twitch OAuth Consumer keys to your [Supabase Project](https://app.supabase.com)
- Add your Twitch OAuth Consumer keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Twitch Developer account
apps/docs/pages/guides/auth/social-login/auth-twitter.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Twitter Auth for your project, you need to set up a Twitter OAuth appl
Setting up Twitter logins for your application consists of 3 parts:
- Create and configure a Twitter Project and App on the [Twitter Developer Dashboard](https://developer.twitter.com/en/portal/dashboard).
- Add your Twitter `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
- Add your Twitter `API Key` and `API Secret Key` to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your Twitter Developer account
apps/docs/pages/guides/auth/social-login/auth-zoom.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Zoom Auth for your project, you need to set up a Zoom OAuth applicatio
Setting up Zoom logins for your application consists of 3 parts:
- Create and configure a Zoom OAuth App on [Zoom App Marketplace](https://marketplace.zoom.us/)
- Add your Zoom OAuth keys to your [Supabase Project](https://app.supabase.com)
- Add your Zoom OAuth keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Zoom Developer account
apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx
+10 -5
View File
@@ -7,6 +7,11 @@ export const meta = {
video: 'https://www.youtube.com/v/em1cpOAXknM',
}
<Admonition>
Looking for guides on how to use Single Sign-On with the Supabase dashboard? Head on over to
[Enable SSO for Your Organization](/docs/guides/platform/sso).
</Admonition>
Supabase Auth supports enterprise-level Single Sign-On (SSO) for any identity providers compatible with the using the SAML 2.0 protocol. This is a non-exclusive list of supported identity providers:
- Google Workspaces (formerly known as GSuite)
@@ -15,7 +20,7 @@ Supabase Auth supports enterprise-level Single Sign-On (SSO) for any identity pr
- PingIdentity
- OneLogin
If you're having issues with identity provider software not on this list, please [open a support ticket](https://app.supabase.com/support/new).
If you're having issues with identity provider software not on this list, please [open a support ticket](https://supabase.com/dashboard/support/new).
## Prerequisites
@@ -23,7 +28,7 @@ This guide requires the use of the [Supabase CLI](/docs/guides/cli). Please make
You can use the `supabase sso` [subcommands](/docs/reference/cli/supabase-sso) to manage your project's configuration.
SAML 2.0 support is disabled by default on Supabase projects. You can configure this on the [Auth Providers](https://app.supabase.com/project/_/auth/providers) page on your project.
SAML 2.0 support is disabled by default on Supabase projects. You can configure this on the [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers) page on your project.
Please note that SAML 2.0 support is offered on plans Pro and above. Check the [Pricing](https://supabase.com/pricing) page for more information.
@@ -130,7 +135,7 @@ CREATE POLICY "View organization settings."
## Managing SAML 2.0 connections
Once you've enabled SAML 2.0 support on your project via the [Auth Providers](https://app.supabase.com/project/_/auth/providers) page in the dashboard, you can use the [Supabase CLI](/docs/reference/cli/supabase-sso) to add, update, remove and view information about identity providers.
Once you've enabled SAML 2.0 support on your project via the [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the dashboard, you can use the [Supabase CLI](/docs/reference/cli/supabase-sso) to add, update, remove and view information about identity providers.
### Add a connection
@@ -287,7 +292,7 @@ supabase sso remove <provider-id> --project-ref <your-project>
If successful, the details of the removed identity provider will be shown. All user accounts from that identity provider will be immediately logged out. User information will remain in the system, but it will no longer be possible for any of those accounts to be accessed in the future, even if you add the connection again.
If you need to reassign those user accounts to another identity provider, please [open a support ticket](https://app.supabase.com/support/new).
If you need to reassign those user accounts to another identity provider, please [open a support ticket](https://supabase.com/dashboard/support/new).
A [list of all](/docs/reference/cli/supabase-sso-list) registered identity providers can be displayed by running:
@@ -364,7 +369,7 @@ 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://app.supabase.com/support/new) and we'll try to support you as best as possible.
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 }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/cli.mdx
+42 -6
View File
@@ -4,12 +4,15 @@ export const meta = {
title: 'Supabase CLI',
description:
'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.',
subtitle:
'The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.',
}
The Supabase CLI provides tools to develop your project locally and deploy to the Supabase Platform.
You can also use the CLI to manage your Supabase projects, handle database migrations and CI/CD workflows, and generate types directly from your database schema.
You can use the Supabase CLI to run the entire Supabase stack locally on your machine, simply by running `supabase init` (to create a new local project) and then `supabase start`.
## Installation
The Supabase CLI provides tools to develop your project locally, deploy to the Supabase Platform, handle database migrations, and generate types directly from your database schema.
## Installing the Supabase CLI
<Tabs
scrollable
@@ -74,7 +77,7 @@ and run one of the following:
</TabPanel>
</Tabs>
## Updates
## Updating the Supabase CLI
When a new [version](https://github.com/supabase/cli/releases) is released, you can update the CLI using the same methods.
@@ -114,12 +117,45 @@ brew upgrade supabase
</TabPanel>
</Tabs>
If you have any Supabase containers running locally, remember to restart them after upgrading to use the new features.
```bash
npx supabase stop --no-backup
npx supabase start
```
## Running Supabase locally
Inside the folder where you want to create your project, run:
```bash
supabase init
```
This will create a new `supabase` folder. It's safe to commit this folder to your version control system.
Now, to start the Supabase stack, run:
```bash
supabase start
```
This takes time on your first run because the CLI needs to download the local Docker images. The CLI includes the entire Supabase toolset, and a few additional images that are useful for local development (like a local SMTP server and a database diff tool).
The local development environment includes Supabase Studio, a graphical interface for working with your database, running by default on [localhost:54323](http://localhost:54323).
![Local Studio](/docs/img/guides/cli/local-studio.png)
When you are finished working on your Supabase project, you can stop the stack with:
```bash
supabase stop
```
## See also
- [Supabase CLI Reference](/docs/reference/cli/introduction)
- [Supabase CLI Configuration](/docs/reference/cli/config)
- [Local Development](/docs/guides/getting-started/local-development)
- [Managing Environments](/docs/guides/cli/managing-environments)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/cli/github-action/[slug].tsx
+138
View File
@@ -0,0 +1,138 @@
import { CodeHikeConfig, remarkCodeHike } from '@code-hike/mdx'
import { GetStaticPaths, GetStaticProps } from 'next'
import { MDXRemote, MDXRemoteSerializeResult } from 'next-mdx-remote'
import { serialize } from 'next-mdx-remote/serialize'
import { relative } from 'path'
import rehypeSlug from 'rehype-slug'
import remarkGfm from 'remark-gfm'
import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
import components from '~/components'
import Layout from '~/layouts/DefaultGuideLayout'
import { UrlTransformFunction, linkTransform } from '~/lib/mdx/plugins/rehypeLinkTransform'
import remarkMkDocsAdmonition from '~/lib/mdx/plugins/remarkAdmonition'
import { removeTitle } from '~/lib/mdx/plugins/remarkRemoveTitle'
// We fetch these docs at build time from an external repo
const org = 'supabase'
const repo = 'setup-cli'
const branch = 'gh-pages'
const docsDir = 'docs'
const externalSite = 'https://supabase.github.io/setup-cli'
// Each external docs page is mapped to a local page
const pageMap = [
{
slug: 'generating-types',
meta: {
title: 'Generate types from your database',
description: 'End-to-end type safety across client, server, and database.',
subtitle: 'End-to-end type safety across client, server, and database.',
tocVideo: 'VSNgAIObBdw',
},
remoteFile: 'generating-types.md',
},
]
interface ActionDocsProps {
source: MDXRemoteSerializeResult
meta: {
title: string
description?: string
}
}
export default function ActionDocs({ source, meta }: ActionDocsProps) {
return (
<Layout meta={meta}>
<MDXRemote {...source} components={components} />
</Layout>
)
}
/**
* Fetch markdown from external repo and transform links
*/
export const getStaticProps: GetStaticProps<ActionDocsProps> = async ({ params }) => {
const page = pageMap.find(({ slug }) => slug === params.slug)
if (!page) {
throw new Error(`No page mapping found for slug '${params.slug}'`)
}
const { remoteFile, meta } = page
const response = await fetch(
`https://raw.githubusercontent.com/${org}/${repo}/${branch}/${docsDir}/${remoteFile}`
)
const source = await response.text()
const urlTransform: UrlTransformFunction = (url) => {
try {
const externalSiteUrl = new URL(externalSite)
const placeholderHostname = 'placeholder'
const { hostname, pathname, hash } = new URL(url, `http://${placeholderHostname}`)
// Don't modify a url with a FQDN or a url that's only a hash
if (hostname !== placeholderHostname || pathname === '/') {
return url
}
const relativePage = (
pathname.endsWith('.md')
? pathname.replace(/\.md$/, '')
: relative(externalSiteUrl.pathname, pathname)
).replace(/^\//, '')
const page = pageMap.find(({ remoteFile }) => `${relativePage}.md` === remoteFile)
// If we have a mapping for this page, use the mapped path
if (page) {
return page.slug + hash
}
// If we don't have this page in our docs, link to original docs
return `${externalSite}/${relativePage}${hash}`
} catch (err) {
console.error('Error transforming markdown URL', err)
return url
}
}
const codeHikeOptions: CodeHikeConfig = {
theme: codeHikeTheme,
lineNumbers: true,
showCopyButton: true,
skipLanguages: [],
autoImport: false,
}
const mdxSource = await serialize(source, {
scope: {
chCodeConfig: codeHikeOptions,
},
mdxOptions: {
remarkPlugins: [
remarkGfm,
remarkMkDocsAdmonition,
[removeTitle, meta.title],
[remarkCodeHike, codeHikeOptions],
],
rehypePlugins: [[linkTransform, urlTransform], rehypeSlug],
},
})
return { props: { source: mdxSource, meta } }
}
export const getStaticPaths: GetStaticPaths = async () => {
return {
paths: pageMap.map(({ slug }) => ({
params: {
slug,
},
})),
fallback: false,
}
}
apps/docs/pages/guides/getting-started/local-development.mdx → apps/docs/pages/guides/cli/local-development.mdx
+28 -29
View File
@@ -4,7 +4,9 @@ export const meta = {
id: 'local-development',
title: 'Local Development',
description: 'How to use Supabase on your local development machine.',
video: 'https://www.youtube.com/v/vyHyYpvjaks',
subtitle: 'How to use Supabase on your local development machine.',
video: 'https://www.youtube-nocookie.com/v/vyHyYpvjaks',
tocVideo: 'vyHyYpvjaks',
}
Supabase is a flexible platform that lets you decide how you want to build your projects. You can use the Dashboard directly to get up and running quickly, or use a proper local setup. We suggest you work locally and deploy your changes to a linked project on the [Supabase Platform](https://app.supabase.io/).
@@ -25,23 +27,6 @@ The Dashboard provides a wide range of features for setting up your project: cre
5. **Work offline**: Need to work from a train? A plane? An automobile? No problem. Developing your project locally allows you to work offline.
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/vyHyYpvjaks"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
## Prerequisites
Make sure you have these installed on your local machine:
- [Docker Desktop](https://docs.docker.com/desktop/)
- [Supabase CLI](/docs/guides/cli)
- [Git](https://github.com/git-guides/install-git)
## Log in to the Supabase CLI
```bash
@@ -369,7 +354,7 @@ The last step is deploying these changes to a live Supabase project.
## Deploy your project
You've been developing your project locally, making changes to your tables via migrations. It's time to deploy your project to the Supabase Platform and start scaling up to millions of users! Head over to [Supabase](https://app.supabase.com) and create a new project to deploy to.
You've been developing your project locally, making changes to your tables via migrations. It's time to deploy your project to the Supabase Platform and start scaling up to millions of users! Head over to [Supabase](https://supabase.com/dashboard) and create a new project to deploy to.
### Link your project
@@ -377,7 +362,7 @@ Associate your project with your remote project using [`supabase link`](/docs/re
```bash
supabase link --project-ref <project-id>
# You can get <project-id> from your project's dashboard URL: https://app.supabase.com/project/<project-id>
# You can get <project-id> from your project's dashboard URL: https://supabase.com/dashboard/project/<project-id>
supabase db remote commit
# Capture any changes that you have made to your remote database before you went through the steps above
@@ -401,7 +386,7 @@ Deploy any local database migrations using [`db push`](/docs/reference/cli/usage
supabase db push
```
Visiting your live project on [Supabase](https://app.supabase.com), you'll see a new `employees` table, complete with the `department` column you added in the second migration above.
Visiting your live project on [Supabase](https://supabase.com/dashboard), you'll see a new `employees` table, complete with the `department` column you added in the second migration above.
### Deploy Edge Functions
@@ -413,23 +398,38 @@ supabase functions deploy <function_name>
### Use Auth locally
To use Auth locally, update your project's `supabase/config.toml` file that gets created after running `supabase init`. Add any providers you want, and set enabled to `true`
To use Auth locally, update your project's `supabase/config.toml` file that gets created after running `supabase init`. Add any providers you want, and set enabled to `true`.
```bash config.toml
```bash supabase/config.toml
[auth.external.github]
enabled = true
client_id = ""
secret = ""
client_id = "env($SUPABASE_AUTH_GITHUB_CLIENT_ID)"
secret = "env($SUPABASE_AUTH_GITHUB_SECRET)"
redirect_uri = "http://localhost:54321/auth/v1/callback"
```
As a best practice, any secret values should be loaded from environment variables. You can add them to `.env` file in your project's root directory for the CLI to automatically substitute them.
```bash .env
SUPABASE_AUTH_GITHUB_CLIENT_ID="redacted"
SUPABASE_AUTH_GITHUB_SECRET="redacted"
```
For these changes to take effect, you need to run `supabase stop` and `supabase start` again.
If you have additional triggers or RLS policies defined on your `auth` schema, you can pull them as a migration file locally.
```bash
supabase db remote commit --schema auth
```
### Enabling Local Logging
Local logs rely on the Supabase Analytics Server. This can be enabled via the CLI configuration, and requires a Google Cloud project and BigQuery access.
<Admonition type="note">
The Google Cloud project must have billing enabled. Read more about this requirement
The Google Cloud project must have billing enabled. The dataset created and managed by Analytics
will be within the US. Read more about this requirement
[here](https://supabase.com/docs/reference/self-hosting-analytics/introduction#bigquery).
</Admonition>
@@ -459,10 +459,9 @@ This will switch the logging drivers and will direct logs to the Analytics serve
## Limitations and considerations
The local development environment is not as feature-complete as the Supabase Platform. We're working towards parity between the hosted platform and the local environment. Here are some of the differences:
The local development environment is not as feature-complete as the Supabase Platform. Here are some of the differences:
- The Functions interface is coming soon.
- You cannot update your project settings in the Dashboard. This must be done using the CLI.
- You cannot update your project settings in the Dashboard. This must be done using the local config file.
- The CLI version determines the local version of Studio used, so make sure you keep your local [Supabase CLI up to date](https://github.com/supabase/cli#getting-started). We're constantly adding new features and bug fixes.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/cli/managing-config.mdx
+50
View File
@@ -0,0 +1,50 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'managing-config',
title: 'Managing config and secrets',
description: 'Managing local configuration using config.toml.',
}
The Supabase CLI uses a `config.toml` file to manage local configuration. This file is located in the `supabase` directory of your project.
## Config reference
The `config.toml` file is automatically created when you run `supabase start`.
There are a wide variety of options available, which can be found in the [CLI Config Reference](/docs/reference/cli/config).
For example, to enable the "Apple" OAuth provider for local development, you can append the following information to `config.toml`:
```toml
[auth.external.apple]
enabled = false
client_id = ""
secret = ""
redirect_uri = "" # Overrides the default auth redirectUrl.
```
## Using secrets inside config.toml
You can reference environment variables within the `config.toml` file using the `env()` function. This will detect any values stored in an `.env` file at the root of your project directory. This is particularly useful for storing sensitive information like API keys, and any other values that you don't want to check into version control.
For example, if your `.env` contained the following values:
```bash
GITHUB_CLIENT_ID=""
GITHUB_SECRET=""
```
Then you would reference them inside of our `config.toml` like this:
```toml
[auth.external.github]
enabled = true
client_id = "env(GITHUB_CLIENT_ID)"
secret = "env(GITHUB_SECRET)"
redirect_uri = "" # Overrides the default auth redirectUrl.
```
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/cli/managing-environments.mdx
+27 -43
View File
@@ -3,37 +3,15 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'managing-environments',
title: 'Managing Environments',
description: 'How to deploy Supabase schema changes with a CI / CD pipeline.',
video: 'https://www.youtube.com/v/rOLyOsBR1Uc',
description: 'Manage multiple environments using Database Migrations and GitHub Actions.',
subtitle: 'Manage multiple environments using Database Migrations and GitHub Actions.',
video: 'https://www.youtube-nocookie.com/v/rOLyOsBR1Uc',
tocVideo: 'rOLyOsBR1Uc',
}
## Overview
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.
The Supabase CLI provides the tools you need to manage multiple environments.
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.
## Prerequisites
Make sure you have these installed on your local machine:
- [Docker Desktop](https://docs.docker.com/desktop/)
- [Supabase CLI](/docs/guides/cli)
- [Git](https://github.com/git-guides/install-git)
To get started:
- Create a [Supabase project](https://app.supabase.com) or use an existing one
- Initialize a local Git repository
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/rOLyOsBR1Uc"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
></iframe>
</div>
![Deploy migration](/docs/img/guides/cli/cicd-github.png)
## Set up a local environment
@@ -53,7 +31,7 @@ supabase link --project-ref $PROJECT_ID
You can get your `$PROJECT_ID` from your project's dashboard URL:
```
https://app.supabase.com/project/<project-id>
https://supabase.com/dashboard/project/<project-id>
```
If you're using an existing Supabase project, you might have made schema changes through the Dashboard.
@@ -196,6 +174,7 @@ The Supabase CLI requires a few environment variables to run in non-interactive
- `SUPABASE_ACCESS_TOKEN` is your personal access token
- `SUPABASE_DB_PASSWORD` is your project specific database password
- `SUPABASE_PROJECT_ID` is your project specific reference string
We recommend adding these as [encrypted secrets](https://docs.github.com/en/actions/security-guides/encrypted-secrets) to your GitHub Actions runners.
@@ -218,19 +197,22 @@ on:
jobs:
test:
runs-on: ubuntu-22.04
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: supabase/setup-cli@v1
with:
version: latest
- name: Start Supabase local development setup
run: supabase start
- name: Verify generated types are up-to-date
- name: Verify generated types are checked in
run: |
supabase gen types typescript --local > types.ts
if [ "$(git diff --ignore-space-at-eol types.ts | wc -l)" -gt "0" ]; then
supabase gen types typescript --local > types.gen.ts
if ! git diff --ignore-space-at-eol --exit-code --quiet types.gen.ts; then
echo "Detected uncommitted changes after build. See status below:"
git diff
exit 1
@@ -251,21 +233,22 @@ on:
jobs:
deploy:
runs-on: ubuntu-22.04
runs-on: ubuntu-latest
env:
SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
SUPABASE_DB_PASSWORD: ${{ secrets.STAGING_DB_PASSWORD }}
STAGING_PROJECT_ID: abcdefghijklmnopqrst
SUPABASE_PROJECT_ID: ${{ secrets.STAGING_PROJECT_ID }}
steps:
- uses: actions/checkout@v3
- uses: supabase/setup-cli@v1
with:
version: latest
- run: |
supabase link --project-ref $STAGING_PROJECT_ID
supabase db push
- run: supabase link --project-ref $SUPABASE_PROJECT_ID
- run: supabase db push
```
</TabPanel>
@@ -282,21 +265,22 @@ on:
jobs:
deploy:
runs-on: ubuntu-22.04
runs-on: ubuntu-latest
env:
SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
SUPABASE_DB_PASSWORD: ${{ secrets.PRODUCTION_DB_PASSWORD }}
PRODUCTION_PROJECT_ID: abcdefghijklmnopqrst
SUPABASE_PROJECT_ID: ${{ secrets.PRODUCTION_PROJECT_ID }}
steps:
- uses: actions/checkout@v3
- uses: supabase/setup-cli@v1
with:
version: latest
- run: |
supabase link --project-ref $PRODUCTION_PROJECT_ID
supabase db push
- run: supabase link --project-ref $SUPABASE_PROJECT_ID
- run: supabase db push
```
</TabPanel>
apps/docs/pages/guides/cli/testing-emails.mdx
+24
View File
@@ -0,0 +1,24 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'testing-emails-locally',
title: 'Testing emails locally',
description: 'Testing emails for Supabase Auth on your local machine.',
subtitle: 'Testing emails for Supabase Auth on your local machine.',
}
The Supabase CLI uses [Inbucket](https://github.com/inbucket/inbucket) to capture emails sent from your local machine. This is useful for testing emails sent from Supabase Auth.
## Accessing Inbucket
By default, Inbucket is available at [localhost:54324](http://localhost:54324) when you run `supabase start`. Simply open this URL in your browser to view the emails.
## Going into Production
The "default" email provided by Supabase is only for development purposes. It is [heavily restricted](/docs/guides/platform/going-into-prod#auth-rate-limits) to ensure that it is not used for spam.
Before you go into production, you must configure your own email provider. This is as simple as enabling a new SMTP credentials in your [project settings](https://supabase.com/dashboard/project/_/settings/auth).
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/cli/using-environment-variables-in-config.mdx
-35
View File
@@ -1,35 +0,0 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'using-environment-variables-in-config',
title: 'Using environment variables in config.toml',
description: 'How to use environment variables in config.toml with the Supabase CLI.',
}
The Supabase CLI is capable of utilizing environment variables stored in our project's root directory's `.env` file within the `config.toml` file.
We can reference the environment variable by using the `env()` function.
Inside of our `.env` file we add the environment variable as we normally would
```bash
GITHUB_CLIENT_ID=""
GITHUB_SECRET=""
```
And then reference them inside of our `config.toml`
```toml
[auth.external.github]
enabled = true
client_id = "env(GITHUB_CLIENT_ID)"
secret = "env(GITHUB_SECRET)"
# Overrides the default auth redirectUrl.
redirect_uri = ""
```
These same environment variables will be referenced by the `supabase start` command from the Supabase CLI.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/database.mdx
+1 -1
View File
@@ -98,7 +98,7 @@ Read about resetting your database password [here](/docs/guides/database/managin
## Next steps
- Read more about [Postgres](https://www.postgresql.org/about/)
- Sign in: [app.supabase.com](https://app.supabase.com)
- Sign in: [supabase.com/dashboard](https://supabase.com/dashboard)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/database/arrays.mdx
+3 -3
View File
@@ -20,7 +20,7 @@ Create a test table with a text array (an array of strings):
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Go to the [Table editor](https://supabase.com/dashboard/project/_/editor) page in the Dashboard.
1. Click **New Table** and create a table with the name `arraytest`.
1. Click **Save**.
1. Click **New Column** and create a column with the name `textarray`, type `text`, and select **Define as array**.
@@ -49,7 +49,7 @@ create table arraytest (
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Go to the [Table editor](https://supabase.com/dashboard/project/_/editor) page in the Dashboard.
1. Select the `arraytest` table.
1. Click **Insert row** and add `["Harry", "Larry", "Moe"]`.
1. Click **Save.**
@@ -85,7 +85,7 @@ const { data, error } = await supabase
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Go to the [Table editor](https://supabase.com/dashboard/project/_/editor) page in the Dashboard.
1. Select the `arraytest` table.
You should see:
apps/docs/pages/guides/database/connecting-to-postgres.mdx
+4 -5
View File
@@ -11,7 +11,7 @@ Supabase provides several options for programmatically connecting to your Postgr
1. Direct connections using Postgres' standard connection system
2. Connection pooling using PgBouncer
3. Programmatic access uing the [Serverless APIs](/docs/guides/api)
3. Programmatic access using the [Serverless APIs](/docs/guides/api)
## Serverless APIs
@@ -23,7 +23,7 @@ Supabase provides auto-updating [APIs](/docs/guides/database/api). This is the e
## Direct connections
Every Supabase project provides a full Postgres database. You can connect to the database using [any tool which supports Postgres](#integrations). You can find the connection string in the [Database settings](https://app.supabase.com/project/_/settings/database) inside the dashboard:
Every Supabase project provides a full Postgres database. You can connect to the database using [any tool which supports Postgres](#integrations). You can find the 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`.
@@ -38,7 +38,7 @@ Every Supabase project provides a full Postgres database. You can connect to the
## Connection Pooler
Every Supabase project comes with PgBouncer for connection pooling. A connection pooler is useful for managing a large number of _temporary_ connections. For example, if you are using [Prisma](/docs/guides/integrations/prisma), Drizzle, Kysely, or anything deployed to a Serverless environment (AWS Lambdas or Edge Functions). You can find the connection pool config in the [Database settings](https://app.supabase.com/project/_/settings/database) inside the dashboard:
Every Supabase project comes with PgBouncer for connection pooling. A connection pooler is useful for managing a large number of _temporary_ connections. For example, if you are using [Prisma](/partners/integrations/prisma), Drizzle, Kysely, or anything deployed to a Serverless environment (AWS Lambdas or Edge Functions). You can find the connection pool config in the [Database settings](https://supabase.com/dashboard/project/_/settings/database) inside the dashboard:
1. Go to the `Settings` section.
2. Click `Database`.
@@ -267,7 +267,7 @@ psql "sslmode=verify-full sslrootcert=$HOME/Downloads/prod-supabase.cer host=db.
<StepHikeCompact.Details title="Install">
Install Drizzle and releated dependencies.
Install Postgres.js and releated dependencies.
</StepHikeCompact.Details>
@@ -275,7 +275,6 @@ psql "sslmode=verify-full sslrootcert=$HOME/Downloads/prod-supabase.cer host=db.
```shell
npm i postgres
npm i -D drizzle-kit
```
</StepHikeCompact.Code>
apps/docs/pages/guides/database/extensions.mdx
+1 -1
View File
@@ -19,7 +19,7 @@ Supabase has pre-installed some of the most useful open source extensions.
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click **Extensions** in the sidebar.
3. Enable or disable an extension.
apps/docs/pages/guides/database/extensions/http.mdx
+1 -1
View File
@@ -45,7 +45,7 @@ You can use the `http` extension to make these network requests from Postgres.
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "http" and enable the extension.
apps/docs/pages/guides/database/extensions/hypopg.mdx
+1 -1
View File
@@ -20,7 +20,7 @@ The motivation for HypoPG is to allow users to quickly search for an index to im
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "hypopg" and enable the extension.
apps/docs/pages/guides/database/extensions/pgcron.mdx → apps/docs/pages/guides/database/extensions/pg_cron.mdx
+2 -2
View File
@@ -1,7 +1,7 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'pgcron',
id: 'pg_cron',
title: 'pg_cron: Job Scheduling',
description:
'pgnet: a simple cron-based job scheduler for PostgreSQL that runs inside the database.',
@@ -21,7 +21,7 @@ The `pg_cron` extension is a simple cron-based job scheduler for PostgreSQL that
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pg_cron" and enable the extension.
Loaded 100 of 1384 files, more files were not shown because too many files have changed in this diff. Show more