diff --git a/.github/workflows/avoid-typos.yml b/.github/workflows/avoid-typos.yml
index cd8d982f4aa..1cbe64238ac 100644
--- a/.github/workflows/avoid-typos.yml
+++ b/.github/workflows/avoid-typos.yml
@@ -9,7 +9,7 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Check out code.
- uses: actions/checkout@v1
+ uses: actions/checkout@v3
- name: misspell
uses: reviewdog/action-misspell@v1
with:
diff --git a/.github/workflows/integration-tests.yml b/.github/workflows/integration-tests.yml
deleted file mode 100644
index 0c9a3c46ebd..00000000000
--- a/.github/workflows/integration-tests.yml
+++ /dev/null
@@ -1,92 +0,0 @@
-name: Tests
-
-# Controls when the workflow will run
-on:
- schedule:
- - cron: '0 4/6 * * *'
- workflow_dispatch:
-
-# A workflow run is made up of one or more jobs that can run sequentially or in parallel
-jobs:
- autotests:
- name: Run tests and generate Allure Report
- strategy:
- matrix:
- node: ['14']
-
- runs-on: ubuntu-latest
- defaults:
- run:
- working-directory: ./tests
-
- steps:
- - uses: actions/checkout@v2
-
- - name: Set up JDK
- uses: actions/setup-java@v1
- with:
- java-version: 1.8
-
- - name: Set up Node
- uses: actions/setup-node@v1
- with:
- node-version: ${{ matrix.node }}
-
- - name: Install dependencies
- run: npm ci
-
- - uses: supabase/setup-cli@v1
- - run: supabase start
-
- - name: Run Test
- run: npm run test:local
- env:
- SUPABASE_DB_PORT: 54322
- SUPABASE_DB_PASS: postgres
- SUPABASE_DB_HOST: localhost
- SUPABASE_GOTRUE: http://localhost:54321
- SUPABASE_URL: http://localhost:54321
- SUPABASE_KEY_ANON: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6ImFub24ifQ.625_WdcF3KHqz5amU0x2X5WWHP-OEs_4qj0ssLNHzTs
- SUPABASE_KEY_ADMIN: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZS1kZW1vIiwicm9sZSI6InNlcnZpY2Vfcm9sZSJ9.vI9obAHOGyVVKa3pD--kJlyxp-Z2zV9UUMAhKpNLAcU
-
- - name: Stop infrastructure
- if: always()
- run: supabase stop
-
- - name: Get Allure history
- uses: actions/checkout@v2
- if: always()
- continue-on-error: true
- with:
- repository: supabase/test-reports
- ref: gh-pages
- path: gh-pages
-
- - name: Allure Report action
- uses: simple-elf/allure-report-action@master
- if: always()
- with:
- github_repo: test-reports
- allure_results: tests/allure-results
- allure_history: allure-history
- subfolder: supabase-integration
- keep_reports: 50
-
- - name: Deploy report to Github Pages
- if: always()
- uses: peaceiris/actions-gh-pages@v2
- env:
- EXTERNAL_REPOSITORY: supabase/test-reports
- ACTIONS_DEPLOY_KEY: ${{ secrets.DEPLOY_TO_TEST_REPORTS_KEY }}
- PUBLISH_BRANCH: gh-pages
- PUBLISH_DIR: allure-history
-
- - name: Post the link to the report
- if: always()
- uses: Sibz/github-status-action@v1
- with:
- authToken: ${{ secrets.GITHUB_TOKEN }}
- context: 'Test report'
- state: 'success'
- sha: ${{ github.event.pull_request.head.sha || github.sha }}
- target_url: https://supabase.github.io/test-reports/supabase-integration/${{ github.run_number }}
diff --git a/.github/workflows/og_images.yml b/.github/workflows/og_images.yml
new file mode 100644
index 00000000000..c3cc6568e73
--- /dev/null
+++ b/.github/workflows/og_images.yml
@@ -0,0 +1,28 @@
+name: Deploy OG Images
+
+on:
+ push:
+ branches:
+ - master
+ paths:
+ - 'supabase/functions/og-images/**'
+ workflow_dispatch:
+
+jobs:
+ deploy:
+ runs-on: ubuntu-latest
+
+ env:
+ SUPABASE_ACCESS_TOKEN: ${{ secrets.SUPABASE_ACCESS_TOKEN }}
+ PROJECT_ID: ${{ secrets.PROJECT_ID }}
+
+ steps:
+ - name: Check out repo
+ uses: actions/checkout@v3
+
+ - name: Setup the Supabase CLI
+ uses: supabase/setup-cli@v1
+ with:
+ version: latest
+
+ - run: supabase functions deploy og-images --project-ref $PROJECT_ID --no-verify-jwt
diff --git a/.github/workflows/prettier.yml b/.github/workflows/prettier.yml
index 43305fc1aed..aef4d8f166d 100644
--- a/.github/workflows/prettier.yml
+++ b/.github/workflows/prettier.yml
@@ -10,15 +10,18 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Check out repo
- uses: actions/checkout@v2
- # disable this check while we migrate to monorepo
+ uses: actions/checkout@v3
- name: Run prettier
- uses: EPMatt/reviewdog-action-prettier@v1
- with:
- github_token: ${{ secrets.github_token }}
- reporter: github-pr-review
- level: warning
- command: npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,json}'
+ run: |-
+ npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,json}'
+ # [Joshen] Temp disable the following due to an issue
+ # https://github.com/EPMatt/reviewdog-action-prettier/issues/34
+ # uses: EPMatt/reviewdog-action-prettier@v1
+ # with:
+ # github_token: ${{ secrets.github_token }}
+ # reporter: github-pr-review
+ # level: warning
+ # command: npx prettier -c 'apps/**/*.{js,jsx,ts,tsx,css,md,json}'
# run: |-
# function run_check() {
@@ -38,11 +41,25 @@ jobs:
runs-on: ubuntu-latest
steps:
- name: Check out repo
- uses: actions/checkout@v2
+ uses: actions/checkout@v3
- name: Run prettier
- uses: EPMatt/reviewdog-action-prettier@v1
- with:
- github_token: ${{ secrets.github_token }}
- reporter: github-pr-review
- level: warning
- command: npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,json}'
+ run: |-
+ npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,json}'
+ # uses: EPMatt/reviewdog-action-prettier@v1
+ # with:
+ # github_token: ${{ secrets.github_token }}
+ # reporter: github-pr-review
+ # level: warning
+ # command: npx prettier -c 'i18n/**/*.{js,jsx,ts,tsx,css,md,json}'
+
+ format-sql:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Check out repo
+ uses: actions/checkout@v3
+ - name: Install plugin
+ run: npm ci
+ - name: Run prettier
+ run: |-
+ # Check mdx files which contain sql code blocks
+ grep -lr '```sql' apps/docs/pages/**/*.mdx | xargs npx prettier -c
diff --git a/.github/workflows/studio-build.yml b/.github/workflows/studio-build.yml
deleted file mode 100644
index 570baa1aa61..00000000000
--- a/.github/workflows/studio-build.yml
+++ /dev/null
@@ -1,31 +0,0 @@
-name: Studio Build
-
-on:
- pull_request:
- branches:
- - master
- - studio
- paths:
- - 'studio/**'
-jobs:
- build:
- runs-on: ubuntu-latest
-
- strategy:
- matrix:
- node-version: [16.x]
- # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-
- steps:
- - uses: actions/checkout@v2
- - name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v2
- with:
- node-version: ${{ matrix.node-version }}
- cache: 'npm'
- - name: Install deps
- run: npm ci
- working-directory: ./
- - name: Run build
- run: npx turbo run build --filter=studio
- working-directory: ./
diff --git a/.github/workflows/studio-tests.yml b/.github/workflows/studio-tests.yml
index 1a99a50182d..11fda1e766c 100644
--- a/.github/workflows/studio-tests.yml
+++ b/.github/workflows/studio-tests.yml
@@ -8,10 +8,12 @@ on:
branches: [master]
paths:
- 'studio/**'
+ - 'package-lock.json'
pull_request:
branches: [master]
paths:
- 'studio/**'
+ - 'package-lock.json'
jobs:
build:
runs-on: ubuntu-latest
@@ -22,9 +24,9 @@ jobs:
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- - uses: actions/checkout@v2
+ - uses: actions/checkout@v3
- name: Use Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v2
+ uses: actions/setup-node@v3
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
diff --git a/.gitignore b/.gitignore
index f536bae18d7..8e245433c33 100644
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@ node_modules
out
.docz
tmp
+.swp
coverage
allure-results
@@ -119,4 +120,6 @@ typings/
**/supabase/.branches
**/supabase/.temp
-apps/new-docs/*
\ No newline at end of file
+apps/new-docs/*
+
+gcloud.json
\ No newline at end of file
diff --git a/.prettierignore b/.prettierignore
index 9ab0849d504..3703e192616 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -3,4 +3,11 @@
node_modules
package-lock.json
docker*
-apps/**/out
\ No newline at end of file
+apps/**/out
+# prettier-plugin-sql-cst only supports sqlite syntax
+**/supabase/migrations/*.sql
+apps/www/schema.sql
+examples/slack-clone/nextjs-slack-clone/full-schema.sql
+# ignore files with custom js formatting
+apps/docs/pages/guides/auth/*.mdx
+apps/docs/pages/guides/integrations/*.mdx
diff --git a/.prettierrc b/.prettierrc
index 76c3f65353b..b9bda117c38 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,5 +4,6 @@
"semi": false,
"singleQuote": true,
"printWidth": 100,
- "endOfLine": "lf"
+ "endOfLine": "lf",
+ "sqlKeywordCase": "lower"
}
diff --git a/DEVELOPERS.md b/DEVELOPERS.md
index 0281b1b0bd7..e88f3cb89f0 100644
--- a/DEVELOPERS.md
+++ b/DEVELOPERS.md
@@ -28,7 +28,7 @@ You need to install and configure the following dependencies on your machine to
- [Git](http://git-scm.com/)
- [Node.js v16.x (LTS)](http://nodejs.org)
-- [npm](https://www.npmjs.com/) version 7+ or [Yarn](https://yarnpkg.com/)
+- [npm](https://www.npmjs.com/) version 8.x.x or [Yarn](https://yarnpkg.com/)
## Local development
@@ -57,7 +57,7 @@ To contribute code to [Supabase](https://supabase.com), you must fork the [Supab
[Supabase](https://supabase.com) uses [Turborepo](https://turborepo.org/docs) to manage and run this monorepo.
-1. Install the dependences in the root of the repo.
+1. Install the dependencies in the root of the repo.
```sh
npm install # install dependencies
@@ -113,7 +113,7 @@ Following the changes to the [Supabase docs](https://supabase.com/blog/new-supab
- Inside of `apps/docs` create a `.env.local` file with the following: `NEXT_PUBLIC_NEW_DOCS=true`
-Now when you run a local devlopment docs server you will see the new docs site.
+Now when you run a local development docs server you will see the new docs site.
---
@@ -136,3 +136,9 @@ Create a new entry in the [`redirects.js`](https://github.com/supabase/supabase/
## Community channels
Stuck somewhere? Have any questions? Join the [Discord Community Server](https://discord.supabase.com/) or the [Github Discussions](https://github.com/supabase/supabase/discussions). We are here to help!
+
+## Contributors
+
+
+
+
diff --git a/README.md b/README.md
index 304eceed468..fcf1cfe5aba 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
-
-
+
+
---
@@ -12,9 +12,9 @@
- [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database)
- [x] Authentication and Authorization. [Docs](https://supabase.com/docs/guides/auth)
- [x] Auto-generated APIs.
- - [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api)
- - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/api#realtime-api)
- - [x] GraphQL (Beta). [Docs](https://supabase.com/docs/guides/api#graphql-api)
+ - [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
+ - [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
+ - [x] GraphQL (Beta). [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
- [x] Functions.
- [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions)
- [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
@@ -41,7 +41,7 @@ To see how to Contribute, visit [Getting Started](./DEVELOPERS.md)
- [x] Alpha: We are testing Supabase with a closed set of customers
- [x] Public Alpha: Anyone can sign up over at [app.supabase.com](https://app.supabase.com). But go easy on us, there are a few kinks
- [x] Public Beta: Stable enough for most non-enterprise use-cases
-- [ ] Public: Production-ready
+- [ ] Public: General Availability [[status](https://supabase.com/docs/guides/getting-started/features#feature-status)]
We are currently in Public Beta. Watch "releases" of this repo to get notified of major updates.
diff --git a/SECURITY.md b/SECURITY.md
index b257313bf5d..65dd29a7e19 120000
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -1 +1 @@
-apps/reference/static/.well-known/security.txt
+apps/docs/public/.well-known/security.txt
\ No newline at end of file
diff --git a/about/.gitignore b/about/.gitignore
deleted file mode 100644
index 9b744063823..00000000000
--- a/about/.gitignore
+++ /dev/null
@@ -1,3 +0,0 @@
-node_modules
-build
-.docusaurus
diff --git a/about/README.md b/about/README.md
deleted file mode 100644
index faaa71bd879..00000000000
--- a/about/README.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Supabase Docs
-
-### Contributing to the specs
-
-- `cd /web/spec/`
-- run `make` which will pull the latest TSDoc with your updates
-- add your comments to `supabase.yml` | `postgrest.yml` | `gotrue.yml` | `realtime.yml`
-- run `npm run gen:supabase` inside the `/spec` folder which will generate the Docusaurus pages
-- run `npm run build` to make sure the build is working
-- submit your PR
diff --git a/about/docs/careers.mdx b/about/docs/careers.mdx
deleted file mode 100644
index c2afe678804..00000000000
--- a/about/docs/careers.mdx
+++ /dev/null
@@ -1,7 +0,0 @@
----
-id: careers
-title: Work at Supabase
-description: We're hiring. Start your career at Supabase.
----
-
-[Browse open roles](https://boards.greenhouse.io/supabase).
diff --git a/about/docs/careers/_snippets/about.mdx b/about/docs/careers/_snippets/about.mdx
deleted file mode 100644
index d86aaefe294..00000000000
--- a/about/docs/careers/_snippets/about.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-Supabase is an open source Firebase alternative. We're backed by Y Combinator, Mozilla, Coatue, and a bunch of [amazing developers](https://supabase.com/blog/angels-of-supabase).
-
-Supabase is a platform which makes it incredibly easy to build _and_ scale your projects.
diff --git a/about/docs/careers/_snippets/apply.mdx b/about/docs/careers/_snippets/apply.mdx
deleted file mode 100644
index aaedbe92954..00000000000
--- a/about/docs/careers/_snippets/apply.mdx
+++ /dev/null
@@ -1 +0,0 @@
-Apply for this role using our [online form](https://boards.greenhouse.io/supabase).
\ No newline at end of file
diff --git a/about/docs/careers/_snippets/hiring-freeze.mdx b/about/docs/careers/_snippets/hiring-freeze.mdx
deleted file mode 100644
index 89ce1edca27..00000000000
--- a/about/docs/careers/_snippets/hiring-freeze.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-:::note
-We're currently on a Hiring Freeze and only open to very specific roles. You're still welcome to apply, but we might take a while to respond!
-:::
\ No newline at end of file
diff --git a/about/docs/careers/_snippets/process.mdx b/about/docs/careers/_snippets/process.mdx
deleted file mode 100644
index 8dd01678a82..00000000000
--- a/about/docs/careers/_snippets/process.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-
-- We hire in batches, but accept applications on a rolling basis, so now is always a good time to apply :)
-- The entire process is fully remote and all communication will happen over email or via video chat.
-- Once you've submitted your application, the team will review your submission, and may reach out for a short screening interview over video call.
-- If you pass the screen you will be invited to up to four follow up interviews. The calls:
- - usually take between 20-45 minutes each depending on the interviewer
- - are all 1:1
- - will be with both founders, a member of either the growth or engineering team (depending on the role), and usually one other person from your immediate team or function.
-- Once the interviews are over, the team will meet to discuss several roles and candidates and may:
- - ask one or two follow-up questions over email or a quick call
- - go directly to making an offer
\ No newline at end of file
diff --git a/about/docs/careers/_snippets/roles.mdx b/about/docs/careers/_snippets/roles.mdx
deleted file mode 100644
index 756d3256227..00000000000
--- a/about/docs/careers/_snippets/roles.mdx
+++ /dev/null
@@ -1,91 +0,0 @@
-
-
-
+
+ )
+}
diff --git a/apps/docs/components/Flag/Flag.tsx b/apps/docs/components/Flag/Flag.tsx
new file mode 100644
index 00000000000..ea95b33834f
--- /dev/null
+++ b/apps/docs/components/Flag/Flag.tsx
@@ -0,0 +1,17 @@
+import React, { ReactNode } from 'react'
+import { useFlag } from '~/hooks/useFlag'
+
+interface Props {
+ children: ReactNode
+ name: string
+}
+
+function Flag({ children, name }: Props) {
+ const flagValue = useFlag(name)
+ if (!flagValue) {
+ return null
+ }
+ return <>{children}
+}
+
+export default Flag
diff --git a/apps/docs/components/Flag/FlagContext.ts b/apps/docs/components/Flag/FlagContext.ts
new file mode 100644
index 00000000000..6c58ab54c84
--- /dev/null
+++ b/apps/docs/components/Flag/FlagContext.ts
@@ -0,0 +1,5 @@
+import { createContext } from 'react'
+
+const FlagContext = createContext({})
+
+export default FlagContext
diff --git a/apps/docs/components/Flag/FlagProvider.tsx b/apps/docs/components/Flag/FlagProvider.tsx
new file mode 100644
index 00000000000..4cb3f362fa7
--- /dev/null
+++ b/apps/docs/components/Flag/FlagProvider.tsx
@@ -0,0 +1,35 @@
+import { FC, useEffect, useState } from 'react'
+// import createConfigCatClient from 'configcat-js'
+import FlagContext from './FlagContext'
+
+const FlagProvider: FC = ({ children }) => {
+ const [store, setStore] = useState({})
+ const { Provider } = FlagContext
+
+ // useEffect(() => {
+ // getFlags()
+ // }, [])
+
+ // const getFlags = async () => {
+ // const setFlagValues = async () => {
+ // const flagValues = await client.getAllValuesAsync()
+ // const flagStore: any = {}
+
+ // flagValues.forEach((item: any) => {
+ // flagStore[item.settingKey] = item.settingValue
+ // })
+ // setStore(flagStore)
+ // }
+
+ // const client = createConfigCatClient(process.env.NEXT_PUBLIC_CONFIGCAT_SDK_KEY ?? '', {
+ // configChanged: setFlagValues,
+ // pollIntervalSeconds: 600,
+ // })
+
+ // await setFlagValues()
+ // }
+
+ return {children}
+}
+
+export default FlagProvider
diff --git a/apps/docs/components/FooterHelpCallout.tsx b/apps/docs/components/FooterHelpCallout.tsx
index 2eb6421dc4c..89f3265ec16 100644
--- a/apps/docs/components/FooterHelpCallout.tsx
+++ b/apps/docs/components/FooterHelpCallout.tsx
@@ -1,12 +1,38 @@
-const FooterHelpCallout = () => {
+import { ReactMarkdown } from 'react-markdown/lib/react-markdown'
+
+export type FooterHelpCalloutType = 'default' | 'postgres'
+
+const content = {
+ default: {
+ title: 'Need some help?',
+ description: `Not to worry, our specialist engineers are here to help. Submit a support ticket through the [Dashboard](https://app.supabase.com/support/new).`,
+ },
+ postgres: {
+ title: 'Looking for Serverless Postgres?',
+ description: `Supabase is the fastest way to get started with Postgres in a serverless environment. [Learn more](https://supabase.com/database?utm=postgres-helpers).`,
+ },
+}
+
+const FooterHelpCallout = ({
+ footerHelpType = 'default',
+ title,
+}: {
+ footerHelpType: FooterHelpCalloutType
+ title: any
+}) => {
return (
-
-
-
Need some help?
-
- Not to worry, our specialist engineers are here to help. Submit a support ticket through
- the Dashboard.
-
+
+
+
{content[footerHelpType].title}
+ {content[footerHelpType].description}
)
diff --git a/apps/docs/components/JwtGenerator.js b/apps/docs/components/JwtGenerator.js
index 4ac1b05e255..d0dc7a7bf08 100644
--- a/apps/docs/components/JwtGenerator.js
+++ b/apps/docs/components/JwtGenerator.js
@@ -1,7 +1,6 @@
import React, { useState } from 'react'
import KJUR from 'jsrsasign'
-import CodeBlock from './CodeBlock/CodeBlock'
-import { Button, Select, Input } from 'ui'
+import { Button, Select, Input, CodeBlock } from 'ui'
const JWT_HEADER = { alg: 'HS256', typ: 'JWT' }
const now = new Date()
diff --git a/apps/docs/components/MDX/project_setup.mdx b/apps/docs/components/MDX/project_setup.mdx
index 9efe03df58e..2003a3a2220 100644
--- a/apps/docs/components/MDX/project_setup.mdx
+++ b/apps/docs/components/MDX/project_setup.mdx
@@ -2,22 +2,19 @@ import UserManagementSQLTemplate from './user_management_quickstart_sql_template
import { Tabs } from 'ui'
export const TabPanel = Tabs.Panel
-# Project set up
+## Project setup
-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.
+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.
-## Create a project
+### Create a project
-1. Go to [app.supabase.com](https://app.supabase.com).
-1. Click on "New Project".
+1. [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
1. Enter your project details.
1. Wait for the new database to launch.
-## Set up the database schema
+### 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.
+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.
-
-
-
@@ -43,15 +36,10 @@ or you can just copy/paste the SQL from below and run it yourself.
-## Get the API Keys
+### 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 and `anon` key from the API settings.
+We just need to get the Project URL and `anon` key from the API settings.
-1. Go to the [Settings](https://app.supabase.com/project/_/settings) page in the Dashboard.
-2. Click **API** in the sidebar.
-3. Find your API `URL`, `anon`, and `service_role` keys on this page.
-
-
+1. Go to the [API Settings](https://app.supabase.com/project/_/settings/api) page in the Dashboard.
+1. Find your Project `URL`, `anon`, and `service_role` keys on this page.
diff --git a/apps/docs/components/MDX/quickstart_intro.mdx b/apps/docs/components/MDX/quickstart_intro.mdx
index 59e0e01da5c..d20d9f32ece 100644
--- a/apps/docs/components/MDX/quickstart_intro.mdx
+++ b/apps/docs/components/MDX/quickstart_intro.mdx
@@ -1,9 +1,5 @@
-This example provides the steps to build a basic user management app. It includes:
+This tutorial demonstrates how to build a basic user management app. The app authenticates and identifies the user, stores their profile information in the database, and allows the user to log in, update their profile details, and upload a profile photo. The app uses:
-- 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.
-- [Row Level Security](/docs/guides/auth#row-level-security): data is protected so that individuals can only access their own data.
-- Instant [APIs](/docs/guides/api): APIs will be automatically generated when you create your database tables.
-
-By the end of this guide you'll have an app which allows users to login and update some basic profile details:
+- [Supabase Database](/docs/guides/database) - a Postgres database for storing your user data and [Row Level Security](/docs/guides/auth#row-level-security) so data is protected and users can only access their own information.
+- [Supabase Auth](/docs/guides/auth) - users log in through magic links sent to their email (without having to set up passwords).
+- [Supabase Storage](/docs/guides/storage) - users can upload a profile photo.
diff --git a/apps/docs/components/MDX/storage_management.mdx b/apps/docs/components/MDX/storage_management.mdx
index d9df719486d..1eebf7cb575 100644
--- a/apps/docs/components/MDX/storage_management.mdx
+++ b/apps/docs/components/MDX/storage_management.mdx
@@ -5,26 +5,26 @@ from `public.profiles` and the older versions getting orphaned.
To automatically remove obsolete storage objects, extend the database
triggers. Note that it is not sufficient to delete the objects from the
`storage.objects` table because that would orphan and leak the actual storage objects in
-the S3 backend. Instead, invoke the storage API within Postgres via the `http` extension.
+the S3 backend. Instead, invoke the storage API within Postgres via the `http` extension.
Enable the [http extension for the `extensions` schema](https://app.supabase.com/project/_/database/extensions) in the Dashboard.
Then, define the following SQL functions in the SQL Editor to delete
storage objects via the API:
```SQL
-create or replace function delete_storage_object(bucket text, object text, out status int, out content varchar)
+create or replace function delete_storage_object(bucket text, object text, out status int, out content text)
returns record
language 'plpgsql'
security definer
as $$
declare
- project_url varchar := '';
- service_role_key varchar := ''; -- full access needed
- url varchar := project_url||'/storage/v1/object/'||bucket||'/'||object;
+ project_url text := '';
+ service_role_key text := ''; -- full access needed
+ url text := project_url||'/storage/v1/object/'||bucket||'/'||object;
begin
select
into status, content
- result.status::int, result.content::varchar
+ result.status::int, result.content::text
FROM extensions.http((
'DELETE',
url,
@@ -34,7 +34,7 @@ begin
end;
$$;
-create or replace function delete_avatar(avatar_url text, out status int, out content varchar)
+create or replace function delete_avatar(avatar_url text, out status int, out content text)
returns record
language 'plpgsql'
security definer
@@ -60,7 +60,7 @@ security definer
as $$
declare
status int;
- content varchar;
+ content text;
begin
if coalesce(old.avatar_url, '') <> ''
and (tg_op = 'DELETE' or (old.avatar_url <> new.avatar_url)) then
diff --git a/apps/docs/components/Navigation/AlgoliaSearch.tsx b/apps/docs/components/Navigation/AlgoliaSearch.tsx
deleted file mode 100644
index eeb954f037a..00000000000
--- a/apps/docs/components/Navigation/AlgoliaSearch.tsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { render } from 'react-dom'
-import { IconCommand } from 'ui'
-import { createElement, FC, useEffect, useRef, Fragment } from 'react'
-import algoliasearch from 'algoliasearch/lite'
-import { autocomplete, getAlgoliaResults } from '@algolia/autocomplete-js'
-import { createLocalStorageRecentSearchesPlugin } from '@algolia/autocomplete-plugin-recent-searches'
-import { useRouter } from 'next/router'
-
-// [Joshen] We're currently using DocSearch from Algolia as it provides a nice
-// UI out of the box + some good preconfigured search settings (e.g hierarchy).
-// However, we're using our own Algolia account to store the records in the indexes
-// (rather than going through the DocSearch program from Algolia where they'll crawl
-// our site for us). Refer to scripts/build-search on how we're saving the records.
-
-// Using Algolia's autocomplete library gives us full flexbility in terms of customizing
-// our search experience, but that will take time to figure out. Hence why for now we're just
-// using DocSearch with our own records.
-
-// Potentially for search, we could
-// - Go ahead with the DocSearch program and let them crawl our site to generate the records
-// - But we need to ensure that our site is semantically correct first
-// - Use Algolia itself to flesh out our own search logic
-// - The basics are already set up to be honest, but will take time to make it great
-// - Go back to Typesense if we deem that Algolia is not helpful in the long run
-
-const searchClient = algoliasearch(
- process.env.NEXT_PUBLIC_ALGOLIA_APP_ID,
- process.env.NEXT_PUBLIC_ALGOLIA_SEARCH_API_KEY
-)
-
-// [Joshen] Not working properly, but lets not get stuck on this
-// Priority just to get a search working
-const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
- key: 'docs-search',
- limit: 3,
- //@ts-ignore
- transformSource({ source }) {
- return {
- ...source,
- templates: {
- ...source.templates,
- header({ state }) {
- if (state.query) return null
- return (
-
- Your searches
-
-
- )
- },
- },
- }
- },
-})
-
-interface Props {}
-
-const AlgoliaSearch: FC = ({}) => {
- const searchRef = useRef(null)
- const router = useRouter()
-
- useEffect(() => {
- if (!searchRef.current) {
- return undefined
- }
- const search = autocomplete({
- openOnFocus: true,
- container: searchRef.current,
- defaultActiveItemId: 0,
- detachedMediaQuery: '',
- // @ts-ignore
- renderer: { createElement, Fragment, render },
- placeholder: 'Search docs',
- plugins: [recentSearchesPlugin],
- renderNoResults({ state, render }, root) {
- render(
-
)
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
index b0a5a9c78e1..fe3ea4e290e 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideList.tsx
@@ -2,37 +2,51 @@ import * as Accordion from '@radix-ui/react-accordion'
import { useRouter } from 'next/router'
import React from 'react'
import NavigationMenuGuideListItems from './NavigationMenuGuideListItems'
+import * as NavItems from './NavigationMenu.constants'
interface Props {
id: string
active: boolean
+ collapsible?: boolean
+ value?: string[]
}
-const NavigationMenuGuideList: React.FC = ({ id, active }) => {
+const NavigationMenuGuideList: React.FC = ({ id, active, value }) => {
const router = useRouter()
+ const menu = NavItems[id]
+
// get url
const url = router.asPath
- // remove the end of the url if a deep link
- const firstLevelRoute = url?.split('/')?.slice(0, 4)?.join('/')
+
+ // We need to decide how deep we want the menu to be for matching urls
+ // if the links are really deep, we don't want to match all the way out
+ // But we need to reach out further to make the structure of /resources/postgres/ work
+ // look at /resources/postgres/ vs /auth/phone-login for how these are different
+ let firstLevelRoute
+ if (url.includes('resources/postgres/')) {
+ firstLevelRoute = url?.split('/')?.slice(0, 5)?.join('/')
+ } else {
+ firstLevelRoute = url?.split('/')?.slice(0, 4)?.join('/')
+ }
return (
-
+
)
}
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
index ee9bbf30f38..285c63bcf09 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenuGuideListItems.tsx
@@ -21,7 +21,11 @@ const HeaderImage = React.memo(function HeaderImage(props: any) {
)
})
-const HeaderLink = React.memo(function HeaderLink(props: any) {
+const HeaderLink = React.memo(function HeaderLink(props: {
+ title: string
+ id: string
+ url: string
+}) {
const router = useRouter()
return (
@@ -143,9 +147,7 @@ const ContentLink = React.memo(function ContentLink(props: any) {
})
const Content = (props) => {
- const { id } = props
-
- const menu = NavItems[id]
+ const { menu, id } = props
return (
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
index 3748821840b..270269d5085 100644
--- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
+++ b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx
@@ -1,11 +1,19 @@
+import { useTheme } from 'common/Providers'
import Image from 'next/image'
import Link from 'next/link'
import { useRouter } from 'next/router'
import { FC, useEffect, useState } from 'react'
-import { Button, IconCommand, IconMenu, IconMoon, IconSearch, IconSun, Input, Listbox } from 'ui'
-import { SearchButton } from '~/components/DocSearch'
+import {
+ Button,
+ IconCommand,
+ IconMenu,
+ IconMoon,
+ IconSearch,
+ IconSun,
+ Listbox,
+ SearchButton,
+} from 'ui'
import { REFERENCES } from '~/components/Navigation/Navigation.constants'
-import { useTheme } from 'common/Providers'
import { getPageType } from '~/lib/helpers'
@@ -36,14 +44,6 @@ const TopNavBar: FC = () => {
{ text: 'Reference', key: 'reference', link: '/reference' },
]
- const toggleDarkMode = () => {
- localStorage.setItem('supabaseDarkMode', (!isDarkMode).toString())
- toggleTheme()
-
- const key = localStorage.getItem('supabaseDarkMode')
- document.documentElement.className = key === 'true' ? 'dark' : ''
- }
-
const onSelectVersion = (version: string) => {
// [Joshen] Ideally we use but this works for now
if (!library) return
@@ -147,7 +147,7 @@ const TopNavBar: FC = () => {
+
+
+
+
+The Supabase Analytics server is a Logflare self-hostable instance that manages the ingestion and query pipelines for searching and aggregating structured analytics events.
+
+When self-hosting the Analytics server, the full logging experience matching that of the Supabase Platform is available in the Studio instance, allowing for an integrated and enhanced development experience.
+However, it's important to note that certain [differences](#differences) may arise due to the platform's infrastructure.
+
+
+ All logflare technical docs are available at
+ [https://docs.logflare.app](https://docs.logflare.app)
+
+
+## Getting Started
+
+Using the example [self-hosting stack based on docker-compose](https://github.com/supabase/supabase/tree/master/docker), you include the logging related services using the following command
+
+```bash
+# assuming you clone the supabase/supabase repo.
+cd docker
+docker compose -f docker-compose.yml -f docker-compose-logging.yml up
+```
+
+This would include two additional docker services to your compose stack: Logflare and Vector.
+
+
+ Read more about [self-hosting Logflare](https://docs.logflare.app/self-hosting) as your analytics
+ server.
+
+
+## Differences
+
+API logs rely on Kong instead of the Supabase Cloud API Gateway. Logs from Kong are not enriched with platform-only data.
+
+Within the self-hosted setup, all logs are routed to Logflare via Vector. As Kong routes API requests to PostgREST, self-hosted or local deployments will result in Kong request logs instead.
+This would result in differences in the log event metadata between self-hosted API requests and Supabase Platform requests.
+
+## BigQuery
+
+All log event data is stored in and queried from BigQuery. To use the Analytics server with Supabase you'll need a Google Cloud Platform account for access to BigQuery.
+
+Make sure to set the `GOOGLE_DATASET_ID_APPEND`, `GOOGLE_PROJECT_ID` and `GOOGLE_PROJECT_NUMBER` environment variables.
+
+Download your Google Cloud API JWT and store it under gcloud.json in your working directory.
+
+
+ You must also enable billing on your Google Cloud project, as the streaming inserts feature is
+ required.
+
+
+## Production Recommendations
+
+To self-host in a production setting, we recommend performing the following for a better experience.
+
+### Ensure that Logflare is behind a firewall and restrict all network access to it besides safe requests.
+
+Self-hosted Logflare has UI authentication disabled and is intended for exposure to the internet. We recommend restricting access to the dashboard, accessible at the `/dashboard` path.
+If dashboard access is required for managing sources, we recommend having an authentication layer, such as a VPN.
+
+### Use a different Postgres Database to store Logflare data.
+
+Logflare requires a Postgres database to function. However, if there is an issue with you self-hosted Postgres service, you would not be able to debug it as it would also bring Logflare down together.
+
+The self-hosted example is only used as a minimal example on running the entire stack, however it is not recommended to use the same database server for both production and observability.
+
+
+
+
+
+ ### Client libraries
+
+ - [JavaScript - Pino Transport](https://github.com/Logflare/pino-logflare)
+ - [Elixir](https://github.com/Logflare/logflare_api_client)
+ - [Elixir - Logger Backend](https://github.com/Logflare/logflare_logger_backend)
+ - [Erlang](https://github.com/Logflare/logflare_erl)
+ - [Erlang - Lager Backend](https://github.com/Logflare/logflare_lager_backend)
+ - [Cloudflare Worker](https://gist.github.com/chasers/c7a220e91820a1084b27fcfdb18ad6bd)
+
+ ### Integrations
+
+ - [Fly - Logs](https://github.com/Logflare/fly-log-shipper)
+ - [Vercel Integration - Logs](https://vercel.com/integrations/logflare)
+ - [Cloudflare App - Logs](https://www.cloudflare.com/apps/logflare/install)
+
+ ### Additional links
+
+ - [Source code](https://github.com/logflare/logflare)
+ - [Analytics guides](/docs/guides/analytics) - TODO
+ - [OpenAPI docs](https://logflare.app/api/openapi)
+ - [Supabase Acquires Logflare](https://supabase.com/blog/supabase-acquires-logflare)
+ - [Logflare self-hosting docs](https://docs.logflare.app/self-hosting)
+
+
+
+
diff --git a/apps/docs/docs/ref/swift/introduction.mdx b/apps/docs/docs/ref/swift/introduction.mdx
new file mode 100644
index 00000000000..80dc3584bd1
--- /dev/null
+++ b/apps/docs/docs/ref/swift/introduction.mdx
@@ -0,0 +1,29 @@
+---
+id: introduction
+title: Introduction
+hideTitle: true
+---
+
+
+
+
+
Swift Client Library
+
@supabase-community/supabase-swift
+
+
+
+
+This reference documents every object and method available in Supabase's Swift library, [supabase-swift](https://github.com/supabase-community/supabase-swift). You can use supabase-swift to interact with your Postgres database, listen to database changes, invoke Deno Edge Functions, build login and user management functionality, and manage large files.
+
+We also provide a [supabase](https://pub.dev/packages/supabase) package for non-Swift projects.
+
+
+
+
The Swift client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.
+
+
+ Huge thanks to official maintainer, [Maail](https://github.com/maail).
+
+
+
+
diff --git a/apps/docs/docs/reference/javascript/v1/generating-types.mdx b/apps/docs/docs/reference/javascript/v1/generating-types.mdx
index 033cfdb9165..a46fd7ba70d 100644
--- a/apps/docs/docs/reference/javascript/v1/generating-types.mdx
+++ b/apps/docs/docs/reference/javascript/v1/generating-types.mdx
@@ -8,7 +8,7 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/spec/supabase_
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
-Supabase will soon release native type generators that dump your database types for various languages. For now, we support TypeScript [through third-party tools](/docs/guides/api/generating-types).
+Supabase will soon release native type generators that dump your database types for various languages. For now, we support TypeScript [through third-party tools](/docs/guides/database/api/generating-types).
## Usage with TypeScript
diff --git a/apps/docs/hooks/useActionKey.ts b/apps/docs/hooks/useActionKey.ts
index 883c8ee5b7b..98db6a52d01 100644
--- a/apps/docs/hooks/useActionKey.ts
+++ b/apps/docs/hooks/useActionKey.ts
@@ -1,18 +1,16 @@
import { useState, useEffect } from 'react'
-const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control']
-const ACTION_KEY_APPLE = ['⌘', 'Command']
+const ACTION_KEY_DEFAULT = ['Ctrl ', 'Control'] as const
+const ACTION_KEY_APPLE = ['⌘', 'Command'] as const
export function useActionKey() {
- let [actionKey, setActionKey] = useState()
+ let [actionKey, setActionKey] = useState()
useEffect(() => {
if (typeof navigator !== 'undefined') {
if (/(Mac|iPhone|iPod|iPad)/i.test(navigator.platform)) {
- // @ts-ignore
setActionKey(ACTION_KEY_APPLE)
} else {
- // @ts-ignore
setActionKey(ACTION_KEY_DEFAULT)
}
}
diff --git a/apps/docs/hooks/useFlag.ts b/apps/docs/hooks/useFlag.ts
new file mode 100644
index 00000000000..3e990f6b3a8
--- /dev/null
+++ b/apps/docs/hooks/useFlag.ts
@@ -0,0 +1,7 @@
+import { useContext } from 'react'
+import FlagContext from 'components/Flag/FlagContext'
+
+export function useFlag(name: string) {
+ const store: any = useContext(FlagContext)
+ return store[name]
+}
diff --git a/apps/docs/internals/getSecrets.js b/apps/docs/internals/getSecrets.js
new file mode 100644
index 00000000000..4782a3f1ed5
--- /dev/null
+++ b/apps/docs/internals/getSecrets.js
@@ -0,0 +1,35 @@
+// for internal supabase use only
+const fs = require('fs/promises')
+const AWS = require('aws-sdk')
+
+const secretName = 'local/docs'
+const region = 'ap-southeast-2'
+
+const getSecrets = async (name, region) => {
+ try {
+ AWS.config.update({ region })
+ const secretsmanager = new AWS.SecretsManager()
+
+ const data = await secretsmanager
+ .getSecretValue({
+ SecretId: name,
+ })
+ .promise()
+
+ if (!data.SecretString) {
+ throw new Error('Secrets not found')
+ }
+ return JSON.parse(data.SecretString)
+ } catch (err) {
+ console.log('Error getting secrets', err)
+ }
+}
+
+// gets secrets from secrets manager and writes it to .env.local file
+getSecrets(secretName, region).then(async (secrets) => {
+ let secretContent = ''
+ for (const [secretKey, secretValue] of Object.entries(secrets)) {
+ secretContent += `${secretKey}="${secretValue}"\n`
+ }
+ await fs.writeFile('.env.local', secretContent.trim())
+})
diff --git a/apps/docs/layouts/DefaultGuideLayout.tsx b/apps/docs/layouts/DefaultGuideLayout.tsx
index ea39047c4dd..d2c01704763 100644
--- a/apps/docs/layouts/DefaultGuideLayout.tsx
+++ b/apps/docs/layouts/DefaultGuideLayout.tsx
@@ -1,8 +1,15 @@
import { FC } from 'react'
+import { FooterHelpCalloutType } from '~/components/FooterHelpCallout'
import GuideLayout from './guides'
interface Props {
- meta: { title: string; description?: string; hide_table_of_contents?: boolean; video?: string }
+ meta: {
+ title: string
+ description?: string
+ hide_table_of_contents?: boolean
+ video?: string
+ footerHelpType?: FooterHelpCalloutType
+ }
children: any
toc?: any
currentPage?: string
diff --git a/apps/docs/layouts/DefaultLayout.tsx b/apps/docs/layouts/DefaultLayout.tsx
index 3e610896b8b..b8338b9d451 100644
--- a/apps/docs/layouts/DefaultLayout.tsx
+++ b/apps/docs/layouts/DefaultLayout.tsx
@@ -1,17 +1,27 @@
import { MDXProvider } from '@mdx-js/react'
+import { NextSeo } from 'next-seo'
import Head from 'next/head'
+import { useRouter } from 'next/router'
import { FC } from 'react'
import components from '~/components'
import TableOfContents from '~/components/TableOfContents'
interface Props {
- meta: { title: string; description?: string; hide_table_of_contents?: boolean; video?: string }
+ meta: {
+ title: string
+ description?: string
+ hide_table_of_contents?: boolean
+ video?: string
+ canonical?: string
+ }
children: any
toc?: any
menuItems: any
}
const Layout: FC = (props: Props) => {
+ const { asPath, basePath } = useRouter()
+
const hasTableOfContents =
props.toc !== undefined &&
props.toc.json.filter((item) => item.lvl !== 1 && item.lvl <= 3).length > 0
@@ -19,16 +29,36 @@ const Layout: FC = (props: Props) => {
return (
<>
- {props.meta?.title} | Supabase Docs
+ {asPath === '/' ? 'Supabase Docs' : `${props.meta?.title} | Supabase Docs`}
-
-
-
-
-
-
+
+
+
-
+
+
)
}
diff --git a/apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx b/apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx
index d21aa1d79a4..7aee77fbc50 100644
--- a/apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx
+++ b/apps/docs/layouts/ref/RefSubLayoutNonFunc.tsx
@@ -37,7 +37,6 @@ const RefSubLayoutNonFunc: FC & RefSubLayoutNonFuncSubC
}
const Section: FC = (props) => {
- // console.log({ props })
return (
= (props: Props) => {
{props.meta?.title} | Supabase
-
+
diff --git a/apps/docs/lib/constants.ts b/apps/docs/lib/constants.ts
new file mode 100644
index 00000000000..d1bbedbf47c
--- /dev/null
+++ b/apps/docs/lib/constants.ts
@@ -0,0 +1,2 @@
+export const IS_PLATFORM = process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
+export const LOCAL_SUPABASE = process.env.NEXT_PUBLIC_LOCAL_SUPABASE === 'true'
diff --git a/apps/docs/lib/helpers.ts b/apps/docs/lib/helpers.ts
index 899aea15618..7a6c5de3d45 100644
--- a/apps/docs/lib/helpers.ts
+++ b/apps/docs/lib/helpers.ts
@@ -1,4 +1,7 @@
// [Joshen] I think this can be done better, as its mostly used to choose what
+
+import { ICommonFunc } from '../components/reference/Reference.types'
+
// menus to render in the SideBar.js (Ref Nav.constants.ts)
export function getPageType(asPath: string) {
let page
@@ -33,9 +36,9 @@ export function getPageType(asPath: string) {
return page
}
-export function flattenSections(sections) {
- var a = []
- for (var i = 0; i < sections.length; i++) {
+export function flattenSections(sections: ICommonFunc[]) {
+ let a: ICommonFunc[] = []
+ for (let i = 0; i < sections.length; i++) {
if (sections[i].id) {
// only push a section that has an id
// these are reserved for sidebar subtitles
diff --git a/apps/docs/lib/mdx/getConfig.tsx b/apps/docs/lib/mdx/getConfig.tsx
index 8a014486212..d208d4243cc 100644
--- a/apps/docs/lib/mdx/getConfig.tsx
+++ b/apps/docs/lib/mdx/getConfig.tsx
@@ -4,6 +4,8 @@ import specStorageV0 from '~/../../spec/storage_v0_config.yaml' assert { type: '
import specRealtimeV0 from '~/../../spec/realtime_v0_config.yaml' assert { type: 'yml' }
// @ts-expect-error
import specAuthV1 from '~/../../spec/gotrue_v1_config.yaml' assert { type: 'yml' }
+// @ts-expect-error
+import specAnalyticsV0 from '~/../../spec/analytics_v0_config.yaml' assert { type: 'yml' }
function getStorageConfigV0() {
return { ...specStorageV0 }
@@ -17,4 +19,8 @@ function getAuthConfigV1() {
return { ...specAuthV1 }
}
-export { getStorageConfigV0, getRealtimeConfigV0, getAuthConfigV1 }
+function getAnalyticsConfigV0() {
+ return { ...specAnalyticsV0 }
+}
+
+export { getStorageConfigV0, getRealtimeConfigV0, getAuthConfigV1, getAnalyticsConfigV0 }
diff --git a/apps/docs/next.config.mjs b/apps/docs/next.config.mjs
index bf98d6d34fd..b3c71cae82e 100644
--- a/apps/docs/next.config.mjs
+++ b/apps/docs/next.config.mjs
@@ -53,6 +53,7 @@ const nextConfig = {
'github.com',
'user-images.githubusercontent.com',
'raw.githubusercontent.com',
+ 'weweb-changelog.ghost.io',
],
},
experimental: {
@@ -79,11 +80,21 @@ const nextConfig = {
},
]
},
+ async redirects() {
+ return [
+ {
+ source: '/',
+ destination: '/docs',
+ basePath: false,
+ permanent: false,
+ },
+ ]
+ },
}
// next.config.js
export default () => {
// const plugins = [withMDX]/
- const plugins = [withTM(['ui', 'common']), withMDX, withYaml]
+ const plugins = [withTM(['ui', 'common', '@supabase/auth-helpers-nextjs']), withMDX, withYaml]
return plugins.reduce((acc, next) => next(acc), nextConfig)
}
diff --git a/apps/docs/package.json b/apps/docs/package.json
index f5168dc5a4e..cfda86a3831 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -4,10 +4,13 @@
"private": true,
"scripts": {
"dev": "next dev --port 3001",
+ "dev:secrets:pull": "AWS_PROFILE=supabase-dev node internals/getSecrets.js",
"build": "npm run generate:all && next build",
"start": "next start",
"lint": "next lint",
"build:sitemap": "node ./internals/generate-sitemap.mjs",
+ "embeddings": "tsx scripts/generate-embeddings.ts",
+ "embeddings:refresh": "npm run embeddings -- --refresh",
"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-csharp:v0 gen:supabase-js:v1 gen:supabase-js:v2 gen:realtime",
"gen:api": "npm-run-all gen:api:usage",
@@ -32,7 +35,10 @@
"gen:supabase-js:v2": "npm-run-all gen:supabase-js:v2:ref",
"gen:supabase-js:v2:ref": "ts-node ./generator/index.ts gen --type legacy --input ../../spec/supabase_js_v2.yml --output ./docs/reference/javascript/generated",
"gen:realtime": "npm-run-all gen:realtime:config",
- "gen:realtime:config": "ts-node ./generator/index.ts gen --type config --input ../../spec/realtime_v0_config.yaml --output ./docs/reference/realtime/generated/config.mdx"
+ "gen:realtime:config": "ts-node ./generator/index.ts gen --type config --input ../../spec/realtime_v0_config.yaml --output ./docs/reference/realtime/generated/config.mdx",
+ "gen:analytics": "npm-run-all gen:analytics:config gen:analytics:usage",
+ "gen:analytics:config": "ts-node ./generator/index.ts gen --type config --input ../../spec/analytics_v0_config.yaml --output ./docs/reference/analytics/generated/config.mdx",
+ "gen:analytics:usage": "ts-node ./generator/index.ts gen --type api --input ../../spec/transforms/analytics_v0_openapi_deparsed.json --output ./docs/reference/analytics/generated/usage.mdx"
},
"dependencies": {
"@algolia/autocomplete-js": "^1.7.2",
@@ -42,17 +48,28 @@
"@mdx-js/react": "^1.6.22",
"@next/mdx": "^12.0.4",
"@radix-ui/react-accordion": "^1.0.1",
+ "@supabase/auth-helpers-nextjs": "^0.5.6",
+ "@supabase/auth-helpers-react": "^0.3.1",
+ "@supabase/supabase-js": "^2.13.0",
"algoliasearch": "^4.14.2",
"babel": "^6.23.0",
"clsx": "^1.2.1",
"common": "*",
"config": "*",
+ "github-slugger": "^2.0.0",
"gray-matter": "^4.0.3",
"isbot": "^3.6.5",
"jsrsasign": "^10.5.26",
"lodash": "^4.17.21",
"markdown-toc": "^1.2.0",
+ "mdast": "^3.0.0",
+ "mdast-util-from-markdown": "^1.2.0",
+ "mdast-util-mdx": "^2.0.0",
+ "mdast-util-to-markdown": "^1.5.0",
+ "mdast-util-to-string": "^3.1.1",
"mdx-mermaid": "2.0.0-rc3",
+ "mermaid": "^10.0.2",
+ "micromark-extension-mdxjs": "^1.0.0",
"next": "12.3.2",
"next-compose-plugins": "^2.2.1",
"next-mdx-remote": "^4.1.0",
@@ -60,6 +77,7 @@
"next-plugin-yaml": "^1.0.1",
"next-seo": "^5.14.1",
"next-transpile-modules": "^9.0.0",
+ "openai": "^3.1.0",
"react": "17.0.2",
"react-copy-to-clipboard": "^5.0.2",
"react-dom": "17.0.2",
@@ -72,7 +90,10 @@
"remark-gfm": "^3.0.1",
"remark-slug": "^7.0.1",
"shiki": "^0.11.1",
+ "sse.js": "^0.6.1",
"ui": "*",
+ "unist-builder": "^3.0.1",
+ "unist-util-filter": "^4.0.1",
"valtio": "^1.7.6"
},
"devDependencies": {
@@ -87,10 +108,10 @@
"next-transpile-modules": "9.0.0",
"npm-run-all": "^4.1.5",
"openapi-types": "^12.0.2",
- "prettier": "^2.2.1",
"sass": "^1.55.0",
"ts-node": "^10.9.1",
"tsconfig": "*",
+ "tsx": "^3.12.2",
"typescript": "^4.5.3"
}
}
diff --git a/apps/docs/pages/_app.tsx b/apps/docs/pages/_app.tsx
index 0736cff9c2b..58f7fea9f7b 100644
--- a/apps/docs/pages/_app.tsx
+++ b/apps/docs/pages/_app.tsx
@@ -1,22 +1,29 @@
-import { DefaultSeo } from 'next-seo'
+import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { SessionContextProvider } from '@supabase/auth-helpers-react'
+import { AuthProvider, ThemeProvider } from 'common'
import { useRouter } from 'next/router'
-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
+import ReactMarkdown from 'react-markdown'
+import remarkGfm from 'remark-gfm'
import { AppPropsWithLayout } from 'types'
-import { SearchProvider } from '~/components/DocSearch'
+import { CommandMenuProvider } from 'ui'
+import components from '~/components'
import Favicons from '~/components/Favicons'
-import { ThemeProvider } from 'common/Providers'
import SiteLayout from '~/layouts/SiteLayout'
-import '../styles/algolia-search.scss'
+import { IS_PLATFORM, LOCAL_SUPABASE } from '~/lib/constants'
+import { post } from '~/lib/fetchWrappers'
import '../styles/ch.scss'
-import '../styles/docsearch.scss'
import '../styles/main.scss?v=1.0.0'
import '../styles/new-docs.scss'
import '../styles/prism-okaidia.scss'
-import { post } from '~/lib/fetchWrappers'
function MyApp({ Component, pageProps }: AppPropsWithLayout) {
const router = useRouter()
+ const [supabase] = useState(() =>
+ IS_PLATFORM || LOCAL_SUPABASE ? createBrowserSupabaseClient() : undefined
+ )
+
function telemetry(route: string) {
return post(`https://api.supabase.io/platform/telemetry/page`, {
referrer: document.referrer,
@@ -53,41 +60,34 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
}, [router.events])
const SITE_TITLE = 'Supabase Documentation'
- const SITE_DESCRIPTION = 'The open source Firebase alternative.'
- const { basePath } = useRouter()
+
+ const AuthContainer = (props) => {
+ return IS_PLATFORM || LOCAL_SUPABASE ? (
+
+ {props.children}
+
+ ) : (
+ {props.children}
+ )
+ }
return (
<>
-
-
-
-
-
-
-
-
+
+
+ (
+
+ )}
+ >
+
+
+
+
+
+
)
}
diff --git a/apps/docs/pages/_document.tsx b/apps/docs/pages/_document.tsx
index 98acbb79912..ed9a8a70c10 100644
--- a/apps/docs/pages/_document.tsx
+++ b/apps/docs/pages/_document.tsx
@@ -3,7 +3,9 @@ import { Html, Head, Main, NextScript } from 'next/document'
export default function Document() {
return (
-
+
+
+
diff --git a/apps/docs/pages/guides/api.mdx b/apps/docs/pages/guides/api.mdx
index 43d3610aef2..8e45a1243c7 100644
--- a/apps/docs/pages/guides/api.mdx
+++ b/apps/docs/pages/guides/api.mdx
@@ -10,11 +10,15 @@ export const meta = {
Supabase auto-generates three types of API directly from your database schema.
-- REST - interact with your database through a restful interface.
-- Realtime - listen to database changes.
-- GraphQL - [in beta](https://supabase.com/blog/pg-graphql).
+- REST - connect to your database through a restful interface, directly from the browser.
+- Realtime - for listening to database changes.
+- GraphQL - a fast and auto-generate GraphQL API.
-The APIs are:
+All the APIs are auto-generated from your database and are designed to get you building as fast as possible, without writing a single line of code.
+
+You can use them directly from the browser (two-tier architecture), or as a complement to your own API server (three-tier architecture).
+
+## Features
- **Instant and auto-generated.** As you update your database the changes are immediately accessible through your API.
- **Self documenting.** Supabase generates documentation in the Dashboard which updates as you make database changes.
@@ -33,23 +37,8 @@ It provides everything you need from a CRUD API:
- Works with Postgres Functions
- Works with the Postgres security model - including Row Level Security, Roles, and Grants.
-
-
-
-
## GraphQL API [#graphql-api-overview]
-
-
-GraphQL is in Beta, and may have breaking changes. It is only available on self-hosted setups and Supabase projects created after 28th March 2022.
-
-
-
GraphQL in Supabase works through [pg_graphql](https://supabase.com/blog/pg-graphql), an open source PostgreSQL extension for GraphQL.
## Realtime API [#realtime-api-overview]
@@ -58,327 +47,6 @@ Supabase provides a Realtime API using [Realtime](https://github.com/supabase/re
Realtime leverages PostgreSQL's built-in logical replication. You can manage your Realtime API simply by managing Postgres publications.
Go to your project's [Replication section](https://app.supabase.com/project/_/database/replication) to get started.
-## Getting started
-
-All APIs are auto-created from Database tables. After you have added tables or functions to your database, you can use the APIs provided.
-
-### Creating API Routes
-
-API routes are automatically created when you create Postgres Tables, Views, or Functions.
-
-Let's create our first
-API route by creating a table called `todos` to store tasks.
-This creates a corresponding route `todos` which can accept `GET`, `POST`, `PATCH`, & `DELETE` requests.
-
-
-
-
-1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
-1. Click **New Table** and create a table with the name `todos`.
-1. Click **Save**.
-1. Click **New Column** and create a column with the name `task` and type `text`.
-1. Click **Save**.
-
-
-
-
-
-
-```sql
--- Create a table called "todos" with a column to store tasks.
-
-create table todos (
- id bigint generated by default as identity primary key,
- task text check (char_length(task) > 3)
-);
-
-```
-
-
-
-
-### API URL and Keys
-
-Every Supabase project has a unique API URL. Your API is secured behind an API gateway which requires an API Key for every request.
-
-1. Go to the [Settings](https://app.supabase.com/project/_/settings/general) page in the Dashboard.
-2. Click **API** in the sidebar.
-3. Find your API `URL`, `anon`, and `service_role` keys on this page.
-
-
-
-The REST API and the GraphQL API are both accessible through this URL:
-
-- REST: `https://.supabase.co/rest/v1`
-- GraphQL: `https://.supabase.co/graphql/v1`
-
-Both of these routes require the `anon` key to be passed through an `apikey` header.
-
-#### API Keys
-
-You are provided with two keys:
-
-- an `anon` key, which is safe to be used in a browser context.
-- a `service_role` key, which should only be used on a server. This key can bypass Row Level Security. NEVER use this key in a browser.
-
-### Accessing the docs in the Dashboard
-
-#### REST API [#rest-api-dashboard-docs]
-
-Supabase generates documentation in the [Dashboard](https://app.supabase.com) which updates as you make database changes.
-Let's view the documentation for a `countries` table which we created in our database.
-
-1. Go to the [API](https://app.supabase.com/project/_/api) page in the Dashboard.
-2. Find the `countries` table under **Tables and Views** in the sidebar.
-3. Switch between the JavaScript and the cURL docs using the tabs.
-
-
-
-#### GraphQL
-
-The GraphQL Endpoint that we provide (`https://.supabase.co/graphql/v1`) is compatible with any GraphiQL implementation that can pass an `apikey` header.
-Some suggested applications:
-
-- [paw.cloud](https://paw.cloud)
-- [insomnia.rest](https://insomnia.rest)
-- [postman.com/graphql](https://www.postman.com/graphql/)
-- Self-hosted GraphiQL: GraphiQL can be served through a simple HTML file. See [this discussion](https://github.com/supabase/supabase/discussions/6144) for more details.
-
-## Using the API
-
-### REST API
-
-You can interact with your API directly via HTTP requests, or you can use the client libraries which we provide.
-
-Let's see how to make a request to the `todos` table which we created in the first step,
-using the API URL (`SUPABASE_URL`) and Key (`SUPABASE_ANON_KEY`) we provided:
-
-
-
-
-```javascript
-// Initialize the JS client
-import { createClient } from '@supabase/supabase-js'
-const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
-
-// Make a request
-const { data: todos, error } = await supabase.from('todos').select('*')
-```
-
-
-
-
-```bash
-# Append /rest/v1/ to your URL, and then use the table name as the route
-curl '/rest/v1/todos' \
--H "apikey: " \
--H "Authorization: Bearer "
-```
-
-
-
-
-JS Reference: [select()](../reference/javascript/select),
-[insert()](../reference/javascript/insert),
-[update()](../reference/javascript/update),
-[upsert()](../reference/javascript/upsert),
-[delete()](../reference/javascript/delete),
-[rpc()](../reference/javascript/rpc) (call Postgres functions).
-
-### GraphQL API
-
-You can use any GraphQL client with the Supabase GraphQL API. For our GraphQL example we will use [urql](https://formidable.com/open-source/urql/docs/).
-
-
-
-
-```javascript
-import { createClient, useQuery } from 'urql'
-
-// Prepare API key and Authorization header
-const headers = {
- apikey: ,
- authorization: `Bearer ${}`,
-}
-
-// Create GraphQL client
-// See: https://formidable.com/open-source/urql/docs/basics/react-preact/#setting-up-the-client
-const client = createClient({
- url: '/graphql/v1',
- fetchOptions: function createFetchOptions() {
- return { headers }
- },
-})
-
-// Prepare our GraphQL query
-const TodosQuery = `
- query {
- todosCollection {
- edges {
- node {
- id
- title
- }
- }
- }
- }
-`
-
-// Query for the data (React)
-const [result, reexecuteQuery] = useQuery({
- query: TodosQuery,
-})
-
-// Read the result
-const { data, fetching, error } = result
-```
-
-
-
-
-```bash
-# Append /graphql/v1/ to your URL, and then use the table name as the route
-curl --request POST '/graphql/v1' \
--H 'apikey: ' \
--H 'Authorization: Bearer ' \
--H 'Content-Type: application/json' \
--d '{ "query":"{ todos(first: 3) { edges { node { id } } } }" }'
-```
-
-
-
-
-### Realtime API
-
-By default Realtime is disabled on your database. Let's turn on Realtime for the `todos` table.
-
-
-
-
-1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
-2. Click on **Replication** in the sidebar.
-3. Control which database events are sent by toggling **Insert**, **Update**, and **Delete**.
-4. Control which tables broadcast changes by selecting **Source** and toggling each table.
-
-
-
-
-
-
-```sql
-alter publication supabase_realtime add table todos;
-```
-
-
-
-
-From the client, we can listen to any new data that is inserted into the `todos` table:
-
-```javascript
-// Initialize the JS client
-import { createClient } from '@supabase/supabase-js'
-const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
-
-// Create a function to handle inserts
-const handleInserts = (payload) => {
- console.log('Change received!', payload)
-}
-
-// Listen to inserts
-const { data: todos, error } = await supabase.from('todos').on('INSERT', handleInserts).subscribe()
-```
-
-Use [subscribe()](/docs/reference/javascript/subscribe) to listen to database changes.
-The Realtime API works through PostgreSQL's replication functionality. Postgres sends database changes to a [publication](/docs/guides/database/replication#publications)
-called `supabase_realtime`, and by managing this publication you can control which data is broadcast.
-
-## API Security
-
-### Securing your Routes
-
-Your API is designed to work with Postgres Row Level Security (RLS). If you use Supabase [Auth](/docs/guides/auth), you can restrict data based on the logged-in user.
-To control access to your data, you can use [Policies](/docs/guides/auth#policies).
-When you create a table in Postgres, Row Level Security is disabled by default. To enable RLS:
-
-
-
-
-1. Go to the [Authentication](https://app.supabase.com/project/_/auth/users) page in the Dashboard.
-2. Click on **Policies** in the sidebar.
-3. Select **Enable RLS** to enable Row Level Security.
-
-
-
-
-```sql
-alter table todos enable row level security;
-```
-
-
-
-
-### The `service_role` key
-
-Never expose the `service_role` key in a browser or anywhere where a user can see it. This Key is designed to bypass Row Level Security - so it should only be used on a private server.
-
-A common use case for the `service_role` key is to run data analytics jobs on the backend. To support joins on user id, it is often useful to grant the service role read access to `auth.users` table.
-
-```sql
-grant select on table auth.users to service_role;
-```
-
-We have [partnered with GitHub](https://github.blog/changelog/2022-03-28-supabase-is-now-a-github-secret-scanning-partner/) to scan for Supabase `service_role` keys pushed to public repositories.
-If they detect any keys with service_role privileges being pushed to GitHub, they will forward the API key to us, so that we can automatically revoke the detected secrets and notify you, protecting your data against malicious actors.
-
-### Safeguards towards accidental deletes and updates
-
-For all projects, by default, the Postgres extension [safeupdate](https://github.com/eradman/pg-safeupdate) is enabled for all queries coming from the API.
-This ensures that any `delete()` or `update()` would fail if there are no accompanying filters provided.
-To confirm that safeupdate is enabled for queries going through the API of your project, the following query could be run:
-
-```sql
-select usename,useconfig from pg_shadow where usename = 'authenticator' ;
-```
-
-The expected value for `useconfig` should be:
-
-```sql
-['session_preload_libraries=supautils, safeupdate']
-```
-
export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/api/api-keys.mdx b/apps/docs/pages/guides/api/api-keys.mdx
new file mode 100644
index 00000000000..3f9869586f5
--- /dev/null
+++ b/apps/docs/pages/guides/api/api-keys.mdx
@@ -0,0 +1,70 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'api-keys',
+ title: 'Understanding API Keys',
+ description: 'Securing your Serverless API with Postgres Row Level Security.',
+}
+
+Supabase provides two default keys when you create a project: an `anon` key, and a `service_role` key. You can find both keys in the [API Settings](https://app.supabase.com/project/_/settings/api).
+
+The Serverless APIs are designed to work with Postgres Row Level Security (RLS). These keys both map to Postgres roles. You can find an `anon` user and a `service_role` user in the [Roles](http://app.supabase.com/project/_/database/roles) section of the dashboard.
+
+The keys are both long-lived JWTs. If you decode these keys, you will see that they contain the "role", an "issued date", and an "expiry date" ~10 years in the future.
+
+```json
+{
+ "role": "anon",
+ "iat": 1625137684,
+ "exp": 1940713684
+}
+```
+
+## The `anon` key
+
+The `anon` key has very few privileges. You can use it in your [RLS policies](/docs/guides/auth/row-level-security) for "anonymous" access. For example, this policy will allow access to the `profiles` table:
+
+```sql
+create policy "Allow anonymous access" on profiles to anon for
+select
+ using (true);
+```
+
+And similarity for disallowing access:
+
+```sql
+create policy "Disallow anonymous access" on profiles to anon for
+select
+ using (false);
+```
+
+If you are using [Supabase Auth](/docs/guides/auth/overview), then the `anon` role will automatically update to `authenticated` once a user is logged in:
+
+```sql
+create policy "Allow access to authenticated users" on profiles to authenticated for
+select
+ using (true);
+```
+
+## The `service_role` key
+
+The "service_role" is a predefined Postgres role with elevated privileges, designed to perform various administrative and service-related tasks. It can bypass Row Level Security, so it should only be used on a private server.
+
+
+ Never expose the `service_role` key in a browser or anywhere where a user can see it.
+
+
+A common use case for the `service_role` key is running data analytics jobs on the backend. To support joins on user id, it is often useful to grant the service role read access to `auth.users` table.
+
+```sql
+grant
+select
+ on table auth.users to service_role;
+```
+
+We have [partnered with GitHub](https://github.blog/changelog/2022-03-28-supabase-is-now-a-github-secret-scanning-partner/) to scan for Supabase `service_role` keys pushed to public repositories.
+If they detect any keys with service_role privileges being pushed to GitHub, they will forward the API key to us, so that we can automatically revoke the detected secrets and notify you, protecting your data against malicious actors.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/creating-routes.mdx b/apps/docs/pages/guides/api/creating-routes.mdx
new file mode 100644
index 00000000000..c48442f12d1
--- /dev/null
+++ b/apps/docs/pages/guides/api/creating-routes.mdx
@@ -0,0 +1,252 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'creating-routes',
+ title: 'Creating API Routes',
+ description:
+ 'API routes are automatically created when you create Postgres Tables, Views, or Functions.',
+}
+
+API routes are automatically created when you create Postgres Tables, Views, or Functions.
+
+## Create a table
+
+Let's create our first API route by creating a table called `todos` to store tasks.
+This creates a corresponding route `todos` which can accept `GET`, `POST`, `PATCH`, & `DELETE` requests.
+
+
+
+
+1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
+1. Click **New Table** and create a table with the name `todos`.
+1. Click **Save**.
+1. Click **New Column** and create a column with the name `task` and type `text`.
+1. Click **Save**.
+
+
+
+
+
+
+```sql
+ -- Create a table called "todos" with a column to store tasks.
+create table
+ todos (
+ id bigint generated by default as identity primary key,
+ task text check (char_length(task) > 3)
+ );
+```
+
+
+
+
+## API URL and Keys
+
+Every Supabase project has a unique API URL. Your API is secured behind an API gateway which requires an API Key for every request.
+
+1. Go to the [Settings](https://app.supabase.com/project/_/settings/general) page in the Dashboard.
+2. Click **API** in the sidebar.
+3. Find your API `URL`, `anon`, and `service_role` keys on this page.
+
+
+
+The REST API and the GraphQL API are both accessible through this URL:
+
+- REST: `https://.supabase.co/rest/v1`
+- GraphQL: `https://.supabase.co/graphql/v1`
+
+Both of these routes require the `anon` key to be passed through an `apikey` header.
+
+## Using the API
+
+### REST API
+
+You can interact with your API directly via HTTP requests, or you can use the client libraries which we provide.
+
+Let's see how to make a request to the `todos` table which we created in the first step,
+using the API URL (`SUPABASE_URL`) and Key (`SUPABASE_ANON_KEY`) we provided:
+
+
+
+
+```javascript
+// Initialize the JS client
+import { createClient } from '@supabase/supabase-js'
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
+
+// Make a request
+const { data: todos, error } = await supabase.from('todos').select('*')
+```
+
+
+
+
+```bash
+# Append /rest/v1/ to your URL, and then use the table name as the route
+curl '/rest/v1/todos' \
+-H "apikey: " \
+-H "Authorization: Bearer "
+```
+
+
+
+
+JS Reference: [select()](/docs/reference/javascript/select),
+[insert()](/docs/reference/javascript/insert),
+[update()](/docs/reference/javascript/update),
+[upsert()](/docs/reference/javascript/upsert),
+[delete()](/docs/reference/javascript/delete),
+[rpc()](/docs/reference/javascript/rpc) (call Postgres functions).
+
+### GraphQL API
+
+You can use any GraphQL client with the Supabase GraphQL API. For our GraphQL example we will use [urql](https://formidable.com/open-source/urql/docs/).
+
+
+
+
+```javascript
+import { createClient, useQuery } from 'urql'
+
+// Prepare API key and Authorization header
+const headers = {
+ apikey: ,
+ authorization: `Bearer ${}`,
+}
+
+// Create GraphQL client
+// See: https://formidable.com/open-source/urql/docs/basics/react-preact/#setting-up-the-client
+const client = createClient({
+ url: '/graphql/v1',
+ fetchOptions: function createFetchOptions() {
+ return { headers }
+ },
+})
+
+// Prepare our GraphQL query
+const TodosQuery = `
+ query {
+ todosCollection {
+ edges {
+ node {
+ id
+ title
+ }
+ }
+ }
+ }
+`
+
+// Query for the data (React)
+const [result, reexecuteQuery] = useQuery({
+ query: TodosQuery,
+})
+
+// Read the result
+const { data, fetching, error } = result
+```
+
+
+
+
+```bash
+# Append /graphql/v1/ to your URL, and then use the table name as the route
+curl --request POST '/graphql/v1' \
+-H 'apikey: ' \
+-H 'Authorization: Bearer ' \
+-H 'Content-Type: application/json' \
+-d '{ "query":"{ todos(first: 3) { edges { node { id } } } }" }'
+```
+
+
+
+
+### Realtime API
+
+By default Realtime is disabled on your database. Let's turn on Realtime for the `todos` table.
+
+
+
+
+1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
+2. Click on **Replication** in the sidebar.
+3. Control which database events are sent by toggling **Insert**, **Update**, and **Delete**.
+4. Control which tables broadcast changes by selecting **Source** and toggling each table.
+
+
+
+
+
+
+```sql
+alter
+ publication supabase_realtime add table todos;
+```
+
+
+
+
+From the client, we can listen to any new data that is inserted into the `todos` table:
+
+```javascript
+// Initialize the JS client
+import { createClient } from '@supabase/supabase-js'
+const supabase = createClient(SUPABASE_URL, SUPABASE_ANON_KEY)
+
+// Create a function to handle inserts
+const handleInserts = (payload) => {
+ console.log('Change received!', payload)
+}
+
+// Listen to inserts
+const { data: todos, error } = await supabase.from('todos').on('INSERT', handleInserts).subscribe()
+```
+
+Use [subscribe()](/docs/reference/javascript/subscribe) to listen to database changes.
+The Realtime API works through PostgreSQL's replication functionality. Postgres sends database changes to a [publication](/docs/guides/database/replication#publications)
+called `supabase_realtime`, and by managing this publication you can control which data is broadcast.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/graphql/graphiql.mdx b/apps/docs/pages/guides/api/graphql/graphiql.mdx
new file mode 100644
index 00000000000..a3ce41073fd
--- /dev/null
+++ b/apps/docs/pages/guides/api/graphql/graphiql.mdx
@@ -0,0 +1,22 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'graphiql',
+ title: 'GraphiQL documentation',
+ description: 'Some docs on graphiql.',
+ video: 'https://www.youtube.com/v/7CqlTU9aOR4',
+}
+
+Every Supabase project has a GraphQL Endpoint: `https://.supabase.co/graphql/v1`.
+
+This endpoint is compatible with any GraphiQL implementation that can pass an `apikey` header.
+Some suggested applications:
+
+- [paw.cloud](https://paw.cloud)
+- [insomnia.rest](https://insomnia.rest)
+- [postman.com/graphql](https://www.postman.com/graphql/)
+- Self-hosted GraphiQL: GraphiQL can be served through a simple HTML file. See [this discussion](https://github.com/supabase/supabase/discussions/6144) for more details.
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/joins-and-nesting.mdx b/apps/docs/pages/guides/api/joins-and-nesting.mdx
new file mode 100644
index 00000000000..470eba7a5aa
--- /dev/null
+++ b/apps/docs/pages/guides/api/joins-and-nesting.mdx
@@ -0,0 +1,206 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'joins-and-nested-tables',
+ title: 'Querying Joins and Nested tables',
+ description: 'The Serverless APIs automatically detect relationships between Postgres tables.',
+}
+
+The Serverless APIs automatically detect relationships between Postgres tables. Since Postgres is a relational database, this is a very common scenario.
+
+## One-to-many joins
+
+Let's use an example database that stores `countries` and `cities`:
+
+
+
+
+**Countries**
+
+| `id` | `name` |
+| ---- | -------------- |
+| 1 | United Kingdom |
+| 2 | United States |
+
+**Cities**
+
+| `id` | `name` | `country_id` |
+| ---- | ----------- | ------------ |
+| 1 | London | 1 |
+| 2 | Manchester | 1 |
+| 3 | Los Angeles | 2 |
+| 4 | New York | 2 |
+
+
+
+
+```sql
+create table
+ countries ("id" serial primary key, "name" text);
+
+insert into
+ countries (id, name)
+values
+ (1, 'United Kingdom'),
+ (2, 'United States');
+
+create table
+ cities (
+ "id" serial primary key,
+ "name" text,
+ "country_id" int references "countries"
+ );
+
+insert into
+ cities (name, country_id)
+values
+ ('London', 1),
+ ('Manchester', 1),
+ ('Los Angeles', 2),
+ ('New York', 2);
+```
+
+
+
+
+The APIs will automatically detect relationships based on the foreign keys:
+
+
+
+
+```js
+const { data, error } = await supabase.from('countries').select(`
+ id,
+ name,
+ cities ( id, name )
+`)
+```
+
+
+
+
+```dart
+final data = await supabase.from('todos').select('id, name, cities(id, name)');
+```
+
+
+
+
+```javascript
+const Query = `
+ query {
+ countriesCollection {
+ edges {
+ node {
+ id
+ name
+ cities {
+ id,
+ name
+ }
+ }
+ }
+ }
+ }
+`
+```
+
+
+
+
+```bash
+GET https://[REF].supabase.co/rest/v1/countries?select=id,name,cities(id,name)
+```
+
+
+
+
+## Many-to-many joins
+
+The Serverless APIs will detect many-to-many joins. For example, if you have a database which stored teams of users (where each user could below to many teams):
+
+```sql
+create table
+ users ("id" serial primary key, "name" text);
+
+create table
+ teams ("id" serial primary key, "team_name" text);
+
+create table
+ members (
+ "id" serial primary key,
+ "user_id" int references users,
+ "team_id" int references teams
+ );
+```
+
+In these cases you don't need to explicitly define the joining table (members). If we wanted to fetch all the teams and the members in each team:
+
+
+
+
+```js
+const { data, error } = await supabase.from('teams').select(`
+ id,
+ team_name,
+ users ( id, name )
+`)
+```
+
+
+
+
+```dart
+final data = await supabase.from('teams').select('id, team_name, users(id, name)');
+```
+
+
+
+
+```javascript
+const Query = `
+ query {
+ teamsCollection {
+ edges {
+ node {
+ id
+ team_name
+ users {
+ id,
+ name
+ }
+ }
+ }
+ }
+ }
+`
+```
+
+
+
+
+```bash
+GET https://[REF].supabase.co/rest/v1/teams?select=id,team_name,users(id,name)
+```
+
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/quickstart.mdx b/apps/docs/pages/guides/api/quickstart.mdx
new file mode 100644
index 00000000000..7d645a8b5f7
--- /dev/null
+++ b/apps/docs/pages/guides/api/quickstart.mdx
@@ -0,0 +1,236 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import StepHikeCompact from '~/components/StepHikeCompact'
+
+export const meta = {
+ title: 'Build an API route in less than 2 minutes.',
+ subtitle: 'Create your first API route by creating a table called `todos` to store tasks.',
+ breadcrumb: 'API Quickstart',
+}
+
+Let's create our first REST route which we can query using `cURL` or the browser.
+
+We'll create a database table called `todos` for storing tasks. This creates a corresponding API route `/rest/v1/todos` which can accept `GET`, `POST`, `PATCH`, & `DELETE` requests.
+
+
+
+
+
+
+ [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
+
+ After your project is ready, create a table in your Supabase database. You can do this with either the Table interface or the [SQL Editor](https://app.supabase.com/project/_/sql).
+
+
+
+
+
+
+
+
+ ```sql
+ -- Create a table called "todos"
+ -- with a column to store tasks.
+ create table todos (
+ id serial primary key,
+ task text
+ );
+ ```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Let's turn on Row Level Security for this table and allow anonymous access.
+
+
+
+
+
+ ```sql
+ -- Turn on security
+ alter table "todos"
+ enable row level security;
+
+ -- Allow anonymous access
+ create policy "Allow anonymous access"
+ on todos
+ to anon
+ for select
+ using (true);
+ ```
+
+
+
+
+
+
+
+
+ Now we can add some data to our table which we can access through our API.
+
+
+
+
+
+ ```sql
+ insert into todos (task)
+ values
+ ('Create tables'),
+ ('Enable security'),
+ ('Add data'),
+ ('Fetch data from the API');
+ ```
+
+
+
+
+
+
+
+
+ Find your API URL and Keys in your Dashboard [API Settings](https://app.supabase.com/project/_/settings/api). You can now query your "todos" table by appending `/rest/v1/todos` to the API URL.
+
+ Copy this block of code, substitute `` and ``, then run it from a terminal.
+
+
+
+
+ ```bash Terminal
+ curl 'https://.supabase.co/rest/v1/todos' \
+ -H "apikey: " \
+ -H "Authorization: Bearer "
+ ```
+
+
+
+
+
+
+
+## Bonus
+
+There are several options for accessing your data:
+
+### Browser
+
+You can query the route in your browser, by appending the `anon` key as a query parameter:
+
+`https://.supabase.co/rest/v1/users?apikey=`
+
+### Client libraries
+
+We provide a numerous [Client Libraries](https://github.com/supabase/supabase#client-libraries).
+
+
+
+
+```js
+const { data, error } = await supabase.from('todos').select()
+```
+
+
+
+
+```dart
+final data = await supabase.from('todos').select('*');
+```
+
+
+
+
+```python
+response = supabase.table('todos').select("*").execute()
+```
+
+
+
+
+### GraphQL
+
+Every table can be accessed through the GraphQL API by switching `/rest/v1` with `/graphql/v1`.
+
+
+
+
+```javascript
+import { createClient, useQuery } from 'urql'
+
+const URL = '/graphql/v1'
+const ANON_KEY = ''
+
+// Prepare API key and Authorization header
+const headers = {
+ apikey: `${ANON_KEY}`,
+ authorization: `Bearer ${ANON_KEY}`,
+}
+
+const client = createClient({
+ url: URL,
+ fetchOptions: function createFetchOptions() {
+ return { headers }
+ },
+})
+
+// Prepare our GraphQL query
+const TodosQuery = `
+ query {
+ todosCollection {
+ edges {
+ node {
+ id
+ task
+ }
+ }
+ }
+ }
+`
+
+// Query for the data (React)
+const [result, reexecuteQuery] = useQuery({
+ query: TodosQuery,
+})
+
+// Read the result
+const { data, fetching, error } = result
+```
+
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/rest/auto-generated-docs.mdx b/apps/docs/pages/guides/api/rest/auto-generated-docs.mdx
new file mode 100644
index 00000000000..82709aa7a1a
--- /dev/null
+++ b/apps/docs/pages/guides/api/rest/auto-generated-docs.mdx
@@ -0,0 +1,26 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'auto-docs',
+ title: 'Auto-generated documentation',
+ description: 'Supabase provides documentation that updates automatically.',
+}
+
+Supabase generates documentation in the [Dashboard](https://app.supabase.com) which updates as you make database changes.
+
+1. Go to the [API](https://app.supabase.com/project/_/api) page in the Dashboard.
+2. Select any table under **Tables and Views** in the sidebar.
+3. Switch between the JavaScript and the cURL docs using the tabs.
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/rest/client-libs.mdx b/apps/docs/pages/guides/api/rest/client-libs.mdx
new file mode 100644
index 00000000000..4b6272e1f6d
--- /dev/null
+++ b/apps/docs/pages/guides/api/rest/client-libs.mdx
@@ -0,0 +1,33 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'client-libs',
+ title: 'Client Libraries',
+ description: 'Supabase provides several client libraries for the REST and Realtime APIs.',
+ video: 'https://www.youtube.com/v/7CqlTU9aOR4',
+}
+
+Supabase provides client libraries for the REST and Realtime APIs. Some libraries are officially supported, and some are contributed by the community.
+
+## Official Libraries
+
+| `Language` | `Source Code` | `Documentation` |
+| --------------------- | ---------------------------------------------------------- | ------------------------------------------------------------------- |
+| Javascript/Typescript | [supabase-js](https://github.com/supabase/supabase-js) | [Docs](https://supabase.com/docs/reference/javascript/introduction) |
+| Dart/Flutter | [supabase-dart](https://github.com/supabase/supabase-dart) | [Docs](https://supabase.com/docs/reference/dart/introduction) |
+
+## Community Libraries
+
+| `Language` | `Source Code` | `Documentation` |
+| ----------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------- |
+| C# | [supabase-js](https://github.com/supabase-community/supabase-csharp) | [Docs](https://supabase.com/docs/reference/csharp/introduction) |
+| Go | [supabase-go](https://github.com/supabase-community/supabase-go) | |
+| Kotlin | [supabase-kt](https://github.com/supabase-community/supabase-kt) | |
+| Python | [supabase-py](https://github.com/supabase-community/supabase-py) | [Docs](https://supabase.com/docs/reference/python/initializing) |
+| Ruby | [supabase-rb](https://github.com/supabase-community/supabase-rb) | |
+| Swift | [supabase-swift](https://github.com/supabase-community/supabase-swift) | |
+| Godot Engine (GDScript) | [supabase-gdscript](https://github.com/supabase-community/godot-engine.supabase) | |
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/api/generating-types.mdx b/apps/docs/pages/guides/api/rest/generating-types.mdx
similarity index 100%
rename from apps/docs/pages/guides/api/generating-types.mdx
rename to apps/docs/pages/guides/api/rest/generating-types.mdx
diff --git a/apps/docs/pages/guides/api/securing-your-api.mdx b/apps/docs/pages/guides/api/securing-your-api.mdx
new file mode 100644
index 00000000000..70fa2ef38ae
--- /dev/null
+++ b/apps/docs/pages/guides/api/securing-your-api.mdx
@@ -0,0 +1,66 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'securing-your-api',
+ title: 'Securing your API',
+ description: 'Securing your Serverless API with Postgres Row Level Security.',
+}
+
+The Serverless APIs are designed to work with Postgres Row Level Security (RLS). If you use [Supabase Auth](/docs/guides/auth), you can restrict data based on the logged-in user.
+To control access to your data, you can use [Policies](/docs/guides/auth#policies).
+
+## Enabling Row Level Security
+
+If you create a table through the Dashboard, RLS will be enabled by default. This is not the case, however, if you create a table or view using SQL.
+To enable RLS on any table:
+
+
+
+
+1. Go to the [Authentication](https://app.supabase.com/project/_/auth/users) page in the Dashboard.
+2. Click on **Policies** in the sidebar.
+3. Select **Enable RLS** to enable Row Level Security.
+
+
+
+
+```sql
+alter table
+ todos enable row level security;
+```
+
+
+
+
+With RLS enabled, you can create Policies that allow or disallow users to access and update data. We provide a detailed guide for creating Row Level Security Policies in our [Authorization documentation](/docs/guides/auth/row-level-security).
+
+## Safeguards towards accidental deletes and updates
+
+By default, all projects have the [safeupdate](https://github.com/eradman/pg-safeupdate) Postgres extension enabled for API queries.
+This ensures that `delete()` and `update()` requests will fail if there are no filters provided.
+To confirm that safeupdate is enabled for API queries, run the following query:
+
+```sql
+select
+ usename,
+ useconfig
+from
+ pg_shadow
+where
+ usename = 'authenticator';
+```
+
+The expected value for `useconfig` should be:
+
+```sql
+['session_preload_libraries=supautils, safeupdate']
+```
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/auth/overview.mdx b/apps/docs/pages/guides/auth.mdx
similarity index 91%
rename from apps/docs/pages/guides/auth/overview.mdx
rename to apps/docs/pages/guides/auth.mdx
index 1ed7efbdb42..2e6760545b4 100644
--- a/apps/docs/pages/guides/auth/overview.mdx
+++ b/apps/docs/pages/guides/auth.mdx
@@ -44,13 +44,21 @@ You can authenticate your users in several ways:
We provide a suite of Providers and login methods, as well as [Auth helpers](/docs/guides/auth/auth-helpers/).
+#### Social Auth
+
-
+
+
+
+#### Phone Auth
+
+
+
### 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.
+You can enable third-party providers with the click of a button by navigating to Authentication > Providers > Auth Providers and inputting your `Client ID` and `Secret` for each.
@@ -116,7 +124,12 @@ Get started with our [Row Level Security Guides](/docs/guides/auth/row-level-sec
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
@@ -124,7 +137,12 @@ Authentication only gets you so far. When you need granular authorization rules,
[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 ...
@@ -172,7 +190,12 @@ Supabase provides multiple endpoints to authenticate and manage your users:
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 }) =>
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 1d07fb9db94..52f2e5acf68 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/auth-ui.mdx
@@ -23,7 +23,7 @@ It supports custom themes and extensible styles to match your brand and aestheti
Install the latest version of [supabase-js](/docs/reference/javascript) and the Auth UI package:
```bash
-npm install @supabase/supabase-js @supabase/auth-ui-react
+npm install @supabase/supabase-js @supabase/auth-ui-react @supabase/auth-ui-shared
```
### Import the Auth component
@@ -34,10 +34,7 @@ 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 = () =>
```
@@ -47,11 +44,11 @@ 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,16 title=/src/index.js
+import { Auth } from '@supabase/auth-ui-react'
import {
- Auth,
// Import predefined theme
ThemeSupa,
-} from '@supabase/auth-ui-react'
+} from '@supabase/auth-ui-shared'
const supabase = createClient(
'',
@@ -73,22 +70,32 @@ The Auth component also supports login with [offical social providers](../../aut
```js lines=13 title=/src/index.js
import { createClient } from '@supabase/supabase-js'
-import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+import { Auth } from '@supabase/auth-ui-react'
+import { ThemeSupa } from '@supabase/auth-ui-shared'
-const supabase = createClient(
- '',
- ''
-)
+const supabase = createClient('', '')
const App = () => (
)
```
+### Supported Views
+
+The Auth component is currently shipped with the following views:
+
+- [Email Login](../auth-email)
+- [Magic Link login](../auth-magic-link)
+- [Social Login](../social-login)
+- Update password
+- Forgotten password
+
+We are planning on adding more views in the future. Follow along on that [repo](https://github.com/supabase/auth-ui).
+
## Customization
There are several ways to customize Auth UI:
@@ -106,7 +113,8 @@ Auth UI comes with several themes to customize the appearance. Each predefined t
```js lines=2,13 title=/src/index.js
import { createClient } from '@supabase/supabase-js'
-import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+import { Auth } from '@supabase/auth-ui-react'
+import { ThemeSupa } from '@supabase/auth-ui-shared'
const supabase = createClient(
'',
@@ -134,7 +142,8 @@ Auth UI comes with two theme variations: `default` and `dark`. You can switch be
```js lines=14 title=/src/index.js
import { createClient } from '@supabase/supabase-js'
-import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+import { Auth } from '@supabase/auth-ui-react'
+import { ThemeSupa } from '@supabase/auth-ui-shared'
const supabase = createClient(
'',
@@ -155,16 +164,14 @@ If you don't pass a value to `theme` it uses the `"default"` theme. You can pass
### Override themes
-Auth UI themes can be overridden using variable tokens. See the [list of variable tokens](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/theming/Themes.tsx).
+Auth UI themes can be overridden using variable tokens. See the [list of variable tokens](https://github.com/supabase/auth-ui/blob/main/packages/shared/src/theming/Themes.ts).
```js lines=14-21 title=/src/index.js
import { createClient } from '@supabase/supabase-js'
-import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+import { Auth } from '@supabase/auth-ui-react'
+import { ThemeSupa } from '@supabase/auth-ui-shared'
-const supabase = createClient(
- '',
- ''
-)
+const supabase = createClient('', '')
const App = () => (
',
- ''
-)
+const supabase = createClient('', '')
const App = () => (
',
- ''
-)
+const supabase = createClient('', '')
const App = () => (
(
### Custom labels [#custom-labels]
-You can use custom labels with `localization.variables`. See the [list of labels](https://github.com/supabase-community/auth-ui/blob/main/packages/react/common/lib/Localization/en.json) that can be overwritten.
+You can use custom labels with `localization.variables`. See the [list of labels](https://github.com/supabase/auth-ui/blob/main/packages/shared/src/localization/en.json) that can be overwritten.
```js title=/src/index.js
import { createClient } from '@supabase/supabase-js'
import { Auth } from '@supabase/auth-ui-react'
-const supabase = createClient(
- '',
- ''
-)
+const supabase = createClient('', '')
const App = () => (
For a complete implementation example, check out [this repo](https://github.com/supabase/auth-helpers/tree/main/examples/nextjs-server-components).
+> The `app` directory in Next.js is still in beta and expected to change. For examples using the `pages` directory check out [Auth Helpers in Next.js](/docs/guides/auth/auth-helpers/nextjs).
-> To learn more about fetching and caching Supabase data with Next.js 13 Server Components, check out our [blog](/blog/fetching-and-caching-supabase-data-in-next-js-server-components) or [live stream](https://www.youtube.com/watch?v=QH0P5xZt5wY).
+
+
+
+
+> To learn more about Supabase and the Next.js 13 app directory, check out [this playlist](https://youtube.com/playlist?list=PL5S4mPUpp4OtwG-qCxm8gA_hjaBq0OPdz).
## Install the Next.js helper library
@@ -52,9 +61,7 @@ NEXT_PUBLIC_SUPABASE_URL=YOUR_SUPABASE_URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=YOUR_SUPABASE_ANON_KEY
```
-## Creating a Supabase Client
-
-### Server-side
+## Configure Middleware
-Create a new file at `/utils/supabase-server.js` and populate with the following:
+Middleware runs immediately before each route in rendered. Next.js only provides read access to headers and cookies in Server Components and Route Handlers, however, Supabase needs to be able to set cookies and headers to refresh expired access tokens. Therefore, you must call the `getSession` function in `middleware.js` in order to use a Supabase client in Server Components or Route Handlers.
-```js title="/utils/supabase-server.js"
-import { headers, cookies } from 'next/headers'
-import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
-
-export const createClient = () =>
- createServerComponentSupabaseClient({
- headers,
- cookies,
- })
-```
-
-> This needs to export a function, as the headers and cookies are not populated with values until the Server Component is requesting data.
-
-
-
-
-
-Create a new file at `/utils/supabase-server.ts` and populate with the following:
-
-```ts title="/utils/supabase-server.ts"
-import { headers, cookies } from 'next/headers'
-import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
-
-import type { Database } from '../lib/database.types'
-
-export const createClient = () =>
- createServerComponentSupabaseClient({
- headers,
- cookies,
- })
-```
-
-> TypeScript types can be [generated with the Supabase CLI](https://supabase.com/docs/reference/javascript/typescript-support) and passed to `createServerSupabaseClient` to add type support to the Supabase client.
-
-> This needs to export a function, as the headers and cookies are not populated with values until the Server Component is requesting data.
-
-
-
-
-This will be used any time we need to create a Supabase client _server-side_ - in a Server Component, for example.
-
-Next, we need a middleware file to refresh the user's session on navigation.
-
-
-
-
-Create a new `/app/middleware.js` file and populate with the following:
+Create a new `middleware.js` file in the root of your project and populate with the following:
```jsx title="middleware.js"
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
@@ -125,13 +81,8 @@ import { NextResponse } from 'next/server'
export async function middleware(req) {
const res = NextResponse.next()
-
const supabase = createMiddlewareSupabaseClient({ req, res })
-
- const {
- data: { session },
- } = await supabase.auth.getSession()
-
+ await supabase.auth.getSession()
return res
}
```
@@ -140,24 +91,21 @@ export async function middleware(req) {
-Create a new `/app/middleware.ts` file and populate with the following:
+Middleware runs immediately before each route in rendered. Next.js only provides read access to headers and cookies in Server Components and Route Handlers, however, Supabase needs to be able to set cookies and headers to refresh expired access tokens. Therefore, you must call the `getSession` function in `middleware.ts` in order to use a Supabase client in Server Components or Route Handlers.
+
+Create a new `middleware.ts` file in the root of your project and populate with the following:
```tsx title="middleware.ts"
import { createMiddlewareSupabaseClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
-import type { Database } from '../lib/database.types'
+import type { Database } from '@/lib/database.types'
export async function middleware(req: NextRequest) {
const res = NextResponse.next()
-
const supabase = createMiddlewareSupabaseClient({ req, res })
-
- const {
- data: { session },
- } = await supabase.auth.getSession()
-
+ await supabase.auth.getSession()
return res
}
```
@@ -167,27 +115,9 @@ export async function middleware(req: NextRequest) {
-We can now use our server-side Supabase client to fetch data in Server Components.
+## Supabase Provider
-```jsx
-import 'server-only'
-
-import { createClient } from '../../utils/supabase-server'
-
-// do not cache this page
-export const revalidate = 0
-
-export default async function ServerComponent() {
- const supabase = createClient()
- const { data } = await supabase.from('posts').select('*')
-
- return
{JSON.stringify({ data }, null, 2)}
-}
-```
-
-### Client-side
-
-We still need a Supabase instance client-side for authentication and realtime subscriptions. It is important, when using Supabase client-side, to have a single instance of a client. We can share this singleton instance across our components using providers and React context.
+All Client Components need to share a single instance of the Supabase client. We can wrap our application in a `` and use React Context to create a global Supabase instance.
-Create a new file at `/utils/supabase-browser.js` and populate with the following:
+Create a new file at `/app/supabase-provider.jsx` and populate with the following:
-```js title="/utils/supabase-browser.js"
-import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
-export const createClient = () => createBrowserSupabaseClient()
-```
-
-
-
-
-
-Create a new file at `/utils/supabase-browser.ts` and populate with the following:
-
-```ts
-import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
-import { Database } from '../lib/database.types'
-
-export const createClient = () => createBrowserSupabaseClient()
-```
-
-> TypeScript types can be [generated with the Supabase CLI](https://supabase.com/docs/reference/javascript/typescript-support) and passed to `createBrowserSupabaseClient` to add type support to the Supabase client.
-
-
-
-
-
-
-
-Next, we need to create a single instance of Supabase to use client-side. Let's create a new Provider for Supabase at `/components/supabase-provider.jsx` and populate with the following:
-
-```jsx title=components/supabase-provider.jsx
+```jsx title="app/supabase-provider.jsx"
'use client'
-import { createContext, useContext, useState } from 'react'
-import { createClient } from '../utils/supabase-browser'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { useRouter } from 'next/navigation'
-const Context = createContext()
+const Context = createContext(undefined)
export default function SupabaseProvider({ children }) {
- const [supabase] = useState(() => createClient())
+ const [supabase] = useState(() => createBrowserSupabaseClient())
+ const router = useRouter()
useEffect(() => {
- const { data: { subscription } } = supabase.auth.onAuthStateChange((event, session) => {
- if (session?.access_token !== accessToken) {
- router.refresh()
- }
+ const {
+ data: { subscription },
+ } = supabase.auth.onAuthStateChange(() => {
+ router.refresh()
})
- return () => subscription.unsubscribe()
- }, [accessToken])
+ return () => {
+ subscription.unsubscribe()
+ }
+ }, [router, supabase])
return (
@@ -260,32 +161,54 @@ export default function SupabaseProvider({ children }) {
)
}
-export const useSupabase = () => useContext(Context)
+export const useSupabase = () => {
+ const context = useContext(Context)
+
+ if (context === undefined) {
+ throw new Error('useSupabase must be used inside SupabaseProvider')
+ }
+
+ return context
+}
```
-Next, we need to create a single instance of Supabase to use client-side. Let's create a new Provider for Supabase at `/components/supabase-provider.tsx` and populate with the following:
+Create a new file at `/app/supabase-provider.tsx` and populate with the following:
-```tsx title=components/supabase-provider.tsx
+```tsx title="app/supabase-provider.tsx"
'use client'
-import { createContext, useContext, useState } from 'react'
-import { createClient } from '../utils/supabase-browser'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { useRouter } from 'next/navigation'
import type { SupabaseClient } from '@supabase/auth-helpers-nextjs'
-import type { Database } from '../lib/database.types'
+import type { Database } from '@/lib/database.types'
type SupabaseContext = {
supabase: SupabaseClient
}
-const Context = createContext()
+const Context = createContext(undefined)
export default function SupabaseProvider({ children }: { children: React.ReactNode }) {
- const [supabase] = useState(() => createClient())
+ const [supabase] = useState(() => createBrowserSupabaseClient())
+ const router = useRouter()
+
+ useEffect(() => {
+ const {
+ data: { subscription },
+ } = supabase.auth.onAuthStateChange(() => {
+ router.refresh()
+ })
+
+ return () => {
+ subscription.unsubscribe()
+ }
+ }, [router, supabase])
return (
@@ -294,7 +217,15 @@ export default function SupabaseProvider({ children }: { children: React.ReactNo
)
}
-export const useSupabase = () => useContext(Context)
+export const useSupabase = () => {
+ const context = useContext(Context)
+
+ if (context === undefined) {
+ throw new Error('useSupabase must be used inside SupabaseProvider')
+ }
+
+ return context
+}
```
> TypeScript types can be [generated with the Supabase CLI](https://supabase.com/docs/reference/javascript/typescript-support) and passed to `createBrowserSupabaseClient` to add type support to the Supabase client.
@@ -302,16 +233,6 @@ export const useSupabase = () => useContext(Context)
-We need to set up a listener to fetch fresh data whenever our user logs in or out. For this we need to check whether our client and server sessions match. Let's start by installing the `server-only` package.
-
-```bash
-npm install server-only
-```
-
-This will ensure that any component that imports this package will be a Server Component, and excluded from the browser bundle.
-
-Next, let's modify our root layout to fetch the user's session, wrap our application in our Supabase Provider, and pass the server access token as a prop to the `` component (we will create this next).
-
-```jsx title=app/layout.jsx
-import 'server-only'
+Modify `layout.jsx` to wrap the application with the `` component:
-import SupabaseListener from '../components/supabase-listener'
-import SupabaseProvider from '../components/supabase-provider'
+```jsx title="app/layout.jsx"
import './globals.css'
-import { createClient } from '../utils/supabase-server'
+import SupabaseProvider from './supabase-provider'
-// do not cache this layout
-export const revalidate = 0
-
-export default async function RootLayout({ children }) {
- const supabase = createClient()
-
- const {
- data: { session },
- } = await supabase.auth.getSession()
+export const metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+}
+export default function RootLayout({ children }) {
return (
- {/*
- will contain the components returned by the nearest parent
- head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
- */}
-
-
-
- {children}
-
+ {children}
)
@@ -360,36 +267,22 @@ export default async function RootLayout({ children }) {
-```tsx title=app/layout.tsx
-import 'server-only'
+Modify `layout.tsx` to wrap the application with the `` component:
-import SupabaseListener from '../components/supabase-listener'
-import SupabaseProvider from '../components/supabase-provider'
+```tsx title="app/layout.tsx"
import './globals.css'
-import { createClient } from '../utils/supabase-server'
+import SupabaseProvider from './supabase-provider'
-// do not cache this layout
-export const revalidate = 0
-
-export default async function RootLayout({ children }: { children: React.ReactNode }) {
- const supabase = createClient()
-
- const {
- data: { session },
- } = await supabase.auth.getSession()
+export const metadata = {
+ title: 'Create Next App',
+ description: 'Generated by create next app',
+}
+export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
- {/*
- will contain the components returned by the nearest parent
- head.tsx. Find out more at https://beta.nextjs.org/docs/api-reference/file-conventions/head
- */}
-
-
-
- {children}
-
+ {children}
)
@@ -399,7 +292,15 @@ export default async function RootLayout({ children }: { children: React.ReactNo
-And now create our Supabase listener component that uses the singleton Supabase instance to listen for auth changes.
+Now any of our Client Components can use the `useSupabase` hook to ensure they are using the same instance of a Supabase client.
+
+## Creating a Supabase Client
+
+### Client Components
+
+While Server Components are great for data fetching, we still need to use Supabase client-side for [authentication](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/login.tsx) and [realtime subscriptions](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/realtime-posts.tsx).
+
+As mentioned above, it is important that all Client Components share a single instance of the Supabase client. We can use the `useSupabase` hook we created above to ensure this is the case.
-```jsx title="/components/supabase-listener.jsx"
+```jsx title="app/new-post.jsx"
'use client'
-import { useRouter } from 'next/navigation'
-import { useEffect } from 'react'
+import { useState } from 'react'
import { useSupabase } from './supabase-provider'
-export default function SupabaseListener({ serverAccessToken }) {
+export default function NewPost() {
+ const [content, setContent] = useState('')
const { supabase } = useSupabase()
- const router = useRouter()
- useEffect(() => {
- const {
- data: { subscription },
- } = supabase.auth.onAuthStateChange((event, session) => {
- if (session?.access_token !== serverAccessToken) {
- router.refresh()
- }
- })
-
- return () => {
- subscription.unsubscribe()
- }
- }, [serverAccessToken, router, supabase])
-
- return null
-}
-```
-
-
-
-
-
-```tsx title="/components/supabase-listener.tsx"
-'use client'
-
-import { useRouter } from 'next/navigation'
-import { useEffect } from 'react'
-import { useSupabase } from './supabase-provider'
-
-export default function SupabaseListener({ serverAccessToken }: { serverAccessToken?: string }) {
- const { supabase } = useSupabase()
- const router = useRouter()
-
- useEffect(() => {
- const {
- data: { subscription },
- } = supabase.auth.onAuthStateChange((event, session) => {
- if (session?.access_token !== serverAccessToken) {
- router.refresh()
- }
- })
-
- return () => {
- subscription.unsubscribe()
- }
- }, [serverAccessToken, router, supabase])
-
- return null
-}
-```
-
-
-
-
-> `use client` tells Next.js that this is a [Client Component](https://beta.nextjs.org/docs/rendering/server-and-client-components#client-components). Only Client Components can use hooks like `useEffect` and `useRouter`.
-
-The function we pass to `onAuthStateChange` is automatically called by Supabase whenever a user's session changes. This component takes an `serverAccessToken` prop, which is the server's state for our user. If the `serverAccessToken` and the new session's `access_token` do not match then the client and server are out of sync, therefore, we want to reload the active route.
-
-Now we can use our `useSupabase` hook throughout our client-side components.
-
-### Authentication
-
-
-
-
-```jsx title="/components/login.jsx"
-'use client'
-
-import { useSupabase } from './supabase-provider'
-
-// Supabase auth needs to be triggered client-side
-export default function Login() {
- const { supabase, session } = useSupabase()
-
- const handleEmailLogin = async () => {
- await supabase.auth.signInWithPassword({
- email: 'jon@supabase.com',
- password: 'password',
- })
- }
-
- const handleGitHubLogin = async () => {
- await supabase.auth.signInWithOAuth({
- provider: 'github',
- })
- }
-
- const handleLogout = async () => {
- await supabase.auth.signOut()
+ const handleSave = async () => {
+ const { data } = await supabase.from('posts').insert({ content }).select()
}
return (
<>
-
-
-
+ setContent(e.target.value)} value={content} />
+
)
}
@@ -530,37 +337,24 @@ export default function Login() {
-```tsx title="/components/login.tsx"
+```jsx title="app/new-post.tsx"
'use client'
+import { useState } from 'react'
import { useSupabase } from './supabase-provider'
-// Supabase auth needs to be triggered client-side
-export default function Login() {
- const { supabase, session } = useSupabase()
+export default function NewPost() {
+ const [content, setContent] = useState('')
+ const { supabase } = useSupabase()
- const handleEmailLogin = async () => {
- await supabase.auth.signInWithPassword({
- email: 'jon@supabase.com',
- password: 'password',
- })
- }
-
- const handleGitHubLogin = async () => {
- await supabase.auth.signInWithOAuth({
- provider: 'github',
- })
- }
-
- const handleLogout = async () => {
- await supabase.auth.signOut()
+ const handleSave = async () => {
+ const { data } = await supabase.from('posts').insert({ content }).select()
}
return (
<>
-
-
-
+ setContent(e.target.value)} value={content} />
+
)
}
@@ -569,11 +363,11 @@ export default function Login() {
-### Realtime
+> check out [this example](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/supabase-provider.tsx) for making the user's session available to all Client Components.
-A nice pattern for fetching data server-side and subscribing to changes client-side can be done by combining Server and Client components.
+### Server Components
-> To receive realtime events, you must [enable replication on your "posts" table in Supabase](https://app.supabase.com/project/_/database/replication).
+In order to use Supabase in Server Components, you need to have implemented the `middleware.ts` steps above 👆
-Create a new file at `/app/realtime/posts.jsx` and populate with the following:
-
-```jsx title="/app/realtime/posts.jsx"
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useSupabase } from '../../components/supabase-provider'
-
-export default function Posts({ serverPosts }) {
- const [posts, setPosts] = useState(serverPosts)
- const { supabase } = useSupabase()
-
- useEffect(() => {
- setPosts(serverPosts)
- }, [serverPosts])
-
- useEffect(() => {
- const channel = supabase
- .channel('*')
- .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'posts' }, (payload) =>
- setPosts((posts) => [...posts, payload.new])
- )
- .subscribe()
-
- return () => {
- supabase.removeChannel(channel)
- }
- }, [supabase, setPosts, posts])
-
- return
{JSON.stringify(posts, null, 2)}
-}
-```
-
-This can now be used in a Server Component to subscribe to realtime updates.
-
-Create a new file at `/app/realtime/page.jsx` and populate with the following:
-
-```jsx title="/app/realtime/page.jsx"
-import 'server-only'
-
-import { createClient } from '../../utils/supabase-server'
-import Posts from './posts'
+```jsx title="app/page.jsx"
+import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { headers, cookies } from 'next/headers'
// do not cache this page
export const revalidate = 0
-export default async function Realtime() {
- const supabase = createClient()
+export default async function ServerComponent() {
+ const supabase = createServerComponentSupabaseClient({
+ headers,
+ cookies,
+ })
const { data } = await supabase.from('posts').select('*')
- return
+ return
{JSON.stringify(data, null, 2)}
}
```
@@ -641,69 +399,91 @@ export default async function Realtime() {
-Create a new file at `/app/realtime/posts.tsx` and populate with the following:
+```tsx title="app/page.tsx"
+import { createServerComponentSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { headers, cookies } from 'next/headers'
-```tsx title="/app/realtime/posts.tsx"
-'use client'
-
-import { useEffect, useState } from 'react'
-import { useSupabase } from '../../components/supabase-provider'
-
-import type { Database } from '../../lib/database.types'
-
-type Post = Database['public']['Tables']['posts']['Row']
-
-export default function Posts({ serverPosts }: { serverPosts: Post[] }) {
- const [posts, setPosts] = useState(serverPosts)
- const { supabase } = useSupabase()
-
- useEffect(() => {
- setPosts(serverPosts)
- }, [serverPosts])
-
- useEffect(() => {
- const channel = supabase
- .channel('*')
- .on('postgres_changes', { event: 'INSERT', schema: 'public', table: 'posts' }, (payload) =>
- setPosts((posts) => [...posts, payload.new as Post])
- )
- .subscribe()
-
- return () => {
- supabase.removeChannel(channel)
- }
- }, [supabase, setPosts, posts])
-
- return
{JSON.stringify(posts, null, 2)}
-}
-```
-
-> TypeScript types can be [generated with the Supabase CLI](https://supabase.com/docs/reference/javascript/typescript-support) and passed to `createServerSupabaseClient` to add type support to the Supabase client.
-
-This can now be used in a Server Component to subscribe to realtime updates.
-
-Create a new file at `/app/realtime/page.tsx` and populate with the following:
-
-```tsx title="/app/realtime/page.tsx"
-import 'server-only'
-
-import { createClient } from '../../utils/supabase-server'
-import Posts from './posts'
+import type { Database } from '@/lib/database.types'
// do not cache this page
export const revalidate = 0
-export default async function Realtime() {
- const supabase = createClient()
+export default async function ServerComponent() {
+ const supabase = createServerComponentSupabaseClient({
+ headers,
+ cookies,
+ })
const { data } = await supabase.from('posts').select('*')
- return
+ return
{JSON.stringify(data, null, 2)}
}
```
+> check out [this example](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/page.tsx) for redirecting unauthenticated users - protected pages.
+
+### Route Handlers
+
+In order to use Supabase in Route Handlers, you need to have implemented the `middleware.ts` steps above 👆
+
+
+
+
+```jsx title="app/api/posts/route.jsx"
+import { createRouteHandlerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { headers, cookies } from 'next/headers'
+
+// do not cache this page
+export const revalidate = 0
+
+export async function GET() {
+ const supabase = createRouteHandlerSupabaseClient({
+ headers,
+ cookies,
+ })
+ const { data } = await supabase.from('posts').select('*')
+ return NextResponse.json(data)
+}
+```
+
+
+
+
+
+```tsx title="app/api/posts/route.tsx"
+import { createRouteHandlerSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { NextResponse } from 'next/server'
+import { headers, cookies } from 'next/headers'
+
+import type { Database } from '@/lib/database.types'
+
+// do not cache this page
+export const revalidate = 0
+
+export async function GET() {
+ const supabase = createRouteHandlerSupabaseClient({
+ headers,
+ cookies,
+ })
+ const { data } = await supabase.from('posts').select('*')
+
+ return NextResponse.json(data)
+}
+```
+
+
+
+
+> Check out [this repo](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs) for a full example including [authentication](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/login.tsx), [realtime](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/realtime-posts.tsx) and [protected pages](https://github.com/supabase/supabase/tree/master/examples/auth/nextjs/app/page.tsx).
+
export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
index 3b093bd91b4..231edb486ca 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
@@ -4,7 +4,7 @@ export const meta = {
id: 'nextjs',
title: 'Supabase Auth with Next.js',
description: 'Authentication helpers for Next.js API routes, middleware, and SSR.',
- sidebar_label: 'Next.js',
+ sidebar_label: 'Next.js (pages)',
}
This submodule provides convenience helpers for implementing user authentication in Next.js applications.
@@ -185,7 +185,8 @@ export default async (req: NextApiRequest, res: NextApiResponse) => {
For [row level security](/docs/learn/auth-deep-dive/auth-row-level-security) to work properly when fetching data client-side, you need to make sure to use the `supabaseClient` from the `useSupabaseClient` hook and only run your query once the user is defined client-side in the `useUser()` hook:
```jsx lines=10-17
-import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+import { Auth } from '@supabase/auth-ui-react'
+import { ThemeSupa } from '@supabase/auth-ui-shared'
import { useUser, useSupabaseClient } from '@supabase/auth-helpers-react'
import { useEffect, useState } from 'react'
diff --git a/apps/docs/pages/guides/auth/auth-helpers/remix.mdx b/apps/docs/pages/guides/auth/auth-helpers/remix.mdx
index f15596e84a1..6b30622ed86 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/remix.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/remix.mdx
@@ -9,7 +9,16 @@ export const meta = {
This submodule provides convenience helpers for implementing user authentication in Remix applications.
-> Check out [this repo](https://github.com/supabase/auth-helpers/tree/main/examples/remix) for a full example.
+
+
+
+
+> For a complete implementation example, check out [this free egghead course](https://egghead.io/courses/build-a-realtime-chat-app-with-remix-and-supabase-d36e2618) or [this GitHub repo](https://github.com/supabase/auth-helpers/tree/main/examples/remix).
## Install the Remix helper library
diff --git a/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx b/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
index bcdcef28fc2..5ffe6f1b488 100644
--- a/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
+++ b/apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
@@ -13,28 +13,10 @@ This submodule provides convenience helpers for implementing user authentication
This library supports Node.js `^16.15.0`.
-
-
-
```sh
npm install @supabase/auth-helpers-sveltekit
```
-
-
-
-```sh
-yarn add @supabase/auth-helpers-sveltekit
-```
-
-
-
-
## Getting Started
### Configuration
@@ -42,36 +24,465 @@ yarn add @supabase/auth-helpers-sveltekit
Set up the following env vars. For local development you can set them in a `.env` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/sveltekit/.env.example).
```bash
-# Find these in your Supabase project settings > API
+# Find these in your Supabase project settings https://app.supabase.com/project/_/settings/api
PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```
### Set up the Supabase client
-Start off by creating a `db.ts` file inside of the `src/lib` directory and instantiate the `supabaseClient`.
+Create a server supabase client in a handle hook:
-```ts title=src/lib/db.ts
+```ts title=src/hooks.server.ts
+// src/hooks.server.ts
+import {
+ PUBLIC_SUPABASE_URL,
+ PUBLIC_SUPABASE_ANON_KEY
+} from '$env/static/public';
+import { createSupabaseServerClient } from '@supabase/auth-helpers-sveltekit';
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+ event.locals.supabase = createSupabaseServerClient({
+ supabaseUrl: PUBLIC_SUPABASE_URL,
+ supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
+ event
+ });
+
+ /**
+ * a little helper that is written for convenience so that instead
+ * of calling `const { data: { session } } = await supabase.auth.getSession()`
+ * you just call this `await getSession()`
+ */
+ event.locals.getSession = async () => {
+ const {
+ data: { session }
+ } = await event.locals.supabase.auth.getSession();
+ return session;
+ };
+
+ return resolve(event, {
+ /**
+ * There´s an issue with `filterSerializedResponseHeaders` not working when using `sequence`
+ *
+ * https://github.com/sveltejs/kit/issues/8061
+ */
+ filterSerializedResponseHeaders(name) {
+ return name === 'content-range';
+ }
+ });
+};
+```
+
+> Note that we are specifying filterSerializedResponseHeaders here. We need to tell SvelteKit that supabase needs the content-range header.
+
+### Send session to client
+
+In order to make the session available to the UI (pages, layouts) we need to pass the session in the root layout server load function:
+
+```ts title=src/routes/+layout.server.ts
+// src/routes/+layout.server.ts
+import type { LayoutServerLoad } from './$types';
+
+export const load: LayoutServerLoad = async ({ locals: { getSession } }) => {
+ return {
+ session: await getSession()
+ };
+};
+```
+
+### Shared Load functions and pages
+
+To be able to use Supabase in shared load functions and inside pages you need to create a Supabase client in the root layout load:
+
+```ts
+// src/routes/+layout.ts
+import {
+ PUBLIC_SUPABASE_ANON_KEY,
+ PUBLIC_SUPABASE_URL
+} from '$env/static/public';
+import { createSupabaseLoadClient } from '@supabase/auth-helpers-sveltekit';
+import type { LayoutLoad } from './$types';
+import type { Database } from '../DatabaseDefinitions';
+
+export const load: LayoutLoad = async ({ fetch, data, depends }) => {
+ depends('supabase:auth');
+
+ const supabase = createSupabaseLoadClient({
+ supabaseUrl: PUBLIC_SUPABASE_URL,
+ supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
+ event: { fetch },
+ serverSession: data.session
+ });
+
+ const {
+ data: { session }
+ } = await supabase.auth.getSession();
+
+ return { supabase, session };
+};
+```
+
+Access the client inside pages by `$page.data.supabase` or `data.supabase` when using `export let data: PageData`.
+
+The usage of `depends` tells sveltekit that this load function should be executed whenever `invalidate` is called to keep the page store in sync.
+
+`createSupabaseLoadClient` caches the client when running in a browser environment and therefore does not create a new client for every time the load function runs.
+
+### Setting up the event listener on the client side
+
+We need to create an event listener in the root `+layout.svelte` file in order catch supabase events being triggered.
+
+```svelte
+
+
+
+
+```
+
+The usage of `invalidate` tells sveltekit that the root `+layout.ts` load function should be executed whenever the session updates to keep the page store in sync.
+
+### Generate types from your database
+
+In order to get the most out of TypeScript and it's intellisense, you should import the generated Database types into the `app.d.ts` type definition file that comes with your SvelteKit project, where `import('./DatabaseDefinitions')` points to the generated types file outlined in [v2 docs here](https://supabase.com/docs/reference/javascript/release-notes#typescript-support) after you have logged in, linked, and generated types through the Supabase CLI.
+
+```ts
+// src/app.d.ts
+
+import { SupabaseClient, Session } from '@supabase/supabase-js';
+import { Database } from './DatabaseDefinitions';
+
+declare global {
+ namespace App {
+ interface Locals {
+ supabase: SupabaseClient;
+ getSession(): Promise;
+ }
+ interface PageData {
+ session: Session | null;
+ }
+ // interface Error {}
+ // interface Platform {}
+ }
+}
+```
+
+## Client-side data fetching with RLS
+
+For [row level security](https://supabase.com/docs/guides/auth/row-level-security) to work properly when fetching data client-side, you need to use `supabaseClient` from `PageData` and only run your query once the session is defined client-side:
+
+```html
+
+
+{#if data.session}
+
client-side data fetching with RLS
+
{JSON.stringify(loadedData, null, 2)}
+{/if}
+```
+
+## Server-side data fetching with RLS
+
+```html
+
+
+
+
Protected content for {user.email}
+
{JSON.stringify(tableData, null, 2)}
+
{JSON.stringify(user, null, 2)}
+```
+
+```ts
+// src/routes/profile/+page.ts
+import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ parent }) => {
+ const { supabase, session } = await parent();
+ if (!session) {
+ throw redirect(303, '/');
+ }
+ const { data: tableData } = await supabase.from('test').select('*');
+
+ return {
+ user: session.user,
+ tableData
+ };
+};
+```
+
+## Protecting API routes
+
+Wrap an API Route to check that the user has a valid session. If they're not logged in the session is `null`.
+
+```ts
+// src/routes/api/protected-route/+server.ts
+import type { RequestHandler } from './$types';
+import { json, error } from '@sveltejs/kit';
+
+export const GET: RequestHandler = async ({
+ locals: { supabase, getSession }
+}) => {
+ const session = await getSession();
+ if (!session) {
+ // the user is not signed in
+ throw error(401, { message: 'Unauthorized' });
+ }
+ const { data } = await supabase.from('test').select('*');
+
+ return json({ data });
+};
+```
+
+If you visit `/api/protected-route` without a valid session cookie, you will get a 401 response.
+
+## Protecting Actions
+
+Wrap an Action to check that the user has a valid session. If they're not logged in the session is `null`.
+
+```ts
+// src/routes/posts/+page.server.ts
+import type { Actions } from './$types';
+import { error, fail } from '@sveltejs/kit';
+
+export const actions: Actions = {
+ createPost: async ({ request, locals: { supabase, getSession } }) => {
+ const session = await getSession();
+
+ if (!session) {
+ // the user is not signed in
+ throw error(401, { message: 'Unauthorized' });
+ }
+ // we are save, let the user create the post
+ const formData = await request.formData();
+ const content = formData.get('content');
+
+ const { error: createPostError, data: newPost } = await supabase
+ .from('posts')
+ .insert({ content });
+
+ if (createPostError) {
+ return fail(500, {
+ supabaseErrorMessage: createPostError.message
+ });
+ }
+ return {
+ newPost
+ };
+ }
+};
+```
+
+If you try to submit a form with the action `?/createPost` without a valid session cookie, you will get a 401 error response.
+
+## Saving and deleting the session
+
+```ts
+import type { Actions } from './$types';
+import { fail, redirect } from '@sveltejs/kit';
+import { AuthApiError } from '@supabase/supabase-js';
+
+export const actions: Actions = {
+ signin: async ({ request, locals: { supabase } }) => {
+ const formData = await request.formData();
+
+ const email = formData.get('email') as string;
+ const password = formData.get('password') as string;
+
+ const { error } = await supabase.auth.signInWithPassword({
+ email,
+ password
+ });
+
+ if (error) {
+ if (error instanceof AuthApiError && error.status === 400) {
+ return fail(400, {
+ error: 'Invalid credentials.',
+ values: {
+ email
+ }
+ });
+ }
+ return fail(500, {
+ error: 'Server error. Try again later.',
+ values: {
+ email
+ }
+ });
+ }
+
+ throw redirect(303, '/dashboard');
+ },
+
+ signout: async ({ locals: { supabase } }) => {
+ await supabase.auth.signOut();
+ throw redirect(303, '/');
+ }
+};
+```
+
+## Protecting multiple routes
+
+To avoid writing the same auth logic in every single route you can use the handle hook to
+protect multiple routes at once.
+
+```ts
+// src/hooks.server.ts
+import type { RequestHandler } from './$types';
+import { getSupabase } from '@supabase/auth-helpers-sveltekit';
+import { redirect, error } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+ // protect requests to all routes that start with /protected-routes
+ if (event.url.pathname.startsWith('/protected-routes')) {
+ const session = await event.locals.getSession();
+ if (!session) {
+ // the user is not signed in
+ throw redirect(303, '/');
+ }
+ }
+
+ // protect POST requests to all routes that start with /protected-posts
+ if (
+ event.url.pathname.startsWith('/protected-posts') &&
+ event.request.method === 'POST'
+ ) {
+ const session = await event.locals.getSession();
+ if (!session) {
+ // the user is not signed in
+ throw error(303, '/');
+ }
+ }
+
+ return resolve(event);
+};
+```
+
+## Migrate from 0.8.x to 0.9 [#migration]
+
+### Set up the Supabase client [#migration-set-up-supabase-client]
+
+In version 0.9 we now setup our Supabase client for the server inside of a `hooks.server.ts` file.
+
+
+
+
+```js title=src/lib/db.ts
+// src/lib/db.ts
import { createClient } from '@supabase/auth-helpers-sveltekit'
import { env } from '$env/dynamic/public'
// or use the static env
+
// import { PUBLIC_SUPABASE_URL, PUBLIC_SUPABASE_ANON_KEY } from '$env/static/public';
export const supabaseClient = createClient(env.PUBLIC_SUPABASE_URL, env.PUBLIC_SUPABASE_ANON_KEY)
```
-To make sure the client is initialized on the server and the client, include this file in `src/hooks.server.js` and `src/hooks.client.js`:
+
+
-```ts
-import '$lib/db'
+```js title=src/hooks.server.ts
+// src/hooks.server.ts
+import {
+ PUBLIC_SUPABASE_URL,
+ PUBLIC_SUPABASE_ANON_KEY
+} from '$env/static/public';
+import { createSupabaseServerClient } from '@supabase/auth-helpers-sveltekit';
+import type { Handle } from '@sveltejs/kit';
+
+export const handle: Handle = async ({ event, resolve }) => {
+ event.locals.supabase = createSupabaseServerClient({
+ supabaseUrl: PUBLIC_SUPABASE_URL,
+ supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
+ event
+ });
+
+ /**
+ * a little helper that is written for convenience so that instead
+ * of calling `const { data: { session } } = await supabase.auth.getSession()`
+ * you just call this `await getSession()`
+ */
+ event.locals.getSession = async () => {
+ const {
+ data: { session }
+ } = await event.locals.supabase.auth.getSession();
+ return session;
+ };
+
+ return resolve(event, {
+ /**
+ * There´s an issue with `filterSerializedResponseHeaders` not working when using `sequence`
+ *
+ * https://github.com/sveltejs/kit/issues/8061
+ */
+ filterSerializedResponseHeaders(name) {
+ return name === 'content-range';
+ }
+ });
+};
```
-### Synchronizing the page store
+
+
-Edit your `+layout.svelte` file and set up the client side.
+### Initialize the client [#migration-initialize-client]
+
+In order to use the Supabase library in your client code you will need to setup a shared load function inside the root `+layout.ts` and create a `+layout.svelte` to handle our event listening for Auth events.
+
+
+
```html title=src/routes/+layout.svelte
-
+
+
+```
+
+
+
+
+### Set up hooks [#migration-set-up-hooks]
+
+Since version 0.9 relies on `hooks.server.ts` to setup our client, we no longer need the `hooks.client.ts` in our project for Supabase related code.
+
+### Typings [#migration-typings]
+
+
+
```ts title=src/app.d.ts
+// src/app.d.ts
///
// See https://kit.svelte.dev/docs/types#app
@@ -143,60 +594,52 @@ declare namespace App {
// interface Locals {}
interface PageData {
- session: import('@supabase/supabase-js').Session | null
+ session: import('@supabase/auth-helpers-sveltekit').SupabaseSession
}
// interface Error {}
// interface Platform {}
}
```
-### Basic Setup
+
+
-You can now determine if a user is authenticated on the client-side by checking that the `session` object in `$page.data` is defined.
+```ts title=src/app.d.ts
+// src/app.d.ts
+import { SupabaseClient, Session } from '@supabase/supabase-js';
+import { Database } from './DatabaseDefinitions';
-```html title=src/routes/+page.svelte
-
-
-{#if !$page.data.session}
-
I am not logged in
-{:else}
-
Welcome {$page.data.session.user.email}
-
I am logged in!
-{/if}
+declare global {
+ namespace App {
+ interface Locals {
+ supabase: SupabaseClient;
+ getSession(): Promise;
+ }
+ interface PageData {
+ session: Session | null;
+ }
+ // interface Error {}
+ // interface Platform {}
+ }
+}
```
-## Client-side data fetching with RLS
+
+
-For [row level security](/docs/learn/auth-deep-dive/auth-row-level-security) to work properly when fetching data client-side, you need to make sure to import the `{ supabaseClient }` from `$lib/db` and only run your query once the session is defined client-side in `$page.data`:
+### Protecting a page [#migration-protecting-a-page]
-```html
-
-
-{#if $page.data.session}
-
client-side data fetching with RLS
-
{JSON.stringify(loadedData, null, 2)}
-{/if}
-```
-
-## Server-side data fetching with RLS
+
+
```html title=src/routes/profile/+page.svelte
-
+
+
Protected content for {user.email}
+
{JSON.stringify(tableData, null, 2)}
+
{JSON.stringify(user, null, 2)}
+```
+
+```ts title=src/routes/profile/+page.ts
+// src/routes/profile/+page.ts
+import type { PageLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: PageLoad = async ({ parent }) => {
+ const { supabase, session } = await parent();
+ if (!session) {
+ throw redirect(303, '/');
+ }
+ const { data: tableData } = await supabase.from('test').select('*');
+
+ return {
+ user: session.user,
+ tableData
+ };
+};
+```
+
+
+
+
+### Protecting a API route [#migration-protecting-a-api-route]
+
+
+
```ts title=src/routes/api/protected-route/+server.ts
+// src/routes/api/protected-route/+server.ts
import type { RequestHandler } from './$types'
import { getSupabase } from '@supabase/auth-helpers-sveltekit'
import { json, redirect } from '@sveltejs/kit'
@@ -248,133 +736,35 @@ export const GET: RequestHandler = async (event) => {
}
```
-If you visit `/api/protected-route` without a valid session cookie, you will get a 303 response.
+
+
-## Protecting Actions
+```ts title=src/routes/api/protected-route/+server.ts
+// src/routes/api/protected-route/+server.ts
+import type { RequestHandler } from './$types';
+import { json, error } from '@sveltejs/kit';
-Wrap an Action to check that the user has a valid session. If they're not logged in the session is `null`.
-
-```ts title=src/routes/posts/+page.server.ts
-import type { Actions } from './$types'
-import { getSupabase } from '@supabase/auth-helpers-sveltekit'
-import { error, invalid } from '@sveltejs/kit'
-
-export const actions: Actions = {
- createPost: async (event) => {
- const { request } = event
- const { session, supabaseClient } = await getSupabase(event)
- if (!session) {
- // the user is not signed in
- throw error(403, { message: 'Unauthorized' })
- }
- // we are save, let the user create the post
- const formData = await request.formData()
- const content = formData.get('content')
-
- const { error: createPostError, data: newPost } = await supabaseClient
- .from('posts')
- .insert({ content })
-
- if (createPostError) {
- return invalid(500, {
- supabaseErrorMessage: createPostError.message,
- })
- }
- return {
- newPost,
- }
- },
-}
-```
-
-If you try to submit a form with the action `?/createPost` without a valid session cookie, you will get a 403 error response.
-
-## Saving and deleting the session
-
-```ts
-import type { Actions } from './$types'
-import { invalid, redirect } from '@sveltejs/kit'
-import { getSupabase } from '@supabase/auth-helpers-sveltekit'
-import { AuthApiError } from '@supabase/supabase-js'
-
-export const actions: Actions = {
- signin: async (event) => {
- const { request, cookies, url } = event
- const { session, supabaseClient } = await getSupabase(event)
- const formData = await request.formData()
-
- const email = formData.get('email') as string
- const password = formData.get('password') as string
-
- const { error } = await supabaseClient.auth.signInWithPassword({
- email,
- password,
- })
-
- if (error) {
- if (error instanceof AuthApiError && error.status === 400) {
- return invalid(400, {
- error: 'Invalid credentials.',
- values: {
- email,
- },
- })
- }
- return invalid(500, {
- error: 'Server error. Try again later.',
- values: {
- email,
- },
- })
- }
-
- throw redirect(303, '/dashboard')
- },
-
- signout: async (event) => {
- const { supabaseClient } = await getSupabase(event)
- await supabaseClient.auth.signOut()
- throw redirect(303, '/')
- },
-}
-```
-
-## Protecting multiple routes
-
-To avoid writing the same auth logic in every single route you can use the handle hook to
-protect multiple routes at once.
-
-```ts title=src/hooks.server.ts
-import type { RequestHandler } from './$types'
-import { getSupabase } from '@supabase/auth-helpers-sveltekit'
-import { redirect, error } from '@sveltejs/kit'
-
-export const handle: Handle = async ({ event, resolve }) => {
- // protect requests to all routes that start with /protected-routes
- if (event.url.pathname.startsWith('/protected-routes')) {
- const { session, supabaseClient } = await getSupabase(event)
-
- if (!session) {
- throw redirect(303, '/')
- }
+export const GET: RequestHandler = async ({
+ locals: { supabase, getSession }
+}) => {
+ const session = await getSession();
+ if (!session) {
+ // the user is not signed in
+ throw error(401, { message: 'Unauthorized' });
}
+ const { data } = await supabase.from('test').select('*');
- // protect POST requests to all routes that start with /protected-posts
- if (event.url.pathname.startsWith('/protected-posts') && event.request.method === 'POST') {
- const { session, supabaseClient } = await getSupabase(event)
-
- if (!session) {
- throw error(303, '/')
- }
- }
-
- return resolve(event)
-}
+ return json({ data });
+};
```
-## Migrate from 0.7.x to 0.8 [#migration]
+
+
-### Set up the Supabase client [#migration-set-up-supabase-client]
+
+## Migrate from 0.7.x to 0.8 [#migration-0-8]
+
+### Set up the Supabase client [#migration-set-up-supabase-client-0-8]
-### Initialize the client [#migration-initialize-client]
+### Initialize the client [#migration-initialize-client-0-8]
-### Set up hooks [#migration-set-up-hooks]
+### Set up hooks [#migration-set-up-hooks-0-8]
-### Typings [#migration-typings]
+### Typings [#migration-typings-0-8]
-### withPageAuth [#migration-with-page-auth]
+### withPageAuth [#migration-with-page-auth-0-8]
{
-### withApiAuth [#migration-with-api-auth]
+### withApiAuth [#migration-with-api-auth-0-8]
+
+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 bd5ae4f7db7..8b25736949a 100644
--- a/apps/docs/pages/guides/auth/managing-user-data.mdx
+++ b/apps/docs/pages/guides/auth/managing-user-data.mdx
@@ -38,6 +38,12 @@ Primary keys are **guaranteed not to change**. Columns, indices, constraints or
You may delete users directly or via the management console at Authentication > Users. Note that deleting a user from the `auth.users` table does not automatically sign out a user. As Supabase makes use of JSON Web Tokens (JWT), a user's JWT will remain "valid" until it has expired. Should you wish to immediately revoke access for a user, do considering making use of a Row Level Security policy as described below.
+
+You cannot delete a user if they are the owner of any objects in Supabase Storage.
+
+You will encounter an error when you try to delete an Auth user that owns any Storage objects. If this happens, try deleting all the objects for that user, or reassign ownership to another user.
+
+
## 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.
@@ -87,6 +93,32 @@ If you need to fetch a full list of user profiles, we supply a `service_key` whi
Make sure you _NEVER_ expose this publicly. But it can be used on the server-side to fetch all of the profiles.
+## Accessing User Metadata
+
+You can assign metadata to users on sign up:
+
+```js
+const { data, error } = await supabase.auth.signUp({
+ email: 'example@email.com',
+ password: 'example-password',
+ options: {
+ data: {
+ first_name: 'John',
+ age: 27,
+ },
+ },
+})
+```
+
+User metadata is stored on the `raw_user_meta_data` column of the `auth.users` table. To view the metadata:
+
+```js
+const {
+ data: { user },
+} = await supabase.auth.getUser()
+let metadata = user.user_metadata
+```
+
## Advanced techniques
### Using triggers
diff --git a/apps/docs/pages/guides/auth/quickstarts/react.mdx b/apps/docs/pages/guides/auth/quickstarts/react.mdx
new file mode 100644
index 00000000000..c2ae0efb7fb
--- /dev/null
+++ b/apps/docs/pages/guides/auth/quickstarts/react.mdx
@@ -0,0 +1,137 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+import StepHikeCompact from '~/components/StepHikeCompact'
+
+export const meta = {
+ title: 'Use Supabase Auth with React',
+ subtitle: 'Learn how to Supabase Auth with React.js.',
+ breadcrumb: 'Auth Quickstarts',
+}
+
+
+
+
+
+
+ [Launch a new project](https://app.supabase.com) in the Supabase Dashboard.
+
+ Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://app.supabase.com/project/_/sql).
+
+
+
+
+
+ ```sql SQL_EDITOR
+ select * from auth.users;
+ ````
+
+
+
+
+
+
+
+
+
+ Create a React app using the `create-react-app` command.
+
+
+
+
+
+ ```bash Terminal
+ npx create-react-app my-app
+ ```
+
+
+
+
+
+
+
+
+ The fastest way to get started is to use Supabase's `auth-ui-react` library which provides a convenient interface for working with Supabase Auth from a React app.
+
+ Navigate to the React app and install the Supabase libraries.
+
+
+
+
+
+ ```bash Terminal
+ cd my-app && npm install @supabase/supabase-js @supabase/auth-ui-react
+ ```
+
+
+
+
+
+
+
+
+ In `index.js`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
+
+ You can configure the Auth component to display whenever there is no session inside `supabase.auth.getSession()`
+
+
+
+
+
+ ```js src/index.js
+ import './index.css'
+ import { useState, useEffect } from 'react'
+ import { createClient } from '@supabase/supabase-js'
+ import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+
+ const supabase = createClient('https://.supabase.co', '')
+
+ export default function App() {
+ const [session, setSession] = useState(null)
+
+ useEffect(() => {
+ supabase.auth.getSession().then(({ data: { session } }) => {
+ setSession(session)
+ })
+
+ const {
+ data: { subscription },
+ } = supabase.auth.onAuthStateChange((_event, session) => {
+ setSession(session)
+ })
+
+ return () => subscription.unsubscribe()
+ }, [])
+
+ if (!session) {
+ return ()
+ }
+ else {
+ return (
Logged in!
)
+ }
+ }
+ ```
+
+
+
+
+
+
+
+
+ Start the app, go to http://localhost:3000 in a browser, and open the browser console and you should be able to log in.
+
+
+
+
+
+ ```bash Terminal
+ npm start
+ ```
+
+
+
+
+
+
+export const Page = ({ children }) =>
+
+export default Page
diff --git a/apps/docs/pages/guides/auth/row-level-security.mdx b/apps/docs/pages/guides/auth/row-level-security.mdx
index 1be866869e0..1987e8acbea 100644
--- a/apps/docs/pages/guides/auth/row-level-security.mdx
+++ b/apps/docs/pages/guides/auth/row-level-security.mdx
@@ -328,6 +328,132 @@ Tip: Make sure to enable RLS for all your tables, so that your tables are inacce
Supabase provides special "Service" keys, which can be used to bypass all RLS.
These should never be used in the browser or exposed to customers, but they are useful for administrative tasks.
+
+Initializing a client with a Service Key will not override RLS if a user token is set. If a user is signed in with a client, Supabase will adhere to the RLS policy of the user.
+
+
+### Testing policies
+
+To test policies on the database itself (i.e., from the [SQL Editor](https://app.supabase.com/project/_/sql) or from `psql`) without switching to your frontend and logging in as different users, you can utilize the following helper SQL procedures ([credits](https://github.com/supabase/supabase/issues/7311#issuecomment-1398648114)):
+
+```sql
+grant anon, authenticated to postgres;
+
+create or replace procedure auth.login_as_user (user_email text)
+ language plpgsql
+ as $$
+declare
+ auth_user auth.users;
+begin
+ select
+ * into auth_user
+ from
+ auth.users
+ where
+ email = user_email;
+ execute format('set request.jwt.claim.sub=%L', (auth_user).id::text);
+ execute format('set request.jwt.claim.role=%I', (auth_user).role);
+ execute format('set request.jwt.claim.email=%L', (auth_user).email);
+ execute format('set request.jwt.claims=%L', json_strip_nulls(json_build_object('app_metadata', (auth_user).raw_app_meta_data))::text);
+
+ raise notice '%', format( 'set role %I; -- logging in as %L (%L)', (auth_user).role, (auth_user).id, (auth_user).email);
+ execute format('set role %I', (auth_user).role);
+end;
+$$;
+
+create or replace procedure auth.login_as_anon ()
+ language plpgsql
+ as $$
+begin
+ set request.jwt.claim.sub='';
+ set request.jwt.claim.role='';
+ set request.jwt.claim.email='';
+ set request.jwt.claims='';
+ set role anon;
+end;
+$$;
+
+create or replace procedure auth.logout ()
+ language plpgsql
+ as $$
+begin
+ set request.jwt.claim.sub='';
+ set request.jwt.claim.role='';
+ set request.jwt.claim.email='';
+ set request.jwt.claims='';
+ set role postgres;
+end;
+$$;
+```
+
+To switch to a given user (by email), use `call auth.login_as_user('my@email.com');`. You can also switch to the `anon` role using `call auth.login_as_anon();`. When you are done, use `call auth.logout();` to return yourself to the `postgres` role.
+
+These procedures can also be used for writing [pgTAP](/docs/guides/database/extensions/pgtap) unit tests for policies.
+
+
+ Click here to see an example `psql` interaction using this.
+
+This example shows that the `public.profiles` table from the tutorial example can indeed be updated by the `postgres` role and the owner of the row but not from `anon` connections:
+
+```shell
+postgres=> select id, email from auth.users;
+ id | email
+--------------------------------------+-------------------
+ d4f0aa86-e6f6-41d1-bd32-391f077cf1b9 | user1@example.com
+ 15d6811a-16ee-4fa2-9b18-b63085688be4 | user2@example.com
+ 4e1010bb-eb37-4a4d-a05a-b0ee315c9d56 | user3@example.com
+(3 rows)
+
+postgres=> table public.profiles;
+ id | updated_at | username | full_name | avatar_url | website
+--------------------------------------+------------+----------+-----------+------------+---------
+ d4f0aa86-e6f6-41d1-bd32-391f077cf1b9 | | user1 | User 1 | |
+ 15d6811a-16ee-4fa2-9b18-b63085688be4 | | user2 | User 2 | |
+ 4e1010bb-eb37-4a4d-a05a-b0ee315c9d56 | | user3 | User 3 | |
+(3 rows)
+
+postgres=> call auth.login_as_anon();
+CALL
+postgres=> update public.profiles set updated_at=now();
+UPDATE 0 -- anon users cannot update any profile but see all of them
+postgres=> table public.profiles;
+ id | updated_at | username | full_name | avatar_url | website
+--------------------------------------+------------+----------+-----------+------------+---------
+ d4f0aa86-e6f6-41d1-bd32-391f077cf1b9 | | user1 | User 1 | |
+ 15d6811a-16ee-4fa2-9b18-b63085688be4 | | user2 | User 2 | |
+ 4e1010bb-eb37-4a4d-a05a-b0ee315c9d56 | | user3 | User 3 | |
+(3 rows)
+
+postgres=> call auth.logout();
+CALL
+postgres=> call auth.login_as_user('user1@example.com');
+NOTICE: set role authenticated; -- logging in as 'd4f0aa86-e6f6-41d1-bd32-391f077cf1b9' ('user1@example.com')
+CALL
+postgres=> update public.profiles set updated_at=now();
+UPDATE 1 -- authenticated users can update their own profile and see all of them
+postgres=> table public.profiles;
+ id | updated_at | username | full_name | avatar_url | website
+--------------------------------------+-------------------------------+----------+-----------+------------+---------
+ 15d6811a-16ee-4fa2-9b18-b63085688be4 | | user1 | User 1 | |
+ 4e1010bb-eb37-4a4d-a05a-b0ee315c9d56 | | user2 | User 2 | |
+ d4f0aa86-e6f6-41d1-bd32-391f077cf1b9 | 2023-02-18 21:39:16.204612+00 | user3 | User 3 | |
+(3 rows)
+
+postgres=> call auth.logout();
+CALL
+postgres=> update public.profiles set updated_at=now();
+UPDATE 3 -- the 'postgres' role can update and see all profiles
+postgres=> table public.profiles;
+ id | updated_at | username | full_name | avatar_url | website
+--------------------------------------+-------------------------------+----------+-----------+------------+---------
+ 15d6811a-16ee-4fa2-9b18-b63085688be4 | 2023-02-18 21:40:08.216324+00 | user1 | User 1 | |
+ 4e1010bb-eb37-4a4d-a05a-b0ee315c9d56 | 2023-02-18 21:40:08.216324+00 | user2 | User 2 | |
+ d4f0aa86-e6f6-41d1-bd32-391f077cf1b9 | 2023-02-18 21:40:08.216324+00 | user3 | User 3 | |
+(3 rows)
+
+```
+
+
## Deprecated features
diff --git a/apps/docs/pages/guides/auth/server-side-rendering.mdx b/apps/docs/pages/guides/auth/server-side-rendering.mdx
index 635407cd986..87235781711 100644
--- a/apps/docs/pages/guides/auth/server-side-rendering.mdx
+++ b/apps/docs/pages/guides/auth/server-side-rendering.mdx
@@ -130,6 +130,9 @@ if (refreshToken && accessToken) {
await supabase.auth.setSession({
refresh_token: refreshToken,
access_token: accessToken,
+ {
+ auth: { persistSession: false },
+ }
})
} else {
// make sure you handle this case!
@@ -160,6 +163,12 @@ use this potentially stale information to render a page.
## Frequently Asked Questions
+### No session on the server side with Next.js route prefetching?
+
+When you use route prefetching in Next.js using `` components or the `Router.push()` APIs can send server-side requests before the browser processes the access and refresh tokens. This means that those requests may not have any cookies set and your server code will render unauthenticated content.
+
+To improve experience for your users, we recommend redirecting users to one specific page after sign-in that does not include any route prefetching from Next.js. Once the Supabase client library running in the browser has obtained the access and refresh tokens from the URL fragment, you can send users to any pages that use prefetching.
+
### How do I make the cookies `HttpOnly`?
This is not necessary. Both the access token and refresh token are designed to
diff --git a/apps/docs/pages/guides/auth/social-login.mdx b/apps/docs/pages/guides/auth/social-login.mdx
index 1c950411577..8864a1b6dc9 100644
--- a/apps/docs/pages/guides/auth/social-login.mdx
+++ b/apps/docs/pages/guides/auth/social-login.mdx
@@ -43,6 +43,12 @@ Supabase supports a suite of social providers. Follow these guides to configure
))}
+
+## Provider Tokens
+
+Once the OAuth flow completes, Supabase Auth will sign your user in. You will receive a copy of the provider token used in the OAuth flow in case you need to use it further. For example, you can use the Google provider token to access Google APIs on behalf of your user.
+
+Provider tokens are intentionally not stored in your project's database, however. This is because provider tokens give access to potentially sensitive user data in third-party systems. Different applications have different needs, and one application's OAuth scopes may be significantly more permissive than another. If you do want to use the provider token outside of the browser that completed the OAuth flow, you will have to send it manually to a secure server under your control.
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/auth/social-login/auth-github.mdx b/apps/docs/pages/guides/auth/social-login/auth-github.mdx
index e6f2dff566b..5a3e76eed1d 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-github.mdx
+++ b/apps/docs/pages/guides/auth/social-login/auth-github.mdx
@@ -36,8 +36,9 @@ Go to the [GitHub Developer Settings](https://github.com/settings/developers) pa
-## Register a new OAuth application
+## Register a new OAuth application on Github.
+- Navigate to `Settings`/`Developer settings`/`OAuth Apps`
- 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.
diff --git a/apps/docs/pages/guides/auth/social-login/auth-google.mdx b/apps/docs/pages/guides/auth/social-login/auth-google.mdx
index 261887a8468..0e9cbe5fc3d 100644
--- a/apps/docs/pages/guides/auth/social-login/auth-google.mdx
+++ b/apps/docs/pages/guides/auth/social-login/auth-google.mdx
@@ -83,6 +83,24 @@ async function signInWithGoogle() {
}
```
+Google OAuth2.0 doesn't return the `provider_refresh_token` by default. If you need the `provider_refresh_token` returned, you will need to add additional query parameters:
+
+```js
+async function signInWithGoogle() {
+ const { data, error } = await supabase.auth.signInWithOAuth({
+ provider: 'google',
+ options: {
+ queryParams: {
+ access_type: 'offline',
+ prompt: 'consent',
+ },
+ },
+ })
+}
+```
+
+You can view the full list of query parameters and their descriptions [here](https://developers.google.com/identity/protocols/oauth2/web-server#creatingclient).
+
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/sso/auth-sso-saml.mdx b/apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx
new file mode 100644
index 00000000000..d5598cc9c7a
--- /dev/null
+++ b/apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx
@@ -0,0 +1,364 @@
+import Layout from '~/layouts/DefaultGuideLayout'
+
+export const meta = {
+ id: 'auth-sso-saml',
+ title: 'Single Sign-On with SAML 2.0 for Projects',
+ description: 'Use Single Sign-On (SSO) authentication on your project with SAML 2.0',
+ video: 'https://www.youtube.com/v/em1cpOAXknM',
+}
+
+Supabase Auth supports enterprise-level Single Sign-On (SSO) for any identity providers compatible with the using the SAML 2.0 protocol. This is a non-exclusive list of supported identity providers:
+
+- Google Workspaces (formerly known as GSuite)
+- Okta, Auth0
+- Microsoft Active Directory, Azure Active Directory, Microsoft Entra
+- PingIdentity
+- OneLogin
+
+If you're having issues with identity provider software not on this list, please [open a support ticket](https://app.supabase.com/support/new).
+
+## Prerequisites
+
+This guide requires the use of the [Supabase CLI](/docs/guides/cli). Please make sure you're using version v1.46.4 or higher. You can use `supabase -v` to see the currently installed version.
+
+SAML 2.0 support is disabled by default on Supabase projects. You can configure this on the [Auth Providers](https://app.supabase.com/project/_/auth/providers) page on your project.
+
+Please note that SAML 2.0 support is offered on tiers Pro and above. Check the [Pricing](https://supabase.com/pricing) page for more information.
+
+## Terminology
+
+The number of SAML and SSO acronyms can often be overwhelming. Here's a glossary which you can refer back to at any time:
+
+- **Identity Provider**, **IdP**, or **IDP**
+ An identity provider is a service that manages user accounts at a company or organization. It can verify the identity of a user and exchange that information with your Supabase project and other applications. It acts as a single source of truth for user identities and access rights. Commonly used identity providers are: Microsoft Active Directory (Azure AD, Microsoft Entra), Okta, Google Workspaces (GSuite), PingIdentity, OneLogin, and many others. There are also self-hosted and on-prem versions of identity providers, and sometimes they are accessible only by having access to a company VPN or being in a specific building.
+- **Service Provider**, **SP**
+ This is the software that is asking for user information from an identity provider. In Supabase, this is your project's Auth server.
+- **Assertion**
+ An assertion is a statement issued by an identity provider that contains information about a user.
+- **EntityID**
+ A globally unique ID (usually a URL) that identifies an Identity Provider or Service Provider across the world.
+- **NameID**
+ A unique ID (usually an email address) that identifies a user at an Identity Provider.
+- **Metadata**
+ An XML document that describes the features and configuration of an Identity Provider or Service Provider. It can be as a standalone document or as a URL. Usually (but not always) the `EntityID` is the URL at which you can access the Metadata.
+- **Certificate**
+ Supabase Auth (the Service Provider) trusts assertions from an Identity Provider based on the signature attached to the assertion. The signature is verified according to the certificate present in the Metadata.
+- **Assertion Consumer Service (ACS) URL**
+ This is one of the most important SAML URLs. It is the URL where Supabase Auth will accept assertions from an identity provider. Basically, once the identity provider verifies the user's identity it will redirect to this URL and the redirect request will contain the assertion.
+- **Binding (Redirect, POST, or Artifact)**
+ This is a description of the way an identity provider communicates with Supabase Auth. When using the Redirect binding, the communication occurs using HTTP 301 redirects. When it's `POST`, it's using `POST` requests sent with `
-
@@ -406,7 +398,7 @@ Let's create an avatar for the user so that they can upload a profile photo.
Create an **AvatarComponent** with `ng g c avatar` Angular CLI command.
```ts title=src/app/avatar/avatar.component.ts
-import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'
+import { Component, EventEmitter, Input, Output } from '@angular/core'
import { SafeResourceUrl, DomSanitizer } from '@angular/platform-browser'
import { SupabaseService } from '../supabase.service'
@@ -415,7 +407,7 @@ import { SupabaseService } from '../supabase.service'
templateUrl: './avatar.component.html',
styleUrls: ['./avatar.component.css'],
})
-export class AvatarComponent implements OnInit {
+export class AvatarComponent {
_avatarUrl: SafeResourceUrl | undefined
uploading = false
@@ -430,8 +422,6 @@ export class AvatarComponent implements OnInit {
constructor(private readonly supabase: SupabaseService, private readonly dom: DomSanitizer) {}
- ngOnInit(): void {}
-
async downloadImage(path: string) {
try {
const { data } = await this.supabase.downLoadImage(path)
@@ -534,13 +524,8 @@ export class AccountComponent implements OnInit {
-## 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-expo.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx
index 192caa40725..aa420134d55 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-expo.mdx
@@ -1,20 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-expo',
- title: 'Quickstart: Expo',
+ title: 'Build a User Management App with Expo',
description: 'Learn how to use Supabase in your React Native App.',
- sidebar_label: 'Expo',
- hide_table_of_contents: false,
}
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/expo-user-management).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/expo-user-management).
+
@@ -38,6 +36,7 @@ Then let's install the additional dependencies: [supabase-js](https://github.com
```bash
npm install @supabase/supabase-js
npm install react-native-elements @react-native-async-storage/async-storage react-native-url-polyfill
+npx expo install expo-secure-store
```
Now let's create a helper file to initialize the Supabase client.
@@ -46,15 +45,28 @@ These variables will be exposed on the browser, and that's completely fine since
[Row Level Security](/docs/guides/auth#row-level-security) enabled on our Database.
```ts title=lib/supabase.ts
-import AsyncStorage from '@react-native-async-storage/async-storage'
+import * as SecureStore from "expo-secure-store";
import { createClient } from '@supabase/supabase-js'
+
+const ExpoSecureStoreAdapter = {
+ getItem: (key: string) => {
+ return SecureStore.getItemAsync(key);
+ },
+ setItem: (key: string, value: string) => {
+ SecureStore.setItemAsync(key, value);
+ },
+ removeItem: (key: string) => {
+ SecureStore.deleteItemAsync(key);
+ },
+};
+
const supabaseUrl = YOUR_REACT_NATIVE_SUPABASE_URL
const supabaseAnonKey = YOUR_REACT_NATIVE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
auth: {
- storage: AsyncStorage as any,
+ storage: ExpoSecureStoreAdapter as any,
autoRefreshToken: true,
persistSession: true,
detectSessionInUrl: false,
@@ -101,7 +113,7 @@ export default function Auth() {
}
return (
-
+
+
@@ -504,13 +516,8 @@ expo prebuild
-## 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-flutter.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
index 478390cf7c0..af7ff9fd3e6 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-flutter.mdx
@@ -1,19 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-flutter',
- title: 'Quickstart: Flutter',
+ title: 'Build a User Management App with Flutter',
description: 'Learn how to use Supabase in your Flutter App.',
- sidebar_label: 'Flutter',
}
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/supabase/supabase/tree/master/examples/user-management/flutter-user-management).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/flutter-user-management).
+
@@ -77,7 +76,7 @@ Add an intent-filter to enable deep linking:
```
-For iOS, edit the ios/Runner/Info.plist file.
+For iOS, edit the ios/Runner/Info.plist file.
Add CFBundleURLTypes to enable deep linking:
@@ -797,14 +796,13 @@ class _AccountPageState extends State {
-Congratulations, that is it! You have now built a fully functional user management app using Flutter and Supabase!
+Congratulations, you've built a fully functional user management app using Flutter and Supabase!
## See also
- [Flutter Tutorial: building a Flutter chat app](https://supabase.com/blog/flutter-tutorial-building-a-chat-app)
- [Flutter Tutorial - Part 2: Authentication and Authorization with RLS](https://supabase.com/blog/flutter-authentication-and-authorization-with-rls)
-
export const Page = ({ children }) =>
export default Page
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx
index 4616bb796b0..43516ef65f3 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-angular.mdx
@@ -1,19 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-ionic-angular',
- title: 'Quickstart: Ionic Angular',
+ title: 'Build a User Management App with Ionic Angular',
description: 'Learn how to use Supabase in your Ionic Angular App.',
- sidebar_label: 'Ionic Angular',
}
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/mhartington/supabase-ionic-angular).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/mhartington/supabase-ionic-angular).
+
@@ -526,14 +525,9 @@ template: `
-## 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)
-
-## Resources
+## See also
- [Authentication in Ionic Angular with Supabase](https://supabase.com/blog/authentication-in-ionic-angular)
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx
index 3c7c9847b96..3e3d261a5e4 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-react.mdx
@@ -1,19 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-ionic-react',
- title: 'Quickstart: Ionic React',
+ title: 'Build a User Management App with Ionic React',
description: 'Learn how to use Supabase in your Ionic React App.',
- sidebar_label: 'Ionic React',
}
-### GitHub
-
-Should you get stuck while working through the guide, refer to [this repo](https://github.com/mhartington/supabase-ionic-react).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/mhartington/supabase-ionic-react).
+
@@ -499,13 +498,8 @@ 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/getting-started/tutorials/with-ionic-vue.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx
index b5599980212..dc884f9d8d5 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-ionic-vue.mdx
@@ -1,19 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-ionic-vue',
- title: 'Quickstart: Ionic Vue',
+ title: 'Build a User Management App with 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).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/mhartington/supabase-ionic-vue).
+
@@ -559,13 +558,8 @@ export default defineComponent({
-## 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-nextjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
index a63a164a42b..14c32a07bbb 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nextjs.mdx
@@ -1,10 +1,8 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-nextjs',
- title: 'Quickstart: Next.js',
+ title: 'Build a User Management App with NextJS',
description: 'Learn how to use Supabase in your Next App.',
- sidebar_label: 'Next.js',
video: 'https://www.youtube.com/v/0Fs96oZ4se0',
}
@@ -12,7 +10,7 @@ export const meta = {
-### Video Guide
+## 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).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nextjs-ts-user-management).
+
@@ -167,7 +166,8 @@ 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 { Auth } from '@supabase/auth-ui-react'
+import { ThemeSupa } from '@supabase/auth-ui-shared'
import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react'
const Home = () => {
@@ -318,6 +318,8 @@ export default function Account({ session }) {
Let's create a new component for that called `Account.tsx` within a `components` folder.
+First, [generate type definitions from your database using the Supabase CLI](https://supabase.com/docs/guides/database/api/generating-types) to `../utils/database.types`.
+
```tsx title=components/Account.tsx
import { useState, useEffect } from 'react'
import { useUser, useSupabaseClient, Session } from '@supabase/auth-helpers-react'
@@ -449,7 +451,8 @@ export default function Account({ session }: { session: Session }) {
Now that we have all the components in place, let's update `pages/index.js`:
```jsx lines=3,14 title=pages/index.js
-import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+import { Auth } from '@supabase/auth-ui-react'
+import { ThemeSupa } from '@supabase/auth-ui-shared'
import { useSession, useSupabaseClient } from '@supabase/auth-helpers-react'
import Account from '../components/Account'
@@ -723,17 +726,15 @@ return (
-## 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)
+## See also
+
+- 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
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
index 844c10dc2a4..be8fcf69c34 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-nuxt-3.mdx
@@ -1,19 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-nuxt-3',
- title: 'Quickstart: Nuxt 3',
+ title: 'Build a User Management App with 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).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/nuxt3-user-management).
+
@@ -66,7 +65,27 @@ export default defineNuxtConfig({
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
+```vue title=/components/Auth.vue
+
+
-
-
```
### User state
@@ -116,7 +116,70 @@ To access the user information, use the composable [useSupabaseUser](https://sup
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
+```vue title=components/Account.vue
+
+
-
-
```
### Launch!
Now that we have all the components in place, let's update `app.vue`:
-```html title=app.vue
+```vue title=app.vue
+
+
-
-
```
Once that's done, run this in a terminal window:
@@ -242,7 +246,65 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
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
+```vue title=components/Avatar.vue
+
+
-
-
```
### Add the new widget
And then we can add the widget to the Account page:
-```html title=components/Account.vue
+```vue title=components/Account.vue
+
+
-
-
```
-That is it! You should now be able to upload a profile photo to Supabase Storage.
-
### Storage management
-## 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)
+That is it! You should now be able to upload a profile photo to Supabase Storage and you have a fully functional application.
export const Page = ({ children }) =>
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
index 981c7b33d9b..b72fa02a445 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-react.mdx
@@ -1,19 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-react',
- title: 'Quickstart: React',
+ title: 'Build a User Management App with 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).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/react-user-management).
+
@@ -23,11 +22,11 @@ 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
+We can use [Vite](https://vitejs.dev/guide/) to initialize
an app called `supabase-react`:
```bash
-npx create-react-app supabase-react
+npm create vite@latest supabase-react -- --template react
cd supabase-react
```
@@ -41,8 +40,8 @@ And finally we want to save the environment variables in a `.env.local` file.
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
+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
@@ -53,8 +52,8 @@ Create and edit `src/supabaseClient.js`:
```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
+const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
+const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY
export const supabase = createClient(supabaseUrl, supabaseAnonKey)
```
@@ -66,9 +65,9 @@ You can find the full contents of this file [here](https://raw.githubusercontent
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.
-Create and edit `src/Auth.js`:
+Create and edit `src/Auth.jsx`:
-```jsx title=src/Auth.js
+```jsx title=src/Auth.jsx
import { useState } from 'react'
import { supabase } from './supabaseClient'
@@ -76,44 +75,42 @@ export default function Auth() {
const [loading, setLoading] = useState(false)
const [email, setEmail] = useState('')
- const handleLogin = async (e) => {
- e.preventDefault()
+ const handleLogin = async (event) => {
+ event.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) {
+ setLoading(true)
+ const { error } = await supabase.auth.signInWithOtp({ email })
+
+ if (error) {
alert(error.error_description || error.message)
- } finally {
- setLoading(false)
+ } else {
+ alert('Check your email for the login link!')
}
+ setLoading(false)
}
return (
-
)
@@ -124,130 +121,119 @@ export default function Auth() {
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 `src/Account.js`.
+Let's create a new component for that called `src/Account.jsx`.
-```jsx title=src/Account.js
+```jsx title=src/Account.jsx
import { useState, useEffect } from 'react'
import { supabase } from './supabaseClient'
-const Account = ({ session }) => {
+export default function Account({ session }) {
const [loading, setLoading] = useState(true)
const [username, setUsername] = useState(null)
const [website, setWebsite] = useState(null)
const [avatar_url, setAvatarUrl] = useState(null)
useEffect(() => {
- getProfile()
- }, [session])
-
- const getProfile = async () => {
- try {
+ async function getProfile() {
setLoading(true)
const { user } = session
- let { data, error, status } = await supabase
+ let { data, error } = await supabase
.from('profiles')
.select(`username, website, avatar_url`)
.eq('id', user.id)
.single()
- if (error && status !== 406) {
- throw error
- }
-
- if (data) {
+ if (error) {
+ console.warn(error)
+ } else if (data) {
setUsername(data.username)
setWebsite(data.website)
setAvatarUrl(data.avatar_url)
}
- } catch (error) {
- alert(error.message)
- } finally {
+
setLoading(false)
}
- }
- const updateProfile = async (e) => {
- e.preventDefault()
+ getProfile()
+ }, [session])
- try {
- setLoading(true)
- const { user } = session
+ async function updateProfile(event) {
+ event.preventDefault()
- const updates = {
- id: user.id,
- username,
- website,
- avatar_url,
- updated_at: new Date(),
- }
+ setLoading(true)
+ const { user } = session
- let { error } = await supabase.from('profiles').upsert(updates)
-
- if (error) {
- throw error
- }
- } catch (error) {
- alert(error.message)
- } finally {
- setLoading(false)
+ const updates = {
+ id: user.id,
+ username,
+ website,
+ avatar_url,
+ updated_at: new Date(),
}
+
+ let { error } = await supabase.from('profiles').upsert(updates)
+
+ if (error) {
+ alert(error.message)
+ }
+ setLoading(false)
}
return (
-
- {loading ? (
- 'Saving ...'
- ) : (
-
- )}
-
-
+
)
}
-
-export default Account
```
### Launch!
-Now that we have all the components in place, let's update `src/App.js`:
+Now that we have all the components in place, let's update `src/App.jsx`:
-```jsx title=src/App.js
-import './index.css'
+```jsx title=src/App.jsx
+import './App.css'
import { useState, useEffect } from 'react'
import { supabase } from './supabaseClient'
import Auth from './Auth'
import Account from './Account'
-export default function App() {
+function App() {
const [session, setSession] = useState(null)
useEffect(() => {
@@ -266,15 +252,17 @@ export default function App() {
)
}
+
+export default App
```
Once that's done, run this in a terminal window:
```bash
-npm start
+npm run dev
```
-And then open the browser to [localhost:3000](http://localhost:3000) and you should see the completed app.
+And then open the browser to [localhost:5173](http://localhost:5173) and you should see the completed app.
@@ -286,9 +274,9 @@ Every Supabase project is configured with [Storage](/docs/guides/storage) for ma
Let's create an avatar for the user so that they can upload a profile photo. We can start by creating a new component:
-Create and edit `src/Avatar.js`:
+Create and edit `src/Avatar.jsx`:
-```jsx title=src/Avatar.js
+```jsx title=src/Avatar.jsx
import { useEffect, useState } from 'react'
import { supabase } from './supabaseClient'
@@ -300,7 +288,7 @@ export default function Avatar({ url, size, onUpload }) {
if (url) downloadImage(url)
}, [url])
- const downloadImage = async (path) => {
+ async function downloadImage(path) {
try {
const { data, error } = await supabase.storage.from('avatars').download(path)
if (error) {
@@ -313,7 +301,7 @@ export default function Avatar({ url, size, onUpload }) {
}
}
- const uploadAvatar = async (event) => {
+ async function uploadAvatar(event) {
try {
setUploading(true)
@@ -332,7 +320,7 @@ export default function Avatar({ url, size, onUpload }) {
throw uploadError
}
- onUpload(filePath)
+ onUpload(event, filePath)
} catch (error) {
alert(error.message)
} finally {
@@ -341,31 +329,33 @@ export default function Avatar({ url, size, onUpload }) {
}
return (
-
-
- {uploading ? (
- 'Uploading...'
+
+ {avatarUrl ? (
+
) : (
- <>
-
-
-
-
-
+
)}
+
+
+
+
)
}
@@ -373,9 +363,9 @@ export default function Avatar({ url, size, onUpload }) {
### Add the new widget
-And then we can add the widget to the Account page at `src/Account.js`:
+And then we can add the widget to the Account page at `src/Account.jsx`:
-```jsx title=src/Account.js
+```jsx title=src/Account.jsx
// Import the new component
import Avatar from './Avatar'
@@ -387,9 +377,9 @@ return (
{
+ onUpload={(event, url) => {
setAvatarUrl(url)
- updateProfile({ username, website, avatar_url: url })
+ updateProfile(event)
}}
/>
{/* ... */}
@@ -401,13 +391,8 @@ 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/getting-started/tutorials/with-redwoodjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx
index 6fd481ea9cc..cbc647692aa 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-redwoodjs.mdx
@@ -1,49 +1,19 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-redwoodjs',
- title: 'Quickstart: RedwoodJS',
+ title: 'Build a User Management App with 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
-
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/redwoodjs/redwoodjs-supabase-quickstart).
-### 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. */}
@@ -84,128 +54,14 @@ The **`web side`** is built with React. Redwood's router makes it simple to map
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.
+For the sake of consistency with the other framework tutorials, we'll build this app 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. 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`.
-## 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
@@ -281,7 +137,7 @@ And finally, you will also need to save **just** the `web side` environment vari
```bash title=redwood.toml
[web]
- title = "Supabase Redwood Quickstart"
+ title = "Supabase Redwood Tutorial"
port = 8910
apiProxyPath = "/.redwood/functions"
includeEnvironmentVariables = ["SUPABASE_URL", "SUPABASE_KEY"]
@@ -333,9 +189,7 @@ yarn rw dev
```
-
-Note: You can also use the alias `rw` for `redwood`, as in `yarn rw` to run Redwood CLI commands
-
+ `rw` is an alias 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.
@@ -355,7 +209,7 @@ yarn rw generate page home /
-Note: the slash `/` is important here as it creates a root level route.
+The `/` is important here as it creates a root level route.
@@ -591,14 +445,10 @@ const Account = () => {
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
+You'll see the use of `useAuth()` several times. 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:
@@ -775,12 +625,10 @@ 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)
+## See also
+
- Learn more about [RedwoodJS](https://redwoodjs.com)
- Visit the [RedwoodJS Discourse Community](https://community.redwoodjs.com)
diff --git a/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx
index eaf47892298..c56047307f9 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-solidjs.mdx
@@ -1,19 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-solidjs',
- title: 'Quickstart: SolidJS',
+ title: 'Build a User Management App with 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).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/solid-user-management).
+
@@ -419,13 +418,8 @@ 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/getting-started/tutorials/with-svelte.mdx b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
index 5195fa8b135..9e362231fa3 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-svelte.mdx
@@ -1,19 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-svelte',
- title: 'Quickstart: Svelte',
+ title: 'Build a User Management App with 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).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/svelte-user-management).
+
@@ -372,13 +371,8 @@ And then we can add the widget to the Account page:
-## 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 614dac516e2..c67ccea9008 100644
--- a/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
+++ b/apps/docs/pages/guides/getting-started/tutorials/with-sveltekit.mdx
@@ -1,19 +1,18 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
- id: 'with-sveltekit',
- title: 'Quickstart: SvelteKit',
+ title: 'Build a User Management App with 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).
+
+ If you get stuck while working through this guide, refer to the [full example on
+ GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/sveltekit-user-management).
+
@@ -27,12 +26,12 @@ We can use the [SvelteKit Skeleton Project](https://kit.svelte.dev/docs) to init
an app called `supabase-sveltekit` (for this tutorial we will be using TypeScript):
```bash
-npm init svelte@next supabase-sveltekit
+npm create svelte@latest supabase-sveltekit
cd supabase-sveltekit
npm install
```
-Then let's install the only additional dependency: [supabase-js](https://github.com/supabase/supabase-js)
+Then install the Supabase client library: [supabase-js](https://github.com/supabase/supabase-js)
```bash
npm install @supabase/supabase-js
@@ -46,17 +45,7 @@ PUBLIC_SUPABASE_URL="YOUR_SUPABASE_URL"
PUBLIC_SUPABASE_ANON_KEY="YOUR_SUPABASE_KEY"
```
-Now that we have the API credentials in place, create a `src/lib/supabaseClient.ts` 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)
-```
-
-Optionally, update `src/routes/style.css` with the [CSS from the example](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/svelte-user-management/src/app.css).
+Optionally, add `src/styles.css` with the [CSS from the example](https://raw.githubusercontent.com/supabase/supabase/master/examples/user-management/svelte-user-management/src/app.css).
### Supabase Auth Helpers
@@ -70,249 +59,392 @@ Install the auth helpers for SvelteKit:
npm install @supabase/auth-helpers-sveltekit
```
-Update your `src/routes/+layout.svelte`:
+Add the code below to your `src/hooks.server.ts` to initialize the client on the server:
-```html title=src/routes/+layout.svelte
-
-
-
-
-
+ });
+};
```
-Create a new `src/routes/+layout.ts` file to handle the session on the client-side.
+If you are using TypeScript the compiler might complain about `event.locals.supabase` and `event.locals.getSession`, this can be fixed by updating your `src/app.d.ts` with the content below:
-```ts title=src/routes/+layout.ts
-import type { LayoutLoad } from './$types'
-import { getSupabase } from '@supabase/auth-helpers-sveltekit'
+```ts title=src/app.d.ts
+// src/app.d.ts
-export const load: LayoutLoad = async (event) => {
- const { session } = await getSupabase(event)
- return { session }
+import { SupabaseClient, Session } from '@supabase/supabase-js';
+
+declare global {
+ namespace App {
+ interface Locals {
+ supabase: SupabaseClient;
+ getSession(): Promise;
+ }
+ interface PageData {
+ session: Session | null;
+ }
+ // interface Error {}
+ // interface Platform {}
+ }
}
```
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'
+// src/routes/+layout.server.ts
+import type { LayoutServerLoad } from './$types';
-export const load: LayoutServerLoad = async (event) => {
+export const load: LayoutServerLoad = async ({ locals: { getSession } }) => {
return {
- session: await getServerSession(event),
- }
-}
+ session: getSession()
+ };
+};
```
-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.
+> Start your dev server (`npm run dev`) in order to generate the `./$types` files we are referencing in our project.
-```ts title=src/hooks.client.ts
-import '$lib/supabaseClient'
+Create a new `src/routes/+layout.ts` file to handle the session and the supabase object on the client-side.
+
+```ts title=src/routes/+layout.ts
+// src/routes/+layout.ts
+import { invalidate } from '$app/navigation';
+import {
+ PUBLIC_SUPABASE_ANON_KEY,
+ PUBLIC_SUPABASE_URL
+} from '$env/static/public';
+import { createSupabaseLoadClient } from '@supabase/auth-helpers-sveltekit';
+import type { LayoutLoad } from './$types';
+
+export const load: LayoutLoad = async ({ fetch, data, depends }) => {
+ depends('supabase:auth');
+
+ const supabase = createSupabaseLoadClient({
+ supabaseUrl: PUBLIC_SUPABASE_URL,
+ supabaseKey: PUBLIC_SUPABASE_ANON_KEY,
+ event: { fetch },
+ serverSession: data.session
+ });
+
+ const {
+ data: { session }
+ } = await supabase.auth.getSession();
+
+ return { supabase, session };
+};
```
-```ts title=src/hooks.server.ts
-import '$lib/supabaseClient'
-```
+Update your `src/routes/+layout.svelte`:
-### 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.
-Create a new `Auth.svelte` component in the `src/routes` directory to handle this functionality.
-
-```html title=src/routes/Auth.svelte
+```svelte title=src/routes/+layout.svelte
+
-
+
+ User Management
+
+
+
+
+
```
-### Account component
+### Set up a Login page
+
+#### Supabase Auth UI
+
+We can use the [Supabase Auth UI](/docs/guides/auth/auth-helpers/auth-ui), a pre-built Svelte component, for authenticating users via OAuth, email, and magic links.
+
+Install the Supabase Auth UI for Svelte
+
+```bash
+npm install @supabase/auth-ui-svelte @supabase/auth-ui-shared
+```
+
+Add the `Auth` component to your home page
+
+```svelte title=src/routes/+page.svelte
+
+
+
+
+ User Management
+
+
+
+
+
+
+
+```
+
+Create a `src/routes/+page.server.ts` file that will return our website url to be used in our `redirectTo` above.
+
+> This is necessary because the current Supabase auth flow uses implicit grant which returns the tokens as part of the url fragment (#).
+The redirect to a non server protected page will make sure that the client captures the url fragment as we cannot read these on the server
+and send it over to the server. This all happens behind the scenes and isn't something you will need to do manually.
+
+```ts
+// src/routes/+page.server.ts
+import { redirect } from '@sveltejs/kit';
+import type { PageServerLoad } from './$types';
+
+export const load: PageServerLoad = async ({ url, locals: { getSession } }) => {
+ const session = await getSession();
+
+ // if the user is already logged in return them to the account page
+ if (session) {
+ throw redirect(303, '/account');
+ }
+
+ return { url: url.origin };
+};
+```
+
+### Loading page
+
+Create a `src/routes/logging-in/+page.svelte` file with the code below.
+
+This page is used for waiting while your client-side code inside of `src/routes/+layout.ts` sends the tokens over to your server-side code to store it in a cookie.
+
+```svelte
+
+
+
+
+ "Because as we know, there are known knowns; there are things we know we know. We also know there
+ are known unknowns; that is to say we know there are some things we do not know. But there are
+ also unknown unknowns—the ones we don't know we don't know" - Donald Rumsfeld
+
+```
+
+### Account page
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 in the `src/routes` directory to handle this functionality.
+Create a new `src/routes/account/+page.svelte` file with the content below.
-```html title=src/routes/Account.svelte
+```svelte title=src/routes/account/+page.svelte
+
-
-
+
+
- 
+ 
+