+ )
}
const EducationSection: FC = ({ icon, hideTitle = false, ...props }) => {
diff --git a/apps/docs/layouts/tutorials/TutorialLayout.tsx b/apps/docs/layouts/tutorials/TutorialLayout.tsx
index b49391425b2..fc1a2fa8ea9 100644
--- a/apps/docs/layouts/tutorials/TutorialLayout.tsx
+++ b/apps/docs/layouts/tutorials/TutorialLayout.tsx
@@ -2,7 +2,6 @@ import { MDXProvider } from '@mdx-js/react'
import Head from 'next/head'
import { FC, useEffect, useState } from 'react'
import components from '~/components'
-import Footer from '~/components/Footer'
import SideBar from '~/components/Navigation/SideBar'
import TableOfContents from '~/components/TableOfContents'
diff --git a/apps/docs/lib/mdx/getConfig.tsx b/apps/docs/lib/mdx/getConfig.tsx
new file mode 100644
index 00000000000..8a014486212
--- /dev/null
+++ b/apps/docs/lib/mdx/getConfig.tsx
@@ -0,0 +1,20 @@
+// @ts-expect-error
+import specStorageV0 from '~/../../spec/storage_v0_config.yaml' assert { type: 'yml' }
+// @ts-expect-error
+import specRealtimeV0 from '~/../../spec/realtime_v0_config.yaml' assert { type: 'yml' }
+// @ts-expect-error
+import specAuthV1 from '~/../../spec/gotrue_v1_config.yaml' assert { type: 'yml' }
+
+function getStorageConfigV0() {
+ return { ...specStorageV0 }
+}
+
+function getRealtimeConfigV0() {
+ return { ...specRealtimeV0 }
+}
+
+function getAuthConfigV1() {
+ return { ...specAuthV1 }
+}
+
+export { getStorageConfigV0, getRealtimeConfigV0, getAuthConfigV1 }
diff --git a/apps/docs/lib/refGenerator/helpers.ts b/apps/docs/lib/refGenerator/helpers.ts
index db1bccd25dc..9c14a80167f 100644
--- a/apps/docs/lib/refGenerator/helpers.ts
+++ b/apps/docs/lib/refGenerator/helpers.ts
@@ -1,4 +1,4 @@
-import { TsDoc } from '~/generator/legacy/definitions'
+import { TsDoc } from '../../generator/legacy/definitions'
import { values, mapValues } from 'lodash'
import { OpenAPIV3 } from 'openapi-types'
@@ -61,6 +61,8 @@ function recurseThroughParams(paramDefinition: any) {
children = dereferenced.children
} else if (dereferenced.type?.declaration?.children) {
children = dereferenced.type.declaration.children
+ } else if (dereferenced.type?.type === 'query') {
+ // skip: ignore types created from `typeof` for now, like `type Fetch = typeof fetch`
} else if (dereferenced.type?.type === 'union') {
// skip: we don't want to show unions as nested parameters
} else if (Object.keys(dereferenced).length === 0) {
diff --git a/apps/docs/package.json b/apps/docs/package.json
index 4c40db4e3d1..2abc71adb53 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -8,7 +8,7 @@
"start": "next start",
"lint": "next lint",
"build:sitemap": "node ./internals/generate-sitemap.mjs",
- "postbuild": "node ./scripts/build-search.js && node ./internals/generate-sitemap.mjs",
+ "postbuild": "ts-node ./scripts/build-search.ts && node ./internals/generate-sitemap.mjs",
"generate:all": "npm-run-all --parallel gen:api gen:cli gen:gotrue gen:storage gen:supabase-dart:v0 gen:supabase-dart:v1 gen:supabase-js:v1 gen:supabase-js:v2 gen:realtime",
"gen:api": "npm-run-all gen:api:usage",
"gen:api:usage": "ts-node ./generator/index.ts gen --type api --url https://api.supabase.com --input ../../spec/transforms/api_v0_openapi_deparsed.json --output ./docs/reference/api/generated/usage.mdx",
diff --git a/apps/docs/pages/[...slug].tsx b/apps/docs/pages/[...slug].tsx
deleted file mode 100644
index 6b34513a155..00000000000
--- a/apps/docs/pages/[...slug].tsx
+++ /dev/null
@@ -1,74 +0,0 @@
-import toc from 'markdown-toc'
-import { MDXRemote } from 'next-mdx-remote'
-import { serialize } from 'next-mdx-remote/serialize'
-import components from '../components/index'
-import NewLayout from '~/layouts/DefaultGuideLayout'
-
-import Layout from '~/layouts/Default'
-import { getAllDocs, getDocsBySlug } from '../lib/docs'
-
-interface Meta {
- id: string
- title: string
- sidebar_label: string
- hide_table_of_contents: boolean
-}
-
-interface Props {
- meta: Meta
- content: any
- toc: any
-}
-const isNewDocs = process.env.NEXT_PUBLIC_NEW_DOCS === 'true'
-
-export default function Doc({ meta, content, toc }: Props) {
- return (
- // @ts-ignore
- <>
- {Object.entries(meta).length > 0 || !isNewDocs ? (
-
-
-
- ) : (
-
-
-
- )}
- >
- )
-}
-
-export async function getStaticProps({ params }: { params: { slug: string[] } }) {
- let slug
- if (params.slug.length > 1) {
- slug = `docs/${params.slug.join('/')}`
- } else {
- slug = `docs/${params.slug[0]}`
- }
-
- let doc = getDocsBySlug(slug)
- const content = await serialize(doc.content || '')
-
- return {
- props: {
- ...doc,
- content,
- toc: toc(doc.content, { maxdepth: 1, firsth1: false }),
- },
- }
-}
-
-export function getStaticPaths() {
- let docs = getAllDocs()
-
- return {
- paths: docs.map(() => {
- return {
- params: {
- slug: docs.map((d) => d.slug),
- },
- }
- }),
- fallback: 'blocking',
- }
-}
diff --git a/apps/docs/pages/architecture.mdx b/apps/docs/pages/architecture.mdx
deleted file mode 100644
index 91048898791..00000000000
--- a/apps/docs/pages/architecture.mdx
+++ /dev/null
@@ -1,162 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'architecture',
- title: 'Architecture',
- description: 'Supabase design and architecture',
-}
-
-Supabase is open source. We choose open source tools which are scalable and make them simple to use.
-
-Supabase is not a 1-to-1 mapping of Firebase. While we are building many of the features that Firebase offers, we are not going about it the same way:
-our technological choices are quite different; everything we use is open source; and wherever possible, we use and support existing tools rather than developing from scratch.
-
-Most notably, we use Postgres rather than a NoSQL store. This choice was deliberate. We believe that no other database offers the functionality required to compete with Firebase,
-while maintaining the scalability required to go beyond it.
-
-## Architecture
-
-Each Supabase project consists of several tools:
-
-
-
-### PostgreSQL (Database)
-
-PostgreSQL is the core of Supabase. We do not abstract the PostgreSQL database — you can access it and use it with full privileges. We simply provide tools which makes PostgreSQL as easy to use as Firebase.
-
-- Official Docs: [postgresql.org/docs](https://www.postgresql.org/docs/current/index.html)
-- Source code: [github.com/postgres/postgres](https://github.com/postgres/postgres) (mirror)
-- License: [PostgreSQL Licence](https://www.postgresql.org/about/licence/)
-- Language: C
-
-### Studio (Dashboard)
-
-An open source Dashboard for managing your database and services.
-
-- Official Docs: [Supabase docs](/docs)
-- Source code: [github.com/supabase/supabase](https://github.com/supabase/supabase/tree/master/studio)
-- License: [Apache 2](https://github.com/supabase/supabase/blob/master/LICENSE)
-- Language: TypeScript
-
-### GoTrue (Auth)
-
-A JWT-based API for managing users and issuing access tokens. This integrates with PostgreSQL's Row Level Security and the API servers.
-
-- Official Docs: [Supabase Auth reference docs](/docs/reference/auth)
-- Source code: [github.com/supabase/gotrue](https://github.com/supabase/gotrue)
-- License: [MIT](https://github.com/supabase/gotrue/blob/master/LICENSE)
-- Language: Go
-
-### PostgREST (API)
-
-A standalone web server that turns your PostgreSQL database directly into a RESTful API.
-We use this with our [pg_graphql](https://github.com/supabase/pg_graphql) extension to provide a GraphQL API.
-
-- Official Docs: [postgrest.org](https://postgrest.org/)
-- Source code: [github.com/PostgREST/postgrest](https://github.com/PostgREST/postgrest)
-- License: [MIT](https://github.com/PostgREST/postgrest/blob/main/LICENSE)
-- Language: Haskel
-
-### Realtime (API & multiplayer)
-
-A scalable websocket engine for managing user Presence, broadcasting messages, and streaming database changes.
-
-- Official Docs: [Supabase Realtime docs](/docs/guides/realtime)
-- Source code: [github.com/supabase/realtime](https://github.com/supabase/realtime)
-- License: [Apache 2](https://github.com/supabase/realtime/blob/master/LICENSE)
-- Language: Elixir
-
-### Storage API (large file storage)
-
-An S3-compatible object storage service that stores metadata in Postgres.
-
-- Official Docs: [Supabase Storage reference docs](/docs/reference/storage)
-- Source code: [github.com/supabase/storage-api](https://github.com/supabase/storage-api)
-- License: [Apache 2.0](https://github.com/supabase/storage-api/blob/master/LICENSE)
-- Language: NodeJS / TypeScript
-
-### Deno (Edge Functions)
-
-A modern runtime for JavaScript and TypeScript.
-
-- Official Docs: [deno.land](https://deno.land/)
-- Source code: [github.com/denoland/deno](https://github.com/denoland/deno)
-- License: [MIT](https://github.com/denoland/deno/blob/main/LICENSE.md)
-- Language: TypeScript / Rust
-
-### postgres-meta (Database management)
-
-A RESTful API for managing your Postgres. Fetch tables, add roles, and run queries.
-
-- Official Docs: [supabase.github.io/postgres-meta](https://supabase.github.io/postgres-meta/)
-- Source code: [github.com/supabase/postgres-meta](https://github.com/supabase/postgres-meta)
-- License: [Apache 2.0](https://github.com/supabase/postgres-meta/blob/master/LICENSE)
-- Language: NodeJS / TypeScript
-
-### PgBouncer
-
-A lightweight connection pooler for PostgreSQL. This is useful for connecting to Postgres when using Serverless functions.
-
-- Official Docs: [pgbouncer.org](http://www.pgbouncer.org/)
-- Source code: [pgbouncer/pgbouncer](https://github.com/pgbouncer/pgbouncer)
-- License: [ISC](https://github.com/pgbouncer/pgbouncer/blob/master/COPYRIGHT)
-- Language: C
-
-### Kong (API Gateway)
-
-A cloud-native API gateway, built on top of Nginx.
-
-- Official Docs: [docs.konghq.com](https://docs.konghq.com/)
-- Source code: [github.com/kong/kong](https://github.com/kong/kong)
-- License: [Apache 2.0](https://github.com/Kong/kong/blob/master/LICENSE)
-- Language: Lua
-
-## Product Principles
-
-It is our goal to provide an architecture that any large-scale company would design for themselves,
-and then provide tooling around that architecture that is easy-to-use for indie-developers and small teams.
-
-We use a series of principles to ensure that scalability and usability are never mutually exclusive:
-
-### Everything works in isolation
-
-Each system must work as a standalone tool with as few moving parts as possible.
-The litmus test for this is: "Can a user run this product with nothing but a Postgres database?"
-
-### Everything is integrated
-
-Supabase is composable. Even though every product works in isolation, each product on the platform needs to 10x the other products.
-For integration, each tool should expose an API and Webhooks.
-
-### Everything is extensible
-
-We're deliberate about adding a new tool, and prefer instead to extend an existing one.
-This is the opposite of many cloud providers whose product offering expands into niche use-cases. We provide _primitives_ for developers, which allow them to achieve any goal.
-Less, but better.
-
-### Everything is portable
-
-To avoid lock-in, we make it easy to migrate in and out. Our cloud offering is compatible with our self-hosted product.
-We use existing standards to increase portability (like pg_dump an CSV files). If a new standard emerges which competes with a "Supabase" approach, we will deprecate the approach in favor of the standard.
-This forces us compete on experience. We aim to be the best Postgres hosting service.
-
-### Play the long game
-
-We sacrifice short-term wins for long-term gains. For example, it is tempting to run a fork of Postgres with additional functionality which only our customers need.
-Instead, we prefer to support efforts to upstream missing functionality so that the entire community benefits. This has the additional benefit of ensuring portability and longevity.
-
-### Build for developers
-
-"Developers" are a specific profile of user: they are _builders_.
-When assessing impact as a function of effort, developers have a large efficiency due to the type of products and systems they can build.
-As the profile of a developer changes over time, Supabase will continue to evolve the product to fit this evolving profile.
-
-### Support existing tools
-
-Supabase supports existing tools and communities wherever possible. Supabase is more like a "community of communities" - each tool typically has its own community
-which we work with.
-Open source is something we approach [collaboratively](https://supabase.com/blog/supabase-series-b#giving-back): we employ maintainers, sponsor projects, invest in businesses, and develop our own open source tools.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/features.mdx b/apps/docs/pages/features.mdx
deleted file mode 100755
index 4b10f3830ba..00000000000
--- a/apps/docs/pages/features.mdx
+++ /dev/null
@@ -1,184 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'features',
- title: 'Features',
- description: 'Supabase features',
-}
-
-This is a non-exhaustive list of features that Supabase provides for every project.
-
-## Database
-
-### Postgres Database
-
-Every project is a full Postgres database. [Docs](/docs/guides/database).
-
-### Database Extensions
-
-Every database comes with a full set of Postgres extensions. [Docs](/docs/guides/database/extensions).
-
-### Database Functions
-
-Create custom database functions which you can call from the browser. [Docs](/docs/guides/database/functions).
-
-### Database Triggers
-
-Attach triggers to your tables to handle database changes. [Docs](/docs/guides/auth/managing-user-data#using-triggers).
-
-### Database Webhooks
-
-Send database changes to any external service using Webhooks. [Link](https://supabase.com/blog/supabase-functions-updates#database-webhooks-alpha).
-
-### Database Backups
-
-Projects are backed up daily with the option to upgrade to Point in Time recovery.
-
-### Search
-
-Build search functionality using Postgres Full Text Search. [Docs](/docs/guides/database/full-text-search).
-
-### Secrets and encryption
-
-Encrypt sensitive data and store secrets using our Postgres extension, Supabase Vault. [Link](https://supabase.com/blog/supabase-vault).
-
-### Database migrations
-
-Develop locally and push your changes to your production database using migrations. [Docs](/docs/guides/cli/local-development#database-migrations)
-
-
-
-## Auth
-
-### Email & Password Logins
-
-Build email logins for your application or website. [Docs](/docs/guides/auth/auth-email).
-
-### Magic Links
-
-Build passwordless logins for your application or website.[Docs](/docs/guides/auth/auth-magic-link).
-
-### Social Logins
-
-Provide social logins - everything from Apple, to GitHub, to Slack. [Docs](/docs/guides/auth/auth-apple).
-
-### Phone Logins
-
-Provide phone logins using a 3rd-party SMS provider. [Docs](/docs/guides/auth/auth-twilio).
-
-### Row Level Security
-
-Control the data each user can access with Postgres Policies. [Docs](/docs/guides/auth/row-level-security).
-
-### Serverside Auth Helpers
-
-Helpers for implementing user authentication in popular frameworks like [Next.js](/docs/guides/auth/auth-helpers/nextjs) and [SvelteKit](/docs/guides/auth/auth-helpers/sveltekit)
-
-### Auth UI Kit
-
-Build login and registration pages with custom themes. [Docs](/docs/guides/auth/auth-helpers/auth-ui).
-
-
-
-## APIs & Client libraries
-
-### Auto-generated REST API
-
-RESTful APIs are autogenerated from your database, without a single line of code. [Docs](/docs/guides/api#rest-api-overview).
-
-### Auto-generated GraphQL API
-
-Fast GraphQL APIs using our custom Postgres GraphQL extension. [Docs](/docs/guides/api#graphql-api-overview).
-
-### Realtime Database changes
-
-Receive your database changes through websockets. [Docs](/docs/guides/realtime/postgres-changes).
-
-### User Broadcasting
-
-Send messages between connected users through websockets. [Docs](/docs/guides/realtime#broadcast).
-
-### User Presence
-
-Synchronize shared state across your users, including online status and typing indicators. [Docs](/docs/guides/realtime#presence).
-
-### Client libraries
-
-Official client libraries for [JavaScript](/docs/reference/javascript/) and [Dart](/docs/reference/dart).
-Unofficial libraries [supported by the community](https://github.com/supabase-community#client-libraries).
-
-
-
-## Storage
-
-### File storage
-
-Supabase Storage makes it simple to store and serve files. [Docs](/docs/guides/storage).
-
-### Storage CDN
-
-Cache large files using the Supabase CDN. [Docs](/docs/guides/storage-cdn).
-
-### Image Transformations
-
-Transform images on the fly. [Docs](/docs/guides/storage/image-transformations).
-
-
-
-## Edge Functions
-
-### Deno Edge Functions
-
-Globally distributed TypeScript functions to execute custom business logic. [Docs](/docs/guides/functions).
-
-
-
-## Project Management
-
-### CLI
-
-Use our CLI to develop your project locally and deploy to the Supabase Platform. [Docs](/docs/reference/cli).
-
-### Management API
-
-Manage your projects programmatically. [Docs](/docs/reference/api).
-
-
-
-## Feature Status
-
-Both Postgres and the Supabase Platform are production-ready. Some tools we offer on top of Postgres are still under development.
-
-| Product | Feature | Stage |
-| -------------------------- | ---------------------- | ------- |
-| Database | Postgres | `GA` |
-| Database | Triggers | `GA` |
-| Database | Functions | `GA` |
-| Database | Extensions | `GA` |
-| Database | Full Text Search | `GA` |
-| Database | Webhooks | `alpha` |
-| Database | Point-in-Time Recovery | `alpha` |
-| Database | Vault | `alpha` |
-| Studio | | `GA` |
-| Realtime | Postgres Changes | `GA` |
-| Realtime | Broadcast | `beta` |
-| Realtime | Presence | `beta` |
-| Storage | | `GA` |
-| Storage | S3 Backend | `GA` |
-| Storage | CDN | `GA` |
-| Storage | Smart CDN | `beta` |
-| Storage | Image Transformations | `beta` |
-| Edge Functions | | `beta` |
-| Auth | OAuth Providers | `beta` |
-| Auth | Passwordless | `beta` |
-| Auth | Next.js Auth Helpers | `alpha` |
-| Auth | SvelteKit Auth Helpers | `alpha` |
-| Auth | Remix Auth Helpers | `alpha` |
-| Management API | | `beta` |
-| CLI | | `beta` |
-| Client Library: JavaScript | | `GA` |
-| Client Library: Dart | | `beta` |
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth.mdx b/apps/docs/pages/guides/auth.mdx
deleted file mode 100644
index 85b1fdc96da..00000000000
--- a/apps/docs/pages/guides/auth.mdx
+++ /dev/null
@@ -1,185 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import NewContent from '~/pages/new/auth.mdx'
-import { useRouter } from 'next/router'
-
-export const meta = {
- id: 'auth',
- title: 'Auth',
- description: 'Use Supabase to Authenticate and Authorize your users.',
- sidebar_label: 'Overview',
-}
-
-## Overview
-
-There are two parts to every Auth system:
-
-- **Authentication:** should this person be allowed in? If yes, who are they?
-- **Authorization:** once they are in, what are they allowed to do?
-
-Supabase Auth is designed to work either as a standalone product, or deeply integrated with the other Supabase products.
-Postgres is at the heart of everything we do, and the Auth system follows this principle. We leverage Postgres' built-in Auth functionality wherever possible.
-
-Here's a quick, 2 minute tour of the Auth features built-in to Supabase:
-
-
-
-
-
-## Authentication
-
-You can authenticate your users in several ways:
-
-- Email & password.
-- Magic links (one-click logins).
-- Social providers.
-- Phone logins.
-
-### Providers
-
-We provide a suite of Providers and login methods, as well as [Auth helpers](/docs/guides/auth/auth-helpers/).
-
-
-
-
-
-### Configure third-party providers
-
-You can enable third-party providers with the click of a button by navigating to Authentication > Settings > Auth Providers and inputting your `Client ID` and `Secret` for each.
-
-
-
-### 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/settings).
-
-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.
-
-> ⚠️ WARNING: While the "globstar" (`**`) is useful for local development and preview URLs, we recommend setting the exact redirect URL path for your site URL in production.
-
-#### Netlify preview URLs
-
-For deployments with Netlify, set the `SITE_URL` to your official site URL. Add the following additional redirect URLs for local development and deployment previews:
-
-- `http://localhost:3000/**`
-- `https://**--my_org.netlify.app/**`
-
-#### Vercel preview URLs
-
-For deployments with Vercel, set the `SITE_URL` to your official site URL. Add the following additional redirect URLs for local development and deployment previews:
-
-- `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:
-
-```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/';
- // 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;
-};
-
-const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'github'
- options: {
- redirectTo: getURL()
- }
-}
-```
-
-#### Mobile deep linking URIs
-
-For mobile applications you can use deep linking URIs. For example for your `SITE_URL` you can specify something like `com.supabase://login-callback/` and for additional redirect URLs something like `com.supabase.staging://login-callback/` if needed.
-
-## Authorization
-
-When you need granular authorization rules, nothing beats PostgreSQL's Row Level Security (RLS).
-
-Policies are PostgreSQL's rule engine. They are incredibly powerful and flexible, allowing you to write complex SQL rules which fit your unique business needs.
-
-Get started with our [Row Level Security Guides](/docs/guides/auth/row-level-security).
-
-### Row Level Security
-
-Authentication only gets you so far. When you need granular authorization rules, nothing beats PostgreSQL's [Row Level Security (RLS)](https://www.postgresql.org/docs/current/ddl-rowsecurity.html). Supabase makes it simple to turn RLS on and off.
-
-
-
-### Policies
-
-[Policies](https://www.postgresql.org/docs/current/sql-createpolicy.html) are PostgreSQL's rule engine. They are incredibly powerful and flexible, allowing you to write complex SQL rules which fit your unique business needs.
-
-
-
-With policies, your database becomes the rules engine. Instead of repetitively filtering your queries, like this ...
-
-```js
-const loggedInUserId = 'd0714948'
-let { data, error } = await supabase
- .from('users')
- .select('user_id, name')
- .eq('user_id', loggedInUserId)
-
-// console.log(data)
-// => { id: 'd0714948', name: 'Jane' }
-```
-
-... you can simply define a rule on your database table, `auth.uid() = user_id`, and your request will return the rows which pass the rule, even when you remove the filter from your middleware:
-
-```js
-let { data, error } = await supabase.from('users').select('user_id, name')
-
-// console.log(data)
-// Still => { id: 'd0714948', name: 'Jane' }
-```
-
-### How It Works
-
-1. A user signs up. Supabase creates a new user in the `auth.users` table.
-2. Supabase returns a new JWT, which contains the user's `UUID`.
-3. Every request to your database also sends the JWT.
-4. Postgres inspects the JWT to determine the user making the request.
-5. The user's UID can be used in policies to restrict access to rows.
-
-Supabase provides a special function in Postgres, `auth.uid()`, which extracts the user's UID from the JWT. This is especially useful when creating policies.
-
-## User Management
-
-Supabase provides multiple endpoints to authenticate and manage your users:
-
-- [Sign up](/docs/reference/javascript/auth-signup)
-- [Sign in with password](/docs/reference/javascript/auth-signinwithpassword)
-- [Sign in with passwordless / one-time password (OTP)](/docs/reference/javascript/auth-signinwithotp)
-- [Sign in with OAuth](/docs/reference/javascript/auth-signinwithoauth)
-- [Sign out](/docs/reference/javascript/auth-signout)
-
-When users sign up, Supabase assigns them a unique ID. You can reference this ID anywhere in your database. For example, you might create a `profiles` table referencing `id` in the `auth.users` table using a `user_id` field.
-
-
-
-export const Page = ({ children }) => {
- const router = useRouter()
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true' && !router.asPath.includes('overview')) {
- return NewContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-apple.mdx b/apps/docs/pages/guides/auth/auth-apple.mdx
deleted file mode 100644
index d5bf22f9205..00000000000
--- a/apps/docs/pages/guides/auth/auth-apple.mdx
+++ /dev/null
@@ -1,207 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-apple',
- title: 'Login with Apple',
- description: 'Add Apple OAuth to your Supabase project',
-}
-
-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.
-
-## Overview
-
-Apple OAuth consists of six broad steps:
-
-- 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).
-
-## Access your Apple Developer account
-
-- Go to [developer.apple.com](https://developer.apple.com).
-- Click on `Account` at the top right to log in.
-
-
-
-## Obtain an App ID
-
-- 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.
-
-## Obtain a Services ID
-
-This will serve as the `client_id` when you make API calls to authenticate the user.
-
-- 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.
-
-## Find your callback URL
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Configure your Services ID
-
-- 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`
-
-The `secret key` you downloaded is used to create the `client_secret` string you'll need to authenticate your users.
-
-According to the [Apple Docs](https://developer.apple.com/documentation/signinwithapplerestapi/generate_and_validate_tokens) it needs to be a JWT
-token encrypted using the Elliptic Curve Digital Signature Algorithm (ECDSA) with the P-256 curve and the SHA-256 hash algorithm.
-
-At this time, the easiest way to generate this JWT token is with [Ruby](https://www.ruby-lang.org/en/).
-If you don't have Ruby installed, you can [Download Ruby Here](https://www.ruby-lang.org/en/downloads).
-
-- Install Ruby (or check to make sure it's installed on your system).
-- Install [ruby-jwt](https://github.com/jwt/ruby-jwt).
-- From the command line, run: `sudo gem install jwt`.
-
-Create the script below using a text editor: `secret_gen.rb`
-
-```ruby
-require "jwt"
-
-key_file = "Path to the private key"
-team_id = "Your Team ID"
-client_id = "The Service ID of the service you created"
-key_id = "The Key ID of the private key"
-
-validity_period = 180 # In days. Max 180 (6 months) according to Apple docs.
-
-private_key = OpenSSL::PKey::EC.new IO.read key_file
-
-token = JWT.encode(
- {
- iss: team_id,
- iat: Time.now.to_i,
- exp: Time.now.to_i + 86400 * validity_period,
- aud: "https://appleid.apple.com",
- sub: client_id
- },
- private_key,
- "ES256",
- header_fields=
- {
- kid: key_id
- }
-)
-puts token
-```
-
-1. Edit the `secret_gen.rb` file:
-
-- `key_file` = "Path to the private key you downloaded from Apple". It should look like this: `AuthKey_XXXXXXXXXX.p8`.
-- `team_id` = "Your Team ID". This is found at the top right of the Apple Developer site (next to your name).
-- `client_id` = "The Service ID of the service you created". This is the `Services ID` you created in the above step `Obtain a Services ID`. If you've lost this ID, you can find it in the Apple Developer Site:
- - Go to `Certificates, Identifiers & Profiles`.
- - Click `Identifiers` at the left.
- - At the top right drop-down, select `Services IDs`.
- - Find your Identifier in the list (i.e. app.com.acme.roadrunner).
-- `key_id` = "The Key ID of the private key". This can be found in the name of your downloaded secret file (For a file named `AuthKey_XXXXXXXXXX.p8` your key_id is `XXXXXXXXXX`). If you've lost this ID, you can find it in the Apple Developer Site:
- - Go to `Certificates, Identifiers & Profiles`.
- - Click `Keys` at the left.
- - Click on your newly-created key in the list.
- - Look under `Key ID` to find your key_id.
-
-2. From the command line, run: `ruby secret_gen.rb > client_secret.txt`.
-3. Your `client_secret` is now stored in this `client_secret.txt` file.
-
-## Add your OAuth credentials to Supabase
-
-- Go to your [Supabase Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `Apple Enabled` to ON.
-- Enter your `client_id` and `client_secret` saved in the previous steps.
-- Click `Save`.
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `apple` as the `provider`:
-
-```js
-async function signInWithApple() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'apple',
- })
-}
-```
-
-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
-
-- [Apple Developer Account](https://developer.apple.com).
-- [Ruby](https://www.ruby-lang.org/en/) Docs.
-- [ruby-jwt](https://github.com/jwt/ruby-jwt) library.
-- 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).
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-azure.mdx b/apps/docs/pages/guides/auth/auth-azure.mdx
deleted file mode 100644
index d75a365b1d5..00000000000
--- a/apps/docs/pages/guides/auth/auth-azure.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-azure',
- title: 'Login with Azure',
- description: 'Add Azure OAuth to your Supabase project',
-}
-
-To enable Azure Auth for your project, you need to set up an Azure OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-Azure OAuth consists of four broad steps:
-
-- Create an application under Azure Active Directory.
-- Obtain a `Application (client) ID` with “Sign In with Azure” capabilities. This will be used as the `client id`.
-- Create a `Secret ID` with “Sign In with Azure” capabilities. The value of the secret will be used as the `client secret`.
-- Add the callback url of your application to the allowlist.
-
-## Access your Azure Developer account
-
-- Go to [portal.azure.com](https://portal.azure.com/#home).
-- Login and select "Azure Active Directory" under the list of Azure Services.
-
-## Register an application
-
-- Under Azure Active Directory, select "App registrations" in the side panel.
-- Select "New registration".
-- Choose a name and select your preferred option for the supported account types.
-- Specify the "Redirect URI".
-- The redirect / callback URI should look like this: `https://.supabase.co/auth/v1/callback`
-- Click "Register" at the bottom of the form.
-
-
-
-## Obtain a Client ID
-
-This will serve as the `client_id` when you make API calls to authenticate the user.
-
-- Once your app has been registered, the client id can be found under the [list of app registrations](https://portal.azure.com/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps) under the column titled "Application (client) ID".
-
-
-
-## Obtain a Secret ID
-
-This will serve as the `client_secret` when you make API calls to authenticate the user.
-
-- Click on the name of the app registered above.
-- Under "Essentials", click on "Client credentials".
-- Navigate to the "Client secrets" tab and select "New client secret".
-- Enter a description and choose your preferred expiry for the secret.
-- Once the secret is generated, save the `value` (not the secret ID).
-
-
-
-## Obtain the Tenant URL
-
-This will allow your users to use your custom Azure login page when logging in.
-
-- Select the Directory (Tenant) ID value.
-- The Azure Tenant URL should look like this: `https://login.microsoftonline.com/`
-
-
-
-## Add login code to your client app
-
-
-
-Supabase Auth requires that Azure returns a valid email address. Therefore you must request the `email` scope in the `signIn` method above.
-
-
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `azure` as the `provider`:
-
-```js
-async function signInWithAzure() {
- const { data, error } = await supabase.auth.signInWithOAuth(
- {
- provider: 'azure',
- },
- {
- scopes: 'email',
- }
- )
-}
-```
-
-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
-
-- [Azure Developer Account](https://portal.azure.com)
-- [GitHub Discussion](https://github.com/supabase/gotrue/pull/54#issuecomment-757043573)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-bitbucket.mdx b/apps/docs/pages/guides/auth/auth-bitbucket.mdx
deleted file mode 100644
index 626b1ef3cf7..00000000000
--- a/apps/docs/pages/guides/auth/auth-bitbucket.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-bitbucket',
- title: 'Login with Bitbucket',
- description: 'Add Bitbucket OAuth to your Supabase project',
-}
-
-To enable Bitbucket Auth for your project, you need to set up a BitBucket OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-
-## Access your Bitbucket account
-
-- Go to [bitbucket.org](https://bitbucket.org/).
-- Click on `Login` at the top right to log in.
-
-
-
-## Find your callback URL
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Create a Bitbucket OAuth app
-
-- Click on your profile icon at the bottom left
-- Click on `All Workspaces`
-- Select a workspace and click on it to select it
-- Click on `Settings` on the left
-- Click on `OAuth consumers` on the left under `Apps and Features` (near the bottom)
-- Click `Add Consumer` at the top
-- Enter the name of your app under `Name`
-- In `Callback URL`, type the callback URL of your app
-- Check the permissions you need (Email, Read should be enough)
-- Click `Save` at the bottom
-- Click on your app name (the name of your new OAuth Consumer)
-- Copy your `Key` (`client_key`) and `Secret` (`client_secret`) codes
-
-## Add your Bitbucket credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Bitbucket Enabled` to ON
-- Enter your `client_id` and `client_secret` saved in the previous step
-- Click `Save`
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `bitbucket` as the `provider`:
-
-```js
-async function signInWithBitbucket() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'bitbucket',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Bitbucket Account](https://bitbucket.org)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-discord.mdx b/apps/docs/pages/guides/auth/auth-discord.mdx
deleted file mode 100644
index dc599979d0e..00000000000
--- a/apps/docs/pages/guides/auth/auth-discord.mdx
+++ /dev/null
@@ -1,97 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-discord',
- title: 'Login with Discord',
- description: 'Add Discord OAuth to your Supabase project',
-}
-
-To enable Discord Auth for your project, you need to set up a Discord Application and add the Application OAuth credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-
-## Access your Discord account
-
-- Go to [discord.com](https://discord.com/).
-- Click on `Login` at the top right to log in.
-
-
-
-- Once logged in, go to [discord.com/developers](https://discord.com/developers).
-
-
-
-## Find your callback URL
-
-In the next step you require a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Create a Discord Application
-
-- Click on `New Application` at the top right.
-- Enter the name of your application and click `Create`.
-- Click on `OAuth2` under `Settings` in the left side panel.
-- Click `Add Redirect` under `Redirects`.
-- Type or paste your `callback URL` into the `Redirects` box.
-- Click `Save Changes` at the bottom.
-- Copy your `Client ID` and `Client Secret` under `Client information`.
-
-## Add your Discord credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Discord Enabled` to ON
-- Enter your `client_id` and `client_secret` saved in the previous step
-- Click `Save`
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `discord` as the `provider`:
-
-```js
-async function signInWithDiscord() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'discord',
- })
-}
-```
-
-If your user is already signed in, Discord prompts the user again for authorization.
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Discord Account](https://discord.com)
-- [Discord Developer Portal](https://discord.com/developers)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-email-templates.mdx b/apps/docs/pages/guides/auth/auth-email-templates.mdx
new file mode 100644
index 00000000000..a82c244000b
--- /dev/null
+++ b/apps/docs/pages/guides/auth/auth-email-templates.mdx
@@ -0,0 +1,50 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ title: 'Email Templates',
+ description: 'Learn how to configure the email templates on Supabase.',
+}
+
+You can customize the email messages used for the authentication flows. You can edit the following email templates:
+
+- Confirm signup
+- Invite user
+- Magic Link
+- Change Email Address
+- Reset Password
+
+## Terminology
+
+The templating system provides the following variables for use:
+
+| Name | Description |
+| ------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `{{ .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). |
+
+## Limitations
+
+### Email Prefetching
+
+Certain email providers may have spam detection or other security features that prefetch URL links from incoming emails.
+In this scenario, the `{{ .ConfirmationURL }}` sent will be consumed instantly which leads to a "Token has expired or is invalid" error.
+To guard against this:
+
+- Use an email OTP instead by including `{{ .Token }}` in the email template.
+- Create your own custom email link to redirect the user to a page where they can click on a button to confirm the action.
+ For example, you can include the following in your email template:
+
+ ```html
+ Confirm your signup
+
+ ```
+
+ 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.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/auth/auth-facebook.mdx b/apps/docs/pages/guides/auth/auth-facebook.mdx
deleted file mode 100644
index 43658f38b00..00000000000
--- a/apps/docs/pages/guides/auth/auth-facebook.mdx
+++ /dev/null
@@ -1,112 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-facebook',
- title: 'Login with Facebook',
- description: 'Add Facebook OAuth to your Supabase project',
-}
-
-To enable Facebook Auth for your project, you need to set up a Facebook OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-
-## Access your Facebook Developer account
-
-- Go to [developers.facebook.com](https://developers.facebook.com).
-- Click on `Log In` at the top right to log in.
-
-
-
-## Create a Facebook App
-
-- Click on `My Apps` at the top right.
-- Click `Create App` near the top right.
-- Select your app type and click `Continue`.
-- Fill in your app information, then click `Create App`.
-- This should bring you to the screen: `Add Products to Your App`. (Alternatively you can click on `Add Product` in the left sidebar to get to this screen.)
-
-## Find your callback URI
-
-The next step requires a callback URI, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Set up FaceBook Login for your Facebook App
-
-From the `Add Products to your App` screen:
-
-- Click `Setup` under `Facebook Login`
-- Skip the Quickstart screen, instead, in the left sidebar, click `Settings` under `Facebook Login`
-- Enter your callback URI under `Valid OAuth Redirect URIs` on the `Facebook Login Settings` page
-- Enter this in the `Valid OAuth Redirect URIs` box
-- Click `Save Changes` at the bottom right
-
-Be aware that you have to set the right access levels on your Facebook App to enable 3rd party applications to read the email address.
-From the `App Review -> Permissions and Features` screen:
-
-- Click the button `Request Advanced Access` on the right side of `public_profile` and `email`
-
-You can read more about access levels [here](https://developers.facebook.com/docs/graph-api/overview/access-levels/)
-
-## Copy your Facebook App ID and Secret
-
-- Click `Settings / Basic` in the left sidebar
-- Copy your App ID from the top of the `Basic Settings` page
-- Under `App Secret` click `Show` then copy your secret
-- Make sure all required fields are completed on this screen.
-
-## Enter your Facebook App ID and Secret into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Facebook Enabled` to ON
-- Enter your `Facebook client ID` and `Facebook secret` saved in the previous step
-- Click `Save`
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `facebook` as the `provider`:
-
-```js
-async function signInWithFacebook() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'facebook',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Facebook Developers Dashboard](https://developers.facebook.com/)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-github.mdx b/apps/docs/pages/guides/auth/auth-github.mdx
deleted file mode 100644
index 6ddcdac1ede..00000000000
--- a/apps/docs/pages/guides/auth/auth-github.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-github',
- title: 'Login with GitHub',
- description: 'Add GitHub OAuth to your Supabase project',
-}
-
-To enable GitHub Auth for your project, you need to set up a GitHub OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-
-## Access your GitHub account
-
-- Go to [github.com](https://github.com).
-- Click on `Sign In` at the top right to log in.
-
-
-
-## Create a GitHub Oauth App
-
-Go to the [GitHub Developer Settings](https://github.com/settings/developers) page:
-
-- Click on your profile photo at the top right
-- Click Settings near the bottom of the menu
-- In the left sidebar, click `Developer settings` (near the bottom)
-- In the left sidebar, click `OAuth Apps`
-
-## Find your callback URL
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Register a new OAuth application
-
-- Click `Register a new application`. If you've created an app before, click `New OAuth App` here.
-- In `Application name`, type the name of your app.
-- In `Homepage URL`, type the full URL to your app's website.
-- In `Authorization callback URL`, type the callback URL of your app.
-- Enter the URL in the `Valid OAuth Redirect URIs` box.
-- Click `Save Changes` at the bottom right.
-- Click `Register Application`.
-
-Copy your new OAuth credentials
-
-- Copy and save your `Client ID`.
-- Click `Generate a new client secret`.
-- Copy and save your `Client secret`.
-
-## Enter your GitHub credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `GitHub Enabled` to ON
-- Enter your `GitHub Client ID` and `GitHub Client Secret` saved in the previous step
-- Click `Save`
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `github` as the `provider`:
-
-```js
-async function signInWithGitHub() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'github',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [GitHub Developer Settings](https://github.com/settings/developers)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-gitlab.mdx b/apps/docs/pages/guides/auth/auth-gitlab.mdx
deleted file mode 100644
index 870c292a0b8..00000000000
--- a/apps/docs/pages/guides/auth/auth-gitlab.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-gitlab',
- title: 'Login with GitLab',
- description: 'Add GitLab OAuth to your Supabase project',
-}
-
-To enable GitLab Auth for your project, you need to set up a GitLab OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-
-## Access your GitLab account
-
-- Go to [gitlab.com](https://gitlab.com).
-- Click on `Login` at the top right to log in.
-
-
-
-## Find your callback URL
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Create your GitLab Application
-
-- Click on your `profile logo` (avatar) in the top-right corner.
-- Select `Edit profile`.
-- In the left sidebar, select Applications.
-- Enter the name of the application.
-- In the `Redirect URI` box, type the callback URL of your app.
-- Check the box next to `Confidential` (make sure it is checked).
-- Check the scope named `read_user` (this is the only required scope).
-- Click `Save Application` at the bottom.
-- Copy and save your `Application ID` (`client_id`) and `Secret` (`client_secret`) which you'll need later.
-
-## Add your GitLab credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `GitLab Enabled` to ON.
-- Enter your `client_id` and `client_secret` saved in the previous step.
-- Click `Save`.
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `gitlab` as the `provider`:
-
-```js
-async function signInWithGitLab() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'gitlab',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [GitLab Account](https://gitlab.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-google.mdx b/apps/docs/pages/guides/auth/auth-google.mdx
deleted file mode 100644
index 4a8a2c3b222..00000000000
--- a/apps/docs/pages/guides/auth/auth-google.mdx
+++ /dev/null
@@ -1,120 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-google',
- title: 'Login with Google',
- description: 'Add Google OAuth to your Supabase project',
-}
-
-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.
-
-## Overview
-
-Setting up Google logins for your application consists of 3 parts:
-
-- 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)
-
-## Access your Google Cloud Platform account
-
-- Go to [cloud.google.com](https://cloud.google.com).
-- Click on `Sign in` at the top right to log in.
-
-
-
-## Create a Google Cloud Platform Project
-
-- 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.
-
-## Create the OAuth Keys for your project
-
-From your project's dashboard screen:
-
-- 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
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## 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
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Google Enabled` to ON
-- Enter your `Google Client ID` and `Google Client Secret` saved in the previous step
-- Click `Save`
-
-## 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',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
index 2a7814999e3..1d07fb9db94 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
@@ -34,7 +34,10 @@ Pass `supabaseClient` from `@supabase/supabase-js` as a prop to the component.
import { createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-react'
-const supabase = createClient('', '')
+const supabase = createClient(
+ '',
+ ''
+)
const App = () =>
```
@@ -43,13 +46,18 @@ This renders the Auth component without any styling.
We recommend using one of the predefined themes to style the UI.
Import the theme you want to use and pass it to the `appearence.theme` prop.
-```js lines=4,11 title=/src/index.js
+```js lines=4,16 title=/src/index.js
import {
Auth,
// Import predefined theme
ThemeSupa,
} from '@supabase/auth-ui-react'
+const supabase = createClient(
+ '',
+ ''
+)
+
const App = () => (
(
)
```
+### Social Providers
+
+The Auth component also supports login with [offical social providers](../../auth#providers).
+
+```js lines=13 title=/src/index.js
+import { createClient } from '@supabase/supabase-js'
+import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+
+const supabase = createClient(
+ '',
+ ''
+)
+
+const App = () => (
+
+)
+```
+
## Customization
There are several ways to customize Auth UI:
@@ -74,11 +104,14 @@ There are several ways to customize Auth UI:
Auth UI comes with several themes to customize the appearance. Each predefined theme comes with at least two variations, a `default` variation, and a `dark` variation. You can switch between these themes using the `theme` prop. Import the theme you want to use and pass it to the `appearence.theme` prop.
-```js lines=2,10 title=/src/index.js
+```js lines=2,13 title=/src/index.js
import { createClient } from '@supabase/supabase-js'
import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
-const supabase = createClient('', '')
+const supabase = createClient(
+ '',
+ ''
+)
const App = () => (
', '')
+const supabase = createClient(
+ '',
+ ''
+)
const App = () => (
', '')
+const supabase = createClient(
+ '',
+ ''
+)
const App = () => (
', '')
+const supabase = createClient(
+ '',
+ ''
+)
const App = () => (
', '')
+const supabase = createClient(
+ '',
+ ''
+)
const App = () => (
', '')
+const supabase = createClient(
+ '',
+ ''
+)
const App = () => (
()
```
@@ -109,7 +109,7 @@ Create a new file at `/utils/supabase-server.ts` and populate with the following
```ts title="/utils/supabase-server.ts"
import { headers, cookies } from 'next/headers'
import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
-import { Database } from '../db_types'
+import { Database } from '../lib/database.types'
export default () =>
createServerComponentSupabaseClient({
@@ -139,6 +139,8 @@ Middleware runs before every route declared in the `matcher` array. Since we don
>
+Create a new file at `/pages/middleware.js` and populate with the following:
+
```jsx title="middleware.js"
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
@@ -164,6 +166,8 @@ export const config = {
+Create a new file at `/middleware.ts` (a sibling of /pages) and populate with the following:
+
```tsx title="middleware.ts"
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
@@ -254,7 +258,7 @@ export default async function RootLayout({ children }) {
}
```
-We don't want Next.js to cache this `session` value, so we need to export a `revalidate` value of `0`.
+We don't want Next.js to cache this `session` value, so we need to export a `revalidate` value of `0` in the layout file.
```jsx
export const revalidate = 0
@@ -641,7 +645,7 @@ Create a new file at `/app/realtime/posts.tsx` and populate with the following:
'use client'
import { useEffect, useState } from 'react'
-import { Database } from '../../db_types'
+import { Database } from '../lib/database.types'
import supabase from '../../utils/supabase-browser'
type Post = Database['public']['Tables']['posts']['Row']
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index c38f8f3b284..d0e74b82999 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -162,6 +162,7 @@ const supabaseClient = useSupabaseClient()
```tsx
// Creating a new supabase server client object (e.g. in API route):
+import { createServerSupabaseClient } from '@supabase/auth-helpers-nextjs'
import type { NextApiRequest, NextApiResponse } from 'next'
import type { Database } from 'types_db'
diff --git a/apps/docs/pages/guides/auth/auth-keycloak.mdx b/apps/docs/pages/guides/auth/auth-keycloak.mdx
deleted file mode 100644
index b0078e6cfae..00000000000
--- a/apps/docs/pages/guides/auth/auth-keycloak.mdx
+++ /dev/null
@@ -1,92 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-keycloak',
- title: 'Login with Keycloak',
- description: 'Add Keycloak OAuth to your Supabase project',
-}
-
-To enable Keycloak Auth for your project, you need to set up an Keycloak OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-To get started with Keycloak, you can run it in a docker container with: `docker run -e KEYCLOAK_USER=admin -e KEYCLOAK_PASSWORD=admin -p 8080:8080 jboss/keycloak:latest`
-
-This guide will be assuming that you are running keycloak in a docker container as described in the command above.
-
-Keycloak OAuth consists of five broad steps:
-
-- Create a new client in your specified keycloak realm.
-- Obtain the `issuer` from the "OpenID Endpoint Configuration". This will be used as the `Keycloak URL`.
-- Ensure that the new client has the "Client Protocol" set to "openid-connect" and the "Access Type" is set to "confidential".
-- The `Client ID` of the client created will be used as the `client id`.
-- Obtain the `Secret` from the credentials tab which will be used as the `client secret`.
-- Add the callback url of your application to your allowlist.
-
-## Access your Keycloak Admin console
-
-- Login by visiting [`http://localhost:8080`](http://localhost:8080) and clicking on "Administration Console".
-
-## Create a Keycloak Realm
-
-- Once you've logged in to the Keycloak console, you can add a realm from the side panel. The default realm should be named "Master".
-- After you've added a new realm, you can retrieve the `issuer` from the "OpenID Endpoint Configuration" endpoint. The `issuer` will be used as the `Keycloak URL`.
-- You can find this endpoint from the realm settings under the "General Tab" or visit [`http://localhost:8080/realms/my_realm_name/.well-known/openid-configuration`](http://localhost:8080/realms/my_realm_name/.well-known/openid-configuration)
-
-
-
-## Create a Keycloak Client
-
-The "Client ID" of the created client will serve as the `client_id` when you make API calls to authenticate the user.
-
-
-
-## Client Settings
-
-After you've created the client successfully, ensure that you set the following settings:
-
-1. The "Client Protocol" should be set to "openid-connect".
-2. The "Access Type" should be set to "confidential".
-3. The "Valid Redirect URIs" should be set to: `https://.supabase.co/auth/v1/callback`.
-
-
-
-
-## Obtain the Client Secret
-
-This will serve as the `client_secret` when you make API calls to authenticate the user.
-Under the "Credentials" tab, the `Secret` value will be used as the `client secret`.
-
-
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `keycloak` as the `provider`:
-
-```js
-async function signInWithKeycloak() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'keycloak',
- options: {
- scopes: 'openid',
- },
- })
-}
-```
-
-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
-
-- You can find the keycloak openid endpoint configuration under the realm settings.
- 
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-linkedin.mdx b/apps/docs/pages/guides/auth/auth-linkedin.mdx
deleted file mode 100644
index 22fb6f1f05e..00000000000
--- a/apps/docs/pages/guides/auth/auth-linkedin.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-linkedin',
- title: 'Login with LinkedIn',
- description: 'Add LinkedIn OAuth to your Supabase project',
-}
-
-To enable LinkedIn Auth for your project, you need to set up a LinkedIn OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
-
-## Access your LinkedIn Developer account
-
-- Go to [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps).
-- Log in (if necessary.)
-
-
-
-## Find your callback URL
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Create a LinkedIn OAuth app
-
-- Go to [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps).
-- Click on `Create App` at the top right
-- Enter your `LinkedIn Page` and `App Logo`
-- Save your app
-- Click `Auth` from the top menu
-- Add your `Redirect URL` to the `Authorized Redirect URLs for your app` section
-- Copy and save your newly-generated `Client ID`
-- Copy and save your newly-generated `Client Secret`
-
-## Enter your LinkedIn credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `LinkedIn Enabled` to ON.
-- Enter your `client_id` and `client_secret` saved in the previous step.
-- Click `Save`.
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `linkedin` as the `provider`:
-
-```js
-async function signInWithLinkedIn() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'linkedin',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [LinkedIn Developer Dashboard](https://api.LinkedIn.com/apps)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-magic-link.mdx b/apps/docs/pages/guides/auth/auth-magic-link.mdx
index 181954436ae..e6a74aa8354 100644
--- a/apps/docs/pages/guides/auth/auth-magic-link.mdx
+++ b/apps/docs/pages/guides/auth/auth-magic-link.mdx
@@ -30,13 +30,15 @@ Setting up Magic Link logins for your Supabase application.
defaultActiveId="js"
>
-
When your user signs in, call [signInWithOtp()](/docs/reference/javascript/auth-signinwithotp) with their email address:
```js
async function signInWithEmail() {
const { data, error } = await supabase.auth.signInWithOtp({
email: 'example@email.com',
+ options: {
+ emailRedirectTo: 'https://example.com/welcome',
+ },
})
}
```
@@ -62,7 +64,6 @@ Future signInWithEmail() async {
defaultActiveId="js"
>
-
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
diff --git a/apps/docs/pages/guides/auth/auth-notion.mdx b/apps/docs/pages/guides/auth/auth-notion.mdx
deleted file mode 100644
index 1f1d74e465a..00000000000
--- a/apps/docs/pages/guides/auth/auth-notion.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-notion',
- title: 'Login with Notion',
- description: 'Add Notion OAuth to your Supabase project',
-}
-
-To enable Notion Auth for your project, you need to set up a Notion Application and add the Application OAuth credentials to your Supabase Dashboard.
-
-## Overview
-
-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)
-- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-
-## Create your notion integration
-
-- Go to [developers.notion.com](https://developers.notion.com/).
-- Click "View my integrations" and login.
-
-
-
-- Once logged in, go to [notion.so/my-integrations](https://notion.so/my-integrations) and create a new integration.
-- When creating your integration, ensure that you select "Public integration" under "Integration type" and "Read user information including email addresses" under "Capabilities".
-- You will need to add a redirect uri, see [Add the redirect uri](#add-the-redirect-uri)
-- Once you've filled in the necessary fields, click "Submit" to finish creating the integration.
-
-
-
-## Add the redirect URI
-
-- After selecting "Public integration", you should see an option to add "Redirect URIs".
-
-
-
-You can retrieve the redirect uri with the following steps:
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-Your redirect uri should look like the following: `https://.supabase.co/auth/v1/callback`
-
-
-
-## Add your Notion credentials into your Supabase Project
-
-- Once you've created your notion integration, you should be able to retrieve the "OAuth client ID" and "OAuth client secret" from the "OAuth Domain and URIs" tab.
-
-
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Under `External OAuth Providers` turn `Notion Enabled` to ON
-- Enter the "OAuth client ID" and "OAuth client secret" obtained in the `client id` and `client secret` fields.
-- Click `Save`
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `notion` as the `provider`:
-
-```js
-async function signInWithNotion() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'notion',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Notion Account](https://notion.so)
-- [Notion Developer Portal](https://www.notion.so/my-integrations)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-slack.mdx b/apps/docs/pages/guides/auth/auth-slack.mdx
deleted file mode 100644
index 6d700e6f961..00000000000
--- a/apps/docs/pages/guides/auth/auth-slack.mdx
+++ /dev/null
@@ -1,104 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-slack',
- title: 'Login with Slack',
- description: 'Add Slack OAuth to your Supabase project',
-}
-
-To enable Slack Auth for your project, you need to set up a Slack OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
-
-## Access your Slack Developer account
-
-- Go to [api.slack.com](https://api.slack.com/apps).
-- Click on `Your Apps` at the top right to log in.
-
-
-
-## Find your callback URL
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Create a Slack OAuth app
-
-- Go to [api.slack.com](https://api.slack.com/apps).
-- Click on `Create an App`
-
-Under `Create an app...`:
-
-- Click `From scratch`
-- Type the name of your app
-- Select your `Slack Workspace`
-- Click `Create App`
-
-Under `App Credentials`:
-
-- Copy and save your newly-generated `Client ID`
-- Copy and save your newly-generated `Client Secret`
-- Click `Permissions`
-
-Under `Redirect URLs`:
-
-- Click `Add New Redirect URL`
-- Paste your `Callback URL` then click `Add`
-- Click `Save URLs`
-
-## Enter your Slack credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `Slack Enabled` to ON.
-- Enter your `Client ID` (`client_id`) and `Client Secret` (`client_secret`) saved in the previous step.
-- Click `Save`.
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `slack` as the `provider`:
-
-```js
-async function signInWithSlack() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'slack',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Slack Developer Dashboard](https://api.slack.com/apps)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-spotify.mdx b/apps/docs/pages/guides/auth/auth-spotify.mdx
deleted file mode 100644
index c5f3a0872f2..00000000000
--- a/apps/docs/pages/guides/auth/auth-spotify.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-spotify',
- title: 'Login with Spotify',
- description: 'Add Spotify OAuth to your Supabase project',
-}
-
-To enable Spotify Auth for your project, you need to set up a Spotify OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
-
-## Access your Spotify Developer account
-
-- Log into [Spotify](https://spotify.com)
-- Access the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
-
-
-
-## Find your callback URL
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Create a Spotify OAuth app
-
-- Log into [Spotify](https://spotify.com).
-- Go to the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
-- Click `Create an App`
-- Type your `App name`
-- Type your `App description`
-- Check the box to agree with the `Developer TOS and Branding Guidelines`
-- Click `Create`
-- Save your `Client ID`
-- Save your `Client Secret`
-- Click `Edit Settings`
-
-Under `Redirect URIs`:
-
-- Paste your Supabase Callback URL in the box
-- Click `Add`
-- Click `Save` at the bottom
-
-## Enter your Spotify credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `Spotify Enabled` to ON.
-- Enter your `Client ID` (`client_id`) and `Client Secret` (`client_secret`) saved in the previous step.
-- Click `Save`.
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `spotify` as the `provider`:
-
-```js
-async function signInWithSpotify() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'spotify',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-twitch.mdx b/apps/docs/pages/guides/auth/auth-twitch.mdx
deleted file mode 100644
index fab1f8e42e3..00000000000
--- a/apps/docs/pages/guides/auth/auth-twitch.mdx
+++ /dev/null
@@ -1,111 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-twitch',
- title: 'Login with Twitch',
- description: 'Add Twitch OAuth to your Supabase project',
-}
-
-To enable Twitch Auth for your project, you need to set up a Twitch Application and add the Application OAuth credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-
-## Access your Twitch Developer account
-
-- Go to [dev.twitch.tv](https://dev.twitch.tv).
-- Click on `Log in with Twitch` at the top right to log in.
-- If you have not already enabled 2-Factor Authentication for your Twitch Account, you will need to do that at [Twitch Security Settings](https://www.twitch.tv/settings/security) before you can continue.
-
-
-
-- Once logged in, go to the [Twitch Developer Console](https://dev.twitch.tv/console).
-
-
-
-## Find your callback URL
-
-In the next step you require a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Create a Twitch Application
-
-
-
-- Click on `+ Register Your Application` at the top right.
-
-
-
-- Enter the name of your application.
-- Type or paste your `OAuth Redirect URL` (the callback URL from the previous step.)
-- Select a category for your app.
-- Check the Captcha box and click `Create`.
-
-## Retrieve your Twitch OAuth Client ID and Client Secret
-
-- Click `Manage` at the right of your application entry in the list.
-
-
-
-- Copy your Client ID.
-- Click `New Secret` to create a new Client Secret.
-- Copy your Client Secret.
-
-
-
-## Add your Twitch credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Twitch Enabled` to ON
-- Enter your `client_id` and `client_secret` saved in the previous step
-- Click `Save`
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `twitch` as the `provider`:
-
-```js
-async function signInWithTwitch() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'twitch',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Twitch Account](https://twitch.tv)
-- [Twitch Developer Console](https://dev.twitch.tv/console)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-twitter.mdx b/apps/docs/pages/guides/auth/auth-twitter.mdx
deleted file mode 100644
index 40cf31af0da..00000000000
--- a/apps/docs/pages/guides/auth/auth-twitter.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-twitter',
- title: 'Login with Twitter',
- description: 'Add Twitter OAuth to your Supabase project',
-}
-
-To enable Twitter Auth for your project, you need to set up a Twitter OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
-
-## Access your Twitter Developer account
-
-- Go to [developer.twitter.com](https://developer.twitter.com).
-- Click on `Sign in` at the top right to log in.
-
-
-
-## Find your callback URL
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Create a Twitter OAuth app
-
-- Click `+ Create Project`.
- - Enter your project name, click `Next`.
- - Select your use case, click `Next`.
- - Enter a description for your project, click `Next`.
- - Enter a name for your app, click `Complete`.
- - Copy and save your `API Key` (this is your `client_id`).
- - Copy and save your `API Secret Key` (this is your `client_secret`).
-- At the bottom, under `Next, setup your App` click the link `enable 3rd party authentication`.
-- Under `App Settings`, click on the gear icon next to your app name to go to `App Settings`.
-- At the bottom, next to `Authentication settings`, click `Edit`.
-- Turn `Enable 3-legged OAuth` ON.
-- Turn `Request email address from users` ON.
-- Enter your `Callback URL`.
-- Enter your `Website URL`.
-- Enter your `Terms of service URL`.
-- Enter your `Privacy policy URL`.
-- Click `Save`.
-
-## Enter your Twitter credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- In the left sidebar, click the `Authentication` icon (near the top).
-- Click `Settings` from the list to go to the `Authentication Settings` page.
-- Enter the final (hosted) URL of your app under `Site URL` (this is important).
-- Under `External OAuth Providers` turn `Twitter Enabled` to ON.
-- Enter your `API Key` (`client_id`) and `API Secret Key` (`client_secret`) saved in the previous step.
-- Click `Save`.
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `twitter` as the `provider`:
-
-```js
-async function signInWithTwitter() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'twitter',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Twitter Developer Dashboard](https://developer.twitter.com/en/portal/dashboard)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-workos.mdx b/apps/docs/pages/guides/auth/auth-workos.mdx
deleted file mode 100644
index 806a838207a..00000000000
--- a/apps/docs/pages/guides/auth/auth-workos.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-workos',
- title: 'Login with WorkOS',
- description: 'Add WorkOS OAuth to your Supabase project',
-}
-
-To enable WorkOS Auth for your project, you need to set up WorkOS OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-In this guide, we will cover how to use Supabase OAuth with WorkOS to implement Single-Sign-On(SSO).
-
-The procedure consists of five broad steps:
-
-- Create a new organization from your WorkOS Dashboard.
-- Obtain the `Client ID` from the Configuration tab and configure redirect URI.
-- Obtain the `WorkOS Secret` from the credentials tab.
-- Connect a WorkOS Supported Identity Provider
-- Add your WorkOS credentials into your Supabase project
-
-## Create a WorkOS Organization
-
-Log in to the dashboard and hop over to the Organizations tab to create and organization
-
-
-## Obtain the Client ID and configure Redirect URI
-
-Head over to the Configuration tab and configure the redirect URI.The redirect URI should look like `https://.supabase.co/auth/v1/callback`
-Note that this is distinct from the redirect URI referred to in the Supabase dashboard
-
-
-
-## Obtain the WorkOS Secret
-
-Head over to the API Keys page and obtain the secret key.
-
-
-
-## Connect a WorkOS Supported Identity Provider
-
-Set up the identity provider by visiting the setup link.
-
-
-
-You can pick between any one of the many identity providers that WorkOS supports.
-
-## Add your WorkOS credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Under `External OAuth Providers` turn `WorkOS Enabled` to ON
-- Enter the `Client ID`, `Secret`, and `WorkOS URL` saved in the previous steps. The ``WorkOS URL` setting should be set to https://api.workos.com/
-- Click `Save`
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `workos` as the `provider`:
-
-```js
-async function signInWithWorkOS() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'workos',
- options: {
- queryParams: {
- connection: '',
- organization: '',
- },
- },
- })
-}
-```
-
-Refer to the [WorkOS Documentation](https://workos.com/docs/reference/sso/authorize/) to learn more about the different methods.
-
-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
-
-- [WorkOS Documentation](https://workos.com/docs/sso/guide)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/auth-zoom.mdx b/apps/docs/pages/guides/auth/auth-zoom.mdx
deleted file mode 100644
index 13d9de860c5..00000000000
--- a/apps/docs/pages/guides/auth/auth-zoom.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'auth-zoom',
- title: 'Login with Zoom',
- description: 'Add Zoom OAuth to your Supabase project',
-}
-
-To enable Zoom Auth for your project, you need to set up a Zoom OAuth application and add the application credentials to your Supabase Dashboard.
-
-## Overview
-
-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 the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-
-## Access your Zoom Developer account
-
-- Go to [marketplace.zoom.us](https://marketplace.zoom.us/).
-- Click on `Sign In` at the top right to log in.
-
-
-
-## Find your callback URL
-
-The next step requires a callback URL, which looks like this:
-
-`https://.supabase.co/auth/v1/callback`
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com).
-- Click on the `Settings` icon at the bottom of the left sidebar.
-- Click on `API` in the list.
-- Under Config / URL you'll find your API URL, you can click `Copy` to copy it to the clipboard.
-- Now just add `/auth/v1/callback` to the end of that to get your full `OAuth Redirect URI`.
-
-
-
-## Create a Zoom Oauth App
-
-- Go to [marketplace.zoom.us](https://marketplace.zoom.us/).
-- Click on `Sign In` at the top right to log in.
-- Click `Build App` (from the dropdown Develop)
-- In the OAuth card, click `Create`
-- Type the name of your app
-- Choose app type
-- Click `Create`
-
-Under `App credentials`
-
-- Copy and save your `Client ID`.
-- Copy and save your `Client secret`.
-
-Under `Redirect URL for OAuth`
-
-- Paste your `Callback URL`
-- Click `Continue`
-
-## Enter your Zoom credentials into your Supabase Project
-
-- Go to your [Supabase Project Dashboard](https://app.supabase.com)
-- In the left sidebar, click the `Authentication` icon (near the top)
-- Click `Settings` from the list to go to the `Authentication Settings` page
-- Enter the final (hosted) URL of your app under `Site URL` (this is important)
-- Under `External OAuth Providers` turn `Zoom Enabled` to ON
-- Enter your `Zoom Client ID` and `Zoom Client Secret` saved in the previous step
-- Click `Save`
-
-## Add login code to your client app
-
-When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `zoom` as the `provider`:
-
-```js
-async function signInWithZoom() {
- const { data, error } = await supabase.auth.signInWithOAuth({
- provider: 'zoom',
- })
-}
-```
-
-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
-
-- [Supabase Account - Free Tier OK](https://supabase.com)
-- [Supabase JS Client](https://github.com/supabase/supabase-js)
-- [Zoom App Marketplace](https://marketplace.zoom.us/)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/managing-user-data.mdx b/apps/docs/pages/guides/auth/managing-user-data.mdx
index da30e0bb329..5ec883528ff 100644
--- a/apps/docs/pages/guides/auth/managing-user-data.mdx
+++ b/apps/docs/pages/guides/auth/managing-user-data.mdx
@@ -18,7 +18,7 @@ For example, a `public.profiles` table might look like this:
```sql
create table public.profiles (
- id uuid references auth.users not null,
+ id uuid references auth.users not null on delete cascade,
first_name text,
last_name text,
@@ -28,6 +28,12 @@ create table public.profiles (
alter table public.profiles enable row level security;
```
+
+
+Make sure to specify the `on delete cascade` clause when referencing `auth.users`. Omitting it may cause problems when deleting users.
+
+
+
## Public access
Since Row Level Security is enabled, this table is accessible via the API but no data will be returned unless we set up some Policies.
diff --git a/apps/docs/pages/guides/auth/overview.mdx b/apps/docs/pages/guides/auth/overview.mdx
index 210374ebf3c..85b1fdc96da 100644
--- a/apps/docs/pages/guides/auth/overview.mdx
+++ b/apps/docs/pages/guides/auth/overview.mdx
@@ -1,5 +1,6 @@
import Layout from '~/layouts/DefaultGuideLayout'
-import OldContent from '~/pages/guides/auth.mdx'
+import NewContent from '~/pages/new/auth.mdx'
+import { useRouter } from 'next/router'
export const meta = {
id: 'auth',
@@ -8,9 +9,175 @@ export const meta = {
sidebar_label: 'Overview',
}
+## Overview
+
+There are two parts to every Auth system:
+
+- **Authentication:** should this person be allowed in? If yes, who are they?
+- **Authorization:** once they are in, what are they allowed to do?
+
+Supabase Auth is designed to work either as a standalone product, or deeply integrated with the other Supabase products.
+Postgres is at the heart of everything we do, and the Auth system follows this principle. We leverage Postgres' built-in Auth functionality wherever possible.
+
+Here's a quick, 2 minute tour of the Auth features built-in to Supabase:
+
+
+
+
+
+## Authentication
+
+You can authenticate your users in several ways:
+
+- Email & password.
+- Magic links (one-click logins).
+- Social providers.
+- Phone logins.
+
+### Providers
+
+We provide a suite of Providers and login methods, as well as [Auth helpers](/docs/guides/auth/auth-helpers/).
+
+
+
+
+
+### Configure third-party providers
+
+You can enable third-party providers with the click of a button by navigating to Authentication > Settings > Auth Providers and inputting your `Client ID` and `Secret` for each.
+
+
+
+### 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/settings).
+
+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.
+
+> ⚠️ WARNING: While the "globstar" (`**`) is useful for local development and preview URLs, we recommend setting the exact redirect URL path for your site URL in production.
+
+#### Netlify preview URLs
+
+For deployments with Netlify, set the `SITE_URL` to your official site URL. Add the following additional redirect URLs for local development and deployment previews:
+
+- `http://localhost:3000/**`
+- `https://**--my_org.netlify.app/**`
+
+#### Vercel preview URLs
+
+For deployments with Vercel, set the `SITE_URL` to your official site URL. Add the following additional redirect URLs for local development and deployment previews:
+
+- `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:
+
+```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/';
+ // 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;
+};
+
+const { data, error } = await supabase.auth.signInWithOAuth({
+ provider: 'github'
+ options: {
+ redirectTo: getURL()
+ }
+}
+```
+
+#### Mobile deep linking URIs
+
+For mobile applications you can use deep linking URIs. For example for your `SITE_URL` you can specify something like `com.supabase://login-callback/` and for additional redirect URLs something like `com.supabase.staging://login-callback/` if needed.
+
+## Authorization
+
+When you need granular authorization rules, nothing beats PostgreSQL's Row Level Security (RLS).
+
+Policies are PostgreSQL's rule engine. They are incredibly powerful and flexible, allowing you to write complex SQL rules which fit your unique business needs.
+
+Get started with our [Row Level Security Guides](/docs/guides/auth/row-level-security).
+
+### Row Level Security
+
+Authentication only gets you so far. When you need granular authorization rules, nothing beats PostgreSQL's [Row Level Security (RLS)](https://www.postgresql.org/docs/current/ddl-rowsecurity.html). Supabase makes it simple to turn RLS on and off.
+
+
+
+### Policies
+
+[Policies](https://www.postgresql.org/docs/current/sql-createpolicy.html) are PostgreSQL's rule engine. They are incredibly powerful and flexible, allowing you to write complex SQL rules which fit your unique business needs.
+
+
+
+With policies, your database becomes the rules engine. Instead of repetitively filtering your queries, like this ...
+
+```js
+const loggedInUserId = 'd0714948'
+let { data, error } = await supabase
+ .from('users')
+ .select('user_id, name')
+ .eq('user_id', loggedInUserId)
+
+// console.log(data)
+// => { id: 'd0714948', name: 'Jane' }
+```
+
+... you can simply define a rule on your database table, `auth.uid() = user_id`, and your request will return the rows which pass the rule, even when you remove the filter from your middleware:
+
+```js
+let { data, error } = await supabase.from('users').select('user_id, name')
+
+// console.log(data)
+// Still => { id: 'd0714948', name: 'Jane' }
+```
+
+### How It Works
+
+1. A user signs up. Supabase creates a new user in the `auth.users` table.
+2. Supabase returns a new JWT, which contains the user's `UUID`.
+3. Every request to your database also sends the JWT.
+4. Postgres inspects the JWT to determine the user making the request.
+5. The user's UID can be used in policies to restrict access to rows.
+
+Supabase provides a special function in Postgres, `auth.uid()`, which extracts the user's UID from the JWT. This is especially useful when creating policies.
+
+## User Management
+
+Supabase provides multiple endpoints to authenticate and manage your users:
+
+- [Sign up](/docs/reference/javascript/auth-signup)
+- [Sign in with password](/docs/reference/javascript/auth-signinwithpassword)
+- [Sign in with passwordless / one-time password (OTP)](/docs/reference/javascript/auth-signinwithotp)
+- [Sign in with OAuth](/docs/reference/javascript/auth-signinwithoauth)
+- [Sign out](/docs/reference/javascript/auth-signout)
+
+When users sign up, Supabase assigns them a unique ID. You can reference this ID anywhere in your database. For example, you might create a `profiles` table referencing `id` in the `auth.users` table using a `user_id` field.
+
+
+
export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return OldContent()
+ const router = useRouter()
+ if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true' && !router.asPath.includes('overview')) {
+ return NewContent()
}
return
}
diff --git a/apps/docs/pages/guides/auth/passwordless-login.mdx b/apps/docs/pages/guides/auth/passwordless-login.mdx
deleted file mode 100644
index 3dfa29c985c..00000000000
--- a/apps/docs/pages/guides/auth/passwordless-login.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import { IconPanel, GlassPanel, IconMail } from 'ui'
-import Link from 'next/link'
-import { PhoneLoginsItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
-
-export const meta = {
- title: 'Passwordless Login',
- description: 'Learn about logging in with email one-time passwords (magic links) and SMS one-time passwords.',
-}
-
-Passwordless login is a method of authentication that allows users to log in to a website or application without using a password. Instead of entering a password, the user may be asked to provide some other form of authentication, such as a one-time code sent via email or SMS, or by using a biometric factor like their fingerprint or facial recognition.
-
-## Benefits
-
-There are several benefits of implementing passwordless login in your applications:
-
-1. **Improved user experience**: By eliminating the need for users to remember and enter complex passwords, passwordless login can make it easier and more convenient for users to log in to your application. This can improve the overall user experience and make it more enjoyable for users to interact with your application.
-
-2. **Increased security**: Passwordless login can improve the security of your application by reducing the risk of password-related security breaches, such as password reuse and weak passwords. By using alternative forms of authentication, such as one-time codes or biometric factors, you can make it more difficult for unauthorized users to access your application.
-
-3. **Reduced support burden**: Passwordless login can also help reduce the support burden for your team by eliminating the need to reset forgotten passwords or deal with other password-related issues. This can free up your team to focus on other important tasks and improve the efficiency of your operation.
-
-## Set up Passwordless Login with Supabase Auth
-
-Supabase supports passwordless logins through "magic links" (instead of entering a password, the user is sent
-a link which they can click to log in to their account) and one-time passwords via SMS through several communications platforms. Follow the guides below to set up a passwordless login flow with Supabase Auth.
-
-### Email One-Time Password (OTP)
-
-
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/passwordless-login/email-otp-magic-link.mdx b/apps/docs/pages/guides/auth/passwordless-login/email-otp-magic-link.mdx
deleted file mode 100644
index 8e6bb09d58e..00000000000
--- a/apps/docs/pages/guides/auth/passwordless-login/email-otp-magic-link.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/auth/auth-magic-link.mdx'
-
-export const meta = {
- id: 'auth-magic-link',
- title: 'Login With Magic Link',
- description: 'Use Supabase to authenticate and authorize your users using magic links.',
-}
-
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/passwordless-login/phone-sms-otp-messagebird.mdx b/apps/docs/pages/guides/auth/passwordless-login/phone-sms-otp-messagebird.mdx
deleted file mode 100644
index 93e300fd59b..00000000000
--- a/apps/docs/pages/guides/auth/passwordless-login/phone-sms-otp-messagebird.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/auth/auth-messagebird.mdx'
-
-export const meta = {
- id: 'auth-messagebird',
- title: 'Phone Auth with MessageBird',
- description: 'How to set up and use Mobile OTP with MessageBird and Supabase.',
-}
-
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/passwordless-login/phone-sms-otp-twilio.mdx b/apps/docs/pages/guides/auth/passwordless-login/phone-sms-otp-twilio.mdx
deleted file mode 100644
index 922d4a33db1..00000000000
--- a/apps/docs/pages/guides/auth/passwordless-login/phone-sms-otp-twilio.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/auth/auth-twilio.mdx'
-
-export const meta = {
- id: 'auth-twilio',
- title: 'Phone Auth with Twilio',
- description: 'How to set up and use Mobile OTP with Twilio and Supabase.',
-}
-
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/passwordless-login/phone-sms-otp-vonage.mdx b/apps/docs/pages/guides/auth/passwordless-login/phone-sms-otp-vonage.mdx
deleted file mode 100644
index deec90db1d5..00000000000
--- a/apps/docs/pages/guides/auth/passwordless-login/phone-sms-otp-vonage.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/auth/auth-vonage.mdx'
-
-export const meta = {
- id: 'auth-vonage',
- title: 'Phone Auth with Vonage',
- description: 'How to set up and use Mobile OTP with Vonage and Supabase.',
-}
-
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/auth/phone-login.mdx b/apps/docs/pages/guides/auth/phone-login.mdx
new file mode 100644
index 00000000000..d57ed18d5f2
--- /dev/null
+++ b/apps/docs/pages/guides/auth/phone-login.mdx
@@ -0,0 +1,47 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import { IconPanel, GlassPanel, IconMail } from 'ui'
+import Link from 'next/link'
+import { PhoneLoginsItems } from '~/components/Navigation/NavigationMenu/NavigationMenu.constants'
+
+export const meta = {
+ title: 'Phone Login',
+ description: 'Learn about logging in to your platform using SMS one-time passwords.',
+}
+
+Phone Login is a method of authentication that allows users to log in to a website or application without using a password. Instead of entering a password, the user provides another form of authentication through a one-time code sent via SMS.
+
+## Benefits
+
+There are several reasons why you might want to add phone login to your applications:
+
+- **Improved user experience**: By eliminating the need for users to remember and enter complex passwords, phone login can make it easier and more convenient for users to log in to your application. This can improve the overall user experience and make it more enjoyable for users to interact with your application.
+
+- **Increased security**: Phone login can improve the security of your application by reducing the risk of password-related security breaches, such as password reuse and weak passwords. By using alternative forms of authentication, such as one-time codes or biometric factors, you can make it more difficult for unauthorized users to access your application.
+
+- **Reduced support burden**: Phone login can also help reduce the support burden for your team by eliminating the need to handle password recovery flows or deal with other password-related issues. This can free up your team to focus on other important tasks and improve the efficiency of your operation.
+
+## Set up a provider with Supabase Auth
+
+Supabase supports Phone Login with several communications platforms. Follow the guides below to set up a provider with Supabase Auth.
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/auth/auth-messagebird.mdx b/apps/docs/pages/guides/auth/phone-login/messagebird.mdx
similarity index 100%
rename from apps/docs/pages/guides/auth/auth-messagebird.mdx
rename to apps/docs/pages/guides/auth/phone-login/messagebird.mdx
diff --git a/apps/docs/pages/guides/auth/auth-twilio.mdx b/apps/docs/pages/guides/auth/phone-login/twilio.mdx
similarity index 100%
rename from apps/docs/pages/guides/auth/auth-twilio.mdx
rename to apps/docs/pages/guides/auth/phone-login/twilio.mdx
diff --git a/apps/docs/pages/guides/auth/auth-vonage.mdx b/apps/docs/pages/guides/auth/phone-login/vonage.mdx
similarity index 100%
rename from apps/docs/pages/guides/auth/auth-vonage.mdx
rename to apps/docs/pages/guides/auth/phone-login/vonage.mdx
diff --git a/apps/docs/pages/guides/auth/social-login.mdx b/apps/docs/pages/guides/auth/social-login.mdx
index 65b36e2a0a5..1c950411577 100644
--- a/apps/docs/pages/guides/auth/social-login.mdx
+++ b/apps/docs/pages/guides/auth/social-login.mdx
@@ -16,11 +16,11 @@ OAuth is commonly used for things like logging in to a social media account from
There are several reasons why you might want to add social login to your applications:
-1. **Improved user experience**: Users can register and log in to your application using their existing social media accounts, which can be faster and more convenient than creating a new account from scratch. This makes it easier for users to access your application, improving their overall experience.
+- **Improved user experience**: Users can register and log in to your application using their existing social media accounts, which can be faster and more convenient than creating a new account from scratch. This makes it easier for users to access your application, improving their overall experience.
-2. **Better user engagement**: You can access additional data and insights about your users, such as their interests, demographics, and social connections. This can help you tailor your content and marketing efforts to better engage with your users and provide a more personalized experience.
+- **Better user engagement**: You can access additional data and insights about your users, such as their interests, demographics, and social connections. This can help you tailor your content and marketing efforts to better engage with your users and provide a more personalized experience.
-3. **Increased security**: Social login can improve the security of your application by leveraging the security measures and authentication protocols of the social media platforms that your users are logging in with. This can help protect against unauthorized access and account takeovers.
+- **Increased security**: Social login can improve the security of your application by leveraging the security measures and authentication protocols of the social media platforms that your users are logging in with. This can help protect against unauthorized access and account takeovers.
## Set up a social provider with Supabase Auth
@@ -28,7 +28,7 @@ Supabase supports a suite of social providers. Follow these guides to configure
+)
+```
+
+## Next steps
+
+At this stage you have a fully functional application!
+
+- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
+- Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) =>
+
export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
index 349e7af543a..69cdea17b87 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
@@ -1,5 +1,4 @@
import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/with-svelte.mdx'
export const meta = {
id: 'with-svelte',
@@ -8,11 +7,374 @@ export const meta = {
sidebar_label: 'Svelte',
}
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
+
+
+
+
+### GitHub
+
+Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/svelte-user-management).
+
+
+
+## Building the App
+
+Let's start building the Svelte app from scratch.
+
+### Initialize a Svelte app
+
+We can use the Vite Svelte TypeScript Template to initialize an app called `supabase-svelte`:
+
+```bash
+npm create vite@latest supabase-svelte -- --template svelte-ts
+cd supabase-svelte
+npm install
+```
+
+Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
+
+```bash
+npm install @supabase/supabase-js
+```
+
+And finally we want to save the environment variables in a `.env`.
+All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
+
+```bash title=.env
+VITE_SUPABASE_URL=YOUR_SUPABASE_URL
+VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+```
+
+Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
+on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
+
+```js title=src/supabaseClient.ts
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey)
+```
+
+And one optional step is to update the CSS file `src/app.css` to make the app look nice.
+You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/svelte-user-management/src/app.css).
+
+### Set up a Login component
+
+Let's set up a Svelte component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
+
+```html title=src/lib/Auth.svelte
+
+
+
+
+
Supabase + Svelte
+
Sign in via magic link with your email below
+
+
+
+```
+
+### Account page
+
+After a user is signed in we can allow them to edit their profile details and manage their account.
+Let's create a new component for that called `Account.svelte`.
+
+```html title=src/lib/Account.svelte
+
+
+
+```
+
+### Launch!
+
+Now that we have all the components in place, let's update `App.svelte`:
+
+```html title=src/App.svelte
+
+
+
+ {#if !session}
+
+ {:else}
+
+ {/if}
+
+```
+
+Once that's done, run this in a terminal window:
+
+```bash
+npm run dev
+```
+
+And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app.
+
+> ⚠️ WARNING: Svelte uses Vite and the default port is `5173`, Supabase uses `port 3000`. To change the redirection port for supabase go to: `Authentication > Settings` and change the `Site Url` to `localhost:5173`
+
+
+
+## Bonus: Profile photos
+
+Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
+
+### Create an upload widget
+
+Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
+
+```html title=src/lib/Avatar.svelte
+
+
+
+ {#if avatarUrl} {:else}
+
+ {/if}
+
+
+
+
+
+
+
+```
+
+### Add the new widget
+
+And then we can add the widget to the Account page:
+
+```html title=src/lib/Account.svelte
+
+
+
+```
+
+## Next steps
+
+At this stage you have a fully functional application!
+
+- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
+- Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
index 1ead93e6cb5..d8af92de291 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
@@ -1,5 +1,4 @@
import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/with-sveltekit.mdx'
export const meta = {
id: 'with-sveltekit',
@@ -8,11 +7,440 @@ export const meta = {
sidebar_label: 'SvelteKit',
}
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
+
+
+
+
+### GitHub
+
+Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/sveltekit-user-management).
+
+
+
+## Building the App
+
+Let's start building the Svelte app from scratch.
+
+### Initialize a Svelte app
+
+We can use the [SvelteKit Skeleton Project](https://kit.svelte.dev/docs) to initialize
+an app called `supabase-sveltekit` (for this tutorial you do not need TypeScript, ESLint, Prettier, or Playwright):
+
+```bash
+npm init svelte@next supabase-sveltekit
+cd supabase-sveltekit
+npm install
+```
+
+Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
+
+```bash
+npm install @supabase/supabase-js
+```
+
+And finally we want to save the environment variables in a `.env`.
+All we need are the `SUPABASE_URL` and the `SUPABASE_KEY` key that you copied [earlier](#get-the-api-keys).
+
+```bash title=.env
+PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"
+PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"
+```
+
+Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
+on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
+
+```js title=src/lib/supabaseClient.ts
+import { createClient } from '@supabase/auth-helpers-sveltekit'
+import { env } from '$env/dynamic/public'
+
+export const supabase = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)
+```
+
+And one optional step is to update the CSS file `public/global.css` to make the app look nice.
+You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/svelte-user-management/src/app.css).
+
+### Supabase Auth Helpers
+
+SvelteKit is a highly versatile framework offering pre-rendering at build time (SSG), server-side rendering at request time (SSR), API routes, and more.
+
+It can be challenging to authenticate your users in all these different environments, that's why we've created the Supabase Auth Helpers to make user management and data fetching within SvelteKit as easy as possible.
+
+Install the auth helpers for SvelteKit:
+
+```bash
+npm install @supabase/auth-helpers-sveltekit
+```
+
+Update your `src/routes/+layout.svelte`:
+
+```html title=src/routes/+layout.svelte
+
+
+
+
+
+```
+
+Create a new `src/routes/+layout.ts` file to handle the session on the client-side.
+
+```ts title=src/routes/+layout.ts
+import type { LayoutLoad } from './$types'
+import { getSupabase } from '@supabase/auth-helpers-sveltekit'
+
+export const load: LayoutLoad = async (event) => {
+ const { session } = await getSupabase(event)
+ return { session }
}
+```
+
+Create a new `src/routes/+layout.server.ts` file to handle the session on the server-side.
+
+```ts title=src/routes/+layout.server.ts
+import type { LayoutServerLoad } from './$types'
+import { getServerSession } from '@supabase/auth-helpers-sveltekit'
+
+export const load: LayoutServerLoad = async (event) => {
+ return {
+ session: await getServerSession(event),
+ }
+}
+```
+
+Be sure to create `src/hooks.client.ts` and `src/hooks.server.ts` in order to get the auth helper started on the client and server-side.
+
+```ts title=src/hooks.client.ts
+import '$lib/supabaseClient'
+```
+
+```ts title=src/hooks.server.ts
+import '$lib/supabaseClient'
+```
+
+### Set up a Login component
+
+Let's set up a Svelte component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
+
+```html title=src/routes/Auth.svelte
+
+
+
+```
+
+### Account component
+
+After a user is signed in, they need to be able to edit their profile details and manage their account.
+Create a new `Account.svelte` component to handle this functionality.
+
+```html title=src/routes/Account.svelte
+
+
+
+```
+
+### Launch!
+
+Now that we have all the components in place, let's update `src/routes/+page.svelte`:
+
+```html title=src/routes/+page.svelte
+
+
+
+ Supabase + SvelteKit
+
+
+
+{#if !$page.data.session}
+
+{:else}
+
+{/if}
+```
+
+Once that's done, run this in a terminal window:
+
+```bash
+npm run dev
+```
+
+And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app.
+
+
+
+## Bonus: Profile photos
+
+Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
+
+### Create an upload widget
+
+Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
+
+```html title=src/routes/Avatar.svelte
+
+
+
+ {#if avatarUrl} {:else}
+
+ {/if}
+
+
+
+
+
+
+```
+
+### Add the new widget
+
+And then we can add the widget to the Account page:
+
+```html title=src/routes/Account.svelte
+
+
+
+```
+
+## Next steps
+
+At this stage you have a fully functional application!
+
+- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
+- Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
index 781137f6ed3..a1ec84a8c92 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-vue-3.mdx
@@ -1,5 +1,4 @@
import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/with-vue-3.mdx'
export const meta = {
id: 'with-vue-3',
@@ -8,11 +7,385 @@ export const meta = {
sidebar_label: 'Vue 3',
}
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
+
+
+
+
+### GitHub
+
+Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/vue3-user-management).
+
+
+
+## Building the App
+
+Let's start building the Vue 3 app from scratch.
+
+### Initialize a Vue 3 app
+
+We can quickly use [Vite with Vue 3 Template](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to initialize
+an app called `supabase-vue-3`:
+
+```bash
+# npm 6.x
+npm create vite@latest supabase-vue-3 --template vue
+
+# npm 7+, extra double-dash is needed:
+npm create vite@latest supabase-vue-3 -- --template vue
+
+cd supabase-vue-3
+```
+
+Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
+
+```bash
+npm install @supabase/supabase-js
+```
+
+And finally we want to save the environment variables in a `.env`.
+All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
+
+```bash title=.env
+VITE_SUPABASE_URL=YOUR_SUPABASE_URL
+VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+```
+
+Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
+on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
+
+```js title=src/supabase.js
+import { createClient } from '@supabase/supabase-js'
+
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
+
+export const supabase = createClient(supabaseUrl, supabaseAnonKey)
+```
+
+Optionally, update [src/style.css](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/vue3-user-management/src/style.css) to style the app.
+
+### Set up a Login component
+
+Let's set up a Vue component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
+
+```html title=/src/components/Auth.vue
+
+
+
+
+
+```
+
+### Account page
+
+After a user is signed in we can allow them to edit their profile details and manage their account.
+Let's create a new component for that called `Account.vue`.
+
+```html title=src/components/Account.vue
+
+
+
+
+
+```
+
+### Launch!
+
+Now that we have all the components in place, let's update `App.vue`:
+
+```html title=src/App.vue
+
+
+
+
+
+
+
+
+```
+
+Once that's done, run this in a terminal window:
+
+```bash
+npm run dev
+```
+
+And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app.
+
+
+
+## Bonus: Profile photos
+
+Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
+
+### Create an upload widget
+
+Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
+
+```html title=src/components/Avatar.vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+### Add the new widget
+
+And then we can add the widget to the Account page:
+
+```html title=src/components/Account.vue
+
+
+
+
+
+```
+
+## Next steps
+
+At this stage you have a fully functional application!
+
+- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
+- Sign in: [app.supabase.com](https://app.supabase.com)
+
+export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/integrations/onesignal.mdx b/apps/docs/pages/guides/integrations/onesignal.mdx
new file mode 100644
index 00000000000..cd6b7021dd8
--- /dev/null
+++ b/apps/docs/pages/guides/integrations/onesignal.mdx
@@ -0,0 +1,341 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'onesignal',
+ title: 'OneSignal',
+ description:
+ 'OneSignal allows you to send cloud messages to your users. Combine OneSignal with your Supabase apps and you can reach out to your users whenever there is a change in your database.',
+}
+
+[OneSignal](https://onesignal.com/) is a tool that allows you to send messages across different channels such as the following to keep your users engaged.
+
+- Push notifications
+- SMS
+- Emails
+- In-app notifications
+
+This guide steps you through how you can integrate OneSignal with Supabase to create a seamless cloud messaging experience for your users using Database webhooks and edge functions through a simple Next.js application.
+
+
+
+We will create a simple ordering app and use Supabase Database Webhooks in conjunction with Edge Function to provide a real-time push notification experience.
+
+You can find the complete example app along with the edge functions code to send the notifications [here](https://github.com/supabase-community/onesignal).
+
+
+
+
+## Step 1: Getting started
+
+Before we dive into the code, this guide assumes that you have the following ready
+
+- [Supabase](https://supabase.com/) project created
+- [OneSignal](https://onesignal.com/) app created
+- [Supabase CLI](https://supabase.com/docs/guides/cli) installed on your machine
+
+Let’s create a Next.js app with tailwind CSS pre-installed
+
+```bash
+npx create-next-app -e with-tailwindcss --ts
+```
+
+We will then install the Supabase and OneSignal SDK.
+
+```bash
+npm i @supabase/supabase-js
+npm i react-onesignal
+```
+
+After that, follow the instructions [here](https://documentation.onesignal.com/docs/web-push-custom-code-setup) to set up OneSignal for the web. You can set the URL of the app as a local host if you want to run the app locally, or add a remote URL if you want to deploy your app to a public hosting. You should add the file you obtain in step 4 of the instruction under the `public` directory of your Next.js app like [this](https://github.com/supabase-community/onesignal/tree/main/app/public).
+
+## Step 2: Build Next.js app
+
+The Next.js app will have a login form for the user to sign in, and a button that they can press to make an order once they are signed in. Update the `index.tsx` file to the following.
+
+```tsx title="pages/index.tsx"
+import { createClient, User } from '@supabase/supabase-js'
+import type { NextPage } from 'next'
+import Head from 'next/head'
+import React, { useEffect, useState } from 'react'
+import OneSignal from 'react-onesignal'
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL!
+const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
+const oneSignalAppId = process.env.NEXT_PUBLIC_ONESIGNAL_APP_ID!
+
+const supabase = createClient(supabaseUrl, supabaseAnonKey)
+
+const Home: NextPage = () => {
+ const [user, setUser] = useState(null)
+
+ const [oneSignalInitialized, setOneSignalInitialized] =
+ useState(false)
+
+ /**
+ * Initializes OneSignal SDK for a given Supabase User ID
+ * @param uid Supabase User ID
+ */
+ const initializeOneSignal = async (uid: string) => {
+ if (oneSignalInitialized) {
+ return
+ }
+ setOneSignalInitialized(true)
+ await OneSignal.init({
+ appId: oneSignalAppId,
+ notifyButton: {
+ enable: true,
+ },
+
+ allowLocalhostAsSecureOrigin: true,
+ })
+
+ await OneSignal.setExternalUserId(uid)
+ }
+
+ const sendMagicLink = async (event: React.FormEvent) => {
+ event.preventDefault()
+ const { email } = Object.fromEntries(new FormData(event.currentTarget))
+ if (typeof email !== 'string') return
+
+ const { error } = await supabase.auth.signInWithOtp({ email })
+ if (error) {
+ alert(error.message)
+ } else {
+ alert('Check your email inbox')
+ }
+ }
+
+ // Place a order with the selected price
+ const submitOrder = async (event: React.FormEvent) => {
+ event.preventDefault()
+ const { price } = Object.fromEntries(new FormData(event.currentTarget))
+ if (typeof price !== 'string') return
+
+ const { error } = await supabase
+ .from('orders')
+ .insert({ price: Number(price) })
+ if (error) {
+ alert(error.message)
+ }
+ }
+
+ useEffect(() => {
+ const initialize = async () => {
+ const initialUser = (await supabase.auth.getUser())?.data.user
+ setUser(initialUser ?? null)
+ if (initialUser) {
+ initializeOneSignal(initialUser.id)
+ }
+ }
+
+ initialize()
+
+ const authListener = supabase.auth.onAuthStateChange(
+ async (event, session) => {
+ const user = session?.user ?? null
+ setUser(user)
+ if (user) {
+ initializeOneSignal(user.id)
+ }
+ }
+ )
+
+ return () => {
+ authListener.data.subscription.unsubscribe()
+ }
+ }, [])
+
+ return (
+ <>
+
+ OneSignal Order Notification App
+
+
+
+
+ {user ? (
+
+ ) : (
+
+ )}
+
+ >
+ )
+}
+
+export default Home
+```
+
+There is quite a bit of stuff going on here, but basically, it’s creating a simple UI for the user to sign in using the [magic link](https://supabase.com/docs/guides/auth/auth-magic-link), and once the user is signed in, will initialize OneSignal to ask the user to receive notifications on the website.
+
+Notice that inside the `initializeOneSignal()` function, we are setting the Supabase user ID as an [external user ID of OneSignal](https://documentation.onesignal.com/docs/external-user-ids). This allows us to later send push notifications to the user using their Supabase user ID from the backend, which is very handy.
+
+```tsx
+await OneSignal.setExternalUserId(uid);
+```
+
+The front-end side of things is done here. Let’s get into the backend.
+
+We also need to set our environment variables. Create a `.env.local` file and use the following template to set the environment variables. You can find your Supabase configuration in your dashboard under `settings > API`, and you can find the OneSignal app ID from `Settings > Keys & IDs`
+
+```bash
+NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
+NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
+NEXT_PUBLIC_ONESIGNAL_APP_ID=YOUR_ONESIGNAL_APP_ID
+```
+
+
+
+## Step 3: Create the Edge Function
+
+Let’s create an edge function that will receive [database webhooks](https://supabase.com/docs/guides/database/webhooks) from the database and calls the OneSignal API to send the push notification.
+
+```bash
+supabase functions new notify
+```
+
+Replace the contents of `supabase/functions/notify/index.ts` with the following
+
+```tsx
+import { serve } from 'https://deno.land/std@0.131.0/http/server.ts'
+import * as OneSignal from 'https://esm.sh/@onesignal/node-onesignal@1.0.0-beta7'
+
+const _OnesignalAppId_ = Deno.env.get('ONESIGNAL_APP_ID')!
+const _OnesignalUserAuthKey_ = Deno.env.get('USER_AUTH_KEY')!
+const _OnesignalRestApiKey_ = Deno.env.get('ONESIGNAL_REST_API_KEY')!
+const configuration = OneSignal.createConfiguration({
+ userKey: _OnesignalUserAuthKey_,
+ appKey: _OnesignalRestApiKey_,
+})
+
+const onesignal = new OneSignal.DefaultApi(configuration)
+
+serve(async (req) => {
+ try {
+ const { record } = await req.json()
+
+ // Build OneSignal notification object
+ const notification = new OneSignal.Notification()
+ notification.app_id = _OnesignalAppId_
+ notification.include_external_user_ids = [record.user_id]
+ notification.contents = {
+ en: `You just spent $${record.price}!`,
+ }
+ const onesignalApiRes = await onesignal.createNotification(notification)
+
+ return new Response(
+ JSON.stringify({ onesignalResponse: onesignalApiRes }),
+ {
+ headers: { 'Content-Type': 'application/json' },
+ }
+ )
+ } catch (err) {
+ console.error('Failed to create OneSignal notification', err)
+ return new Response('Server error.', {
+ headers: { 'Content-Type': 'application/json' },
+ status: 400,
+ })
+ }
+})
+```
+
+If you see bunch of errors in your editor, it's because your editor is not configured to use Deno. Follow the official setup guide [here](https://deno.land/manual@v1.28.3/getting_started/setup_your_environment) to setup your IDE to use Deno.
+
+The function receives a `record` object, which is the row inserted in your `orders` table, and constructs a notification object to then send to OneSignal to deliver the push notification.
+
+We also need to set the environment variable for the function. Create a `.env` file under your `supabase` directory and paste the following.
+
+```bash
+ONESIGNAL_APP_ID=YOUR_ONESIGNAL_APP_ID
+USER_AUTH_KEY=YOUR_USER_AUTH_KEY
+ONESIGNAL_REST_API_KEY=YOUR_ONESIGNAL_REST_API_KEY
+```
+
+`ONESIGNAL_APP_ID` and `ONESIGNAL_REST_API_KEY` can be found under `Settings > Keys & IDs` of your OneSignal app, and `USER_AUTH_KEY` can be found by going to `Account & API Keys` page by clicking your icon in the top right corner and scrolling to the `User Auth Key` section.
+
+
+
+
+Once your environment variables are filled in, you can run the following command to set the environment variable.
+
+```bash
+supabase secrets set --env-file ./supabase/.env
+```
+
+At this point, the function should be ready to be deployed! Run the following command to deploy your functions to the edge! The `no-verify-jwt` flag is required if you plan to call the function from a webhook.
+
+```bash
+supabase functions deploy notify --no-verify-jwt
+```
+
+## Step 4: Setting up the Supabase database
+
+Finally, we get to set up the database! Run the following SQL to set up the `orders` table.
+
+```sql
+create table if not exists public.orders (
+ id uuid not null primary key default uuid_generate_v4(),
+ created_at timestamptz not null default now(),
+ user_id uuid not null default auth.uid(),
+ price int8 not null
+);
+```
+
+As you can see, the `orders` table has 4 columns and 3 of them have default values. That means all we need to send from the front-end app is the price. That is why our insert statement looked very simple.
+
+```tsx
+const { error } = await supabase.from('orders').insert({
+ price: 100,
+ })
+```
+
+Let’s also set up the webhook so that whenever a new row is inserted in the `orders` table, it calls the edge function. Go to `Database > Webhooks` and create a new Database Webhook. The table should be set to `orders` and Events should be inserted. The type should be HTTP Request, the HTTP method should be POST, and the URL should be the URL of your edge function. Hit confirm to save the webhook configuration.
+
+
+
+At this point, the app should be complete! Run your app locally with `npm run dev`, or deploy your app to a hosting service and see how you receive a push notification when you place an order!
+Remember that if you decide to deploy your app to a hosting service, you would need to create another OneSignal app configured for your local address.
+
+
+
+
+## Resources
+
+This particular example was using Next.js, but you can apply the same principles to implement send push notification, SMS, Emails, and in-app-notifications on other platforms as well.
+
+- [OneSignal + Flutter + Supabase example](https://github.com/OneSignalDevelopers/onesignal-supabase-sample-integration-supabase)
+- [OneSignal Mobile Quickstart](https://documentation.onesignal.com/docs/mobile-sdk-setup)
+- [OneSignal Documentation](https://documentation.onesignal.com/docs/onesignal-platform)
+- [OneSignal Onboarding guide](https://documentation.onesignal.com/docs/onboarding-with-onesignal)
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/migrations/firebase-auth.mdx b/apps/docs/pages/guides/migrations/firebase-auth.mdx
deleted file mode 100644
index 6377ac83f13..00000000000
--- a/apps/docs/pages/guides/migrations/firebase-auth.mdx
+++ /dev/null
@@ -1,93 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'firebase-auth',
- title: 'Firebase Auth Migration',
- description: 'Migrate Firebase auth users to a Supabase project.',
- sidebar_label: 'Firebase Auth',
-}
-
-Supabase provides several [tools](https://github.com/supabase-community/firebase-to-supabase/tree/main/auth) to help migrate auth users from a Firebase project to a Supabase project. There are two parts to the migration process:
-
-- `firestoreusers2json` ([TypeScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/firestoreusers2json.ts), [JavaScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/firestoreusers2json.js)) exports users from an existing Firebase project to a `.json` file on your local system.
-- `import_users` ([TypeScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/import_users.ts), [JavaScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/import_users.js)) imports users from a saved `.json` file into your Supabase project (inserting those users into the `auth.users` table of your `PostgreSQL` database instance).
-
-## Set up the migration tool [#set-up-migration-tool]
-
-1. Clone the [firebase-to-supabase](https://github.com/supabase-community/firebase-to-supabase) repository:
-
-```bash
-git clone https://github.com/supabase-community/firebase-to-supabase.git
-```
-
-1. In the `/auth` directory, create a file named `supabase-service.json` with the following contents:
-
-```json
-{
- "host": "database.server.com",
- "password": "secretpassword",
- "user": "postgres",
- "database": "postgres",
- "port": 5432
-}
-```
-
-1. Go to the [Database settings](https://app.supabase.com/project/_/settings/database) for your project in the Supabase Dashboard.
-1. Under **Connection Info**, copy the Host string and replace the entry in your `supabase-service.json` file.
-1. Enter the password you used when you created your Supabase project in the `password` entry in the `supabase-service.json` file.
-
-## Generate a Firebase private key [#generate-firebase-private-key]
-
-1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
-1. Click the gear icon next to **Project Overview** in the sidebar and select **Project Settings**.
-1. Click **Service Accounts** and select **Firebase Admin SDK**.
-1. Click **Generate new private key**.
-1. Rename the downloaded file to `firebase-service.json`.
-
-## Save your Firebase password hash parameters [#save-firebase-hash-parameters]
-
-1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
-1. Select **Authentication** (Build section) in the sidebar.
-1. Select **Users** in the top menu.
-1. At the top right of the users list, open the menu (3 dots) and click **Password hash parameters**.
-1. Copy and save the parameters for `base64_signer_key`, `base64_salt_separator`, `rounds`, and `mem_cost`.
-
-```bash title=Sample%20password%20hash%20parameters
-hash_config {
- algorithm: SCRYPT,
- base64_signer_key: XXXX/XXX+XXXXXXXXXXXXXXXXX+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX==,
- base64_salt_separator: Aa==,
- rounds: 8,
- mem_cost: 14,
-}
-```
-
-## Command line options
-
-### Dump Firestore users to a JSON file [#dump-firestore-users]
-
-`node firestoreusers2json.js [] []`
-
-- `filename.json`: (optional) output filename (defaults to `./users.json`)
-- `batchSize`: (optional) number of users to fetch in each batch (defaults to 100)
-
-### Import JSON users file to Supabase Auth (PostgreSQL: auth.users) [#import-json-users-file]
-
-`node import_users.js []`
-
-- `path_to_json_file`: full local path and filename of .json input file (of users)
-- `batch_size`: (optional) number of users to process in a batch (defaults to 100)
-
-## Notes
-
-For more advanced migrations, including the use of a middleware server component for verifying a user's existing Firebase password and updating that password in your Supabase project the first time a user logs in, see the [firebase-to-supabase repo](https://github.com/supabase-community/firebase-to-supabase/tree/main/auth).
-
-## Resources
-
-- [Supabase vs Firebase](https://supabase.com/alternatives/supabase-vs-firebase)
-- [Firestore Data Migration](/docs/guides/migrations/firestore-data)
-- [Firestore Storage Migration](/docs/guides/migrations/firebase-storage)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/migrations/firebase-storage.mdx b/apps/docs/pages/guides/migrations/firebase-storage.mdx
deleted file mode 100644
index 1516dd2537b..00000000000
--- a/apps/docs/pages/guides/migrations/firebase-storage.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'firebase-storage',
- title: 'Firebase Storage Migration',
- description: 'Migrate Firebase Storage files to Supabase Storage.',
- sidebar_label: 'Firebase Storage',
-}
-
-Supabase provides several [tools](https://github.com/supabase-community/firebase-to-supabase/tree/main/storage) to convert storage files from Firebase Storage to Supabase Storage. Conversion is a two-step process:
-
-1. Files are downloaded from a Firebase storage bucket to a local filesystem.
-2. Files are uploaded from the local filesystem to a Supabase storage bucket.
-
-## Set up the migration tool [#set-up-migration-tool]
-
-1. Clone the [firebase-to-supabase](https://github.com/supabase-community/firebase-to-supabase) repository:
-
-```bash
-git clone https://github.com/supabase-community/firebase-to-supabase.git
-```
-
-1. In the `/storage` directory, rename [supabase-keys-sample.js](https://github.com/supabase-community/firebase-to-supabase/blob/main/storage/supabase-keys-sample.js) to `supabase-keys.js`.
-1. Go to your Supabase project's [API settings](https://app.supabase.com/project/_/settings/api) in the Dashboard.
-1. Copy the **Project URL** and update the `SUPABASE_URL` value in `supabase-keys.js`.
-1. Under **Project API keys**, copy the **service_role** key and update the `SUPABASE_KEY` value in `supabase-keys.js`.
-
-## Generate a Firebase private key [#generate-firebase-private-key]
-
-1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
-1. Click the gear icon next to **Project Overview** in the sidebar and select **Project Settings**.
-1. Click **Service Accounts** and select **Firebase Admin SDK**.
-1. Click **Generate new private key**.
-1. Rename the downloaded file to `firebase-service.json`.
-
-## Command line options
-
-### Download Firestore Storage bucket to a local filesystem folder [#download-firestore-storage-bucket]
-
-`node download.js [] [] [] []`
-
-- ``: The prefix of the files to download. To process the root bucket, use an empty prefix: "".
-- ``: (optional) Name of subfolder for downloaded files. The selected folder is created as a subfolder of the current folder (e.g., `./downloads/`). The default is `downloads`.
-- ``: (optional) The default is 100.
-- ``: (optional) Stop after processing this many files. For no limit, use `0`.
-- ``: (optional) Begin processing at this pageToken.
-
-To process in batches using multiple command-line executions, you must use the same parameters with a new `` on subsequent calls. Use the token displayed on the last call to continue the process at a given point.
-
-### Upload files to Supabase Storage bucket [#upload-to-supabase-storage-bucket]
-
-`node upload.js `
-
-- ``: The prefix of the files to download. To process all files, use an empty prefix: "".
-- ``: Name of subfolder of files to upload. The selected folder is read as a subfolder of the current folder (e.g., `./downloads/`). The default is `downloads`.
-- ``: Name of the bucket to upload to.
-
-
-
-If the bucket doesn't exist, it's created as a `non-public` bucket. You must set permissions on this new bucket in the [Supabase Dashboard](https://app.supabase.com/project/_/storage/buckets) before users can download any files.
-
-
-
-## Resources
-
-- [Supabase vs Firebase](https://supabase.com/alternatives/supabase-vs-firebase)
-- [Firestore Data Migration](/docs/guides/migrations/firestore-data)
-- [Firebase Auth Migration](/docs/guides/migrations/firebase-auth)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/migrations/heroku.mdx b/apps/docs/pages/guides/migrations/heroku.mdx
deleted file mode 100644
index 51ab83dfb49..00000000000
--- a/apps/docs/pages/guides/migrations/heroku.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'heroku',
- title: 'Migrate from Heroku to Supabase',
- description: 'Migrate your Heroku Postgres database to Supabase.',
- sidebar_label: 'Heroku',
-}
-
-Supabase is one of the best [free alternatives to Heroku Postgres](https://supabase.com/alternatives/supabase-vs-heroku-postgres). This guide shows how to migrate your Heroku Postgres database to Supabase. This migration requires the [pg_dump](https://www.postgresql.org/docs/current/app-pgdump.html) and [psql](https://www.postgresql.org/docs/current/app-psql.html) CLI tools, which are installed automatically as part of the complete PostgreSQL installation package.
-
-Alternatively, use the [Heroku to Supabase migration tool](https://migrate.supabase.com/) to migrate in just a few clicks.
-
-## Quick demo
-
-
-
-
-
-## Retrieve your Heroku database credentials [#retrieve-heroku-credentials]
-
-1. Log in to your [Heroku account](https://heroku.com) and select the project you want to migrate.
-1. Click **Resources** in the menu and select your **Heroku Postgres** database.
-1. Click **Settings** in the menu.
-1. Click **View Credentials** and save the following information:
- - Host (`$HEROKU_HOST`)
- - Database (`$HEROKU_DATABASE`)
- - User (`$HEROKU_USER`)
- - Password (`$HEROKU_PASSWORD`)
-
-## Retrieve your Supabase Host [#retrieve-supabase-host]
-
-1. If you're new to Supabase, [create a project](https://app.supabase.com).
-1. Go to the [Database settings](https://app.supabase.com/project/_/settings/database) for your project in the Supabase Dashboard.
-1. Under **Connection Info**, note your Host (`$SUPABASE_HOST`).
-
-## Export your Heroku database to a file [#export-heroku-database]
-
-Use `pg_dump` with your Heroku credentials to export your Heroku database to a file (e.g., `heroku_dump.sql`).
-
-```bash
-pg_dump --clean --if-exists --quote-all-identifiers \
- -h $HEROKU_HOST -U $HEROKU_USER -d $HEROKU_DATABASE \
- --no-owner --no-privileges > heroku_dump.sql
-```
-
-## Import the database to your Supabase project [#import-database-to-supabase]
-
-Use `psql` to import the Heroku database file to your Supabase project.
-
-```bash
-psql -h $SUPABASE_HOST -U postgres -f heroku_dump.sql
-```
-
-## Additional options
-
-- To only migrate a single database schema, add the `--schema=PATTERN` parameter to your `pg_dump` command.
-- To exclude a schema: `--exclude-schema=PATTERN`.
-- To only migrate a single table: `--table=PATTERN`.
-- To exclude a table: `--exclude-table=PATTERN`.
-
-Run `pg_dump --help` for a full list of options.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/platform.mdx b/apps/docs/pages/guides/platform.mdx
index a713064e779..8f734fdcd77 100644
--- a/apps/docs/pages/guides/platform.mdx
+++ b/apps/docs/pages/guides/platform.mdx
@@ -25,50 +25,7 @@ Each project on Supabase comes with:
## Organizations
Organizations are a way to group your projects. Each organization can be configured with different team members and billing settings.
-
-## Manage team members
-
-You can invite your team members into your organizations to collaborate on projects.
-
-
-
-You can also assign roles to your team members with different access levels. The table below shows the corresponding permissions for each available role in the Dashboard.
-
-| Permissions | Owner | Administrator | Developer |
-| ------------------------ | ----- | ------------- | --------- |
-| **Organization** |
-| Change organization name | ✅ | | |
-| Delete organization | ✅ | | |
-| **Members** |
-| Add an Owner | ✅ | | |
-| Remove an Owner | ✅ | | |
-| Add an Administrator | ✅ | ✅ | |
-| Remove an Administrator | ✅ | ✅ | |
-| Add a Developer | ✅ | ✅ | |
-| Remove a Developer | ✅ | ✅ | |
-| Revoke an invite | ✅ | ✅ | |
-| Resend an invite | ✅ | ✅ | |
-| **Billing** |
-| Read invoices | ✅ | ✅ | ✅ |
-| Read billing email | ✅ | ✅ | ✅ |
-| Change billing email | ✅ | | |
-| View subscription | ✅ | ✅ | ✅ |
-| Update subscription | ✅ | ✅ | |
-| Read billing address | ✅ | ✅ | ✅ |
-| Update billing address | ✅ | ✅ | |
-| Read tax codes | ✅ | ✅ | ✅ |
-| Update tax codes | ✅ | ✅ | |
-| Read payment methods | ✅ | ✅ | ✅ |
-| Update payment methods | ✅ | ✅ | |
-| **Projects** |
-| Create a project | ✅ | ✅ | |
-| Delete a project | ✅ | ✅ | |
-| Update a project | ✅ | ✅ | |
-| Pause a project | ✅ | ✅ | |
-| Resume a project | ✅ | ✅ | |
-| Restart a project | ✅ | ✅ | ✅ |
+Refer to [access control](/docs/guides/platform/access-control) for more information on how to manage team members within an organization.
## Platform status
diff --git a/apps/docs/pages/guides/platform/access-control.mdx b/apps/docs/pages/guides/platform/access-control.mdx
new file mode 100644
index 00000000000..b12d566cc0c
--- /dev/null
+++ b/apps/docs/pages/guides/platform/access-control.mdx
@@ -0,0 +1,82 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import { IconCheck } from 'ui'
+
+export const meta = {
+ title: 'Access Control',
+ description: 'Roles and permissions at the organization level',
+}
+
+Supabase provides granular access controls to manage permissions across your organizations.
+For each organization, a member can have one of the following roles:
+
+- Owner
+- Administrator
+- Developer
+
+A default organization is created when you first sign in and
+you'll be assigned the **Owner** role.
+Each member can access all projects under the organization.
+Project level invites are not available at this time.
+Create a separate organization if you need to restrict access to certain projects.
+
+## Manage team members
+
+To invite others to collaborate, visit your organization's team settings in the
+[Dashboard](https://app.supabase.com/projects) to send an invite link to
+another user's email. The invite expires after 24 hours.
+
+### Transferring ownership of an organization
+
+Each Supabase organization can have one or more owners. If you no longer want be an owner of an organization, click **Leave team** in the members view (`https://app.supabase.com/org//settings#team`) of your organization.
+However, you can only leave an organization when there is _at least one other owner_.
+
+If you are transferring ownership of your organization to someone else, you will need to invite the new member with the **Owner** role. You can leave the organization after they've accepted the invitation.
+
+### Permissions across roles [#permission-across-roles]
+
+The table below shows the corresponding permissions for each available role you can assign a team member in the Dashboard.
+
+| Permissions | Owner | Administrator | Developer |
+| ------------------------ | ----------------------- | ----------------------- | ----------------------- |
+| **Organization** |
+| Change organization name | | | |
+| Delete organization | | | |
+| **Members** |
+| Add an Owner | | | |
+| Remove an Owner | | | |
+| Add an Administrator | | | |
+| Remove an Administrator | | | |
+| Add a Developer | | | |
+| Remove a Developer | | | |
+| Revoke an invite | | | |
+| Resend an invite | | | |
+| Accept an invite[^1] | | | |
+| **Billing** |
+| Read invoices | | | |
+| Read billing email | | | |
+| Change billing email | | | |
+| View subscription | | | |
+| Update subscription | | | |
+| Read billing address | | | |
+| Update billing address | | | |
+| Read tax codes | | | |
+| Update tax codes | | | |
+| Read payment methods | | | |
+| Update payment methods | | | |
+| **Projects** |
+| Create a project | | | |
+| Delete a project | | | |
+| Update a project | | | |
+| Pause a project | | | |
+| Resume a project | | | |
+| Restart a project | | | |
+
+[^1]:
+ Invites sent from a SSO account can only be accepted by another SSO account
+ coming from the same identity provider. This is a security measure that
+ prevents accidental invites to accounts not managed by your company's
+ enterprise systems.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/platform/backups.mdx b/apps/docs/pages/guides/platform/backups.mdx
new file mode 100644
index 00000000000..83d606cd856
--- /dev/null
+++ b/apps/docs/pages/guides/platform/backups.mdx
@@ -0,0 +1,77 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ title: 'Database Backups',
+ description: 'Learn about the available backup methods for your Supabase project.',
+}
+
+Database backups are an integral part of any disaster recovery plan. Disasters come in many shapes and sizes. It could be as simple as accidentally deleting a table column, the database crashing, or even a natural calamity wiping out the underlying hardware a database is running on. The risks and impact brought by these scenarios can never be fully eliminated, but only minimized or even mitigated. Having database backups is a form of insurance policy. They are essentially snapshots of the database at various points in time. When disaster strikes, database backups allow the project to be brought back to any of these points in time, therefore averting the crisis.
+
+## Frequency of Backups
+
+When deciding how often a database should be backed up, the key business metric Recovery Point Objective (RPO) should be considered. RPO is the threshold for how much data, measured in time, a business could lose when disaster strikes. This amount is fully dependent on a business and its underlying requirements. A low RPO would mean that database backups would have to be taken at an increased cadence throughout the day. Each Supabase project has access to two forms of backups, Daily Backups and Point-in-Time Recovery. The agreed upon RPO would be a deciding factor in choosing which solution best fits a project.
+
+
+ Database backups do not include objects stored via the Storage API, as the database only includes
+ metadata about these objects. Restoring an old backup does not restore objects that have been
+ deleted since then.
+
+
+## Daily Backups
+
+All Pro and Enterprise tier Supabase projects are backed up automatically on a daily basis. In terms of Recovery Point Objective (RPO), Daily Backups would be suitable for projects willing to lose up to 24 hours worth of data if disaster hits at the most inopportune time. If a lower RPO is required, enabling Point-in-Time Recovery should be considered.
+
+### Backup Process [#daily-backups-process]
+
+The PostgreSQL utility [pg_dumpall](https://www.postgresql.org/docs/current/app-pg-dumpall.html) is used to perform daily backups. An SQL file is generated, zipped up, and sent to our storage servers for safe keeping.
+
+
+
+You can access daily backups in the [Scheduled backups](https://app.supabase.com/project/_/database/backups/scheduled) settings in the Dashboard. Pro tier projects can access the last 7 days’ worth of daily backups while Enterprise tier projects can access up to 30 days’ worth of daily backups. Users can restore their project to any one of the backups or download them as a zipped SQL file.
+
+### Restoration Process [#daily-backups-restoration-process]
+
+When selecting a backup to restore to, select the closest available one made before the desired point in time to restore to. Earlier backups can always be chosen too but do consider the number of days’ worth of data that could be lost.
+
+
+
+The Dashboard will then prompt for a confirmation before proceeding with the restoration. The project will be inaccessible following this. As such, do ensure to allot downtime beforehand. This is dependent on the size of the database. The larger it is, the longer the downtime will be. Once the confirmation has been given, the underlying SQL of the chosen backup is then run against the project. The PostgreSQL utility [psql](https://www.postgresql.org/docs/current/app-psql.html) is used to facilitate the restoration. The Dashboard will display a notification once the restoration completes.
+
+{/* screenshot of the Dashboard of the project completing restoration */}
+
+## Point-in-Time Recovery
+
+Point-in-Time Recovery (PITR) allows a project to be backed up at much shorter intervals. This provides users an option to restore to any chosen point of up to seconds in granularity. Even with daily backups, a day’s worth of data could still be lost. With PITR, backups could be performed up to the point of disaster.
+
+
+ This feature is available to all Enterprise tier projects. Pro tier projects can enable PITR as an
+ add-on.
+
+
+### Backup Process [#pitr-backup-process]
+
+As discussed [here](https://supabase.com/blog/postgresql-physical-logical-backups), PITR is made possible by a combination of taking physical backups of a project, as well as archiving [Write Ahead Log (WAL)](https://www.postgresql.org/docs/current/wal-intro.html) files. Physical backups provide a snapshot of the underlying directory of the database, while WAL files contain records of every change made in the database.
+
+Supabase uses [WAL-G](https://github.com/wal-g/wal-g), an open source archival and restoration tool, to handle both aspects of PITR. On a daily basis, a snapshot of the database is taken and sent to our storage servers. Throughout the day, as database transactions occur, WAL files are generated and uploaded.
+
+By default, WAL files are backed up at two minute intervals. If these files cross a certain file size threshold, they are backed up immediately. As such, during periods of high amount of transactions, WAL file backups become more frequent. Conversely, when there is no activity in the database, WAL file backups are not made. Overall, this would mean that at the worst case scenario or disaster, the PITR achieves a Recovery Point Objective (RPO) of two minutes.
+
+
+
+You can access PITR in the [Point in Time](https://app.supabase.com/project/_/database/backups/pitr) settings in the Dashboard. The recovery period of a project is indicated by the earliest and latest points of recoveries displayed in one’s preferred timezone. If need be, the maximum amount of this recovery period can be modified accordingly.
+
+Note that the latest restore point of the project could be significantly far from the current time. This occurs when there has not been any recent activity in the database, and therefore no WAL file backups have been made recently. This is perfectly fine as the state of the database at the latest point of recovery would still be indicative of the state of the database at the current time given that no transactions have been made in between.
+
+### Restoration Process [#pitr-restoration-process]
+
+
+
+A date and time picker will be provided upon pressing the `Start a restore` button. The process will only proceed if the selected date and time fall within the earliest and latest points of recoveries.
+
+
+
+After locking in the desired point in time to recover to, The Dashboard will then prompt for a review and confirmation before proceeding with the restoration. The project will be inaccessible following this. As such, do ensure to allot for downtime beforehand. This is dependent on the size of the database. The larger it is, the longer the downtime will be. Once the confirmation has been given, the latest physical backup available is downloaded to the project and the database is partially restored. WAL files generated after this physical backup up to the specified point-in-time are then downloaded. The underlying records of transactions in these files are replayed against the database to complete the restoration. The Dashboard will display a notification once the restoration completes.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/platform/custom-domains.mdx b/apps/docs/pages/guides/platform/custom-domains.mdx
index 2690eb5f23b..13fedb8e525 100644
--- a/apps/docs/pages/guides/platform/custom-domains.mdx
+++ b/apps/docs/pages/guides/platform/custom-domains.mdx
@@ -12,18 +12,20 @@ Custom Domains are currently in beta, and are being slowly made available to pro
-Custom domains allow you to present a branded experience to your users. Currently, you must use a subdomain (e.g., `api.example.com`, rather than `example.com`) for the purposes of this guide.
+Custom domains allow you to present a branded experience to your users. Custom domains are available as a [add-on for projects on a paid tier](https://app.supabase.com/project/_/settings/billing/update). Setting up a custom domain requires [Owner or Admin permissions](/docs/guides/platform/access-control#manage-team-members) for the project. Currently, you must use a subdomain (e.g., `api.example.com`, rather than `example.com`) for the purposes of this guide.
+
+## Configure a Custom Domain using the Supabase Dashboard
+
+Follow the **Custom Domains** steps in the [General Settings](https://app.supabase.com/project/_/settings/general) page in the Dashboard to set up a custom domain for your project.
+
+## Configure a Custom Domain using the Supabase CLI
+
+This example assumes your Supabase project is `foobarbaz` with a corresponding API URL `foobarbaz.supabase.co` and configures a custom domain at `api.example.com`.
To get started:
-1. [Install](/docs/guides/cli) the Supabase CLI 1.11.3+.
-1. [Log in](/docs/guides/cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI.
-1. Ensure that you have [Owner or Admin permissions](/docs/guides/platform#manage-team-members) for the project you'd like to set up a custom domain for.
-1. Enable the Custom Domains add-on in the Billing page of the Dashboard.
-
-## Configure a Custom Domain
-
-This example assumes your Supabase project is `foobarbaz` with a corresponding API URL `foobarbaz.supabase.co` and configures a custom domain at `api.example.com`.
+1. [Install](/docs/guides/resources/supabase-cli) the Supabase CLI 1.11.3+.
+1. [Log in](/docs/guides/resources/supabase-cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI.
### Configure a CNAME
@@ -47,7 +49,7 @@ Required outstanding validation records:
api.example.com TXT -> ca3-F1HvR9i938OgVwpCFwi1jTsbhe1hvT0Ic3efPY3Q
```
-[^1] One of the records requires you to _replace_ the CNAME record set up in [the first step](#cname-configure) with a TXT record. You'll be able to restore it back to the CNAME after the verification process has been completed.
+[^1] One of the records requires you to _replace_ the CNAME record set up in [the first step](#configure-a-cname) with a TXT record. You'll be able to restore it back to the CNAME after the verification process has been completed.
### Verify your domain
@@ -97,9 +99,9 @@ Vanity Subdomains allow you to present a basic branded experience, compared to c
To get started:
-1. [Install](/docs/guides/cli) the Supabase CLI 1.22.0+.
-1. [Log in](/docs/guides/cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI.
-1. Ensure that you have [Owner or Admin permissions](/docs/guides/hosting/platform#manage-team-members) for the project you'd like to set up a vanity subdomain for.
+1. [Install](/docs/guides/resources/supabase-cli) the Supabase CLI 1.22.0+.
+1. [Log in](/docs/guides/resources/supabase-cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI.
+1. Ensure that you have [Owner or Admin permissions](/docs/guides/platform/access-control#manage-team-members) for the project you'd like to set up a vanity subdomain for.
1. Ensure that your project has a paid subscription (Pro/Pay as you go/Enterprise tier) in the [Billing page of the Dashboard](https://app.supabase.com/project/_/settings/billing/subscription).
## Configure a Vanity Subdomain
@@ -141,7 +143,8 @@ As with the final activation stage of the process for setting up a vanity subdom
## Limitations
-Edge functions do not honor the custom domain or the vanity subdomain setting and they still have to be invoked via the `foobarbaz.supabase.co` domain.
+- Edge functions do not honor the custom domain or the vanity subdomain setting and they still have to be invoked via the `foobarbaz.supabase.co` domain.
+- A Supabase project can—at this time—use either a Custom Domain or a Vanity Subdomain, but not both.
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/platform/going-into-prod.mdx b/apps/docs/pages/guides/platform/going-into-prod.mdx
index cfb579ce518..73c25d0a1c5 100644
--- a/apps/docs/pages/guides/platform/going-into-prod.mdx
+++ b/apps/docs/pages/guides/platform/going-into-prod.mdx
@@ -54,10 +54,31 @@ After developing your project and deciding it's Production Ready, you should run
- Supabase employs a number of safeguards against bursts of incoming traffic to prevent abuse and help maximize stability across the platform
- If you're expecting high load events including production launches or heavy load testing, or prolonged high resource usage please give us at least 2 weeks notice. You can do this by opening a ticket via the [support form](https://app.supabase.com/support/new).
+### Rate Limits
+
+- The table below shows the rate limit quotas on the following authentication endpoints:
+
+| Endpoint | Path | Limited By | Rate Limit |
+| ------------------------------------------------ | -------------------------------------------------------------- | ------------------------ | ------------------------------------------------------------------------------- |
+| All endpoints that send emails | `/auth/v1/signup` `/auth/v1/recover` `/auth/v1/user`[^1] | Sum of combined requests | Defaults to 30 emails per hour. Is customizable with custom SMTP set up. |
+| All endpoints that send One-Time-Passwords (OTP) | `/auth/v1/otp` | Sum of combined requests | Defaults to 30 OTPs per hour. Is customizable. |
+| Send OTPs or magiclinks | `/auth/v1/otp` | Last request | Defaults to 60 seconds window before a new request is allowed. Is customizable. |
+| Signup confirmation request | `/auth/v1/signup` | Last request | Defaults to 60 seconds window before a new request is allowed. Is customizable. |
+| Password Reset Request | `/auth/v1/recover` | Last request | Defaults to 60 seconds window before a new request is allowed. Is customizable. |
+| Verification requests | `/auth/v1/verify` | IP Address | 360 requests per hour (with bursts up to 30 requests) |
+| Token refresh requests | `/auth/v1/token` | IP Address | 360 requests per hour (with bursts up to 30 requests) |
+| Create or Verify an MFA challenge | `/auth/v1/factors/:id/challenge` `/auth/v1/factors/:id/verify` | IP Address | 15 requests per minute (with bursts up to 30 requests) |
+
+### Abuse Prevention
+
+- Supabase provides CAPTCHA protection on the signup, sign-in and password reset endpoints. Please refer to [our guide](/docs/guides/auth/auth-captcha) on how to protect against abuse using this method.
+
## Next steps
This checklist is always growing so be sure to check back frequently, and also feel free to suggest additions and amendments by making a PR on [GitHub](https://github.com/supabase/supabase).
+[^1]: The rate limit is only applied on `/auth/v1/user` if this endpoint is called to update the user's email address.
+
export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/platform/network-restrictions.mdx b/apps/docs/pages/guides/platform/network-restrictions.mdx
new file mode 100644
index 00000000000..c2286c6a4f5
--- /dev/null
+++ b/apps/docs/pages/guides/platform/network-restrictions.mdx
@@ -0,0 +1,75 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'network-restrictions',
+ title: 'Network Restrictions',
+ description: "Apply network restrictions for your project's database.",
+}
+
+
+
+Network Restrictions are currently in beta and are being slowly made available to all projects.
+
+The current iteration of Network Restrictions applies to connections to Postgres and PgBouncer. Support for restricting connections to PostgREST, Storage, and Auth will be added at a later date.
+
+
+
+Each Supabase project comes with configurable restrictions on the IP ranges that are allowed to connect to Postgres and PgBouncer ("your database"). These restrictions are enforced before traffic reaches your database. If a connection is not restricted by IP, it still needs to authenticate successfully with valid database credentials.
+
+To get started:
+
+1. [Install](/docs/guides/cli) the Supabase CLI 1.22.0+.
+1. [Log in](/docs/guides/cli/local-development#log-in-to-the-supabase-cli) to your Supabase account using the CLI.
+1. Ensure that you have [Owner or Admin permissions](/docs/guides/hosting/platform/access-control#manage-team-members) for the project that you are enabling network restrictions.
+
+## Check restrictions
+
+You can use the `get` subcommand of the CLI to retrieve the restrictions currently in effect.
+
+If restrictions have been applied, the output of the `get` command will reflect the IP ranges allowed to connect:
+
+```bash
+> supabase network-restrictions --project-ref {ref} get --experimental
+DB Allowed CIDRs: [128.12.1.1/16 183.12.1.1/24]
+Restrictions applied successfully: true
+```
+
+If restrictions have never been applied to your project, the list of allowed CIDRs will be empty, but they will also not have been applied ("Restrictions applied successfully: false"). As a result, all IPs are allowed to connect to your database:
+
+```bash
+> supabase network-restrictions --project-ref {ref} get --experimental
+DB Allowed CIDRs: []
+Restrictions applied successfully: false
+```
+
+## Update restrictions
+
+The `update` subcommand is used to apply network restrictions to your project:
+
+```bash
+> supabase network-restrictions --project-ref {ref} update --db-allow-cidr 128.12.1.1/16 --db-allow-cidr 183.12.1.1/24 --experimental
+DB Allowed CIDRs: [128.12.1.1/16 183.12.1.1/24]
+Restrictions applied successfully: true
+```
+
+The restrictions specified (in the form of CIDRs) replaces any restrictions that might have been applied in the past.
+To add to the existing restrictions, you must include the existing restrictions within the list of CIDRs provided to the `update` command.
+
+## Remove restrictions
+
+To remove all restrictions on your project, you can use the `update` subcommand with the CIDR `0.0.0.0/0`:
+
+```bash
+> supabase network-restrictions --project-ref {ref} update --db-allow-cidr 0.0.0.0/0 --experimental
+DB Allowed CIDRs: [0.0.0.0/0]
+Restrictions applied successfully: true
+```
+
+## Limitations
+
+1. Network Restrictions do not currently apply to APIs offered over HTTPS (e.g. PostgREST, Storage, Auth).
+1. Network Restrictions should not be used if you require you need to connect to your Postgres database using Edge Functions.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/platform/sso.mdx b/apps/docs/pages/guides/platform/sso.mdx
new file mode 100644
index 00000000000..8868b0dfbf0
--- /dev/null
+++ b/apps/docs/pages/guides/platform/sso.mdx
@@ -0,0 +1,54 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ title: 'Enable SSO for Your Organization',
+ description: 'General information about enabling single sign-on (SSO) for your organization',
+}
+
+Supabase offers single sign-on (SSO) as a login option to provide additional
+account security for your team. This allows company administrators to enforce
+the use of an identity provider when logging into Supabase. SSO
+improves the onboarding and offboarding experience of the company as the
+employee only needs a single set of credentials to access third-party
+applications or tools—which can also be revoked easily by an administrator.
+
+
+
+Supabase currently provides SAML SSO. Please contact [Enterprise
+Sales](https://supabase.com/contact/enterprise) to have this enabled for your
+organization.
+
+
+
+## Understanding setup and implications
+
+Accounts signing in with SSO have certain limitations.
+The following sections outline the limitations when SSO is enabled or disabled for your team.
+
+### Enable SSO for your team [#enable-sso]
+
+- Organization invites are restricted to members of the company that belong to
+ the same identity provider.
+- Every user has an organization created by default. They can create as many
+ projects as they want.
+- An SSO user will not be able to update their password or reset their
+ password since their access is managed by the company administrator via the
+ identity provider.
+- If an SSO user with the following email of `alice@foocorp.com` attempts to
+ sign-in with a GitHub account that uses the same email, a separate Supabase
+ account is created and will not be linked to the SSO user's account.
+- An SSO user will not be able to see all organizations / projects created
+ under the same identity provider. They will need to be invited to the
+ Supabase organization first. Refer to [access control](/docs/guides/platform/access-control)
+ for more information.
+
+### Disable SSO for your team [#disable-sso]
+
+- You can prevent a user's account from further access to Supabase by removing
+ or disabling their account in your identity provider.
+- You should also remove or downgrade their permissions from any organizations
+ inside Supabase.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/platform/sso/azure.mdx b/apps/docs/pages/guides/platform/sso/azure.mdx
new file mode 100644
index 00000000000..c1a888fc220
--- /dev/null
+++ b/apps/docs/pages/guides/platform/sso/azure.mdx
@@ -0,0 +1,128 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import { Button, IconArrowDown } from 'ui'
+
+export const meta = {
+ title: 'Set Up SSO with Azure AD',
+ description: 'Configure single sign-on with Azure AD (Microsoft Entra).',
+}
+
+Supabase supports single sign-on (SSO) using Microsoft Azure AD.
+
+## Step 1: Add and register an Enterprise Application [#add-and-register-enterprise-application]
+
+Open up the [Azure Active
+Directory](https://portal.azure.com/#view/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/~/Overview)
+dashboard for your Azure account.
+
+Click the _Add_ button then _Enterprise application_.
+
+
+
+## Step 2: Choose Create your own application [#create-application]
+
+You'll be using the custom enterprise application setup for Supabase.
+
+
+
+## Step 3: Fill in application details [#add-application-details]
+
+In the modal titled _Create your own application_ enter the name you wish
+Supabase to be available to your Azure AD users. `Supabase` works in most
+cases.
+
+Make sure to choose the third option: _Integrate any other application you
+don't find in the gallery (Non-gallery)_.
+
+
+
+## Step 4: Choose the Set up single sign-on option [#set-up-single-sign-on]
+
+Before you get to assigning users and groups, which would allow accounts in
+Azure AD to access Supabase, you need to configure the SAML details that allows
+Supabase to accept sign in requests from Azure AD.
+
+
+
+## Step 5: Select SAML single sign-on method [#saml-sso]
+
+Supabase only supports the SAML 2.0 protocol for Single Sign-On, which is an
+industry standard.
+
+
+
+## Step 6: Upload SAML-based Sign-on metadata file [#upload-saml-metadata]
+
+First you need to download Supabase's SAML metadata file. Click the button
+below to initiate a download of the file.
+
+
+ }>
+ Download Supabase SAML Metadata File
+
+
+
+Alternatively, visit this page to initiate a download: `https://alt.supabase.io/auth/v1/sso/saml/metadata?download=true`
+
+Click on the _Upload metadata file_ option in the toolbar and select the file
+you just downloaded.
+
+
+
+All of the correct information should automatically populate the _Basic SAML
+Configuration_ screen as shown.
+
+
+
+**Make sure you input these additional settings.**
+
+| Setting | Value |
+| ----------- | -------------------------------------- |
+| Sign on URL | `https://app.supabase.com/sign-in-sso` |
+| Relay State | `https://app.supabase.com` |
+
+Finally, click the _Save_ button to save the configuration.
+
+## Step 7: Obtain metadata URL and send to Supabase [#send-metadata-url]
+
+Supabase needs to finalize enabling single sign-on with your Azure AD
+application. To do this, please copy and send the link under **App Federation
+Metadata Url** in \*section 3 **SAML Certificates\*** to your support
+contact and await further instructions. If you're not clear who to send this
+link to or need further assistance, please reach out to
+[support@supabase.com](mailto:support@supabase.com).
+
+**Do not test the login until you have heard back from the support contact.**
+
+
+
+## Step 8: Wait for confirmation [#confirmation]
+
+Please wait for confirmation or further instructions from your support contact
+at Supabase before proceeding to the next step. It usually takes us 1 business
+day to configure SSO for you.
+
+## Step 9: Test single sign-on [#testing]
+
+_Testing sign-on before your Azure AD has been registered with Supabase will
+not work. Make sure you've received confirmation from your support contact at
+Supabase as laid out in the [confirmation](#confirmation) step._
+
+Once you’ve received confirmation from your support contact at Supabase that
+SSO setup has been completed for your enterprise, you can ask some of your
+users to sign in via their Azure AD account.
+
+You ask them to enter their email address on the [Sign in with
+SSO](https://app.supabase.com/sign-in-sso) page.
+
+If sign in is not working correctly, please reach out to your support contact
+at Supabase for further guidance.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/platform/sso/gsuite.mdx b/apps/docs/pages/guides/platform/sso/gsuite.mdx
new file mode 100644
index 00000000000..3995999c687
--- /dev/null
+++ b/apps/docs/pages/guides/platform/sso/gsuite.mdx
@@ -0,0 +1,123 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ title: 'Set Up SSO with Google Workspace',
+ description: 'Configure single sign-on with Google Workspace (GSuite).',
+}
+
+Supabase supports single sign-on (SSO) using Google Workspace (formerly known
+as GSuite).
+
+## Step 1: Open the Google Workspace Web and mobile apps console [#google-workspace-console]
+
+
+
+## Step 2: Choose Add custom SAML app [#add-custom-saml-app]
+
+From the _Add app_ button in the toolbar choose _Add custom SAML app_.
+
+
+
+## Step 3: Fill out app details [#add-app-details]
+
+The information you enter here is for visibility into your Google Workspace.
+You can choose any values you like. `Supabase` as a name works well for most
+use cases. Optionally enter a description.
+
+
+
+## Step 4: Download IdP metadata [#download-idp-metadata]
+
+This is a very important step. Click on _DOWNLOAD METADATA_ and save the file
+that was downloaded.
+
+
+
+It's very important to send this file to your support contact at Supabase to
+complete the SSO setup process. If you're not sure where to send this file, you
+can always reach us at [support@supabase.com](mailto:support@supabase.com).
+
+**Important: Make sure the certificate as shown on screen has at least 1 year
+before it expires. Mark down this date in your calendar so you will be reminded
+that you need to update the certificate without any downtime for your users.**
+
+## Step 5: Add service provider details [#add-service-provider-details]
+
+Fill out these serivce provider details on the next screen.
+
+| Detail | Value |
+| -------------- | --------------------------------------------------- |
+| ACS URL | `https://alt.supabase.io/auth/v1/sso/saml/acs` |
+| Entity ID | `https://alt.supabase.io/auth/v1/sso/saml/metadata` |
+| Start URL | `https://app.supabase.com` |
+| Name ID format | PERSISTENT |
+| Name ID | _Basic Information > Primary email_ |
+
+
+
+## Step 6: Configure Attribute mapping [#configure-attribute-mapping]
+
+Attribute mappings allow Supabase to get information about your Google
+Workspace users on each login.
+
+**A _Primary email_ to `email` mapping is required to exist.** Other mappings
+shown below are optional and configurable depending on your Google Workspace
+setup. If in doubt, replicate the same config as shown.
+
+Please share any changes, if any, from this screen with your Supabase support
+contact.
+
+
+
+## Step 7: Wait for confirmation [#confirmation]
+
+Once you’ve configured the Google Workspace app as shown above, make sure you
+send the [metadata file you downloaded](#download-idp-metadata)
+and information regarding the [attribute mapping](#configure-attribute-mappings) (if any
+changes are applicable) to your support contact at Supabase.
+
+This information needs to be entered into Supabase before SSO is activated
+end-to-end.
+
+Wait for confirmation that this information has successfully been added to
+Supabase. It usually takes us 1 business day to configure this information
+for you.
+Supabase.
+
+## Step 8: Configure user access [#configure-user-access]
+
+You can configure which Google Workspace user accounts will get access to
+Supabase. This is important if you wish to limit access to your software
+engineering teams.
+
+You can configure this access by clicking on the _User
+access_ card (or down-arrow). Follow the instructions on screen.
+
+Changes from this step sometimes take a while to propagate across Google’s
+systems. Please wait at least 15 minutes before proceeding to the next step.
+
+
+
+## Step 9: Test single sign-on [#testing]
+
+Once you’ve turned on access to Supabase for users in your organization, ask
+one of those users to help you out in testing the setup.
+
+It often helps to ask them to log out of their Google account and log back in.
+
+Ask them to enter their email addres in the [Sign in with
+SSO](https://app.supabase.com/sign-in-sso) page.
+
+If sign in is not working correctly, please reach out to your support contact
+at Supabase.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/platform/sso/okta.mdx b/apps/docs/pages/guides/platform/sso/okta.mdx
new file mode 100644
index 00000000000..1d3cdf7d17b
--- /dev/null
+++ b/apps/docs/pages/guides/platform/sso/okta.mdx
@@ -0,0 +1,112 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ title: 'Set Up SSO with Okta',
+ description: 'Configure single sign-on with Okta.',
+}
+
+Supabase supports single sign-on (SSO) using Okta.
+
+## Step 1: Choose Create App Integration in the Applications dashboard [#create-app-integration]
+
+Navigate to the Applications dashboard of the Okta admin console. Choose the
+_Create App Integration_ button from the toolbar.
+
+
+
+## Step 2: Choose SAML 2.0 in the app integration dialog [#create-saml-app]
+
+Supabase supports the SAML 2.0 SSO protocol. Choose it from the _Create a new
+app integration_ dialog.
+
+
+
+## Step 3: Fill out General Settings [#add-general-settings]
+
+The information you enter here is for visibility into your Okta applications
+menu. You can choose any values you like. `Supabase` as a name works well for
+most use cases.
+
+
+
+## Step 4: Fill out SAML Settings [#add-saml-settings]
+
+These settings let Supabase use SAML 2.0 properly with your Okta application.
+Make sure you enter this information exactly as shown on in this table and
+screenshot.
+
+| Setting | Value |
+| ---------------------------------------------- | ---------------------------------------------------- |
+| Single sign-on URL | `https://app.supabase.com/auth/v1/sso/saml/acs` |
+| Use this for Recipient URL and Destination URL | ✔️ |
+| Audience URI (SP Entity ID) | `https://app.supabase.com/auth/v1/sso/saml/metadata` |
+| Default RelayState | `https://app.supabase.com` |
+| Name ID format | EmailAddress |
+| Application username | Email |
+| Update application username on | Create and update |
+
+
+
+## Step 5: Fill out Attribute Statements [#add-attribute-statements]
+
+Attribute Statements allow Supabase to get information about your Okta users on each login.
+
+**A `email` to `user.email` statement is required to exist.** Other mappings
+shown below are optional and configurable depending on your Okta
+setup. If in doubt, replicate the same config as shown.
+
+Please share any changes, if any, from this screen with your Supabase support
+contact.
+
+
+
+## Step 6: Obtain IdP metadata URL [#idp-metadata-url]
+
+Supabase needs to finalize enabling single sign-on with your Okta
+application.
+
+To do this scroll down to the _SAML Signing Certificates_ section on the _Sign
+On_ tab of the _Supabase_ application. Pick the the _SHA-2_ row with an
+_Active_ status. Click on the _Actions_ dropdown button and then on the _View
+IdP Metadata_.
+
+This will open up the SAML 2.0 Metadata XML file in a new tab in your browser.
+Copy this URL and send it to your support contact and await further
+instructions. If you're not clear who to send this link to or need further
+assistance, please reach out to
+[support@supabase.com](mailto:support@supabase.com).
+
+The link usually has this structure: `https://.okta.com/apps//sso/saml/metadata`
+
+
+
+## Step 7: Wait for confirmation [#confirmation]
+
+Once you’ve configured the Okta app as shown above, make sure you send the
+[metadata URL](#idp-metadata-url) and information regarding the
+[attribute statements](#add-attribute-statements) (if any changes are applicable) to
+your support contact at Supabase.
+
+Wait for confirmation that this information has successfully been added to
+Supabase. It usually takes us 1 business day to configure this information
+for you.
+
+## Step 8: Test single sign-on [#testing]
+
+Once you’ve received confirmation from your support contact at Supabase that
+SSO setup has been completed for your enterprise, you can ask some of your
+users to sign in via their Okta account.
+
+You ask them to enter their email address on the [Sign in with
+SSO](https://app.supabase.com/sign-in-sso) page.
+
+If sign in is not working correctly, please reach out to your support contact
+at Supabase for further guidance.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/realtime/postgres-changes.mdx b/apps/docs/pages/guides/realtime/postgres-changes.mdx
index 79a76e884b2..0d68f25c2ef 100644
--- a/apps/docs/pages/guides/realtime/postgres-changes.mdx
+++ b/apps/docs/pages/guides/realtime/postgres-changes.mdx
@@ -63,7 +63,14 @@ const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY
*/
const channel = supabase
.channel('schema-db-changes')
- .on('postgres_changes', { event: '*', schema: 'public' }, (payload) => console.log(payload))
+ .on(
+ 'postgres_changes',
+ {
+ event: '*',
+ schema: 'public',
+ },
+ (payload) => console.log(payload)
+ )
.subscribe()
```
@@ -74,8 +81,14 @@ To listen to changes on a table in the `public` schema:
const channel = supabase
.channel('table-db-changes')
- .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'messages' }, (payload) =>
- console.log(payload)
+ .on(
+ 'postgres_changes',
+ {
+ event: 'INSERT',
+ schema: 'public',
+ table: 'messages',
+ },
+ (payload) => console.log(payload)
)
.subscribe()
```
@@ -109,11 +122,21 @@ const channel = supabase
.channel('db-changes')
.on(
'postgres_changes',
- { event: '*', schema: 'public', table: 'messages', filter: 'body=eq.bye' },
+ {
+ event: '*',
+ schema: 'public',
+ table: 'messages',
+ filter: 'body=eq.bye',
+ },
(payload) => console.log(payload)
)
- .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'users' }, (payload) =>
- console.log(payload)
+ .on('postgres_changes',
+ {
+ event: 'INSERT',
+ schema: 'public',
+ table: 'users',
+ },
+ (payload) => console.log(payload)
)
.subscribe()
```
diff --git a/apps/docs/pages/guides/realtime/quickstart.mdx b/apps/docs/pages/guides/realtime/quickstart.mdx
index 5d384d5f874..3e387393ed1 100644
--- a/apps/docs/pages/guides/realtime/quickstart.mdx
+++ b/apps/docs/pages/guides/realtime/quickstart.mdx
@@ -147,7 +147,7 @@ channel.on('presence', { event: 'join' }, ({ newPresences }) => {
})
channel.on('presence', { event: 'leave' }, ({ leftPresences }) => {
- console.log('Users have left: ', newPresences)
+ console.log('Users have left: ', leftPresences)
})
channel.subscribe(async (status) => {
diff --git a/apps/docs/pages/guides/resources.mdx b/apps/docs/pages/guides/resources.mdx
index 7f4d00e107e..b1b139020d3 100644
--- a/apps/docs/pages/guides/resources.mdx
+++ b/apps/docs/pages/guides/resources.mdx
@@ -76,16 +76,6 @@ export const meta = {
-
-
- ### Self-Hosting Supabase
-
- We're happy to host your next big thing, but we also make it easy to host Supabase on your own. We use Docker to help make setup as painless as possible.
-
-[Learn more](/docs/guides/resources/self-hosting)
-
-
-
{/* end of container */}
@@ -93,12 +83,13 @@ export const meta = {
export const resources = [
- {
- title: 'Examples',
- hasLightIcon: true,
- href: '/guides/resources/examples',
- description: 'Official GitHub examples, curated content from the community, and more.',
- },
+ // removing until the examples page is reworked
+ // {
+ // title: 'Examples',
+ // hasLightIcon: true,
+ // href: '/guides/resources/examples',
+ // description: 'Official GitHub examples, curated content from the community, and more.',
+ // },
{
title: 'Glossary',
hasLightIcon: true,
@@ -111,25 +102,25 @@ export const migrationGuides = [
{
title: 'Firebase Auth',
icon: '/docs/img/icons/firebase-icon',
- href: '/guides/migrations/firebase-auth',
+ href: '/guides/resources/migrating-to-supabase/firebase-auth',
description: 'Move your auth users from a Firebase project to a Supabase project.',
},
{
- title: 'Firebase Data',
+ title: 'Firestore Data',
icon: '/docs/img/icons/firebase-icon',
- href: '/guides/migrations/firestore-data',
+ href: '/guides/resources/migrating-to-supabase/firestore-data',
description: 'Migrate the contents of a Firestore collection to a single PostgreSQL table.',
},
{
title: 'Firebase Storage',
icon: '/docs/img/icons/firebase-icon',
- href: '/guides/migrations/firebase-storage',
+ href: '/guides/resources/migrating-to-supabase/firebase-storage',
description: 'Convert your Firebase Storage files to Supabase Storage.',
},
{
title: 'Heroku',
icon: '/docs/img/icons/heroku-icon',
- href: '/guides/migrations/heroku',
+ href: '/guides/resources/migrating-to-supabase/heroku',
description: 'Migrate your Heroku Postgres database to Supabase.',
},
]
diff --git a/apps/docs/pages/guides/resources/examples.mdx b/apps/docs/pages/guides/resources/examples.mdx
deleted file mode 100644
index 7faddafc507..00000000000
--- a/apps/docs/pages/guides/resources/examples.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/examples.mdx'
-
-export const meta = {
- id: 'examples',
- title: 'Examples and Resources',
- description: 'Examples you can use to get started with Supabase',
-}
-
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase.mdx
deleted file mode 100644
index 8f96cc42434..00000000000
--- a/apps/docs/pages/guides/resources/migrating-to-supabase.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/hosting/overview.mdx'
-
-export const meta = {
- title: 'Migrating to Supabase',
- description: 'Learn all about migrating to Supabase from other backend providers',
-}
-
-Hello world
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-auth.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-auth.mdx
index 2e2cd1181ec..6377ac83f13 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-auth.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-auth.mdx
@@ -1,5 +1,4 @@
import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/migrations/firebase-auth.mdx'
export const meta = {
id: 'firebase-auth',
@@ -8,11 +7,87 @@ export const meta = {
sidebar_label: 'Firebase Auth',
}
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
+Supabase provides several [tools](https://github.com/supabase-community/firebase-to-supabase/tree/main/auth) to help migrate auth users from a Firebase project to a Supabase project. There are two parts to the migration process:
+
+- `firestoreusers2json` ([TypeScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/firestoreusers2json.ts), [JavaScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/firestoreusers2json.js)) exports users from an existing Firebase project to a `.json` file on your local system.
+- `import_users` ([TypeScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/import_users.ts), [JavaScript](https://github.com/supabase-community/firebase-to-supabase/blob/main/auth/import_users.js)) imports users from a saved `.json` file into your Supabase project (inserting those users into the `auth.users` table of your `PostgreSQL` database instance).
+
+## Set up the migration tool [#set-up-migration-tool]
+
+1. Clone the [firebase-to-supabase](https://github.com/supabase-community/firebase-to-supabase) repository:
+
+```bash
+git clone https://github.com/supabase-community/firebase-to-supabase.git
+```
+
+1. In the `/auth` directory, create a file named `supabase-service.json` with the following contents:
+
+```json
+{
+ "host": "database.server.com",
+ "password": "secretpassword",
+ "user": "postgres",
+ "database": "postgres",
+ "port": 5432
}
+```
+
+1. Go to the [Database settings](https://app.supabase.com/project/_/settings/database) for your project in the Supabase Dashboard.
+1. Under **Connection Info**, copy the Host string and replace the entry in your `supabase-service.json` file.
+1. Enter the password you used when you created your Supabase project in the `password` entry in the `supabase-service.json` file.
+
+## Generate a Firebase private key [#generate-firebase-private-key]
+
+1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
+1. Click the gear icon next to **Project Overview** in the sidebar and select **Project Settings**.
+1. Click **Service Accounts** and select **Firebase Admin SDK**.
+1. Click **Generate new private key**.
+1. Rename the downloaded file to `firebase-service.json`.
+
+## Save your Firebase password hash parameters [#save-firebase-hash-parameters]
+
+1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
+1. Select **Authentication** (Build section) in the sidebar.
+1. Select **Users** in the top menu.
+1. At the top right of the users list, open the menu (3 dots) and click **Password hash parameters**.
+1. Copy and save the parameters for `base64_signer_key`, `base64_salt_separator`, `rounds`, and `mem_cost`.
+
+```bash title=Sample%20password%20hash%20parameters
+hash_config {
+ algorithm: SCRYPT,
+ base64_signer_key: XXXX/XXX+XXXXXXXXXXXXXXXXX+XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX==,
+ base64_salt_separator: Aa==,
+ rounds: 8,
+ mem_cost: 14,
+}
+```
+
+## Command line options
+
+### Dump Firestore users to a JSON file [#dump-firestore-users]
+
+`node firestoreusers2json.js [] []`
+
+- `filename.json`: (optional) output filename (defaults to `./users.json`)
+- `batchSize`: (optional) number of users to fetch in each batch (defaults to 100)
+
+### Import JSON users file to Supabase Auth (PostgreSQL: auth.users) [#import-json-users-file]
+
+`node import_users.js []`
+
+- `path_to_json_file`: full local path and filename of .json input file (of users)
+- `batch_size`: (optional) number of users to process in a batch (defaults to 100)
+
+## Notes
+
+For more advanced migrations, including the use of a middleware server component for verifying a user's existing Firebase password and updating that password in your Supabase project the first time a user logs in, see the [firebase-to-supabase repo](https://github.com/supabase-community/firebase-to-supabase/tree/main/auth).
+
+## Resources
+
+- [Supabase vs Firebase](https://supabase.com/alternatives/supabase-vs-firebase)
+- [Firestore Data Migration](/docs/guides/migrations/firestore-data)
+- [Firestore Storage Migration](/docs/guides/migrations/firebase-storage)
+
+export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-data.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-data.mdx
deleted file mode 100644
index 15f6b257b0a..00000000000
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-data.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/migrations/firestore-data.mdx'
-
-export const meta = {
- id: 'firestore-data',
- title: 'Firestore Data Migration',
- description: 'Migrate your Firebase Firestore database to a Supabase Postgres database.',
- sidebar_label: 'Firestore Data',
-}
-
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-storage.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-storage.mdx
index b093df61ab9..1516dd2537b 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-storage.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/firebase-storage.mdx
@@ -1,5 +1,4 @@
import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/migrations/firebase-storage.mdx'
export const meta = {
id: 'firebase-storage',
@@ -8,11 +7,66 @@ export const meta = {
sidebar_label: 'Firebase Storage',
}
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
+Supabase provides several [tools](https://github.com/supabase-community/firebase-to-supabase/tree/main/storage) to convert storage files from Firebase Storage to Supabase Storage. Conversion is a two-step process:
+
+1. Files are downloaded from a Firebase storage bucket to a local filesystem.
+2. Files are uploaded from the local filesystem to a Supabase storage bucket.
+
+## Set up the migration tool [#set-up-migration-tool]
+
+1. Clone the [firebase-to-supabase](https://github.com/supabase-community/firebase-to-supabase) repository:
+
+```bash
+git clone https://github.com/supabase-community/firebase-to-supabase.git
+```
+
+1. In the `/storage` directory, rename [supabase-keys-sample.js](https://github.com/supabase-community/firebase-to-supabase/blob/main/storage/supabase-keys-sample.js) to `supabase-keys.js`.
+1. Go to your Supabase project's [API settings](https://app.supabase.com/project/_/settings/api) in the Dashboard.
+1. Copy the **Project URL** and update the `SUPABASE_URL` value in `supabase-keys.js`.
+1. Under **Project API keys**, copy the **service_role** key and update the `SUPABASE_KEY` value in `supabase-keys.js`.
+
+## Generate a Firebase private key [#generate-firebase-private-key]
+
+1. Log in to your [Firebase Console](https://console.firebase.google.com/project) and open your project.
+1. Click the gear icon next to **Project Overview** in the sidebar and select **Project Settings**.
+1. Click **Service Accounts** and select **Firebase Admin SDK**.
+1. Click **Generate new private key**.
+1. Rename the downloaded file to `firebase-service.json`.
+
+## Command line options
+
+### Download Firestore Storage bucket to a local filesystem folder [#download-firestore-storage-bucket]
+
+`node download.js [] [] [] []`
+
+- ``: The prefix of the files to download. To process the root bucket, use an empty prefix: "".
+- ``: (optional) Name of subfolder for downloaded files. The selected folder is created as a subfolder of the current folder (e.g., `./downloads/`). The default is `downloads`.
+- ``: (optional) The default is 100.
+- ``: (optional) Stop after processing this many files. For no limit, use `0`.
+- ``: (optional) Begin processing at this pageToken.
+
+To process in batches using multiple command-line executions, you must use the same parameters with a new `` on subsequent calls. Use the token displayed on the last call to continue the process at a given point.
+
+### Upload files to Supabase Storage bucket [#upload-to-supabase-storage-bucket]
+
+`node upload.js `
+
+- ``: The prefix of the files to download. To process all files, use an empty prefix: "".
+- ``: Name of subfolder of files to upload. The selected folder is read as a subfolder of the current folder (e.g., `./downloads/`). The default is `downloads`.
+- ``: Name of the bucket to upload to.
+
+
+
+If the bucket doesn't exist, it's created as a `non-public` bucket. You must set permissions on this new bucket in the [Supabase Dashboard](https://app.supabase.com/project/_/storage/buckets) before users can download any files.
+
+
+
+## Resources
+
+- [Supabase vs Firebase](https://supabase.com/alternatives/supabase-vs-firebase)
+- [Firestore Data Migration](/docs/guides/migrations/firestore-data)
+- [Firebase Auth Migration](/docs/guides/migrations/firebase-auth)
+
+export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/migrations/firestore-data.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/firestore-data.mdx
similarity index 100%
rename from apps/docs/pages/guides/migrations/firestore-data.mdx
rename to apps/docs/pages/guides/resources/migrating-to-supabase/firestore-data.mdx
diff --git a/apps/docs/pages/guides/resources/migrating-to-supabase/heroku.mdx b/apps/docs/pages/guides/resources/migrating-to-supabase/heroku.mdx
index 2bf4004f95a..51ab83dfb49 100644
--- a/apps/docs/pages/guides/resources/migrating-to-supabase/heroku.mdx
+++ b/apps/docs/pages/guides/resources/migrating-to-supabase/heroku.mdx
@@ -1,5 +1,4 @@
import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/migrations/heroku.mdx'
export const meta = {
id: 'heroku',
@@ -8,11 +7,65 @@ export const meta = {
sidebar_label: 'Heroku',
}
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
+Supabase is one of the best [free alternatives to Heroku Postgres](https://supabase.com/alternatives/supabase-vs-heroku-postgres). This guide shows how to migrate your Heroku Postgres database to Supabase. This migration requires the [pg_dump](https://www.postgresql.org/docs/current/app-pgdump.html) and [psql](https://www.postgresql.org/docs/current/app-psql.html) CLI tools, which are installed automatically as part of the complete PostgreSQL installation package.
+
+Alternatively, use the [Heroku to Supabase migration tool](https://migrate.supabase.com/) to migrate in just a few clicks.
+
+## Quick demo
+
+
+
+
+
+## Retrieve your Heroku database credentials [#retrieve-heroku-credentials]
+
+1. Log in to your [Heroku account](https://heroku.com) and select the project you want to migrate.
+1. Click **Resources** in the menu and select your **Heroku Postgres** database.
+1. Click **Settings** in the menu.
+1. Click **View Credentials** and save the following information:
+ - Host (`$HEROKU_HOST`)
+ - Database (`$HEROKU_DATABASE`)
+ - User (`$HEROKU_USER`)
+ - Password (`$HEROKU_PASSWORD`)
+
+## Retrieve your Supabase Host [#retrieve-supabase-host]
+
+1. If you're new to Supabase, [create a project](https://app.supabase.com).
+1. Go to the [Database settings](https://app.supabase.com/project/_/settings/database) for your project in the Supabase Dashboard.
+1. Under **Connection Info**, note your Host (`$SUPABASE_HOST`).
+
+## Export your Heroku database to a file [#export-heroku-database]
+
+Use `pg_dump` with your Heroku credentials to export your Heroku database to a file (e.g., `heroku_dump.sql`).
+
+```bash
+pg_dump --clean --if-exists --quote-all-identifiers \
+ -h $HEROKU_HOST -U $HEROKU_USER -d $HEROKU_DATABASE \
+ --no-owner --no-privileges > heroku_dump.sql
+```
+
+## Import the database to your Supabase project [#import-database-to-supabase]
+
+Use `psql` to import the Heroku database file to your Supabase project.
+
+```bash
+psql -h $SUPABASE_HOST -U postgres -f heroku_dump.sql
+```
+
+## Additional options
+
+- To only migrate a single database schema, add the `--schema=PATTERN` parameter to your `pg_dump` command.
+- To exclude a schema: `--exclude-schema=PATTERN`.
+- To only migrate a single table: `--table=PATTERN`.
+- To exclude a table: `--exclude-table=PATTERN`.
+
+Run `pg_dump --help` for a full list of options.
+
+export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/resources/self-hosting.mdx b/apps/docs/pages/guides/resources/self-hosting.mdx
deleted file mode 100644
index 37e118985ee..00000000000
--- a/apps/docs/pages/guides/resources/self-hosting.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/hosting/overview.mdx'
-
-export const meta = {
- id: 'overview',
- title: 'Self Hosting',
- sidebar_label: 'Overview',
- description: 'Getting started with Self Hosting.',
-}
-
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/resources/self-hosting/docker.mdx b/apps/docs/pages/guides/resources/self-hosting/docker.mdx
deleted file mode 100644
index b310833c98b..00000000000
--- a/apps/docs/pages/guides/resources/self-hosting/docker.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/hosting/docker.mdx'
-
-export const meta = {
- id: 'docker',
- title: 'Self-hosting with Docker',
- description: 'How to configure and deploy Supabase.',
- sidebar_label: 'Docker',
-}
-
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/resources/supabase-cli.mdx b/apps/docs/pages/guides/resources/supabase-cli.mdx
index 86feaed2fb1..ef861654950 100644
--- a/apps/docs/pages/guides/resources/supabase-cli.mdx
+++ b/apps/docs/pages/guides/resources/supabase-cli.mdx
@@ -1,5 +1,4 @@
import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/cli.mdx'
export const meta = {
id: 'cli',
@@ -10,11 +9,114 @@ export const meta = {
toc_max_heading_level: 2,
}
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
+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.
+
+## Installation
+
+
+
+
+Install the CLI as dev dependency via [npm](https://www.npmjs.com/package/supabase):
+
+```sh
+npm install supabase --save-dev
+```
+
+
+
+
+Install the CLI with [Homebrew](https://brew.sh):
+
+```sh
+brew install supabase/tap/supabase
+```
+
+
+
+
+Install the CLI with [Scoop](https://scoop.sh):
+
+```powershell
+scoop bucket add supabase https://github.com/supabase/scoop-bucket.git
+scoop install supabase
+```
+
+
+
+
+The CLI is available through [Homebrew](https://brew.sh) and Linux packages.
+
+#### Homebrew
+
+```sh
+brew install supabase/tap/supabase
+```
+
+#### Linux packages
+
+Linux packages are provided in [Releases](https://github.com/supabase/cli/releases).
+To install, download the `.apk`/`.deb`/`.rpm` file depending on your package manager
+and run one of the following:
+
+- `sudo apk add --allow-untrusted <...>.apk`
+- `sudo dpkg -i <...>.deb`
+- `sudo rpm -i <...>.rpm`
+
+
+
+
+## Updates
+
+When a new [version](https://github.com/supabase/cli/releases) is released, you can update the CLI using the same methods.
+
+
+
+
+```sh
+npm update supabase --save-dev
+```
+
+
+
+
+```sh
+brew upgrade supabase
+```
+
+
+
+
+```powershell
+scoop update supabase
+```
+
+
+
+
+```sh
+brew upgrade supabase
+```
+
+
+
+
+## See also
+
+- [Supabase CLI Reference](/docs/reference/cli/usage)
+- [Local Development](/docs/guides/cli/local-development)
+- [Managing Environments](/docs/guides/cli/managing-environments)
+
+export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/resources/supabase-cli/local-development.mdx b/apps/docs/pages/guides/resources/supabase-cli/local-development.mdx
index 9e7243950f1..3ff1cb1c82a 100644
--- a/apps/docs/pages/guides/resources/supabase-cli/local-development.mdx
+++ b/apps/docs/pages/guides/resources/supabase-cli/local-development.mdx
@@ -1,5 +1,4 @@
import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/cli/local-development.mdx'
export const meta = {
id: 'local-development',
@@ -7,11 +6,256 @@ export const meta = {
description: 'How to use Supabase on your local development machine.',
}
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
+Learn how to use the Supabase CLI to develop your project locally and deploy to the Supabase Platform.
+
+
+
+
+
+## Prerequisites
+
+Make sure you have these installed on your local machine:
+
+- [Docker](https://docs.docker.com/engine/install/)
+- [Git](https://github.com/git-guides/install-git)
+- [Supabase CLI](/docs/guides/cli)
+
+## Log in to the Supabase CLI
+
+```bash
+supabase login
+```
+
+## Initialize your project
+
+Create a new folder for your project and start a new git repository:
+
+```bash
+# create your project folder
+mkdir your-project
+
+# move into the new folder
+cd your-project
+
+# start a new git repository
+git init
+```
+
+## Start Supabase services
+
+[Initialize](/docs/reference/cli/usage#supabase-init) Supabase to set up the configuration for developing your project locally:
+
+```bash
+supabase init
+```
+
+Make sure Docker is running. The [start](/docs/reference/cli/usage#supabase-start) command uses Docker to start the Supabase [services](/docs/architecture).
+This command may take a while to run if this is the first time using the CLI.
+
+```bash
+supabase start
+```
+
+Once all of the Supabase services are running, you'll see output containing your local Supabase credentials.
+You can use the [stop](/docs/reference/cli/usage#supabase-stop) command at any time to stop all services.
+
+## Access services
+
+You can access services directly with any Postgres client or through the API Gateway ([Kong](https://github.com/Kong/kong)).
+
+
+
+
+```sh
+# Default URL:
+postgresql://postgres:postgres@localhost:54322/postgres
+```
+
+The local Postgres instance can be accessed through [`psql`](https://www.postgresql.org/docs/current/app-psql.html)
+or any other Postgres client, such as [pgadmin](https://www.pgadmin.org/).
+
+For example:
+
+```bash
+psql 'postgresql://postgres:postgres@localhost:54322/postgres'
+```
+
+
+
+To access the database from an edge function in your local Supabase setup, replace `localhost` with `host.docker.internal`.
+
+
+
+
+
+
+```sh
+# Default URL:
+http://localhost:54321
+```
+
+If you are accessing these services without the client libraries, you may need to pass the client keys as an `Authorization` header.
+Learn more about [JWT headers](/docs/learn/auth-deep-dive/auth-deep-dive-jwts).
+
+```sh
+curl 'http://localhost:54321/rest/v1/' \
+ -H "apikey: " \
+ -H "Authorization: Bearer "
+
+http://localhost:54321/rest/v1/ # REST (PostgREST)
+http://localhost:54321/realtime/v1/ # Realtime
+http://localhost:54321/storage/v1/ # Storage
+http://localhost:54321/auth/v1/ # Auth (GoTrue)
+```
+
+
+
+`` is provided when you run the command `supabase start`.
+
+
+
+
+
+
+## Database migrations
+
+Database changes are managed through "migrations." Database migrations are a common way of tracking changes to your database over time.
+
+
+
+
+
+### Make database changes
+
+For this guide, create a table called `employees`. In Supabase Studio, navigate to the **SQL Editor** page and run the following SQL command:
+
+```sql
+create table employees (
+ id integer primary key generated always as identity,
+ name text
+);
+```
+
+
+
+You can execute any SQL using the `DB URL` shown by [`supabase status`](/docs/reference/cli/usage#supabase-status).
+
+
+
+Run the [`db diff`](/docs/reference/cli/usage#supabase-db-diff) command to detect changes in the local database:
+
+```sh
+supabase db diff create_employees -f create_employees
+```
+
+This creates a new migration named `supabase/migrations/_create_employees.sql`, representing any changes made to the local database since [`supabase start`](/docs/reference/cli/usage#supabase-start).
+
+### Add sample data
+
+Use the seed script in `supabase/seed.sql` (created with [`supabase init`](/docs/reference/cli/usage#supabase-init)) to add sample data to the table.
+
+```sql
+-- in supabase/seed.sql
+insert into public.employees (name)
+values
+ ('Erlich Bachman'),
+ ('Richard Hendricks'),
+ ('Monica Hall');
+```
+
+Rerun the migration and seed scripts:
+
+```bash
+supabase db reset
+```
+
+You should now see the contents of `employees` in Studio.
+
+### Reset database changes
+
+Use the [`reset`](/docs/reference/cli/usage#supabase-db-reset) command to revert any changes to the local database.
+
+```sql
+-- run on local database to make a change
+alter table employees
+ add department text default 'Hooli';
+```
+
+Run the following command to reset the local database:
+
+```sh
+supabase db reset
+```
+
+## Deploy your project
+
+Go to the [Supabase Dashboard](https://app.supabase.com) and create a project to deploy the changes.
+
+### Link your project
+
+
+
+There are a few commands required to link your project. We are in the process of consolidating these commands into a single command. Bear with us!
+
+
+
+Associate your project with your remote project using [`supabase link`](/docs/reference/cli/usage#supabase-link).
+
+```bash
+supabase link --project-ref
+# You can get from your project’s dashboard URL: https://app.supabase.com/project/
+
+supabase db remote commit
+# Capture any changes that you have made to your database before setting up the CLI
+```
+
+`supabase/migrations` is now populated with a migration in `..._remote_commit.sql`.
+This migration captures any changes required for your local database to match the schema of your remote Supabase project.
+
+### Deploy database changes
+
+Deploy any local database migrations using [`db push`](/docs/reference/cli/usage#supabase-db-push):
+
+```sh
+supabase db push
+```
+
+### Deploy Edge Functions
+
+Deploy any Edge Functions using [`functions deploy`](/docs/reference/cli/usage#supabase-functions-deploy):
+
+```sh
+supabase functions deploy
+```
+
+## Limitations
+
+The local development environment is not as feature-complete as the Supabase Platform. Here are some of the differences:
+
+- The Storage interface is coming soon.
+- The Functions interface is coming soon.
+- Logs are not supported through the interface (however you can access them through the Docker containers).
+- You cannot update your project settings in the Dashboard—this must be done using the CLI.
+
+```
+
+```
+
+export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/resources/supabase-cli/managing-enviroments.mdx b/apps/docs/pages/guides/resources/supabase-cli/managing-enviroments.mdx
deleted file mode 100644
index cf3c92956fa..00000000000
--- a/apps/docs/pages/guides/resources/supabase-cli/managing-enviroments.mdx
+++ /dev/null
@@ -1,17 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import oldContent from '~/pages/guides/cli/managing-environments.mdx'
-
-export const meta = {
- id: 'managing-environments',
- title: 'Managing Environments',
- description: 'How to deploy Supabase schema changes with a CI / CD pipeline.',
-}
-
-export const Page = ({ children }) => {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') {
- return oldContent()
- }
- return
-}
-
-export default Page
diff --git a/apps/docs/pages/guides/cli/managing-environments.mdx b/apps/docs/pages/guides/resources/supabase-cli/managing-environments.mdx
similarity index 100%
rename from apps/docs/pages/guides/cli/managing-environments.mdx
rename to apps/docs/pages/guides/resources/supabase-cli/managing-environments.mdx
diff --git a/apps/docs/pages/guides/hosting/overview.mdx b/apps/docs/pages/guides/self-hosting.mdx
similarity index 97%
rename from apps/docs/pages/guides/hosting/overview.mdx
rename to apps/docs/pages/guides/self-hosting.mdx
index 51e618c4d31..1c99b9765d9 100644
--- a/apps/docs/pages/guides/hosting/overview.mdx
+++ b/apps/docs/pages/guides/self-hosting.mdx
@@ -1,16 +1,14 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'overview',
- title: 'Self Hosting',
- sidebar_label: 'Overview',
- description: 'Getting started with Self Hosting.',
+ title: 'Self-Hosting',
+ description: 'Getting started with self-hosting Supabase.',
}
There are several ways to use Supabase:
- [Supabase Cloud](https://app.supabase.com): you don't need to deploy anything. We will manage and scale your infrastructure.
-- [Docker](../../guides/hosting/docker): deploy to your own infrastructure.
+- [Docker](/docs/guides/self-hosting/docker): deploy to your own infrastructure.
- Kubernetes: coming soon.
## Architecture
diff --git a/apps/docs/pages/guides/self-hosting/auth/config.mdx b/apps/docs/pages/guides/self-hosting/auth/config.mdx
new file mode 100644
index 00000000000..0e894114c65
--- /dev/null
+++ b/apps/docs/pages/guides/self-hosting/auth/config.mdx
@@ -0,0 +1,38 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getAuthConfigV1 } from '~/lib/mdx/getConfig'
+import Param from '~/components/Params'
+
+export const spec = getAuthConfigV1()
+
+export const meta = {
+ title: 'Auth Self-hosting Config',
+ description: 'How to configure and deploy Supabase.',
+}
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/hosting/docker.mdx b/apps/docs/pages/guides/self-hosting/docker.mdx
similarity index 81%
rename from apps/docs/pages/guides/hosting/docker.mdx
rename to apps/docs/pages/guides/self-hosting/docker.mdx
index db9bcdf0563..08da99ae31c 100644
--- a/apps/docs/pages/guides/hosting/docker.mdx
+++ b/apps/docs/pages/guides/self-hosting/docker.mdx
@@ -1,10 +1,8 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'docker',
- title: 'Self-hosting with Docker',
- description: 'How to configure and deploy Supabase.',
- sidebar_label: 'Docker',
+ title: 'Self-Hosting with Docker',
+ description: 'Learn how to configure and deploy Supabase with Docker.',
}
Docker is the easiest way to get started with self-hosted Supabase.
@@ -42,11 +40,11 @@ Now visit [http://localhost:3000](http://localhost:3000) to start using Supabase
While we provided you with some example secrets for getting started, you should NEVER deploy your Supabase setup using the defaults we have provided.
-Please follow these steps to secure your Docker setup. We [strongly recommend](../../guides/hosting/overview#managing-your-secrets) using a secrets manager when deploying to production.
+Follow these steps to secure your Docker setup. We strongly recommend using a [secrets manager](../self-hosting#managing-your-secrets) when deploying to production.
### Generate API Keys
-Use your `JWT_SECRET` to generate a `anon` and `service` API keys using the [JWT generator](../../guides/hosting/overview#api-keys).
+Use your `JWT_SECRET` to generate a `anon` and `service` API keys using the [JWT generator](../self-hosting#api-keys).
Replace the values in these files:
@@ -72,7 +70,7 @@ The Docker setup doesn't include a management database for managing users and lo
## Configuration
-Each system can be [configured](../../guides/hosting/overview#configuration) to suit your particular use-case.
+Each system can be [configured](../self-hosting#configuration) to suit your particular use-case.
To keep the setup simple, we made some choices that may not be optimal for production:
@@ -82,7 +80,7 @@ To keep the setup simple, we made some choices that may not be optimal for produ
### Using an external database
-We strongly [recommend](../../guides/hosting/overview#managing-your-database) that you decouple your database from `docker-compose` before deploying.
+We strongly recommend [decoupling your database](../self-hosting#managing-your-database) from `docker-compose` before deploying.
The middleware will run with any PostgreSQL database that has logical replication enabled. The following environment variables should be updated
in the `.env` file to point to your external database:
@@ -102,6 +100,10 @@ Once you have done this, you can safely comment out the `db` section of the `doc
By default, `docker-compose` sets the database's `log_min_messages` configuration to `fatal` to prevent redundant logs generated by Realtime.
However, you might miss important log messages such as database errors. Configure `log_min_messages` based on your needs.
+### File storage backend on macOS
+
+By default, Storage backend is set to `file`, which is to use local files as the storage backend. To make it work on macOS, you need to choose `VirtioFS` as the Docker container file sharing implementation (in Docker Desktop -> Preferences -> General).
+
## Deploying
See the following guides to deploy Docker Compose setup using your preferred tool and platform:
diff --git a/apps/docs/pages/guides/self-hosting/realtime/config.mdx b/apps/docs/pages/guides/self-hosting/realtime/config.mdx
new file mode 100644
index 00000000000..a52dc2c111a
--- /dev/null
+++ b/apps/docs/pages/guides/self-hosting/realtime/config.mdx
@@ -0,0 +1,38 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import { getRealtimeConfigV0 } from '~/lib/mdx/getConfig'
+import Param from '~/components/Params'
+
+export const spec = getRealtimeConfigV0()
+
+export const meta = {
+ title: 'Realtime Self-hosting Config',
+ description: 'How to configure and deploy Supabase.',
+}
+
+
-
-
- );
-}
-```
-
-### Launch!
-
-Now that we have all the components in place, let's update `App.tsx`:
-
-```jsx title=src/App.tsx
-import { Redirect, Route } from 'react-router-dom'
-import { IonApp, IonRouterOutlet, setupIonicReact } from '@ionic/react'
-import { IonReactRouter } from '@ionic/react-router'
-import { supabase } from './supabaseClient'
-
-import '@ionic/react/css/ionic.bundle.css'
-
-/* Theme variables */
-import './theme/variables.css'
-import { LoginPage } from './pages/Login'
-import { AccountPage } from './pages/Account'
-import { useEffect, useState } from 'react'
-import { Session } from '@supabase/supabase-js'
-
-setupIonicReact()
-
-const App: React.FC = () => {
- const [session, setSession] = useState < Session > null
- useEffect(() => {
- setSession(supabase.auth.session())
- supabase.auth.onAuthStateChange((_event, session) => {
- setSession(session)
- })
- }, [])
- return (
-
-
-
- {
- return session ? :
- }}
- />
-
-
-
-
-
-
- )
-}
-
-export default App
-```
-
-Once that's done, run this in a terminal window:
-
-```bash
-ionic serve
-```
-
-And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app.
-
-
-
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-First install two packages in order to interact with the user's camera.
-
-```bash
-npm install @ionic/pwa-elements @capacitor/camera
-```
-
-[CapacitorJS](https://capacitorjs.com) is a cross platform native runtime from Ionic that enables web apps to be deployed through the app store and provides access to native deavice API.
-
-Ionic PWA elements is a companion package that will polyfill certain browser APIs that provide no user interface with custom Ionic UI.
-
-With those packages installed we can update our `index.tsx` to include an additional bootstapping call for the Ionic PWA Elements.
-
-```ts title=src/index.tsx
-import React from 'react'
-import ReactDOM from 'react-dom'
-import App from './App'
-import * as serviceWorkerRegistration from './serviceWorkerRegistration'
-import reportWebVitals from './reportWebVitals'
-
-import { defineCustomElements } from '@ionic/pwa-elements/loader'
-defineCustomElements(window)
-
-ReactDOM.render(
-
-
- ,
- document.getElementById('root')
-)
-
-serviceWorkerRegistration.unregister()
-reportWebVitals()
-```
-
-Then create an **AvatarComponent**.
-
-```jsx title=src/components/Avatar.tsx
-import { IonIcon } from '@ionic/react';
-import { person } from 'ionicons/icons';
-import { Camera, CameraResultType } from '@capacitor/camera';
-import { useEffect, useState } from 'react';
-import { supabase } from '../supabaseClient';
-import './Avatar.css'
-export function Avatar({
- url,
- onUpload,
-}: {
- url: string;
- onUpload: (e: any, file: string) => Promise;
-}) {
- const [avatarUrl, setAvatarUrl] = useState();
-
- useEffect(() => {
- if (url) {
- downloadImage(url);
- }
- }, [url]);
- const uploadAvatar = async () => {
- try {
- const photo = await Camera.getPhoto({
- resultType: CameraResultType.DataUrl,
- });
-
- const file = await fetch(photo.dataUrl!)
- .then((res) => res.blob())
- .then(
- (blob) =>
- new File([blob], 'my-file', { type: `image/${photo.format}` })
- );
-
- const fileName = `${Math.random()}-${new Date().getTime()}.${
- photo.format
- }`;
- let { error: uploadError } = await supabase.storage
- .from('avatars')
- .upload(fileName, file);
- if (uploadError) {
- throw uploadError;
- }
- onUpload(null, fileName);
- } catch (error) {
- console.log(error);
- }
- };
-
- const downloadImage = async (path: string) => {
- try {
- const { data, error } = await supabase.storage
- .from('avatars')
- .download(path);
- if (error) {
- throw error;
- }
- const url = URL.createObjectURL(data!);
- setAvatarUrl(url);
- } catch (error: any) {
- console.log('Error downloading image: ', error.message);
- }
- };
-
- return (
-
-
- {avatarUrl ? (
-
- ) : (
-
- )}
-
-
-
- );
-}
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```jsx title=src/pages/Account.tsx
-// Import the new component
-
-import { Avatar } from '../components/Avatar';
-
-// ...
-return (
-
-
-
- Account
-
-
-
-
-
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/with-ionic-vue.mdx b/apps/docs/pages/guides/with-ionic-vue.mdx
deleted file mode 100644
index 2f368771b78..00000000000
--- a/apps/docs/pages/guides/with-ionic-vue.mdx
+++ /dev/null
@@ -1,567 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'with-ionic-vue',
- title: 'Quickstart: Ionic Vue',
- description: 'Learn how to use Supabase in your Ionic Vue App.',
- sidebar_label: 'Ionic Vue',
-}
-
-
-
-
-
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/mhartington/supabase-ionic-vue).
-
-
-
-## Building the App
-
-Let's start building the Vue app from scratch.
-
-### Initialize an Ionic Vue app
-
-We can use the [Ionic CLI](https://ionicframework.com/docs/cli) to initialize
-an app called `supabase-ionic-vue`:
-
-```bash
-npm install -g @ionic/cli
-ionic start supabase-ionic-vue blank --type vue
-cd supabase-ionic-vue
-```
-
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
-
-```bash
-npm install @supabase/supabase-js
-```
-
-And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
-
-```bash title=.env
-VUE_APP_SUPABASE_URL=YOUR_SUPABASE_URL
-VUE_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
-```
-
-Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
-on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
-
-```js title=src/supabase.ts"
-import { createClient } from '@supabase/supabase-js';
-
-const supabaseUrl = process.env.VUE_APP_SUPABASE_URL as string;
-const supabaseAnonKey = process.env.VUE_APP_SUPABASE_ANON_KEY as string;
-
-export const supabase = createClient(supabaseUrl, supabaseAnonKey);
-```
-
-### Set up a Login route
-
-Let's set up a Vue component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
-
-```html title=/src/views/Login.vue
-
-
-
-
- Login
-
-
-
-
-
-
Supabase + Ionic Vue
-
Sign in via magic link with your email below
-
-
-
-
-
{{email}}
-
-
-
-
-
-```
-
-### Account page
-
-After a user is signed in we can allow them to edit their profile details and manage their account.
-
-Let's create a new component for that called `Account.vue`.
-
-```html title=src/views/Account.vue
-
-
-
-
- Account
-
-
-
-
-
-
-
- Log Out
-
-
-
-
-
-
-```
-
-### Launch!
-
-Now that we have all the components in place, let's update `App.vue` and our routes:
-
-```ts title=src/router.index.ts
-import { createRouter, createWebHistory } from '@ionic/vue-router'
-import { RouteRecordRaw } from 'vue-router'
-import LoginPage from '../views/Login.vue'
-import AccountPage from '../views/Account.vue'
-const routes: Array = [
- {
- path: '/',
- name: 'Login',
- component: LoginPage,
- },
- {
- path: '/account',
- name: 'Account',
- component: AccountPage,
- },
-]
-
-const router = createRouter({
- history: createWebHistory(process.env.BASE_URL),
- routes,
-})
-
-export default router
-```
-
-```html title=src/App.vue
-
-
-
-
-
-
-
-```
-
-Once that's done, run this in a terminal window:
-
-```bash
-ionic serve
-```
-
-And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app.
-
-
-
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-First install two packages in order to interact with the user's camera.
-
-```bash
-npm install @ionic/pwa-elements @capacitor/camera
-```
-
-[CapacitorJS](https://capacitorjs.com) is a cross platform native runtime from Ionic that enables web apps to be deployed through the app store and provides access to native deavice API.
-
-Ionic PWA elements is a companion package that will polyfill certain browser APIs that provide no user interface with custom Ionic UI.
-
-With those packages installed we can update our `main.ts` to include an additional bootstapping call for the Ionic PWA Elements.
-
-```ts title=src/main.tsx"
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router'
-
-import { IonicVue } from '@ionic/vue'
-/* Core CSS required for Ionic components to work properly */
-import '@ionic/vue/css/ionic.bundle.css'
-
-/* Theme variables */
-import './theme/variables.css'
-
-import { defineCustomElements } from '@ionic/pwa-elements/loader'
-defineCustomElements(window)
-const app = createApp(App).use(IonicVue).use(router)
-
-router.isReady().then(() => {
- app.mount('#app')
-})
-```
-
-Then create an **AvatarComponent**.
-
-```html title=src/components/Avatar.vue
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```html title=src/views/Account.vue
-
-
-
-
- Account
-
-
-
-
-
-...
-
-
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/with-nextjs.mdx b/apps/docs/pages/guides/with-nextjs.mdx
deleted file mode 100644
index df4d8171a4d..00000000000
--- a/apps/docs/pages/guides/with-nextjs.mdx
+++ /dev/null
@@ -1,732 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'with-nextjs',
- title: 'Quickstart: Next.js',
- description: 'Learn how to use Supabase in your Next App.',
- sidebar_label: 'Next.js',
-}
-
-
-
-
-
-### Video Guide
-
-
-
-
-
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management).
-
-
-
-## Building the App
-
-Let's start building the Next.js app from scratch.
-
-### Initialize a Next.js app
-
-We can use [`create-next-app`](https://nextjs.org/docs/getting-started) to initialize
-an app called `supabase-nextjs`:
-
-
-
-
-```bash
-npx create-next-app@latest --use-npm supabase-nextjs
-cd supabase-nextjs
-```
-
-
-
-
-```bash
-npx create-next-app@latest --ts --use-npm supabase-nextjs
-cd supabase-nextjs
-```
-
-
-
-
-Then install the Supabase client library: [supabase-js](https://github.com/supabase/supabase-js)
-
-```bash
-npm install @supabase/supabase-js
-```
-
-And finally we want to save the environment variables in a `.env.local`.
-All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
-
-```bash title=.env.local
-NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
-NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
-```
-
-And one optional step is to update the CSS file `styles/globals.css` to make the app look nice.
-You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/nextjs-ts-user-management/styles/globals.css).
-
-### Set up a Login component
-
-#### Supabase Auth Helpers
-
-Next.js is a highly versatile framework offering pre-rendering at build time (SSG), server-side rendering at request time (SSR), API routes, and middleware edge-functions.
-
-It can be challenging to authenticate your users in all these different environments, that's why we've created the [Supabase Auth Helpers](/docs/guides/auth/auth-helpers/nextjs) to make user management and data fetching within Next.js as easy as possible.
-
-Install the auth helpers for React and Next.js
-
-```bash
-npm install @supabase/auth-helpers-react @supabase/auth-helpers-nextjs
-```
-
-
-
-
-Wrap your `pages/_app.js` component with the `SessionContextProvider` component:
-
-```jsx title=pages/_app.js
-import '../styles/globals.css'
-import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
-import { SessionContextProvider } from '@supabase/auth-helpers-react'
-
-function MyApp({ Component, pageProps }) {
- const [supabase] = useState(() => createBrowserSupabaseClient())
-
- return (
-
-
-
- )
-}
-export default MyApp
-```
-
-
-
-
-Wrap your `pages/_app.tsx` component with the `SessionContextProvider` component:
-
-```jsx lines=2,8 title=pages/_app.tsx
-import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
-import { SessionContextProvider, Session } from '@supabase/auth-helpers-react'
-
-function MyApp({
- Component,
- pageProps,
-}: AppProps<{
- initialSession: Session,
-}>) {
- const [supabase] = useState(() => createBrowserSupabaseClient())
-
- return (
-
-
-
- )
-}
-export default MyApp
-```
-
-See the [Auth Helpers docs](/docs/guides/auth/auth-helpers/nextjs#usage-with-typescript) for more details on usage with TypeScript.
-
-
-
-
-#### Supabase Auth UI
-
-We can use the [Supabase Auth UI](/docs/guides/auth/auth-helpers/auth-ui) a pre-built React component for authenticating users via OAuth, email, and magic links.
-
-Install the Supabase Auth UI for React
-
-```bash
-npm install @supabase/auth-ui-react
-```
-
-Add the `Auth` component to your home page
-
-```jsx title=pages/index.js
-import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
-import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react'
-
-const Home = () => {
- const session = useSession()
- const supabase = useSupabaseClient()
-
- return (
-
- {!session ? (
-
- ) : (
-
Account page will go here.
- )}
-
- )
-}
-
-export default Home
-```
-
-### Account page
-
-After a user is signed in we can allow them to edit their profile details and manage their account.
-
-
-
-
-Let's create a new component for that called `Account.js` within a `components` folder.
-
-```tsx title=components/Account.js
-import { useState, useEffect } from 'react'
-import { useUser, useSupabaseClient } from '@supabase/auth-helpers-react'
-
-export default function Account({ session }) {
- const supabase = useSupabaseClient()
- const user = useUser()
- const [loading, setLoading] = useState(true)
- const [username, setUsername] = useState(null)
- const [website, setWebsite] = useState(null)
- const [avatar_url, setAvatarUrl] = useState(null)
-
- useEffect(() => {
- getProfile()
- }, [session])
-
- async function getProfile() {
- try {
- setLoading(true)
-
- let { data, error, status } = await supabase
- .from('profiles')
- .select(`username, website, avatar_url`)
- .eq('id', user.id)
- .single()
-
- if (error && status !== 406) {
- throw error
- }
-
- if (data) {
- setUsername(data.username)
- setWebsite(data.website)
- setAvatarUrl(data.avatar_url)
- }
- } catch (error) {
- alert('Error loading user data!')
- console.log(error)
- } finally {
- setLoading(false)
- }
- }
-
- async function updateProfile({ username, website, avatar_url }) {
- try {
- setLoading(true)
-
- const updates = {
- id: user.id,
- username,
- website,
- avatar_url,
- updated_at: new Date().toISOString(),
- }
-
- let { error } = await supabase.from('profiles').upsert(updates)
- if (error) throw error
- alert('Profile updated!')
- } catch (error) {
- alert('Error updating the data!')
- console.log(error)
- } finally {
- setLoading(false)
- }
- }
-
- return (
-
- )
-}
-```
-
-
-
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```jsx title=components/Account.js
-// Import the new component
-import Avatar from './Avatar'
-
-// ...
-
-return (
-
- {/* Add to the body */}
- {
- setAvatarUrl(url)
- updateProfile({ username, website, avatar_url: url })
- }}
- />
- {/* ... */}
-
-)
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- See the complete [example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management) and deploy it to Vercel.
-- Explore the [pre-built Auth UI for React](/docs/guides/auth/auth-helpers/auth-ui).
-- Explore the [Auth Helpers for Next.js](/docs/guides/auth/auth-helpers/nextjs).
-- Explore the [Supabase Cache Helpers](https://github.com/psteinroe/supabase-cache-helpers).
-- See the [Next.js Subscription Payments Starter](https://github.com/vercel/nextjs-subscription-payments) template on GitHub.
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/with-nuxt-3.mdx b/apps/docs/pages/guides/with-nuxt-3.mdx
deleted file mode 100644
index b4f5af0a1a3..00000000000
--- a/apps/docs/pages/guides/with-nuxt-3.mdx
+++ /dev/null
@@ -1,432 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'with-nuxt-3',
- title: 'Quickstart: Nuxt 3',
- description: 'Learn how to use Supabase in your Nuxt 3 App.',
- sidebar_label: 'Nuxt 3',
-}
-
-
-
-
-
-### Github
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/nuxt3-user-management).
-
-
-
-## Building the App
-
-Let's start building the Vue 3 app from scratch.
-
-### Initialize a Nuxt 3 app
-
-We can use [`nuxi init`](https://v3.nuxtjs.org/getting-started/quick-start/) to create an app called `nuxt-user-management`:
-
-```bash
-npx nuxi init nuxt-user-management
-
-cd nuxt-user-management
-```
-
-Then let's install the only additional dependency: [NuxtSupabase](https://supabase.nuxtjs.org/). We only need to import NuxtSupabase as a dev dependency.
-
-```bash
-npm install @nuxtjs/supabase --save-dev
-```
-
-And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
-
-```bash title=.env
-SUPABASE_URL="YOUR_SUPABASE_URL"
-SUPABASE_KEY="YOUR_SUPABASE_ANON_KEY"
-```
-
-These variables will be exposed on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
-Amazing thing about [NuxtSupabase](https://supabase.nuxtjs.org/) is that setting environment variables is all we need to do in order to start using Supabase.
-No need to initialize Supabase. The library will take care of it automatically.
-
-And one optional step is to update the CSS file `assets/main.css` to make the app look nice.
-You can find the full contents of this file [here](https://github.com/supabase-community/nuxt3-quickstarter/blob/main/assets/main.css).
-
-```typescript title=nuxt.config.ts
-import { defineNuxtConfig } from 'nuxt'
-
-// https://v3.nuxtjs.org/api/configuration/nuxt.config
-export default defineNuxtConfig({
- modules: ['@nuxtjs/supabase'],
- css: ['@/assets/main.css'],
-})
-```
-
-### Set up Auth component
-
-Let's set up a Vue component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
-
-```html title=/components/Auth.vue
-
-
-
-
-
-```
-
-### User state
-
-To access the user information, use the composable [useSupabaseUser](https://supabase.nuxtjs.org/usage/composables/use-supabase-user) provided by the Supabase Nuxt module.
-
-### Account component
-
-After a user is signed in we can allow them to edit their profile details and manage their account.
-Let's create a new component for that called `Account.vue`.
-
-```html title=components/Account.vue
-
-
-
-
-
-```
-
-### Launch!
-
-Now that we have all the components in place, let's update `app.vue`:
-
-```html title=app.vue
-
-
-
-
-
-
-
-
-```
-
-Once that's done, run this in a terminal window:
-
-```bash
-npm run dev
-```
-
-And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app.
-
-
-
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
-
-```html title=components/Avatar.vue
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```html title=components/Account.vue
-
-
-
-
-
-```
-
-That is it! You should now be able to upload a profile photo to Supabase Storage.
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/with-react.mdx b/apps/docs/pages/guides/with-react.mdx
deleted file mode 100644
index 1f7804f15ab..00000000000
--- a/apps/docs/pages/guides/with-react.mdx
+++ /dev/null
@@ -1,403 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'with-react',
- title: 'Quickstart: React',
- description: 'Learn how to use Supabase in your React App.',
- sidebar_label: 'React',
-}
-
-
-
-
-
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/react-user-management).
-
-
-
-## Building the App
-
-Let's start building the React app from scratch.
-
-### Initialize a React app
-
-We can use [Create React App](https://create-react-app.dev/docs/getting-started/) to initialize
-an app called `supabase-react`:
-
-```bash
-npx create-react-app supabase-react
-cd supabase-react
-```
-
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js).
-
-```bash
-npm install @supabase/supabase-js
-```
-
-And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
-
-```bash title=.env
-REACT_APP_SUPABASE_URL=YOUR_SUPABASE_URL
-REACT_APP_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
-```
-
-Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
-on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
-
-```js title=src/supabaseClient.js
-import { createClient } from '@supabase/supabase-js'
-
-const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
-const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY
-
-export const supabase = createClient(supabaseUrl, supabaseAnonKey)
-```
-
-And one optional step is to update the CSS file `src/index.css` to make the app look nice.
-You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/react-user-management/src/index.css).
-
-### Set up a Login component
-
-Let's set up a React component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
-
-```jsx title=src/Auth.js
-import { useState } from 'react'
-import { supabase } from './supabaseClient'
-
-export default function Auth() {
- const [loading, setLoading] = useState(false)
- const [email, setEmail] = useState('')
-
- const handleLogin = async (e) => {
- e.preventDefault()
-
- try {
- setLoading(true)
- const { error } = await supabase.auth.signInWithOtp({ email })
- if (error) throw error
- alert('Check your email for the login link!')
- } catch (error) {
- alert(error.error_description || error.message)
- } finally {
- setLoading(false)
- }
- }
-
- return (
-
- )
-}
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```jsx title=src/Account.js
-// Import the new component
-import Avatar from './Avatar'
-
-// ...
-
-return (
-
- {/* Add to the body */}
- {
- setAvatarUrl(url)
- updateProfile({ username, website, avatar_url: url })
- }}
- />
- {/* ... */}
-
-)
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/with-redwoodjs.mdx b/apps/docs/pages/guides/with-redwoodjs.mdx
deleted file mode 100644
index cae8504a010..00000000000
--- a/apps/docs/pages/guides/with-redwoodjs.mdx
+++ /dev/null
@@ -1,785 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'with-redwoodjs',
- title: 'Quickstart: RedwoodJS',
- description: 'Learn how to use Supabase in your RedwoodJS App.',
- sidebar_label: 'RedwoodJS',
-}
-
-## Intro
-
-For the sake of consistency with the other framework Quickstart examples, we'll build a RedwoodJS a little differently than normal.
-
-We **_won't use_** Prisma to connect to the Supabase Postgres database or [Prisma migrations](https://redwoodjs.com/docs/cli-commands#prisma-migrate) as one typically might in a Redwood app.
-Instead, we'll rely on the Supabase client to do some of the work on the **web** side and use the client again on the **API** side to do data fetching as well.
-
-That means you will want to refrain from running any `yarn rw prisma migrate` commands and also double check your build commands on deployment to ensure Prisma won't reset your database.
-
-
-
-TLDR; Prisma currently doesn't support cross-schema foreign keys, so introspecting the schema fails due to how your Supabase `public` schema references the `auth.users`.
-
-
-
-This example provides the steps to build a simple user management app (from scratch!) using Supabase and [RedwoodJS](https://redwoodjs.com/docs/introduction). It includes:
-
-- Supabase [Database](/docs/guides/database): a Postgres database for storing your user data.
-- Supabase [Auth](/docs/guides/auth): users can sign in with magic links (no passwords, only email).
-- Supabase [Storage](/docs/guides/storage): users can upload a photo.
-- Instant [APIs](/docs/guides/api): APIs will be automatically generated when you create your database tables.
-- [Row Level Security](/docs/guides/auth#row-level-security): data is protected so that individuals can only access their own data.
-
-By the end of this guide you'll have an app which allows users to login and update some basic profile details:
-
-
-
-
-
-Note: For RedwoodJS apps, port will be 8910
-
-
-
-### GitHub
-
-If you get stuck at any point, take a look at [this repo](https://github.com/redwoodjs/redwoodjs-supabase-quickstart).
-
-{/* ## Video demo */}
-
-{/* Coming soon. */}
-
-{/* Use the annotated timeline to step through this tutorial. */}
-
-{/* ## Instant deploy */}
-
-{/* Want to deploy a completed version of this example without following the guide? */}
-
-{/* [](https://vercel.com/new/git/external?repository-url=https%3A%2F%2Fgithub.com%2Fsupabase%2Fsupabase%2Ftree%2Fmaster%2Fexamples%2Freact-user-management&project-name=supabase-user-management&repository-name=supabase-user-management&demo-title=Supabase%20User%20Management&demo-description=An%20example%20web%20app%20using%20Supabase%20and%20Next.js&demo-url=https%3A%2F%2Fsupabase-react-user-management.vercel.app&demo-image=https%3A%2F%2Fi.imgur.com%2FZ3HkQqe.png&integration-ids=oac_jUduyjQgOyzev1fjrW83NYOv&external-id=nextjs-user-management) */}
-
-{/* Clicking this button the application will: */}
-
-{/* - Launch and prepare the Postgres database in Supabase. */}
-{/* - Launch the app in Vercel. */}
-{/* - Fork the example into your own GitHub account. */}
-{/* - Prepare the deployed application with all the necessary environment variables. */}
-
-{/* If you want to do it yourself, let's get started:` */}
-
-## About RedwoodJS
-
-A Redwood application is split into two parts: a frontend and a backend. This is represented as two node projects within a single monorepo.
-
-The frontend project is called **`web`** and the backend project is called **`api`**. For clarity, we will refer to these in prose as **"sides"**, i.e. the "web side" and the "api side".
-They are separate projects because code on the `web side` will end up running in the user's browser while code on the `api side` will run on a server somewhere.
-
-
-
-Important: When this guide refers to "API", that means the Supabase API and when it refers to "api side", that means the RedwoodJS `api side`.
-
-
-
-The **`api side`** is an implementation of a GraphQL API. The business logic is organized into "services" that represent their own internal API and can be called both from external GraphQL requests and other internal services.
-
-The **`web side`** is built with React. Redwood's router makes it simple to map URL paths to React "Page" components (and automatically code-split your app on each route).
-Pages may contain a "Layout" component to wrap content. They also contain "Cells" and regular React components.
-Cells allow you to declaratively manage the lifecycle of a component that fetches and displays data.
-
-
-
-For the sake of consistency with the other framework Quickstart examples, we'll build a RedwoodJS a little differently than normal.
-We **_won't use_** Prisma to connect to the Supabase Postgres database or [Prisma migrations](https://redwoodjs.com/docs/cli-commands#prisma-migrate) as one typically might in a Redwood app.
-Instead, we'll rely on the Supabase client to do some of the work on the **`web`** side and use the client again on the **`api`** side to do data fetching as well.
-
-
-
-## Project set up
-
-Before we start building we're going to set up our Database and API. This is as simple as starting a new Project in Supabase
-and then creating a "schema" inside the database.
-
-
-
-When setting up Supabase, you'll interact with your project dashboard. However, most of the RedwoodJS setup steps will interact with the [Redwood CLI](https://redwoodjs.com/docs/cli-commands) to generate routes, pages, components, and more.
-So be sure to have a terminal at the ready and in your project directory.
-
-
-
-### Create a project
-
-1. Go to [app.supabase.com](https://app.supabase.com).
-1. Click on "New Project".
-1. Enter your project details.
-1. Wait for the new database to launch.
-
-### Set up the database schema
-
-Now we are going to set up the database schema. We can use the "User Management Starter" quickstart in the SQL Editor,
-or you can just copy/paste the SQL from below and run it yourself.
-
-
-
-
-1. Go to the [SQL Editor](https://app.supabase.com/project/_/sql) page in the Dashboard.
-2. Click **User Management Starter**.
-3. Click **Run**.
-
-
-
-
-
-
-```sql
--- Create a table for public "profiles"
-create table profiles (
- id uuid references auth.users not null,
- updated_at timestamp with time zone,
- username text unique,
- avatar_url text,
- website text,
-
- primary key (id),
- unique(username),
- constraint username_length check (char_length(username) >= 3)
-);
-
-alter table profiles enable row level security;
-
-create policy "Public profiles are viewable by everyone."
- on profiles for select
- using ( true );
-
-create policy "Users can insert their own profile."
- on profiles for insert
- with check ( auth.uid() = id );
-
-create policy "Users can update own profile."
- on profiles for update
- using ( auth.uid() = id );
-
--- Set up Realtime!
-begin;
- drop publication if exists supabase_realtime;
- create publication supabase_realtime;
-commit;
-alter publication supabase_realtime add table profiles;
-
--- Set up Storage!
-insert into storage.buckets (id, name)
-values ('avatars', 'avatars');
-
-create policy "Avatar images are publicly accessible."
- on storage.objects for select
- using ( bucket_id = 'avatars' );
-
-create policy "Anyone can upload an avatar."
- on storage.objects for insert
- with check ( bucket_id = 'avatars' );
-
-```
-
-
-
-
-#### Important Note about Prisma and Migrations
-
-
-
-Because this Quick Start does not use Prisma to manage the database schema, seed it, or run migrations, you **need** to take extra care when running some of the typical Redwood CLI commands.
-
-
-
-### Get the API Keys
-
-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 URL as well as the `anon`, `service_role` and `JWT_SECRET` keys from the API settings.
-
-1. Go to the [API Settings](https://app.supabase.com/project/_/settings/api) page in the Dashboard.
-2. Find your API `URL`, `anon`, and `service_role` keys on this page.
-
-
-
-## Building the App
-
-Let's start building the RedwoodJS app from scratch.
-
-
-
-RedwoodJS requires Node.js `>= 14.x <= 16.x` and Yarn `>= 1.15`.
-
-
-
-Make sure you have installed yarn since RedwoodJS relies on it to [manage its packages in workspaces](https://classic.yarnpkg.com/lang/en/docs/workspaces/) for its `web` and `api` "sides".
-
-### Initialize a RedwoodJS app
-
-We can use [Create Redwood App](https://redwoodjs.com/docs/quick-start) command to initialize
-an app called `supabase-redwoodjs`:
-
-```bash
-yarn create redwood-app supabase-redwoodjs
-cd supabase-redwoodjs
-```
-
-While the app is installing, you should see:
-
-```bash
-✔ Creating Redwood app
- ✔ Checking node and yarn compatibility
- ✔ Creating directory 'supabase-redwoodjs'
-✔ Installing packages
- ✔ Running 'yarn install'... (This could take a while)
-✔ Convert TypeScript files to JavaScript
-✔ Generating types
-
-Thanks for trying out Redwood!
-```
-
-Then let's install the only additional dependency [supabase-js](https://github.com/supabase/supabase-js) by running the `setup auth` command:
-
-```bash
-yarn redwood setup auth supabase
-```
-
-When prompted:
-
-> Overwrite existing /api/src/lib/auth.[jt]s?
-
-Say, **yes** and it will setup the Supabase client in your app and also provide hooks used with Supabase authentication.
-
-```bash
-✔ Generating auth lib...
- ✔ Successfully wrote file `./api/src/lib/auth.js`
- ✔ Adding auth config to web...
- ✔ Adding auth config to GraphQL API...
- ✔ Adding required web packages...
- ✔ Installing packages...
- ✔ One more thing...
-
- You will need to add your Supabase URL (SUPABASE_URL), public API KEY,
- and JWT SECRET (SUPABASE_KEY, and SUPABASE_JWT_SECRET) to your .env file.
-```
-
-Next, we want to save the environment variables in a `.env`.
-We need the `API URL` as well as the `anon` and `jwt_secret` keys that you copied [earlier](#get-the-api-keys).
-
-```bash title=.env
-SUPABASE_URL=YOUR_SUPABASE_URL
-SUPABASE_KEY=YOUR_SUPABASE_ANON_KEY
-SUPABASE_JWT_SECRET=YOUR_SUPABASE_JWT_SECRET
-```
-
-And finally, you will also need to save **just** the `web side` environment variables to the `redwood.toml`.
-
-```bash title=redwood.toml
-[web]
- title = "Supabase Redwood Quickstart"
- port = 8910
- apiProxyPath = "/.redwood/functions"
- includeEnvironmentVariables = ["SUPABASE_URL", "SUPABASE_KEY"]
-[api]
- port = 8911
-[browser]
- open = true
-```
-
-These variables will be exposed on the browser, and that's completely fine.
-They allow your web app to initialize the Supabase client with your public anon key
-since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
-
-You'll see these being used to configure your Supabase client in `web/src/App.js`:
-
-```js title=web/src/App.js
-// ... Redwood imports
-import { AuthProvider } from '@redwoodjs/auth'
-import { createClient } from '@supabase/supabase-js'
-
-// ...
-
-const supabase = createClient(process.env.SUPABASE_URL, process.env.SUPABASE_KEY)
-
-const App = () => (
-
-
-
-
-
-
-
-
-
-)
-
-export default App
-```
-
-And one optional step is to update the CSS file `web/src/index.css` to make the app look nice.
-You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/react-user-management/src/index.css).
-
-### Start RedwoodJS and your first Page
-
-Let's test our setup at the moment by starting up the app:
-
-```bash
-yarn rw dev
-```
-
-
-
-Note: You can also use the alias `rw` for `redwood`, as in `yarn rw` to run Redwood CLI commands
-
-
-
-You should see a "Welcome to RedwoodJS" page and a message about not having any pages yet.
-
-So, let's create a "home" page:
-
-```bash
-yarn rw generate page home /
-
-✔ Generating page files...
- ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.stories.js`
- ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.test.js`
- ✔ Successfully wrote file `./web/src/pages/HomePage/HomePage.js`
-✔ Updating routes file...
-✔ Generating types ...
-```
-
-
-
-Note: the slash `/` is important here as it creates a root level route.
-
-
-
-You can stop the `dev` server if you want; to see your changes, just be sure to run `yarn rw dev` again.
-
-You should see the `Home` page route in `web/src/Routes.js`:
-
-```bash title=web/src/Routes.js
-import { Router, Route } from '@redwoodjs/router'
-
-const Routes = () => {
- return (
-
-
-
-
- )
-}
-
-export default Routes
-```
-
-### Set up a Login component
-
-Let's set up a Redwood component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
-
-```bash
-yarn rw g component auth
-
- ✔ Generating component files...
- ✔ Successfully wrote file `./web/src/components/Auth/Auth.test.js`
- ✔ Successfully wrote file `./web/src/components/Auth/Auth.stories.js`
- ✔ Successfully wrote file `./web/src/components/Auth/Auth.js`
-
-```
-
-Now, update the `Auth.js` component to contain:
-
-```jsx title=/web/src/components/Auth/Auth.js
-import { useState } from 'react'
-import { useAuth } from '@redwoodjs/auth'
-
-const Auth = () => {
- const { logIn } = useAuth()
- const [loading, setLoading] = useState(false)
- const [email, setEmail] = useState('')
-
- const handleLogin = async (email) => {
- try {
- setLoading(true)
- const { error } = await logIn({ email })
- if (error) throw error
- alert('Check your email for the login link!')
- } catch (error) {
- alert(error.error_description || error.message)
- } finally {
- setLoading(false)
- }
- }
-
- return (
-
-
-
Supabase + RedwoodJS
-
Sign in via magic link with your email below
-
- setEmail(e.target.value)}
- />
-
-
-
-
-
-
- )
-}
-
-export default Auth
-```
-
-### Set up an Account component
-
-After a user is signed in we can allow them to edit their profile details and manage their account.
-
-Let's create a new component for that called `Account.js`.
-
-```bash
-yarn rw g component account
-
- ✔ Generating component files...
- ✔ Successfully wrote file `./web/src/components/Account/Account.test.js`
- ✔ Successfully wrote file `./web/src/components/Account/Account.stories.js`
- ✔ Successfully wrote file `./web/src/components/Account/Account.js`
-```
-
-And then update the file to contain:
-
-```jsx title=web/src/components/Account/Account.js
-import { useState, useEffect } from 'react'
-import { useAuth } from '@redwoodjs/auth'
-
-const Account = () => {
- const { client: supabase, currentUser, logOut } = useAuth()
- const [loading, setLoading] = useState(true)
- const [username, setUsername] = useState(null)
- const [website, setWebsite] = useState(null)
- const [avatar_url, setAvatarUrl] = useState(null)
-
- useEffect(() => {
- getProfile()
- }, [supabase.auth.session])
-
- async function getProfile() {
- try {
- setLoading(true)
- const user = supabase.auth.user()
-
- let { data, error, status } = await supabase
- .from('profiles')
- .select(`username, website, avatar_url`)
- .eq('id', user.id)
- .single()
-
- if (error && status !== 406) {
- throw error
- }
-
- if (data) {
- setUsername(data.username)
- setWebsite(data.website)
- setAvatarUrl(data.avatar_url)
- }
- } catch (error) {
- alert(error.message)
- } finally {
- setLoading(false)
- }
- }
-
- async function updateProfile({ username, website, avatar_url }) {
- try {
- setLoading(true)
- const user = supabase.auth.user()
-
- const updates = {
- id: user.id,
- username,
- website,
- avatar_url,
- updated_at: new Date(),
- }
-
- let { error } = await supabase.from('profiles').upsert(updates, {
- returning: 'minimal', // Don't return the value after inserting
- })
-
- if (error) {
- throw error
- }
-
- alert('Updated profile!')
- } catch (error) {
- alert(error.message)
- } finally {
- setLoading(false)
- }
- }
-
- return (
-
-
-
Supabase + RedwoodJS
-
Your profile
-
-
-
-
-
-
-
- setUsername(e.target.value)}
- />
-
-
-
- setWebsite(e.target.value)}
- />
-
-
-
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default Account
-```
-
-
-
-Note: You'll see the use of `useAuth()` several times in the quickstart. Redwood's `useAuth` hook provides convenient ways to access
-logIn, logOut, currentUser, and access the `supabase` authenticate client. We'll use it to get an instance
-of the supabase client to interact with your API.
-
-
-
-### Update Home Page
-
-Now that we have all the components in place, let's update your `HomePage` page to use them:
-
-```jsx title=web/src/pages/HomePage/HomePage.js
-import { useAuth } from '@redwoodjs/auth'
-import { MetaTags } from '@redwoodjs/web'
-
-import Account from 'src/components/Account'
-import Auth from 'src/components/Auth'
-
-const HomePage = () => {
- const { isAuthenticated } = useAuth()
-
- return (
- <>
-
- {!isAuthenticated ? : }
- >
- )
-}
-
-export default HomePage
-```
-
-> What we're doing here is showing the sign in form if you aren't logged in and your account profile if you are.
-
-### Launch!
-
-Once that's done, run this in a terminal window to launch the `dev` server:
-
-```bash
-yarn rw dev
-```
-
-And then open the browser to [localhost:8910](http://localhost:8910) and you should see the completed app.
-
-
-
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
-
-```bash
-yarn rw g component avatar
- ✔ Generating component files...
- ✔ Successfully wrote file `./web/src/components/Avatar/Avatar.test.js`
- ✔ Successfully wrote file `./web/src/components/Avatar/Avatar.stories.js`
- ✔ Successfully wrote file `./web/src/components/Avatar/Avatar.js`
-```
-
-Now, update your Avatar component to contain the following widget:
-
-```jsx title=web/src/components/Avatar/Avatar.js
-import { useEffect, useState } from 'react'
-import { useAuth } from '@redwoodjs/auth'
-
-const Avatar = ({ url, size, onUpload }) => {
- const { client: supabase } = useAuth()
-
- const [avatarUrl, setAvatarUrl] = useState(null)
- const [uploading, setUploading] = useState(false)
-
- useEffect(() => {
- if (url) downloadImage(url)
- }, [url])
-
- async function downloadImage(path) {
- try {
- const { data, error } = await supabase.storage.from('avatars').download(path)
- if (error) {
- throw error
- }
- const url = URL.createObjectURL(data)
- setAvatarUrl(url)
- } catch (error) {
- console.log('Error downloading image: ', error.message)
- }
- }
-
- async function uploadAvatar(event) {
- try {
- setUploading(true)
-
- if (!event.target.files || event.target.files.length === 0) {
- throw new Error('You must select an image to upload.')
- }
-
- const file = event.target.files[0]
- const fileExt = file.name.split('.').pop()
- const fileName = `${Math.random()}.${fileExt}`
- const filePath = `${fileName}`
-
- let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-
- if (uploadError) {
- throw uploadError
- }
-
- onUpload(filePath)
- } catch (error) {
- alert(error.message)
- } finally {
- setUploading(false)
- }
- }
-
- return (
-
- {avatarUrl ? (
-
- ) : (
-
- )}
-
-
-
-
-
- )
-}
-
-export default Avatar
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account component:
-
-```jsx title=web/src/components/Account/Account.js
-// Import the new component
-import Avatar from 'src/components/Avatar'
-
-// ...
-
-return (
-
- {/* Add to the body */}
- {
- setAvatarUrl(url)
- updateProfile({ username, website, avatar_url: url })
- }}
- />
- {/* ... */}
-
-)
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-- Learn more about [RedwoodJS](https://redwoodjs.com)
-- Visit the [RedwoodJS Discourse Community](https://community.redwoodjs.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/with-solidjs.mdx b/apps/docs/pages/guides/with-solidjs.mdx
deleted file mode 100644
index f5a65665f3f..00000000000
--- a/apps/docs/pages/guides/with-solidjs.mdx
+++ /dev/null
@@ -1,427 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'with-solidjs',
- title: 'Quickstart: SolidJS',
- description: 'Learn how to use Supabase in your SolidJS App.',
- sidebar_label: 'SolidJS',
-}
-
-
-
-
-
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/solid-user-management).
-
-
-
-## Building the App
-
-Let's start building the SolidJS app from scratch.
-
-### Initialize a SolidJS app
-
-We can use [Degit](https://github.com/Rich-Harris/degit) to initialize an app called `supabase-solid`:
-
-```bash
-npx degit solidjs/templates/ts supabase-solid
-cd supabase-solid
-```
-
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
-
-```bash
-npm install @supabase/supabase-js
-```
-
-And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
-
-```bash title=.env
-VITE_SUPABASE_URL=YOUR_SUPABASE_URL
-VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
-```
-
-Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
-on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
-
-```js title=src/supabaseClient.jsx
-import { createClient } from '@supabase/supabase-js'
-
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
-
-export const supabase = createClient(supabaseUrl, supabaseAnonKey)
-```
-
-And one optional step is to update the CSS file `src/index.css` to make the app look nice.
-You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/solid-user-management/src/index.css).
-
-### Set up a Login component
-
-Let's set up a SolidJS component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
-
-```jsx title=src/Auth.tsx
-import { createSignal } from 'solid-js'
-import { supabase } from './supabaseClient'
-
-export default function Auth() {
- const [loading, setLoading] = createSignal(false)
- const [email, setEmail] = createSignal('')
-
- const handleLogin = async (e: SubmitEvent) => {
- e.preventDefault()
-
- try {
- setLoading(true)
- const { error } = await supabase.auth.signInWithOtp({ email: email() })
- if (error) throw error
- alert('Check your email for the login link!')
- } catch (error) {
- if (error instanceof Error) {
- alert(error.message)
- }
- } finally {
- setLoading(false)
- }
- }
-
- return (
-
- )
-}
-
-export default Account
-```
-
-### Launch!
-
-Now that we have all the components in place, let's update `App.tsx`:
-
-```jsx title=src/App.tsx
-import { Component, createEffect, createSignal } from 'solid-js'
-import { supabase } from './supabaseClient'
-import { AuthSession } from '@supabase/supabase-js'
-import Account from './Account'
-import Auth from './Auth'
-
-const App: Component = () => {
- const [session, setSession] = createSignal(null)
-
- createEffect(() => {
- supabase.auth.getSession().then(({ data: { session } }) => {
- setSession(session)
- })
-
- supabase.auth.onAuthStateChange((_event, session) => {
- setSession(session)
- })
- })
-
- return (
-
- {!session() ? : }
-
- )
-}
-
-export default App
-```
-
-Once that's done, run this in a terminal window:
-
-```bash
-npm start
-```
-
-And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app.
-
-
-
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
-
-```jsx title=src/Avatar.tsx
-import { Component, createEffect, createSignal, JSX } from 'solid-js'
-import { supabase } from './supabaseClient'
-
-interface Props {
- size: number
- url: string | null
- onUpload: (event: Event, filePath: string) => void
-}
-
-const Avatar: Component = (props) => {
- const [avatarUrl, setAvatarUrl] = createSignal(null)
- const [uploading, setUploading] = createSignal(false)
-
- createEffect(() => {
- if (props.url) downloadImage(props.url)
- })
-
- const downloadImage = async (path: string) => {
- try {
- const { data, error } = await supabase.storage.from('avatars').download(path)
- if (error) {
- throw error
- }
- const url = URL.createObjectURL(data)
- setAvatarUrl(url)
- } catch (error) {
- if (error instanceof Error) {
- console.log('Error downloading image: ', error.message)
- }
- }
- }
-
- const uploadAvatar: JSX.EventHandler = async (event) => {
- try {
- setUploading(true)
-
- const target = event.currentTarget
- if (!target?.files || target.files.length === 0) {
- throw new Error('You must select an image to upload.')
- }
-
- const file = target.files[0]
- const fileExt = file.name.split('.').pop()
- const fileName = `${Math.random()}.${fileExt}`
- const filePath = `${fileName}`
-
- let { error: uploadError } = await supabase.storage.from('avatars').upload(filePath, file)
-
- if (uploadError) {
- throw uploadError
- }
-
- props.onUpload(event, filePath)
- } catch (error) {
- if (error instanceof Error) {
- alert(error.message)
- }
- } finally {
- setUploading(false)
- }
- }
-
- return (
-
- {avatarUrl() ? (
-
- ) : (
-
- )}
-
-
-
-
-
-
-
- )
-}
-
-export default Avatar
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```jsx title=src/Account.tsx
-// Import the new component
-import Avatar from './Avatar'
-
-// ...
-
-return (
-
-)
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/with-svelte.mdx b/apps/docs/pages/guides/with-svelte.mdx
deleted file mode 100644
index 69cdea17b87..00000000000
--- a/apps/docs/pages/guides/with-svelte.mdx
+++ /dev/null
@@ -1,380 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'with-svelte',
- title: 'Quickstart: Svelte',
- description: 'Learn how to use Supabase in your Svelte App.',
- sidebar_label: 'Svelte',
-}
-
-
-
-
-
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/svelte-user-management).
-
-
-
-## Building the App
-
-Let's start building the Svelte app from scratch.
-
-### Initialize a Svelte app
-
-We can use the Vite Svelte TypeScript Template to initialize an app called `supabase-svelte`:
-
-```bash
-npm create vite@latest supabase-svelte -- --template svelte-ts
-cd supabase-svelte
-npm install
-```
-
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
-
-```bash
-npm install @supabase/supabase-js
-```
-
-And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
-
-```bash title=.env
-VITE_SUPABASE_URL=YOUR_SUPABASE_URL
-VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
-```
-
-Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
-on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
-
-```js title=src/supabaseClient.ts
-import { createClient } from '@supabase/supabase-js'
-
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
-
-export const supabase = createClient(supabaseUrl, supabaseAnonKey)
-```
-
-And one optional step is to update the CSS file `src/app.css` to make the app look nice.
-You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/svelte-user-management/src/app.css).
-
-### Set up a Login component
-
-Let's set up a Svelte component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
-
-```html title=src/lib/Auth.svelte
-
-
-
-
-
Supabase + Svelte
-
Sign in via magic link with your email below
-
-
-
-```
-
-### Account page
-
-After a user is signed in we can allow them to edit their profile details and manage their account.
-Let's create a new component for that called `Account.svelte`.
-
-```html title=src/lib/Account.svelte
-
-
-
-```
-
-### Launch!
-
-Now that we have all the components in place, let's update `App.svelte`:
-
-```html title=src/App.svelte
-
-
-
- {#if !session}
-
- {:else}
-
- {/if}
-
-```
-
-Once that's done, run this in a terminal window:
-
-```bash
-npm run dev
-```
-
-And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app.
-
-> ⚠️ WARNING: Svelte uses Vite and the default port is `5173`, Supabase uses `port 3000`. To change the redirection port for supabase go to: `Authentication > Settings` and change the `Site Url` to `localhost:5173`
-
-
-
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
-
-```html title=src/lib/Avatar.svelte
-
-
-
- {#if avatarUrl} {:else}
-
- {/if}
-
-
-
-
-
-
-
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```html title=src/lib/Account.svelte
-
-
-
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/with-sveltekit.mdx b/apps/docs/pages/guides/with-sveltekit.mdx
deleted file mode 100644
index d8af92de291..00000000000
--- a/apps/docs/pages/guides/with-sveltekit.mdx
+++ /dev/null
@@ -1,446 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'with-sveltekit',
- title: 'Quickstart: SvelteKit',
- description: 'Learn how to use Supabase in your SvelteKit App.',
- sidebar_label: 'SvelteKit',
-}
-
-
-
-
-
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/sveltekit-user-management).
-
-
-
-## Building the App
-
-Let's start building the Svelte app from scratch.
-
-### Initialize a Svelte app
-
-We can use the [SvelteKit Skeleton Project](https://kit.svelte.dev/docs) to initialize
-an app called `supabase-sveltekit` (for this tutorial you do not need TypeScript, ESLint, Prettier, or Playwright):
-
-```bash
-npm init svelte@next supabase-sveltekit
-cd supabase-sveltekit
-npm install
-```
-
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
-
-```bash
-npm install @supabase/supabase-js
-```
-
-And finally we want to save the environment variables in a `.env`.
-All we need are the `SUPABASE_URL` and the `SUPABASE_KEY` key that you copied [earlier](#get-the-api-keys).
-
-```bash title=.env
-PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"
-PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"
-```
-
-Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
-on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
-
-```js title=src/lib/supabaseClient.ts
-import { createClient } from '@supabase/auth-helpers-sveltekit'
-import { env } from '$env/dynamic/public'
-
-export const supabase = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)
-```
-
-And one optional step is to update the CSS file `public/global.css` to make the app look nice.
-You can find the full contents of this file [here](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/svelte-user-management/src/app.css).
-
-### Supabase Auth Helpers
-
-SvelteKit is a highly versatile framework offering pre-rendering at build time (SSG), server-side rendering at request time (SSR), API routes, and more.
-
-It can be challenging to authenticate your users in all these different environments, that's why we've created the Supabase Auth Helpers to make user management and data fetching within SvelteKit as easy as possible.
-
-Install the auth helpers for SvelteKit:
-
-```bash
-npm install @supabase/auth-helpers-sveltekit
-```
-
-Update your `src/routes/+layout.svelte`:
-
-```html title=src/routes/+layout.svelte
-
-
-
-
-
-```
-
-Create a new `src/routes/+layout.ts` file to handle the session on the client-side.
-
-```ts title=src/routes/+layout.ts
-import type { LayoutLoad } from './$types'
-import { getSupabase } from '@supabase/auth-helpers-sveltekit'
-
-export const load: LayoutLoad = async (event) => {
- const { session } = await getSupabase(event)
- return { session }
-}
-```
-
-Create a new `src/routes/+layout.server.ts` file to handle the session on the server-side.
-
-```ts title=src/routes/+layout.server.ts
-import type { LayoutServerLoad } from './$types'
-import { getServerSession } from '@supabase/auth-helpers-sveltekit'
-
-export const load: LayoutServerLoad = async (event) => {
- return {
- session: await getServerSession(event),
- }
-}
-```
-
-Be sure to create `src/hooks.client.ts` and `src/hooks.server.ts` in order to get the auth helper started on the client and server-side.
-
-```ts title=src/hooks.client.ts
-import '$lib/supabaseClient'
-```
-
-```ts title=src/hooks.server.ts
-import '$lib/supabaseClient'
-```
-
-### Set up a Login component
-
-Let's set up a Svelte component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
-
-```html title=src/routes/Auth.svelte
-
-
-
-```
-
-### Account component
-
-After a user is signed in, they need to be able to edit their profile details and manage their account.
-Create a new `Account.svelte` component to handle this functionality.
-
-```html title=src/routes/Account.svelte
-
-
-
-```
-
-### Launch!
-
-Now that we have all the components in place, let's update `src/routes/+page.svelte`:
-
-```html title=src/routes/+page.svelte
-
-
-
- Supabase + SvelteKit
-
-
-
-{#if !$page.data.session}
-
-{:else}
-
-{/if}
-```
-
-Once that's done, run this in a terminal window:
-
-```bash
-npm run dev
-```
-
-And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app.
-
-
-
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
-
-```html title=src/routes/Avatar.svelte
-
-
-
- {#if avatarUrl} {:else}
-
- {/if}
-
-
-
-
-
-
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```html title=src/routes/Account.svelte
-
-
-
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/guides/with-vue-3.mdx b/apps/docs/pages/guides/with-vue-3.mdx
deleted file mode 100644
index a1ec84a8c92..00000000000
--- a/apps/docs/pages/guides/with-vue-3.mdx
+++ /dev/null
@@ -1,391 +0,0 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-
-export const meta = {
- id: 'with-vue-3',
- title: 'Quickstart: Vue 3',
- description: 'Learn how to use Supabase in your Vue 3 App.',
- sidebar_label: 'Vue 3',
-}
-
-
-
-
-
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/vue3-user-management).
-
-
-
-## Building the App
-
-Let's start building the Vue 3 app from scratch.
-
-### Initialize a Vue 3 app
-
-We can quickly use [Vite with Vue 3 Template](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) to initialize
-an app called `supabase-vue-3`:
-
-```bash
-# npm 6.x
-npm create vite@latest supabase-vue-3 --template vue
-
-# npm 7+, extra double-dash is needed:
-npm create vite@latest supabase-vue-3 -- --template vue
-
-cd supabase-vue-3
-```
-
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
-
-```bash
-npm install @supabase/supabase-js
-```
-
-And finally we want to save the environment variables in a `.env`.
-All we need are the API URL and the `anon` key that you copied [earlier](#get-the-api-keys).
-
-```bash title=.env
-VITE_SUPABASE_URL=YOUR_SUPABASE_URL
-VITE_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
-```
-
-Now that we have the API credentials in place, let's create a helper file to initialize the Supabase client. These variables will be exposed
-on the browser, and that's completely fine since we have [Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
-
-```js title=src/supabase.js
-import { createClient } from '@supabase/supabase-js'
-
-const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
-const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
-
-export const supabase = createClient(supabaseUrl, supabaseAnonKey)
-```
-
-Optionally, update [src/style.css](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/vue3-user-management/src/style.css) to style the app.
-
-### Set up a Login component
-
-Let's set up a Vue component to manage logins and sign ups. We'll use Magic Links, so users can sign in with their email without using passwords.
-
-```html title=/src/components/Auth.vue
-
-
-
-
-
-```
-
-### Account page
-
-After a user is signed in we can allow them to edit their profile details and manage their account.
-Let's create a new component for that called `Account.vue`.
-
-```html title=src/components/Account.vue
-
-
-
-
-
-```
-
-### Launch!
-
-Now that we have all the components in place, let's update `App.vue`:
-
-```html title=src/App.vue
-
-
-
-
-
-
-
-
-```
-
-Once that's done, run this in a terminal window:
-
-```bash
-npm run dev
-```
-
-And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app.
-
-
-
-## Bonus: Profile photos
-
-Every Supabase project is configured with [Storage](/docs/guides/storage) for managing large files like photos and videos.
-
-### Create an upload widget
-
-Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
-
-```html title=src/components/Avatar.vue
-
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-### Add the new widget
-
-And then we can add the widget to the Account page:
-
-```html title=src/components/Account.vue
-
-
-
-
-
-```
-
-## Next steps
-
-At this stage you have a fully functional application!
-
-- Got a question? [Ask here](https://github.com/supabase/supabase/discussions).
-- Sign in: [app.supabase.com](https://app.supabase.com)
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/index.mdx b/apps/docs/pages/index.mdx
index 19433105df3..5a7e2f17b28 100644
--- a/apps/docs/pages/index.mdx
+++ b/apps/docs/pages/index.mdx
@@ -1,101 +1,333 @@
-import Layout from '~/layouts/DefaultGuideLayout'
-import NewContent from '~/pages/new/index.mdx'
+import Layout from '~/layouts/DefaultLayout'
+import Link from 'next/link'
+import { GlassPanel, IconPanel, Button, IconChevronRight } from 'ui'
export const meta = {
- id: 'introduction',
- title: 'Introduction',
- description: 'Introduction to Supabase',
- hide_table_of_contents: false,
+ title: 'Supabase Docs',
+ description:
+ 'Supabase is an open source Firebase alternative providing all the backend features you need to build a product.',
+ subtitle: 'Supabase Developer Documentation and API Reference',
}
-export function CheckDoc() {
- if (process.env.NEXT_PUBLIC_NEW_DOCS === 'true') return NewContent
-}
+
+ Supabase is an open source Firebase alternative providing all the backend features you need to
+ build a product. [Learn more](/docs/architecture) about Supabase, start with the
+ [tutorials](/docs/guides/getting-started#tutorials), or dive straight into the different products
+ and APIs.
+
-Supabase is an open source Firebase alternative providing all the backend features you need to build a product.
-You can use it completely, or just the features you need.
+{/* start container */}
-[Start a project](https://app.supabase.com) with the hosted platform or learn how to [host Supabase](/docs/guides/hosting/overview) yourself.
+
-## Learn about features
+
+
+
+
+
+
Getting Started
+
+ Discover how to set up a database to an app making queries in just a few minutes.
+
+
+
+export const products = [
+ {
+ title: 'Database',
+ icon: '/docs/img/icons/menu/database',
+ hasLightIcon: true,
+ href: '/guides/database',
+ description:
+ 'Supabase provides a full Postgres database for every project with Realtime functionality, database backups, extensions, and more.',
+ span: 'col-span-12 md:col-span-6',
+ },
+ {
+ title: 'Auth',
+ icon: '/docs/img/icons/menu/auth',
+ hasLightIcon: true,
+ href: '/guides/auth/overview',
+ description:
+ 'Add and manage email and password, passwordless, OAuth, and mobile logins to your project through a suite of identity providers and APIs.',
+ span: 'col-span-12 md:col-span-6',
+ },
+ {
+ title: 'Storage',
+ icon: '/docs/img/icons/menu/storage',
+ hasLightIcon: true,
+ href: '/guides/storage',
+ description:
+ 'Store, organize, transform, and serve large files—fully integrated with your Postgres database with Row Level Security access policies.',
+ },
+ {
+ title: 'Realtime',
+ icon: '/docs/img/icons/menu/realtime',
+ hasLightIcon: true,
+ href: '/guides/realtime',
+ description:
+ 'Listen to database changes, store and sync user states across clients, broadcast data to clients subscribed to a channel, and more.',
+ },
+ {
+ title: 'Edge Functions',
+ icon: '/docs/img/icons/menu/functions',
+ hasLightIcon: true,
+ href: '/guides/functions',
+ description:
+ 'Globally distributed, server-side functions to execute your code closest to your users for the lowest latency.',
+ },
+]
+
+export const apis = [
+ {
+ title: 'JavaScript Client Library',
+ icon: '/docs/img/icons/menu/reference-javascript',
+ hasLightIcon: true,
+ href: 'reference/javascript/introduction',
+ description: 'Official client libraries for JavaScript and TypeScript.',
+ span: 'col-span-12 md:col-span-6',
+ },
+ {
+ title: 'Flutter Client Library',
+ icon: '/docs/img/icons/menu/reference-dart',
+ hasLightIcon: true,
+ href: 'reference/dart/introduction',
+ description: 'Official client libraries for Flutter and Dart.',
+ span: 'col-span-12 md:col-span-6',
+ },
+ {
+ title: 'Management API',
+ icon: '/docs/img/icons/menu/reference-api',
+ hasLightIcon: true,
+ href: 'reference/api/introduction',
+ description: 'Manage your Supabase projects and organizations programmatically.',
+ span: 'col-span-12 md:col-span-6',
+ },
+ {
+ title: 'Supabase CLI',
+ icon: '/docs/img/icons/menu/reference-api',
+ hasLightIcon: true,
+ href: 'reference/cli/introduction',
+ description:
+ 'Use the CLI to develop your project locally, manage database migrations, and deploy to the Supabase Platform or self-host.',
+ span: 'col-span-12 md:col-span-6',
+ },
+ {
+ title: 'Self-Hosting Auth',
+ icon: '/docs/img/icons/menu/reference-auth',
+ hasLightIcon: true,
+ href: 'reference/self-hosting-auth/introduction',
+ description: 'Self-host your own Auth server.',
+ },
+ {
+ title: 'Self-Hosting Storage',
+ icon: '/docs/img/icons/menu/reference-storage',
+ hasLightIcon: true,
+ href: 'reference/self-hosting-storage/introduction',
+ description: 'Self-host your own Storage server.',
+ },
+ {
+ title: 'Self-Hosting Realtime',
+ icon: '/docs/img/icons/menu/reference-realtime',
+ hasLightIcon: true,
+ href: 'reference/self-hosting-realtime/introduction',
+ description: 'Self-host your own Realtime server.',
+ },
+]
+
+export const platform = [
+ {
+ // header: '/docs/img/cards/sample-card-header-3.svg',
+ title: 'Platform Guides',
+ icon: '/docs/img/icons/menu/platform',
+ hasLightIcon: true,
+ href: 'guides/platform',
+ description:
+ 'Learn more about the tools and services powering the Supabase Platform, available add-ons, and how to customize the platform for your needs.',
+ },
+ {
+ // header: '/docs/img/cards/sample-card-header-2.svg',
+ title: 'Resources',
+ icon: '/docs/img/icons/menu/resources',
+ hasLightIcon: true,
+ href: 'guides/resources',
+ description: 'View examples, curated content from the community, migration guides, and more.',
+ },
+ {
+ title: 'Self-Hosting Supabase',
+ icon: '/docs/img/icons/menu/platform',
+ hasLightIcon: true,
+ href: 'guides/self-hosting',
+ description: 'Learn how to self-host Supabase and deploy to your own infrastructure.',
+ },
+ {
+ // header: '/docs/img/cards/sample-card-header-2.svg',
+ title: 'Integrations',
+ icon: '/docs/img/icons/menu/integrations',
+ hasLightIcon: true,
+ href: 'guides/integrations',
+ description: 'Explore a variety of integrations from Supabase partners.',
+ },
+]
+
+export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/new/auth.mdx b/apps/docs/pages/new/auth.mdx
index f76a8b46bda..5228f5129da 100644
--- a/apps/docs/pages/new/auth.mdx
+++ b/apps/docs/pages/new/auth.mdx
@@ -59,10 +59,10 @@ export const topArticles = [
description: 'Learn how to add an email and password login flow to your platform.',
},
{
- title: 'Passwordless Login',
+ title: 'Phone Login',
header: '/docs/img/cards/sample-card-header-4.svg',
- href: '/guides/auth/passwordless-login',
- description: 'Learn how to add a login flow so your users can access your platform through SMS or without a password.',
+ href: '/guides/auth/phone-login',
+ description: 'Learn how to add a login flow so your users can access your platform through one-time passwords via SMS.',
},
{
title: 'Social Login',
diff --git a/apps/docs/pages/new/auth/auth-login.mdx b/apps/docs/pages/new/auth/auth-login.mdx
deleted file mode 100644
index f545f41ecfc..00000000000
--- a/apps/docs/pages/new/auth/auth-login.mdx
+++ /dev/null
@@ -1,25 +0,0 @@
-import Layout from '~/layouts/tutorials/TutorialLayout'
-import Link from 'next/link'
-import { GlassPanel } from 'ui'
-
-export const meta = {
- title: 'Auth login',
-}
-
-## Learn how to use Supabase Auth to handle authentication and authorization of your users blah blah i am test text
-
-Auth0 Universal Login defines your login flow, which is the key feature of an Authorization Server.
-Each time a user needs to prove their identity, your applications redirect to Universal Login and Auth0 will do what is needed to guarantee the user's identity.
-
-By choosing Universal Login, you don't have to do any integration work to handle the various flavors of authentication. You can start off using a simple username and password.
-You can also add other features such as social login and multi-factor authentication (MFA). All of this is dynamic and adjustable in real-time without requiring application-level changes because all functionality is driven by the web pages served by the centralized Authentication Server.
-Your application will benefit from any improvements Auth0 makes in the login flow without the need for you to change your code.
-
-Create a consistent, branded login experience by customizing the login page appearance and behavior from the Auth0 Dashboard including the logo and colors.
-For more advanced use cases, you can change the code of each page.
-
-To learn more about the differences between Universal Login and embedded login, read Centralized Universal Login vs. Embedded Login.
-
-export const Page = ({ children }) =>
-
-export default Page
diff --git a/apps/docs/pages/new/index.mdx b/apps/docs/pages/new/index.mdx
deleted file mode 100644
index b17f706beb3..00000000000
--- a/apps/docs/pages/new/index.mdx
+++ /dev/null
@@ -1,321 +0,0 @@
-import Layout from '~/layouts/DefaultLayout'
-import Link from 'next/link'
-import { GlassPanel, IconPanel, Button, IconChevronRight } from 'ui'
-
-export const meta = {
- title: 'Supabase Docs',
- description:
- 'Supabase is an open source Firebase alternative providing all the backend features you need to build a product.',
- subtitle: 'Supabase Developer Documentation and API Reference',
-}
-
-
- Supabase is an open source Firebase alternative providing all the backend features you need to
- build a product. Choose a quickstart for an overview or dive straight into the different products
- and APIs.
-
-
-{/* start container */}
-
-
-
-
-
-
-
-
-
Getting Started
-
- Discover how to set up a database to an app making queries in just a few minutes.
-
-