+
+
+
+
+
#### Body Parameters
```json
@@ -1105,6 +1443,7 @@ DELETE https://api.supabase.com/v1/projects/{ref}/secrets
}
```
+
#### Responses
@@ -1113,8 +1452,11 @@ DELETE https://api.supabase.com/v1/projects/{ref}/secrets
+
+
+
```json
{
"schema": {
@@ -1123,14 +1465,19 @@ DELETE https://api.supabase.com/v1/projects/{ref}/secrets
}
```
+
+
+
+
+
@@ -1141,6 +1488,8 @@ Failed to delete secrets with given names
+
+
@@ -1148,3 +1497,4 @@ Failed to delete secrets with given names
+
diff --git a/apps/reference/_auth_helpers/intro.md b/apps/reference/_auth_helpers/intro.md
deleted file mode 100644
index 51239a87b48..00000000000
--- a/apps/reference/_auth_helpers/intro.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-slug: /
-sidebar_label: Auth Helpers
----
-
-# Auth Helpers
-
-A collection of framework specific Auth utilities for working with Supabase.
-
-## Status
-
-The Auth Helpers are in `beta`. They are usable in their current state, but it's likely that there will be breaking changes.
-
-## Additional Links
-
-- [Source code](https://github.com/supabase/auth-helpers)
-- [Known bugs and issues](https://github.com/supabase/auth-helpers/issues)
diff --git a/apps/reference/_auth_helpers/next-js.md b/apps/reference/_auth_helpers/next-js.md
deleted file mode 100644
index e5306de5ccd..00000000000
--- a/apps/reference/_auth_helpers/next-js.md
+++ /dev/null
@@ -1,321 +0,0 @@
----
-id: next-js
-slug: next-js
-sidebar_label: With Next.js
----
-
-# Supabase Auth with Next.js
-
-This submodule provides convenience helpers for implementing user authentication in Next.js applications.
-
-## Installation
-
-Using [npm](https://npmjs.org):
-
-```sh
-npm install @supabase/auth-helpers-nextjs
-
-# Main components and hooks for React based frameworks (optional)
-npm install @supabase/auth-helpers-react
-```
-
-Using [yarn](https://yarnpkg.com/):
-
-```sh
-yarn add @supabase/auth-helpers-nextjs
-
-# Main components and hooks for React based frameworks (optional)
-yarn add @supabase/auth-helpers-react
-```
-
-This library supports the following tooling versions:
-
-- Node.js: `^10.13.0 || >=12.0.0`
-
-- Next.js: `>=10`
-
-## Getting Started
-
-### Configuration
-
-Set up the following env vars. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
-
-```bash
-# Find these in your Supabase project settings > API
-NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
-NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
-```
-
-### Basic Setup
-
-- Create an `auth` directory under the `/pages/api/` directory.
-
-- Create a `[...supabase].js` file under the newly created `auth` directory.
-
-The path to your dynamic API route file would be `/pages/api/auth/[...supabase].js`. Populate that file as follows:
-
-```js
-import { handleAuth } from '@supabase/auth-helpers-nextjs'
-
-export default handleAuth({ logout: { returnTo: '/' } })
-```
-
-Executing `handleAuth()` creates the following route handlers under the hood that perform different parts of the authentication flow:
-
-- `/api/auth/callback`: The `UserProvider` forwards the session details here every time `onAuthStateChange` fires on the client side. This is needed to set up the cookies for your application so that SSR works seamlessly.
-
-- `/api/auth/user`: You can fetch user profile information in JSON format.
-
-- `/api/auth/logout`: Your Next.js application logs out the user. You can optionally pass a `returnTo` parameter to return to a custom relative URL after logout, eg `/api/auth/logout?returnTo=/login`. This will overwrite the logout `returnTo` option specified `handleAuth()`
-
-Wrap your `pages/_app.js` component with the `UserProvider` component:
-
-```jsx
-// pages/_app.js
-import React from 'react'
-import { UserProvider } from '@supabase/auth-helpers-react'
-import { supabaseClient } from '@supabase/auth-helpers-nextjs'
-
-export default function App({ Component, pageProps }) {
- return (
-
-
-
- )
-}
-```
-
-You can now determine if a user is authenticated by checking that the `user` object returned by the `useUser()` hook is defined.
-
-## Client-side data fetching with RLS
-
-For [row level security](https://supabase.com/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 `# @supabase/auth-helpers-nextjs` and only run your query once the user is defined client-side in the `useUser()` hook:
-
-```js
-import { Auth } from '@supabase/ui'
-import { useUser } from '@supabase/auth-helpers-react'
-import { supabaseClient } from '@supabase/auth-helpers-nextjs'
-import { useEffect, useState } from 'react'
-
-const LoginPage = () => {
- const { user, error } = useUser()
- const [data, setData] = useState()
-
- useEffect(() => {
- async function loadData() {
- const { data } = await supabaseClient.from('test').select('*')
- setData(data)
- }
- // Only run query once user is logged in.
- if (user) loadData()
- }, [user])
-
- if (!user)
- return (
- <>
- {error &&
{error.message}
}
-
-
- )
-
- return (
- <>
-
-
user:
-
{JSON.stringify(user, null, 2)}
-
client-side data fetching with RLS
-
{JSON.stringify(data, null, 2)}
-
- )
-}
-
-export default LoginPage
-```
-
-### Server-side rendering (SSR) - withPageAuth
-
-If you wrap your `getServerSideProps` with `withPageAuth` your props object will be augmented with the user object.
-
-```js
-// pages/profile.js
-import { withPageAuth } from '@supabase/auth-helpers-nextjs'
-
-export default function Profile({ user }) {
- return
Hello {user.name}
-}
-
-export const getServerSideProps = withPageAuth({ redirectTo: '/login' })
-```
-
-If there is no authenticated user, they will be redirect to your home page, unless you specify the `redirectTo` option.
-
-You can pass in your own `getServerSideProps` method, the props returned from this will be merged with the
-user props. You can also access the user session data by calling `getUser` inside of this method, eg:
-
-```js
-// pages/protected-page.js
-import { withPageAuth, getUser } from '@supabase/auth-helpers-nextjs'
-
-export default function ProtectedPage({ user, customProp }) {
- return
Protected content
-}
-
-export const getServerSideProps = withPageAuth({
- redirectTo: '/foo',
- async getServerSideProps(ctx) {
- // Access the user object
- const { user, accessToken } = await getUser(ctx)
- return { props: { email: user?.email } }
- },
-})
-```
-
-### Server-side data fetching with RLS
-
-For [row level security](https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security) to work in a server environment, you need to inject the request context into the supabase client:
-
-```js
-import {
- User,
- withPageAuth,
- supabaseServerClient,
-} from '@supabase/auth-helpers-nextjs'
-
-export default function ProtectedPage({
- user,
- data,
-}: {
- user: User,
- data: any,
-}) {
- return (
- <>
-
Protected content for {user.email}
-
{JSON.stringify(data, null, 2)}
-
{JSON.stringify(user, null, 2)}
-
- )
-}
-
-export const getServerSideProps = withPageAuth({
- redirectTo: '/',
- async getServerSideProps(ctx) {
- // Run queries with RLS on the server
- const { data } = await supabaseServerClient(ctx).from('test').select('*')
- return { props: { data } }
- },
-})
-```
-
-### Server-side data fetching to OAuth APIs using `provider_token`
-
-When using third-party auth providers, sessions are initiated with an additional `provider_token` field which is persisted as an HTTPOnly cookie upon logging in to enabled usage on the server side. The `provider_token` can be used to make API requests to the OAuth provider's API endpoints on behalf of the logged-in user. In the following example, we fetch the user's full profile from the third-party API during SSR using their id and auth token:
-
-```js
-import { User, withPageAuth, getUser } from '@supabase/auth-helpers-nextjs'
-
-interface Profile {
- /* ... */
-}
-
-export default function ProtectedPage({
- user,
- data,
-}: {
- user: User,
- profile: Profile,
-}) {
- return
Protected content
-}
-
-export const getServerSideProps = withPageAuth({
- redirectTo: '/',
- async getServerSideProps(ctx) {
- // Retrieve provider_token from cookies
- const provider_token = ctx.req.cookies['sb-provider-token']
- // Get logged in user's third-party id from metadata
- const { user } = await getUser(ctx)
- const userId = user?.user_metadata.provider_id
- const profile: Profile = await (
- await fetch(`https://api.example.com/users/${userId}`, {
- method: 'GET',
- headers: {
- Authorization: `Bearer ${provider_token}`,
- },
- })
- ).json()
- return { props: { profile } }
- },
-})
-```
-
-## Protecting API routes
-
-Wrap an API Route to check that the user has a valid session. If they're not logged in the handler will return a
-401 Unauthorized.
-
-```js
-// pages/api/protected-route.js
-import {
- withApiAuth,
- supabaseServerClient,
-} from '@supabase/auth-helpers-nextjs'
-
-export default withApiAuth(async function ProtectedRoute(req, res) {
- // Run queries with RLS on the server
- const { data } = await supabaseServerClient({ req, res })
- .from('test')
- .select('*')
- res.json(data)
-})
-```
-
-If you visit `/api/protected-route` without a valid session cookie, you will get a 401 response.
-
-## Protecting routes with [Nextjs Middleware](https://nextjs.org/docs/middleware)
-
-As an alternative to protecting individual pages using `getServerSideProps` with `withPageAuth`, `withMiddlewareAuth` can be used from inside a `middleware` file to protect the entire directory or those that match the config object. In the following example, all requests to `/middleware-protected/*` will check whether a user is signed in, if successful the request will be forwarded to the destination route, otherwise the user will be redirected to `/login` (defaults to: `/`) with a 307 Temporary Redirect response status:
-
-```ts title="/middleware.ts"
-import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs'
-
-export const middleware = withMiddlewareAuth({ redirectTo: '/' })
-
-export const config = {
- matcher: ['/middleware-protected/:path*'],
-}
-```
-
-It is also possible to add finer granularity based on the user logged in. I.e. you can specify a promise to determine if a specific user has permission or not.
-
-```ts title="/middleware.ts"
-import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs/middleware'
-
-export const middleware = withMiddlewareAuth({
- redirectTo: '/login',
- authGuard: {
- isPermitted: async (user) => user.email?.endsWith('@example.com') ?? false,
- redirectTo: '/insufficient-permissions',
- },
-})
-
-export const config = {
- matcher: ['/middleware-protected/:path*'],
-}
-```
-
-## Migrating from @supabase/supabase-auth-helpers to @supabase/auth-helpers
-
-This is a step by step guide on migrating away from the `@supabase/supabase-auth-helpers` to the newly released `@supabase/auth-helpers`.
-
-1. Install `@supabase/supabase-js`, `@supabase/auth-helpers-nextjs` and `@supabase/auth-helpers-react` libraries from npm.
-2. Replace all imports of `@supabase/supabase-auth-helpers/nextjs` in your project with `@supabase/auth-helpers-nextjs`.
-3. Replace all imports of `@supabase/supabase-auth-helpers/react` in your project with `@supabase/auth-helpers-react`.
-4. Replace all instances of `withAuthRequired` in any of your NextJS pages with `withPageAuth`.
-5. Replace all instances of `withAuthRequired` in any of your NextJS API endpoints with `withApiAuth`.
-6. Uninstall `@supabase/supabase-auth-helpers`.
diff --git a/apps/reference/_auth_helpers/svelte-kit.md b/apps/reference/_auth_helpers/svelte-kit.md
deleted file mode 100644
index 46980643cb9..00000000000
--- a/apps/reference/_auth_helpers/svelte-kit.md
+++ /dev/null
@@ -1,303 +0,0 @@
----
-id: sveltekit
-slug: sveltekit
-sidebar_label: With SvelteKit
----
-
-# Supabase Auth with SvelteKit
-
-This submodule provides convenience helpers for implementing user authentication in [SvelteKit](https://kit.svelte.dev/) applications.
-
-## Installation
-
-Using [npm](https://npmjs.org):
-
-```sh
-npm install @supabase/auth-helpers-sveltekit
-
-# Main component for Svelte based frameworks (optional but recommended)
-npm install @supabase/auth-helpers-svelte
-```
-
-Using [yarn](https://yarnpkg.com/):
-
-```sh
-yarn add @supabase/auth-helpers-sveltekit
-
-# Main component for Svelte based frameworks (optional but recommended)
-yarn add @supabase/auth-helpers-svelte
-```
-
-This library supports the following tooling versions:
-
-- Node.js: `^16.15.0`
-
-## Getting Started
-
-### Configuration
-
-Set up the fillowing 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
-VITE_SUPABASE_URL=https://your-project.supabase.co
-VITE_SUPABASE_ANON_KEY=your-anon-key
-```
-
-### SupabaseClient and SupaAuthHelper component setup
-
-We will start off by creating a `db.ts` file inside of our `src/lib` directory. Now lets instantiate our `supabaseClient` by using our `createSupabaseClient` function from the `@supabase/auth-helpers-sveltekit` library.
-
-```ts
-// src/lib/db.ts
-import { createSupabaseClient } from '@supabase/auth-helpers-sveltekit'
-
-const { supabaseClient } = createSupabaseClient(
- import.meta.env.VITE_SUPABASE_URL as string,
- import.meta.env.VITE_SUPABASE_ANON_KEY as string
-)
-
-export { supabaseClient }
-```
-
-Edit your `__layout.svelte` file and add import the `SupaAuthHelper` component, the `supabaseClient` we just instantiated and the `session` store.
-
-```html
-// src/routes/__layout.svelte
-
-
-
-
-
-```
-
-### Hooks setup
-
-Our `hooks.ts` file is where the heavy lifting of this library happens, we need to import our function to handle the sign in, signing out and cookie creation phase. we can import all the hooks using `handleAuth` function and destructure its returned data.
-
-```ts
-// src/hooks.ts
-import { handleAuth } from '@supabase/auth-helpers-sveltekit'
-import type { GetSession, Handle } from '@sveltejs/kit'
-import { sequence } from '@sveltejs/kit/hooks'
-
-export const handle: Handle = sequence(...handleAuth())
-
-export const getSession: GetSession = async (event) => {
- const { user, accessToken, error } = event.locals
- return {
- user,
- accessToken,
- error,
- }
-}
-```
-
-These will create the handlers under the hood that perform different parts of the authentication flow:
-
-- `/api/auth/callback`: The `UserHelper` forwards the session details here every time `onAuthStateChange` fires on the client side. This is needed to set up the cookies for your application so that SSR works seamlessly.
-- `/api/auth/user`: You can fetch user profile information in JSON format.
-- `/api/auth/logout`: You can logout the user.
-
-### Typings
-
-In order to get the most out of TypeScript and its intellisense, you should import our types into the `app.d.ts` type definition file that comes with your SvelteKit project.
-
-```ts
-// src/app.d.ts
-///
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-declare namespace App {
- interface UserSession {
- user: import('@supabase/supabase-js').User
- accessToken?: string
- }
- interface Locals extends UserSession {
- error: import('@supabase/supabase-js').ApiError
- }
-
- interface Session extends UserSession {} // interface Platform {} // interface Stuff {}
-}
-```
-
-### Signing out
-
-This library has provided a dedicated endpoint for you to use to sign a user out. This endpoint will sign the user out of the Gotrue server, clear the cookies that were set when the user logged in and redirect the user to a configurable path.
-
-The logout handler endpoint is `/api/auth/logout`, this will take a `GET` request which means it can be used as the href for a normal `a` tag in your html.
-
-```html
-Sign out
-```
-
-### Logout handler configuration
-
-In your `src/hooks.ts` file the logout handler is already setup and you can configure the redirect path from here.
-
-> By default the redirect path after logging out will be `/`.
-
-```ts
-export const handle = sequence(
- ...handleAuth({
- logout: { returnTo: '/auth/signin' },
- })
-)
-```
-
-### Basic Setup
-
-You can now determine if a user is authenticated on the client-side by checking that the `user` object returned by the `$session` store is defined.
-
-```html
-// example
-
-
-{#if !$session.user}
-
I am not logged in
-{:else}
-
Welcome {$session.user.email}
-
I am logged in!
-{/if}
-```
-
-## Client-side data fetching with RLS
-
-For [row level security](https://supabase.com/docs/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 `@supabase/auth-helpers-sveltekit` and only run your query once the user is defined client-side in the `$session`:
-
-```html
-
-
-{#if !$session.user}
- {#if $error}
-
-{/if}
-```
-
-### Server-side data fetching with RLS
-
-For [row level security](https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security) to work in a server environment, you need to inject the request context into the supabase client:
-
-```html
-
-
-
-
Protected content for {user.email}
-
{JSON.stringify(data, null, 2)}
-
{JSON.stringify(user, null, 2)}
-```
-
-```ts
-// src/routes/profile.ts
-import {
- supabaseServerClient,
- withApiAuth,
-} from '@supabase/auth-helpers-sveltekit'
-import type { RequestHandler } from './__types/profile'
-
-interface TestTable {
- id: string
- created_at: string
-}
-
-interface GetOutput {
- user: User
- data: TestTable[]
-}
-
-export const GET: RequestHandler = async ({ locals }) =>
- withApiAuth(
- {
- redirectTo: '/',
- user: locals.user,
- },
- async () => {
- const { data } = await supabaseServerClient(session.accessToken)
- .from('test')
- .select('*')
-
- return {
- body: {
- user: locals.user,
- data,
- },
- }
- }
- )
-```
-
-## Protecting API routes
-
-Wrap an API Route to check that the user has a valid session. If they're not logged in the handler will return a
-303 and redirect header.
-
-```ts
-// src/routes/api/protected-route.ts
-import {
- supabaseServerClient,
- withApiAuth,
-} from '@supabase/auth-helpers-sveltekit'
-import type { RequestHandler } from './__types/protected-route'
-
-interface TestTable {
- id: string
- created_at: string
-}
-
-interface GetOutput {
- data: TestTable[]
-}
-
-export const GET: RequestHandler = async ({ locals, request }) =>
- withApiAuth({ user: locals.user }, async () => {
- // Run queries with RLS on the server
- const { data } = await supabaseServerClient(request)
- .from('test')
- .select('*')
-
- return {
- status: 200,
- body: { data },
- }
- })
-```
-
-If you visit `/api/protected-route` without a valid session cookie, you will get a 303 response.
diff --git a/apps/reference/_gotrue/config.mdx b/apps/reference/_gotrue/config.mdx
index 391c9378400..9a00a5a380e 100644
--- a/apps/reference/_gotrue/config.mdx
+++ b/apps/reference/_gotrue/config.mdx
@@ -11,21 +11,25 @@ A `config.toml` file is generated after running `supabase init`.
This file is located in the `supabase` folder under `supabase/config.toml`.
+
+
+
## General {#general}
+
+
### `project_id` {#project_id}
A string used to distinguish different Supabase projects on the same host. Defaults to the working directory name when running `supabase init`.
+
-
- Required: true
-
-
- Default: None
-
+
Required: true
+
Default: None
+
+
diff --git a/apps/reference/_gotrue/usage.mdx b/apps/reference/_gotrue/usage.mdx
index 3a4a64e2d2f..64eed5538f0 100644
--- a/apps/reference/_gotrue/usage.mdx
+++ b/apps/reference/_gotrue/usage.mdx
@@ -5,11 +5,14 @@ title: Usage
toc_max_heading_level: 3
---
-import Tabs from '@theme/Tabs'
-import TabItem from '@theme/TabItem'
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
Documentation of the gotrue API.
+
+
diff --git a/apps/reference/_supabase_js/intro.md b/apps/reference/_supabase_js/intro.md
index 3d1394ddd95..bec6b4f975e 100644
--- a/apps/reference/_supabase_js/intro.md
+++ b/apps/reference/_supabase_js/intro.md
@@ -7,14 +7,6 @@ hide_table_of_contents: true
# Supabase JavaScript Library
-:::note
-
-You're viewing the Supabase docs for the next version of our library which is not yet released.
-
-Refer to the `v1` docs for a stable release.
-
-:::
-
This reference documents every object and method available in Supabase's isomorphic JavaScript library, `supabase-js`.
You can use the `supabase-js` library to:
@@ -28,6 +20,6 @@ You can use the `supabase-js` library to:
## Additional Links
- Source Code: [github.com/supabase/supabase-js](https://github.com/supabase/supabase-js)
-- TypeDoc: [supabase.github.io/supabase-js](https://supabase.github.io/supabase-js)
+- TypeDoc: [supabase.github.io/supabase-js](https://supabase.github.io/supabase-js/v2/)
- NPM: [npmjs.com/package/@supabase/supabase-js](https://www.npmjs.com/package/@supabase/supabase-js)
- [Known bugs and issues](https://github.com/supabase/supabase-js/issues)
diff --git a/apps/reference/_supabase_js/release-notes.md b/apps/reference/_supabase_js/release-notes.md
index 9a242632754..57af05f0980 100644
--- a/apps/reference/_supabase_js/release-notes.md
+++ b/apps/reference/_supabase_js/release-notes.md
@@ -6,9 +6,9 @@ id: release-notes
Supabase.js v2 release notes.
-## 2.0.0 Release Candidate
+## 2.0.0
-Install the latest with `npm install @supabase/supabase-js@rc`.
+Install the latest with `npm install @supabase/supabase-js`.
### Explicit constructor options
diff --git a/apps/reference/_supabase_js_versioned_docs/version-v1/intro.md b/apps/reference/_supabase_js_versioned_docs/version-v1/intro.md
index c076ac88b67..97230e84aea 100644
--- a/apps/reference/_supabase_js_versioned_docs/version-v1/intro.md
+++ b/apps/reference/_supabase_js_versioned_docs/version-v1/intro.md
@@ -5,6 +5,10 @@ slug: /
sidebar_label: Supabase JavaScript Library
---
+:::caution
+You're viewing the docs for an older version of the `supabase-js` library.
+:::
+
This reference documents every object and method available in Supabase's isomorphic JavaScript library, `supabase-js`.
You can use the `supabase-js` library to:
diff --git a/apps/reference/docs/architecture.mdx b/apps/reference/docs/architecture.mdx
index 33ac9feb6c1..f969f70fa33 100755
--- a/apps/reference/docs/architecture.mdx
+++ b/apps/reference/docs/architecture.mdx
@@ -35,5 +35,5 @@ Most notably, we use Postgres rather than a NoSQL store. This choice was deliber
| Auth | SvelteKit Auth Helpers | Alpha | [Link](/docs/guides/auth/auth-helpers/sveltekit) |
| Public API | | Beta | [Link](/docs/reference/api) |
| CLI | | Beta | [Link](/docs/guides/cli) |
-| Client Library: JavaScript | | GA | [Link](/docs/reference/javascript/next/) |
+| Client Library: JavaScript | | GA | [Link](/docs/reference/javascript) |
| Client Library: Dart | | Beta | [Link](/docs/reference/dart) |
diff --git a/apps/reference/docs/guides/auth.mdx b/apps/reference/docs/guides/auth.mdx
index 1505754d7ef..f292dccfa2b 100644
--- a/apps/reference/docs/guides/auth.mdx
+++ b/apps/reference/docs/guides/auth.mdx
@@ -177,7 +177,14 @@ Supabase provides a special function in Postgres, `auth.uid()`, which extracts t
## User Management
-Supabase makes it simple to manage your users.
+Supabase provides multiple endpoints to authenticate and manage your users:
+- [Sign up](/docs/reference/javascript/auth-signup)
+- [Sign in with password](/docs/reference/javascript/auth-signinwithpassword)
+- [Sign in with passwordless / one-time password (OTP)](/docs/reference/javascript/auth-signinwithotp)
+- [Sign in with OAuth](/docs/reference/javascript/auth-signinwithoauth)
+- [Sign out](/docs/reference/javascript/auth-signout)
+
+When users sign up, Supabase assigns them a unique ID. You can reference this ID anywhere in your database. For example, you might create a `profiles` table referencing `id` in the `auth.users` table using a `user_id` field.
-
-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.
-
-Supabase provides the routes to [sign up](/docs/reference/javascript/auth-signup), [log in](/docs/reference/javascript/auth-signin),
-[log out](/docs/reference/javascript/auth-signout), and manage users in your apps and websites.
-
-## Next Steps
-
-- Sign in: [app.supabase.com](https://app.supabase.com)
diff --git a/apps/reference/docs/guides/auth/auth-apple.mdx b/apps/reference/docs/guides/auth/auth-apple.mdx
index 653ebcd527b..524212403b3 100644
--- a/apps/reference/docs/guides/auth/auth-apple.mdx
+++ b/apps/reference/docs/guides/auth/auth-apple.mdx
@@ -20,16 +20,14 @@ Apple OAuth consists of six broad steps:
- Add your `client id` and `client secret` keys to your [Supabase Project](https://app.supabase.com).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
-## Steps
-
-### Access your Apple Developer account
+## Access your Apple Developer account
- Go to [developer.apple.com](https://developer.apple.com).
- Click on `Account` at the top right to log in.
-### Obtain an App ID
+## Obtain an App ID
- Go to `Certificates, Identifiers & Profiles`.
- Click on `Identifiers` at the left.
@@ -43,7 +41,7 @@ Apple OAuth consists of six broad steps:
- Click `Continue` at the top right.
- Click `Register` at the top right.
-### Obtain a Services ID
+## Obtain a Services ID
This will serve as the `client_id` when you make API calls to authenticate the user.
@@ -58,7 +56,7 @@ This will serve as the `client_id` when you make API calls to authenticate the u
- Click `Continue` at the top right.
- Click `Register` at the top right.
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -79,7 +77,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Configure your Services ID
+## Configure your Services ID
- Under `Identifiers`, click on your newly-created Services ID.
- Check the box next to `Sign In With Apple` to enable it.
@@ -91,7 +89,7 @@ The next step requires a callback URL, which looks like this:
- Click `Continue` at the top right.
- Click `Save` at the top right.
-### Download your secret key
+## Download your secret key
Now you'll need to download a `secret key` file from Apple that will be used to generate your `client_secret`.
@@ -109,7 +107,7 @@ Now you'll need to download a `secret key` file from Apple that will be used to
- Save the downloaded file -- this contains your "secret key" that will be used to generate your `client_secret`.
- Click `Done` at the top right.
-### Generate a `client_secret`
+## Generate a `client_secret`
The `secret key` you downloaded is used to create the `client_secret` string you'll need to authenticate your users.
@@ -173,7 +171,7 @@ puts token
2. From the command line, run: `ruby secret_gen.rb > client_secret.txt`.
3. Your `client_secret` is now stored in this `client_secret.txt` file.
-### Add your OAuth credentials to Supabase
+## Add your OAuth credentials to Supabase
- Go to your [Supabase Dashboard](https://app.supabase.com).
- In the left sidebar, click the `Authentication` icon (near the top).
@@ -183,27 +181,19 @@ puts token
- Enter your `client_id` and `client_secret` saved in the previous steps.
- Click `Save`.
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented in the [Supabase OAuth Reference](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers).
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'apple',
-})
-```
-
-Add a function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `apple` as the `provider`:
```js
async function signInWithApple() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'apple',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-azure.mdx b/apps/reference/docs/guides/auth/auth-azure.mdx
index 0f7984fdaa5..93d1a6c11c6 100644
--- a/apps/reference/docs/guides/auth/auth-azure.mdx
+++ b/apps/reference/docs/guides/auth/auth-azure.mdx
@@ -18,14 +18,12 @@ Azure OAuth consists of four broad steps:
- Create a `Secret ID` with “Sign In with Azure” capabilities. The value of the secret will be used as the `client secret`.
- Add the callback url of your application to the allowlist.
-## Steps
-
-### Access your Azure Developer account
+## Access your Azure Developer account
- Go to [portal.azure.com](https://portal.azure.com/#home).
- Login and select "Azure Active Directory" under the list of Azure Services.
-### Register an application
+## Register an application
- Under Azure Active Directory, select "App registrations" in the side panel.
- Select "New registration".
@@ -36,7 +34,7 @@ Azure OAuth consists of four broad steps:
-### Obtain a Client ID
+## Obtain a Client ID
This will serve as the `client_id` when you make API calls to authenticate the user.
@@ -44,7 +42,7 @@ This will serve as the `client_id` when you make API calls to authenticate the u
-### Obtain a Secret ID
+## Obtain a Secret ID
This will serve as the `client_secret` when you make API calls to authenticate the user.
@@ -65,21 +63,13 @@ This will allow your users to use your custom Azure login page when logging in.
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented in the [Supabase OAuth Reference](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers).
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'azure',
-})
-```
-
-Add a function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `azure` as the `provider`:
```js
async function signInWithAzure() {
- const { user, session, error } = await supabase.auth.signIn(
+ const { data, error } = await supabase.auth.signInWithOAuth(
{
provider: 'azure',
},
@@ -90,7 +80,7 @@ async function signInWithAzure() {
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
@@ -100,5 +90,5 @@ async function signout() {
## Resources
-- [Azure Developer Account](https://portal.azure.com).
-- [GitHub Discussion](https://github.com/supabase/gotrue/pull/54#issuecomment-757043573).
+- [Azure Developer Account](https://portal.azure.com)
+- [GitHub Discussion](https://github.com/supabase/gotrue/pull/54#issuecomment-757043573)
diff --git a/apps/reference/docs/guides/auth/auth-bitbucket.mdx b/apps/reference/docs/guides/auth/auth-bitbucket.mdx
index 6b1f4e96a9a..d7e279cd3c3 100644
--- a/apps/reference/docs/guides/auth/auth-bitbucket.mdx
+++ b/apps/reference/docs/guides/auth/auth-bitbucket.mdx
@@ -17,16 +17,14 @@ Setting up Bitbucket logins for your application consists of 3 parts:
- Add your Bitbucket OAuth Consumer keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-## Steps
-
-### Access your Bitbucket account
+## Access your Bitbucket account
- Go to [bitbucket.org](https://bitbucket.org/).
- Click on `Login` at the top right to log in.
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -47,7 +45,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Create a Bitbucket OAuth app
+## Create a Bitbucket OAuth app
- Click on your profile icon at the bottom left
- Click on `All Workspaces`
@@ -62,7 +60,7 @@ The next step requires a callback URL, which looks like this:
- Click on your app name (the name of your new OAuth Consumer)
- Copy your `Key` (`client_key`) and `Secret` (`client_secret`) codes
-### Add your Bitbucket credentials into your Supabase Project
+## Add your Bitbucket credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- In the left sidebar, click the `Authentication` icon (near the top)
@@ -72,27 +70,19 @@ The next step requires a callback URL, which looks like this:
- Enter your `client_id` and `client_secret` saved in the previous step
- Click `Save`
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'bitbucket',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `bitbucket` as the `provider`:
```js
async function signInWithBitbucket() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'bitbucket',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-discord.mdx b/apps/reference/docs/guides/auth/auth-discord.mdx
index 8591a232d16..11193ec9c8a 100644
--- a/apps/reference/docs/guides/auth/auth-discord.mdx
+++ b/apps/reference/docs/guides/auth/auth-discord.mdx
@@ -17,9 +17,7 @@ Setting up Discord logins for your application consists of 3 parts:
- Add your Discord OAuth Consumer keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-## Steps
-
-### Access your Discord account
+## Access your Discord account
- Go to [discord.com](https://discord.com/).
- Click on `Login` at the top right to log in.
@@ -30,7 +28,7 @@ Setting up Discord logins for your application consists of 3 parts:
-### Find your callback URL
+## Find your callback URL
In the next step you require a callback URL, which looks like this:
@@ -51,7 +49,7 @@ In the next step you require a callback URL, which looks like this:
/>
-### Create a Discord Application
+## Create a Discord Application
- Click on `New Application` at the top right.
- Enter the name of your application and click `Create`.
@@ -61,7 +59,7 @@ In the next step you require a callback URL, which looks like this:
- Click `Save Changes` at the bottom.
- Copy your `Client ID` and `Client Secret` under `Client information`.
-### Add your Discord credentials into your Supabase Project
+## Add your Discord credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- In the left sidebar, click the `Authentication` icon (near the top)
@@ -71,33 +69,21 @@ In the next step you require a callback URL, which looks like this:
- Enter your `client_id` and `client_secret` saved in the previous step
- Click `Save`
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'discord',
-})
-```
-
-:::note
-
-If you call `signIn()` when already logged in, Discord will prompt the user again for authorization.
-
-:::
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `discord` as the `provider`:
```js
async function signInWithDiscord() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'discord',
})
}
```
-To log out:
+If your user is already signed in, Discord prompts the user again for authorization.
+
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-email.mdx b/apps/reference/docs/guides/auth/auth-email.mdx
index d776dc8e6af..27c3f83874c 100644
--- a/apps/reference/docs/guides/auth/auth-email.mdx
+++ b/apps/reference/docs/guides/auth/auth-email.mdx
@@ -30,12 +30,7 @@ See the [self-hosting docs](/docs/guides/hosting/overview#configuration) for det
:::
-### Add login code to your client app
-
-Add logins using our client libraries:
-
-- [JavaScript](/docs/reference/javascript/auth-signin#sign-in-with-email)
-- [Dart](/docs/reference/dart/auth-signin#sign-in-with-email)
+## Add login code to your client app
-```js
-const { user, error } = await supabase.auth.signIn({
- email: 'example@email.com',
- password: 'example-password',
-})
-```
-
-
-
-
-
-```dart
-final res = await supabase.auth.signIn(
- email: 'example@email.com',
- password: 'example-password'
-);
-
-final user = res.data?.user;
-final error = res.error;
-```
-
-
-
-
-
-Add this function which you can call from a button, link, or UI element.
-
-
-
-
+When your user signs in, call [signInWithPassword()](/docs/reference/javascript/auth-signinwithpassword) with their email address and password:
```js
async function signInWithEmail() {
- const { user, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithPassword({
email: 'example@email.com',
password: 'example-password',
})
@@ -93,6 +55,8 @@ async function signInWithEmail() {
+When your user signs in, call [signIn()](/docs/reference/dart/auth-signin) with their email address and password:
+
```dart
Future signInWithEmail() async {
await supabase.auth.signIn(
@@ -106,8 +70,6 @@ Future signInWithEmail() async {
-To log out:
-
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
+
```js
async function signOut() {
const { error } = await supabase.auth.signOut()
@@ -126,6 +90,8 @@ async function signOut() {
+When your user signs out, call [signOut()](/docs/reference/dart/auth-signout) to remove them from the browser session and any objects from localStorage:
+
```dart
Future signOut() async {
await supabase.auth.signOut();
diff --git a/apps/reference/docs/guides/auth/auth-facebook.mdx b/apps/reference/docs/guides/auth/auth-facebook.mdx
index c7a76ef1902..3cb6ac68947 100644
--- a/apps/reference/docs/guides/auth/auth-facebook.mdx
+++ b/apps/reference/docs/guides/auth/auth-facebook.mdx
@@ -17,16 +17,14 @@ Setting up Facebook logins for your application consists of 3 parts:
- Add your Facebook keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-## Steps
-
-### Access your Facebook Developer account
+## Access your Facebook Developer account
- Go to [developers.facebook.com](https://developers.facebook.com).
- Click on `Log In` at the top right to log in.
-### Create a Facebook App
+## Create a Facebook App
- Click on `My Apps` at the top right.
- Click `Create App` near the top right.
@@ -34,7 +32,7 @@ Setting up Facebook logins for your application consists of 3 parts:
- Fill in your app information, then click `Create App`.
- This should bring you to the screen: `Add Products to Your App`. (Alternatively you can click on `Add Product` in the left sidebar to get to this screen.)
-### Find your callback URI
+## Find your callback URI
The next step requires a callback URI, which looks like this:
@@ -55,7 +53,7 @@ The next step requires a callback URI, which looks like this:
/>
-### Set up FaceBook Login for your Facebook App
+## Set up FaceBook Login for your Facebook App
From the `Add Products to your App` screen:
@@ -72,14 +70,14 @@ From the `App Review -> Permissions and Features` screen:
You can read more about access levels [here](https://developers.facebook.com/docs/graph-api/overview/access-levels/)
-### Copy your Facebook App ID and Secret
+## Copy your Facebook App ID and Secret
- Click `Settings / Basic` in the left sidebar
- Copy your App ID from the top of the `Basic Settings` page
- Under `App Secret` click `Show` then copy your secret
- Make sure all required fields are completed on this screen.
-### Enter your Facebook App ID and Secret into your Supabase Project
+## Enter your Facebook App ID and Secret into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- In the left sidebar, click the `Authentication` icon (near the top)
@@ -89,27 +87,19 @@ You can read more about access levels [here](https://developers.facebook.com/doc
- Enter your `Facebook client ID` and `Facebook secret` saved in the previous step
- Click `Save`
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'facebook',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `facebook` as the `provider`:
```js
async function signInWithFacebook() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'facebook',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-github.mdx b/apps/reference/docs/guides/auth/auth-github.mdx
index d171495bafb..471d37935b1 100644
--- a/apps/reference/docs/guides/auth/auth-github.mdx
+++ b/apps/reference/docs/guides/auth/auth-github.mdx
@@ -17,16 +17,14 @@ Setting up GitHub logins for your application consists of 3 parts:
- Add your GitHub OAuth keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-## Steps
-
-### Access your GitHub account
+## Access your GitHub account
- Go to [github.com](https://github.com).
- Click on `Sign In` at the top right to log in.
-### Create a GitHub Oauth App
+## Create a GitHub Oauth App
Go to the [GitHub Developer Settings](https://github.com/settings/developers) page:
@@ -35,7 +33,7 @@ Go to the [GitHub Developer Settings](https://github.com/settings/developers) pa
- In the left sidebar, click `Developer settings` (near the bottom)
- In the left sidebar, click `OAuth Apps`
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -56,7 +54,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Register a new OAuth application
+## Register a new OAuth application
- Click `Register a new application`. If you've created an app before, click `New OAuth App` here.
- In `Application name`, type the name of your app.
@@ -72,7 +70,7 @@ Copy your new OAuth credentials
- Click `Generate a new client secret`.
- Copy and save your `Client secret`.
-### Enter your GitHub credentials into your Supabase Project
+## Enter your GitHub credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- In the left sidebar, click the `Authentication` icon (near the top)
@@ -82,27 +80,19 @@ Copy your new OAuth credentials
- Enter your `GitHub Client ID` and `GitHub Client Secret` saved in the previous step
- Click `Save`
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `github` as the `provider`:
```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'github',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
-
-```js
-async function signInWithGithub() {
- const { user, session, error } = await supabase.auth.signIn({
+async function signInWithGitHub() {
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'github',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-gitlab.mdx b/apps/reference/docs/guides/auth/auth-gitlab.mdx
index adf4287ff03..9f5bfd29360 100644
--- a/apps/reference/docs/guides/auth/auth-gitlab.mdx
+++ b/apps/reference/docs/guides/auth/auth-gitlab.mdx
@@ -17,16 +17,14 @@ Setting up GitLab logins for your application consists of 3 parts:
- Add your GitLab Application keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-## Steps
-
-### Access your GitLab account
+## Access your GitLab account
- Go to [gitlab.com](https://gitlab.com).
- Click on `Login` at the top right to log in.
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -47,7 +45,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Create your GitLab Application
+## Create your GitLab Application
- Click on your `profile logo` (avatar) in the top-right corner.
- Select `Edit profile`.
@@ -59,7 +57,7 @@ The next step requires a callback URL, which looks like this:
- Click `Save Application` at the bottom.
- Copy and save your `Application ID` (`client_id`) and `Secret` (`client_secret`) which you'll need later.
-### Add your GitLab credentials into your Supabase Project
+## Add your GitLab credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com).
- In the left sidebar, click the `Authentication` icon (near the top).
@@ -69,27 +67,19 @@ The next step requires a callback URL, which looks like this:
- Enter your `client_id` and `client_secret` saved in the previous step.
- Click `Save`.
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'gitlab',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `gitlab` as the `provider`:
```js
async function signInWithGitLab() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'gitlab',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-google.mdx b/apps/reference/docs/guides/auth/auth-google.mdx
index e3788c3f3aa..051ce6cab03 100644
--- a/apps/reference/docs/guides/auth/auth-google.mdx
+++ b/apps/reference/docs/guides/auth/auth-google.mdx
@@ -17,16 +17,14 @@ Setting up Google logins for your application consists of 3 parts:
- Add your Google OAuth keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-## Steps
-
-### Access your Google Cloud Platform account
+## Access your Google Cloud Platform account
- Go to [cloud.google.com](https://cloud.google.com).
- Click on `Sign in` at the top right to log in.
-### Create a Google Cloud Platform Project
+## Create a Google Cloud Platform Project
- Click on `Select a Project` at the top left.
- (Or, if a project is currently selected, click on the current project name at the top left.)
@@ -35,7 +33,7 @@ Setting up Google logins for your application consists of 3 parts:
- (This can take a few minutes.)
- This should bring you to the dashboard for your new project.
-### Create the OAuth Keys for your project
+## Create the OAuth Keys for your project
From your project's dashboard screen:
@@ -44,12 +42,12 @@ From your project's dashboard screen:
- On the `OAuth consent screen` page select `External`.
- Click `Create`.
-### Edit your app information
+## Edit your app information
- On the `Edit app registration` page fill out your app information.
- Click `Save and continue` at the bottom.
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -70,7 +68,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Create your Google credentials
+## Create your Google credentials
- Click `Credentials` at the left to go to the `Credentials` page on the Google Cloud Platform console.
- Click `Create Credentials` near the top then select `OAuth client ID`
@@ -87,7 +85,7 @@ Copy your new OAuth credentials
- A box will appear called `OAuth client created`.
- Copy and save the values under `Your Client ID` and `Your Client Secret`.
-### Enter your Google credentials into your Supabase Project
+## Enter your Google credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- In the left sidebar, click the `Authentication` icon (near the top)
@@ -97,27 +95,19 @@ Copy your new OAuth credentials
- Enter your `Google Client ID` and `Google Client Secret` saved in the previous step
- Click `Save`
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'google',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `google` as the `provider`:
```js
async function signInWithGoogle() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx b/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx
index f92a18f9322..0ee2493a61e 100644
--- a/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx
+++ b/apps/reference/docs/guides/auth/auth-helpers/auth-ui.mdx
@@ -18,10 +18,10 @@ It supports custom themes and extensible styles to match your brand and aestheti
## Set up Auth UI
-Install the latest version of [supabase-js](/docs/reference/javascript/next/) and the Auth UI package:
+Install the latest version of [supabase-js](/docs/reference/javascript) and the Auth UI package:
```bash
-npm install @supabase/supabase-js@rc @supabase/auth-ui-react
+npm install @supabase/supabase-js @supabase/auth-ui-react
```
### Import the Auth component
diff --git a/apps/reference/docs/guides/auth/auth-helpers/nextjs.mdx b/apps/reference/docs/guides/auth/auth-helpers/nextjs.mdx
index 724088ac743..f17a9fe926e 100644
--- a/apps/reference/docs/guides/auth/auth-helpers/nextjs.mdx
+++ b/apps/reference/docs/guides/auth/auth-helpers/nextjs.mdx
@@ -5,99 +5,136 @@ description: Authentication helpers for Next.js API routes, middleware, and SSR.
sidebar_label: 'Next.js'
---
+import Tabs from '@theme/Tabs'
+import TabItem from '@theme/TabItem'
+
This submodule provides convenience helpers for implementing user authentication in Next.js applications.
-## Installation
+## Install the Next.js helper library
-Using [npm](https://npmjs.org):
+
+
+
```sh
npm install @supabase/auth-helpers-nextjs
-
-# Main components and hooks for React based frameworks (optional)
-npm install @supabase/auth-helpers-react
-```
-
-Using [yarn](https://yarnpkg.com/):
-
-```sh
-yarn add @supabase/auth-helpers-nextjs
-
-# Main components and hooks for React based frameworks (optional)
-yarn add @supabase/auth-helpers-react
```
This library supports the following tooling versions:
- Node.js: `^10.13.0 || >=12.0.0`
-
- Next.js: `>=10`
-## Getting Started
+Optionally, install **React Auth Helpers** for components and hooks that can be used across all React-based frameworks.
+```sh
+npm install @supabase/auth-helpers-react
+```
-### Configuration
+
+
-Set up the following env vars. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
+```sh
+yarn add @supabase/auth-helpers-nextjs
+```
+
+This library supports the following tooling versions:
+
+- Node.js: `^10.13.0 || >=12.0.0`
+- Next.js: `>=10`
+
+Optionally, install **React Auth Helpers** for components and hooks that can be used across all React-based frameworks.
+
+```sh
+yarn add @supabase/auth-helpers-react
+```
+
+
+
+
+## Set up environment variables
+
+Retrieve your project URL and anon key in your project's [API settings](https://app.supabase.com/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
```bash
-# Find these in your Supabase project settings > API
NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```
-### Basic Setup
+## Basic Setup
-- Create an `auth` directory under the `/pages/api/` directory.
+Wrap your `pages/_app.js` component with the `SessionContextProvider` component:
-- Create a `[...supabase].js` file under the newly created `auth` directory.
-
-The path to your dynamic API route file would be `/pages/api/auth/[...supabase].js`. Populate that file as follows:
-
-```js
-import { handleAuth } from '@supabase/auth-helpers-nextjs'
-
-export default handleAuth({ logout: { returnTo: '/' } })
-```
-
-Executing `handleAuth()` creates the following route handlers under the hood that perform different parts of the authentication flow:
-
-- `/api/auth/callback`: The `UserProvider` forwards the session details here every time `onAuthStateChange` fires on the client side. This is needed to set up the cookies for your application so that SSR works seamlessly.
-
-- `/api/auth/user`: You can fetch user profile information in JSON format.
-
-- `/api/auth/logout`: Your Next.js application logs out the user. You can optionally pass a `returnTo` parameter to return to a custom relative URL after logout, eg `/api/auth/logout?returnTo=/login`. This will overwrite the logout `returnTo` option specified `handleAuth()`
-
-Wrap your `pages/_app.js` component with the `UserProvider` component:
-
-```jsx
-// pages/_app.js
+```jsx title="pages/_app.js"
import React from 'react'
-import { UserProvider } from '@supabase/auth-helpers-react'
-import { supabaseClient } from '@supabase/auth-helpers-nextjs'
+import { useRouter } from 'next/router'
+import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs'
+import { SessionContextProvider } from '@supabase/auth-helpers-react'
+
+function MyApp({ Component, pageProps }: AppProps) {
+ const router = useRouter()
+ const [supabaseClient] = useState(() => createBrowserSupabaseClient())
-export default function App({ Component, pageProps }) {
return (
-
+
+
+
-
+
)
}
```
You can now determine if a user is authenticated by checking that the `user` object returned by the `useUser()` hook is defined.
-## Client-side data fetching with RLS
+## Usage with TypeScript
-For [row level security](https://supabase.com/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 `# @supabase/auth-helpers-nextjs` and only run your query once the user is defined client-side in the `useUser()` hook:
+You can pass types that were [generated with the Supabase CLI](/docs/reference/javascript/typescript-support#generating-types) to the Supabase Client to get enhanced type safety and auto completion:
```js
-import { Auth } from '@supabase/ui'
-import { useUser } from '@supabase/auth-helpers-react'
-import { supabaseClient } from '@supabase/auth-helpers-nextjs'
+// Creating a new supabase client object:
+import { Database } from '../db_types';
+
+const [supabaseClient] = useState(() =>
+ createBrowserSupabaseClient()
+ );
+```
+
+```js
+// Retrieving a supabase client object from the SessionContext:
+import { useSupabaseClient } from '@supabase/auth-helpers-react';
+import { Database } from '../db_types';
+
+const supabaseClient = useSupabaseClient();
+```
+
+## Client-side data fetching with RLS
+
+For [row level security](https://supabase.com/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 `useSessionContext` hook and only run your query once the user is defined client-side in the `useUser()` hook:
+
+```js
+import { Auth, ThemeSupa } from '@supabase/auth-ui-react'
+import { useUser, useSessionContext } from '@supabase/auth-helpers-react'
import { useEffect, useState } from 'react'
const LoginPage = () => {
- const { user, error } = useUser()
+ const { isLoading, session, error, supabaseClient } = useSessionContext()
+ const user = useUser()
const [data, setData] = useState()
useEffect(() => {
@@ -114,10 +151,11 @@ const LoginPage = () => {
<>
{error &&
{error.message}
}
)
@@ -140,8 +178,7 @@ export default LoginPage
If you wrap your `getServerSideProps` with `withPageAuth` your props object will be augmented with the user object.
-```js
-// pages/profile.js
+```js title="pages/profile.js"
import { withPageAuth } from '@supabase/auth-helpers-nextjs'
export default function Profile({ user }) {
@@ -156,9 +193,8 @@ If there is no authenticated user, they will be redirect to your home page, unle
You can pass in your own `getServerSideProps` method, the props returned from this will be merged with the
user props. You can also access the user session data by calling `getUser` inside of this method, eg:
-```js
-// pages/protected-page.js
-import { withPageAuth, getUser } from '@supabase/auth-helpers-nextjs'
+```js title="pages/protected-page.js"
+import { withPageAuth } from '@supabase/auth-helpers-nextjs'
export default function ProtectedPage({ user, customProp }) {
return
Protected content
@@ -166,9 +202,11 @@ export default function ProtectedPage({ user, customProp }) {
export const getServerSideProps = withPageAuth({
redirectTo: '/foo',
- async getServerSideProps(ctx) {
+ async getServerSideProps(ctx, supabase) {
// Access the user object
- const { user, accessToken } = await getUser(ctx)
+ const {
+ data: { user },
+ } = await supabase.auth.getUser()
return { props: { email: user?.email } }
},
})
@@ -176,14 +214,10 @@ export const getServerSideProps = withPageAuth({
### Server-side data fetching with RLS
-For [row level security](https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security) to work in a server environment, you need to inject the request context into the supabase client:
+Both `withApiAuth` and `withPageAuth` return a supabase client that you can use to run [row level security](https://supabase.com/docs/learn/auth-deep-dive/auth-row-level-security) authenticated queries server-side:
```js
-import {
- User,
- withPageAuth,
- supabaseServerClient,
-} from '@supabase/auth-helpers-nextjs'
+import { User, withPageAuth } from '@supabase/auth-helpers-nextjs'
export default function ProtectedPage({
user,
@@ -203,7 +237,7 @@ export default function ProtectedPage({
export const getServerSideProps = withPageAuth({
redirectTo: '/',
- async getServerSideProps(ctx) {
+ async getServerSideProps(ctx, supabaseServerClient) {
// Run queries with RLS on the server
const { data } = await supabaseServerClient(ctx).from('test').select('*')
return { props: { data } }
@@ -258,18 +292,16 @@ export const getServerSideProps = withPageAuth({
Wrap an API Route to check that the user has a valid session. If they're not logged in the handler will return a
401 Unauthorized.
-```js
-// pages/api/protected-route.js
-import {
- withApiAuth,
- supabaseServerClient,
-} from '@supabase/auth-helpers-nextjs'
+```js title="pages/api/protected-route.js"
+import { withApiAuth } from '@supabase/auth-helpers-nextjs'
-export default withApiAuth(async function ProtectedRoute(req, res) {
+export default withApiAuth(async function ProtectedRoute(
+ req,
+ res,
+ supabaseServerClient
+) {
// Run queries with RLS on the server
- const { data } = await supabaseServerClient({ req, res })
- .from('test')
- .select('*')
+ const { data } = await supabaseServerClient.from('test').select('*')
res.json(data)
})
```
@@ -278,20 +310,22 @@ If you visit `/api/protected-route` without a valid session cookie, you will get
## Protecting routes with [Nextjs Middleware](https://nextjs.org/docs/middleware)
-As an alternative to protecting individual pages using `getServerSideProps` with `withPageAuth`, `withMiddlewareAuth` can be used from inside a `_middleware` file to protect an entire directory. In the following example, all requests to `/protected/*` will check whether a user is signed in, if successful the request will be forwarded to the destination route, otherwise the user will be redirected to `/login` (defaults to: `/`) with a 307 Temporary Redirect response status:
+As an alternative to protecting individual pages using `getServerSideProps` with `withPageAuth`, `withMiddlewareAuth` can be used from inside a `middleware` file to protect the entire directory or those that match the config object. In the following example, all requests to `/middleware-protected/*` will check whether a user is signed in, if successful the request will be forwarded to the destination route, otherwise the user will be redirected to `/login` (defaults to: `/`) with a 307 Temporary Redirect response status:
-```ts
-// pages/protected/_middleware.ts
-import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs/middleware'
+```ts title="middleware.ts"
+import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs'
export const middleware = withMiddlewareAuth({ redirectTo: '/login' })
+
+export const config = {
+ matcher: ['/middleware-protected/:path*'],
+}
```
It is also possible to add finer granularity based on the user logged in. I.e. you can specify a promise to determine if a specific user has permission or not.
-```ts
-// pages/protected/_middleware.ts
-import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs/dist/middleware'
+```ts title="middleware.ts"
+import { withMiddlewareAuth } from '@supabase/auth-helpers-nextjs'
export const middleware = withMiddlewareAuth({
redirectTo: '/login',
@@ -300,20 +334,61 @@ export const middleware = withMiddlewareAuth({
redirectTo: '/insufficient-permissions',
},
})
+
+export const config = {
+ matcher: ['/middleware-protected/:path*'],
+}
```
-## Migrating from @supabase/supabase-auth-helpers to @supabase/auth-helpers
+## Migrating to version `0.4.X` {#migration}
-This is a step by step guide on migrating away from the `@supabase/supabase-auth-helpers` to the newly released `@supabase/auth-helpers`.
+- With `supabase-js` v2, the `auth` API routes are no longer required and you can delete the `auth` directory under the `/pages/api/` directory.
+- The `/api/auth/logout` API route has been removed—use the `signout` method instead.
+ ```js
+
+ ```
+- The `supabaseClient` and `supabaseServerClient` have been removed in favor of the `createBrowserSupabaseClient` and `createServerSupabaseClient` methods. This allows you to provide the CLI-generated types to the client:
+ ```js
+ // client-side
+ import type { Database } from 'types_db';
+ const [supabaseClient] = useState(() =>
+ createBrowserSupabaseClient()
+ );
-1. Install `@supabase/supabase-js`, `@supabase/auth-helpers-nextjs` and `@supabase/auth-helpers-react` libraries from npm.
-2. Replace all imports of `@supabase/supabase-auth-helpers/nextjs` in your project with `@supabase/auth-helpers-nextjs`.
-3. Replace all imports of `@supabase/supabase-auth-helpers/react` in your project with `@supabase/auth-helpers-react`.
-4. Replace all instances of `withAuthRequired` in any of your NextJS pages with `withPageAuth`.
-5. Replace all instances of `withAuthRequired` in any of your NextJS API endpoints with `withApiAuth`.
-6. Uninstall `@supabase/supabase-auth-helpers`.
+ // server-side API route
+ import type { NextApiRequest, NextApiResponse } from 'next'
+ import type { Database } from 'types_db';
-## Additional Links
+ export default async (req: NextApiRequest, res: NextApiResponse) => {
+ const supabaseServerClient = createServerSupabaseClient({ req, res })
+ const { data:{ user } } = await supabaseServerClient.auth.getUser()
-- [Auth Helpers Source code](https://github.com/supabase/auth-helpers)
-- [Next.js example](https://github.com/supabase/auth-helpers/tree/main/examples/nextjs)
+ res.status(200).json({ name: user?.name ?? '' })
+ }
+ ```
+- The `UserProvider` has been replaced by the `SessionContextProvider`. Make sure to wrap your `pages/_app.js` componenent with the `SessionContextProvider`. Then, throughout your application you can use the `useSessionContext` hook to get the `session` and the `useSupabaseClient` hook to get an authenticated `supabaseClient`.
+- The `useUser` hook now returns the `user` object or `null`.
+- Usage with TypeScript: You can pass types that were [generated with the Supabase CLI](/docs/reference/javascript/typescript-support#generating-types) to the Supabase Client to get enhanced type safety and auto completion:
+ ```js
+ // Creating a new supabase client object:
+ import { Database } from '../db_types';
+
+ const [supabaseClient] = useState(() =>
+ createBrowserSupabaseClient()
+ );
+ ```
+
+ ```js
+ // Retrieving a supabase client object from the SessionContext:
+ import { useSupabaseClient } from '@supabase/auth-helpers-react';
+ import { Database } from '../db_types';
+
+ const supabaseClient = useSupabaseClient();
+ ```
diff --git a/apps/reference/docs/guides/auth/auth-keycloak.mdx b/apps/reference/docs/guides/auth/auth-keycloak.mdx
index 0282eb6cb75..76e536063c3 100644
--- a/apps/reference/docs/guides/auth/auth-keycloak.mdx
+++ b/apps/reference/docs/guides/auth/auth-keycloak.mdx
@@ -24,13 +24,11 @@ Keycloak OAuth consists of five broad steps:
- Obtain the `Secret` from the credentials tab which will be used as the `client secret`.
- Add the callback url of your application to your allowlist.
-## Steps
-
-### Access your Keycloak Admin console
+## Access your Keycloak Admin console
- Login by visiting [`http://localhost:8080`](http://localhost:8080) and clicking on "Administration Console".
-### Create a Keycloak Realm
+## Create a Keycloak Realm
- Once you've logged in to the Keycloak console, you can add a realm from the side panel. The default realm should be named "Master".
- After you've added a new realm, you can retrieve the `issuer` from the "OpenID Endpoint Configuration" endpoint. The `issuer` will be used as the `Keycloak URL`.
@@ -38,13 +36,13 @@ Keycloak OAuth consists of five broad steps:
-### Create a Keycloak Client
+## Create a Keycloak Client
The "Client ID" of the created client will serve as the `client_id` when you make API calls to authenticate the user.
-### Client Settings
+## Client Settings
After you've created the client successfully, ensure that you set the following settings:
@@ -55,34 +53,26 @@ After you've created the client successfully, ensure that you set the following
-### Obtain the Client Secret
+## Obtain the Client Secret
This will serve as the `client_secret` when you make API calls to authenticate the user.
Under the "Credentials" tab, the `Secret` value will be used as the `client secret`.
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented in the [Supabase OAuth Reference](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers).
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'keycloak',
-})
-```
-
-Add a function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `keycloak` as the `provider`:
```js
async function signInWithKeycloak() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'keycloak',
- }
+ })
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-linkedin.mdx b/apps/reference/docs/guides/auth/auth-linkedin.mdx
index db857f6fed4..207d19c0439 100644
--- a/apps/reference/docs/guides/auth/auth-linkedin.mdx
+++ b/apps/reference/docs/guides/auth/auth-linkedin.mdx
@@ -17,16 +17,14 @@ Setting up LinkedIn logins for your application consists of 3 parts:
- Add your LinkedIn `client_id` and `client_secret` to your [Supabase Project](https://app.supabase.com).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
-## Steps
-
-### Access your LinkedIn Developer account
+## Access your LinkedIn Developer account
- Go to [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps).
- Log in (if necessary.)
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -47,7 +45,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Create a LinkedIn OAuth app
+## Create a LinkedIn OAuth app
- Go to [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps).
- Click on `Create App` at the top right
@@ -58,7 +56,7 @@ The next step requires a callback URL, which looks like this:
- Copy and save your newly-generated `Client ID`
- Copy and save your newly-generated `Client Secret`
-### Enter your LinkedIn credentials into your Supabase Project
+## Enter your LinkedIn credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com).
- In the left sidebar, click the `Authentication` icon (near the top).
@@ -68,27 +66,19 @@ The next step requires a callback URL, which looks like this:
- Enter your `client_id` and `client_secret` saved in the previous step.
- Click `Save`.
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers).
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'LinkedIn',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `linkedin` as the `provider`:
```js
async function signInWithLinkedIn() {
- const { user, session, error } = await supabase.auth.signIn({
- provider: 'LinkedIn',
+ const { data, error } = await supabase.auth.signInWithOAuth({
+ provider: 'linkedin',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-magic-link.mdx b/apps/reference/docs/guides/auth/auth-magic-link.mdx
index 5d320a55abe..391f1ad9365 100644
--- a/apps/reference/docs/guides/auth/auth-magic-link.mdx
+++ b/apps/reference/docs/guides/auth/auth-magic-link.mdx
@@ -1,13 +1,14 @@
---
id: auth-magic-link
title: 'Login With Magic Link'
-description: Use Supabase to Authenticate and Authorize your users using Magic Link.
+description: Use Supabase to authenticate and authorize your users using magic links.
---
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
-By default, if no password is provided, the user will be sent a "magic link" to their email address, which they can click to open your application with a valid session. By default, a given user can only request a Magic Link once every 60 seconds.
+Magic links are a form of passwordless logins where users click on a link sent to their email address to log in to their accounts.
+Magic links only work with email addresses. By default, a user can only request a magic link once every 60 seconds.
## Overview
@@ -25,12 +26,7 @@ Setting up Magic Link logins for your Supabase application.
- Under `Email Auth` turn `Enable Email Signup` to ON
- Click `Save`
-### Add login code to your client app
-
-Add logins using our client libraries:
-
-- [JavaScript](/docs/reference/javascript/auth-signin#sign-in-with-magic-link)
-- [Dart](/docs/reference/dart/auth-signin#sign-in-with-magic-link)
+## Add login code to your client app
-```js
-const { user, error } = await supabase.auth.signIn({
- email: 'example@email.com',
-})
-```
-
-
-
-
-
-```dart
-final res = await supabase.auth.signIn(email: 'example@email.com');
-
-final error = res.error;
-```
-
-
-
-
-
-Add this function which you can call from a button, link, or UI element.
-
-
-
-
+When your user signs in, call [signInWithOtp()](/docs/reference/javascript/auth-signinwithotp) with their email address:
```js
async function signInWithEmail() {
- const { user, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOtp({
email: 'example@email.com',
})
}
@@ -82,6 +50,8 @@ async function signInWithEmail() {
+When your user signs in, call [signIn()](/docs/reference/dart/auth-signin) with their email address:
+
```dart
Future signInWithEmail() async {
await supabase.auth.signIn(email: 'example@email.com');
@@ -92,8 +62,6 @@ Future signInWithEmail() async {
-To log out:
-
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
+
```js
async function signOut() {
const { error } = await supabase.auth.signOut()
@@ -112,6 +82,8 @@ async function signOut() {
+When your user signs out, call [signOut()](/docs/reference/dart/auth-signout) to remove them from the browser session and any objects from localStorage:
+
```dart
Future signOut() async {
await supabase.auth.signOut();
diff --git a/apps/reference/docs/guides/auth/auth-messagebird.mdx b/apps/reference/docs/guides/auth/auth-messagebird.mdx
index b67591f0b73..9c7c2bb2756 100644
--- a/apps/reference/docs/guides/auth/auth-messagebird.mdx
+++ b/apps/reference/docs/guides/auth/auth-messagebird.mdx
@@ -172,7 +172,7 @@ values={[
```js
-let { user, error } = await supabase.auth.signIn({
+let { user, error } = await supabase.auth.signInWithPassword({
phone: '+13334445555',
password: 'some-password',
})
@@ -209,7 +209,7 @@ values={[
```js
-let { user, error } = await supabase.auth.signIn({
+let { user, error } = await supabase.auth.signInWithOtp({
phone: '+13334445555',
})
```
diff --git a/apps/reference/docs/guides/auth/auth-notion.mdx b/apps/reference/docs/guides/auth/auth-notion.mdx
index 1f615f76bbd..31b5d76e778 100644
--- a/apps/reference/docs/guides/auth/auth-notion.mdx
+++ b/apps/reference/docs/guides/auth/auth-notion.mdx
@@ -17,9 +17,7 @@ Setting up Notion logins for your application consists of 3 parts:
- Retrieve your OAuth client ID and OAuth client secret and add them to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-## Steps
-
-### Create your notion integration
+## Create your notion integration
- Go to [developers.notion.com](https://developers.notion.com/).
- Click "View my integrations" and login.
@@ -33,7 +31,7 @@ Setting up Notion logins for your application consists of 3 parts:
-### Add the redirect uri
+## Add the redirect URI
- After selecting "Public integration", you should see an option to add "Redirect URIs".
@@ -58,7 +56,7 @@ Your redirect uri should look like the following: `https://.supabas
/>
-### Add your Notion credentials into your Supabase Project
+## Add your Notion credentials into your Supabase Project
- Once you've created your notion integration, you should be able to retrieve the "OAuth client ID" and "OAuth client secret" from the "OAuth Domain and URIs" tab.
@@ -71,27 +69,19 @@ Your redirect uri should look like the following: `https://.supabas
- Enter the "OAuth client ID" and "OAuth client secret" obtained in the `client id` and `client secret` fields.
- Click `Save`
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'notion',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `notion` as the `provider`:
```js
async function signInWithNotion() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'notion',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-slack.mdx b/apps/reference/docs/guides/auth/auth-slack.mdx
index c9568eaa593..c00e377747b 100644
--- a/apps/reference/docs/guides/auth/auth-slack.mdx
+++ b/apps/reference/docs/guides/auth/auth-slack.mdx
@@ -17,16 +17,14 @@ Setting up Slack logins for your application consists of 3 parts:
- Add your Slack `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
-## Steps
-
-### Access your Slack Developer account
+## Access your Slack Developer account
- Go to [api.slack.com](https://api.slack.com/apps).
- Click on `Your Apps` at the top right to log in.
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -47,7 +45,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Create a Slack OAuth app
+## Create a Slack OAuth app
- Go to [api.slack.com](https://api.slack.com/apps).
- Click on `Create an App`
@@ -71,7 +69,7 @@ Under `Redirect URLs`:
- Paste your `Callback URL` then click `Add`
- Click `Save URLs`
-### Enter your Slack credentials into your Supabase Project
+## Enter your Slack credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com).
- In the left sidebar, click the `Authentication` icon (near the top).
@@ -81,27 +79,19 @@ Under `Redirect URLs`:
- Enter your `Client ID` (`client_id`) and `Client Secret` (`client_secret`) saved in the previous step.
- Click `Save`.
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers).
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'slack',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `slack` as the `provider`:
```js
async function signInWithSlack() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'slack',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-spotify.mdx b/apps/reference/docs/guides/auth/auth-spotify.mdx
index c617021e79b..cf282bea973 100644
--- a/apps/reference/docs/guides/auth/auth-spotify.mdx
+++ b/apps/reference/docs/guides/auth/auth-spotify.mdx
@@ -17,16 +17,14 @@ Setting up Spotify logins for your application consists of 3 parts:
- Add your Spotify `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
-## Steps
-
-### Access your Spotify Developer account
+## Access your Spotify Developer account
- Log into [Spotify](https://spotify.com)
- Access the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -47,7 +45,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Create a Spotify OAuth app
+## Create a Spotify OAuth app
- Log into [Spotify](https://spotify.com).
- Go to the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard)
@@ -66,7 +64,7 @@ Under `Redirect URIs`:
- Click `Add`
- Click `Save` at the bottom
-### Enter your Spotify credentials into your Supabase Project
+## Enter your Spotify credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com).
- In the left sidebar, click the `Authentication` icon (near the top).
@@ -76,27 +74,19 @@ Under `Redirect URIs`:
- Enter your `Client ID` (`client_id`) and `Client Secret` (`client_secret`) saved in the previous step.
- Click `Save`.
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers).
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'spotify',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `spotify` as the `provider`:
```js
async function signInWithSpotify() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'spotify',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-twilio.mdx b/apps/reference/docs/guides/auth/auth-twilio.mdx
index 685f6554746..96abd4aa723 100644
--- a/apps/reference/docs/guides/auth/auth-twilio.mdx
+++ b/apps/reference/docs/guides/auth/auth-twilio.mdx
@@ -189,7 +189,7 @@ values={[
```js
-let { user, error } = await supabase.auth.signIn({
+let { user, error } = await supabase.auth.signInWithPassword({
phone: '+13334445555',
password: 'some-password',
})
@@ -226,7 +226,7 @@ values={[
```js
-let { user, error } = await supabase.auth.signIn({
+let { user, error } = await supabase.auth.signInWithOtp({
phone: '+13334445555',
})
```
diff --git a/apps/reference/docs/guides/auth/auth-twitch.mdx b/apps/reference/docs/guides/auth/auth-twitch.mdx
index ef76d915913..56a67e6c82c 100644
--- a/apps/reference/docs/guides/auth/auth-twitch.mdx
+++ b/apps/reference/docs/guides/auth/auth-twitch.mdx
@@ -17,9 +17,7 @@ Setting up Twitch logins for your application consists of 3 parts:
- Add your Twitch OAuth Consumer keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-## Steps
-
-### Access your Twitch Developer account
+## Access your Twitch Developer account
- Go to [dev.twitch.tv](https://dev.twitch.tv).
- Click on `Log in with Twitch` at the top right to log in.
@@ -31,7 +29,7 @@ Setting up Twitch logins for your application consists of 3 parts:
-### Find your callback URL
+## Find your callback URL
In the next step you require a callback URL, which looks like this:
@@ -52,7 +50,7 @@ In the next step you require a callback URL, which looks like this:
/>
-### Create a Twitch Application
+## Create a Twitch Application
@@ -65,7 +63,7 @@ In the next step you require a callback URL, which looks like this:
- Select a category for your app.
- Check the Captcha box and click `Create`.
-### Retrieve your Twitch OAuth Client ID and Client Secret
+## Retrieve your Twitch OAuth Client ID and Client Secret
- Click `Manage` at the right of your application entry in the list.
@@ -77,7 +75,7 @@ In the next step you require a callback URL, which looks like this:
-### Add your Twitch credentials into your Supabase Project
+## Add your Twitch credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- In the left sidebar, click the `Authentication` icon (near the top)
@@ -87,27 +85,19 @@ In the next step you require a callback URL, which looks like this:
- Enter your `client_id` and `client_secret` saved in the previous step
- Click `Save`
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'twitch',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `twitch` as the `provider`:
```js
async function signInWithTwitch() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'twitch',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-twitter.mdx b/apps/reference/docs/guides/auth/auth-twitter.mdx
index d5f5726d756..88448a12eeb 100644
--- a/apps/reference/docs/guides/auth/auth-twitter.mdx
+++ b/apps/reference/docs/guides/auth/auth-twitter.mdx
@@ -17,16 +17,14 @@ Setting up Twitter logins for your application consists of 3 parts:
- Add your Twitter `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
-## Steps
-
-### Access your Twitter Developer account
+## Access your Twitter Developer account
- Go to [developer.twitter.com](https://developer.twitter.com).
- Click on `Sign in` at the top right to log in.
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -47,7 +45,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Create a Twitter OAuth app
+## Create a Twitter OAuth app
- Click `+ Create Project`.
- Enter your project name, click `Next`.
@@ -67,7 +65,7 @@ The next step requires a callback URL, which looks like this:
- Enter your `Privacy policy URL`.
- Click `Save`.
-### Enter your Twitter credentials into your Supabase Project
+## Enter your Twitter credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com).
- In the left sidebar, click the `Authentication` icon (near the top).
@@ -77,27 +75,19 @@ The next step requires a callback URL, which looks like this:
- Enter your `API Key` (`client_id`) and `API Secret Key` (`client_secret`) saved in the previous step.
- Click `Save`.
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers).
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'twitter',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `twitter` as the `provider`:
```js
async function signInWithTwitter() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'twitter',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-vonage.mdx b/apps/reference/docs/guides/auth/auth-vonage.mdx
index d1a71db6c2b..10fa9378c0c 100644
--- a/apps/reference/docs/guides/auth/auth-vonage.mdx
+++ b/apps/reference/docs/guides/auth/auth-vonage.mdx
@@ -163,7 +163,7 @@ values={[
```js
-let { user, error } = await supabase.auth.signIn({
+let { user, error } = await supabase.auth.signInWithPassword({
phone: '491512223334444',
password: 'some-password',
})
@@ -200,7 +200,7 @@ values={[
```js
-let { user, error } = await supabase.auth.signIn({
+let { user, error } = await supabase.auth.signInWithOtp({
phone: '491512223334444',
})
```
diff --git a/apps/reference/docs/guides/auth/auth-workos.mdx b/apps/reference/docs/guides/auth/auth-workos.mdx
index 9e2ef7c79e7..e7e9c932b8d 100644
--- a/apps/reference/docs/guides/auth/auth-workos.mdx
+++ b/apps/reference/docs/guides/auth/auth-workos.mdx
@@ -21,27 +21,25 @@ The procedure consists of five broad steps:
- Connect a WorkOS Supported Identity Provider
- Add your WorkOS credentials into your Supabase project
-## Steps
-
-### Create a WorkOS Organization
+## Create a WorkOS Organization
Log in to the dashboard and hop over to the Organizations tab to create and organization
-### Obtain the Client ID and configure Redirect URI
+## Obtain the Client ID and configure Redirect URI
Head over to the Configuration tab and configure the redirect URI.The redirect URI should look like `https://.supabase.co/auth/v1/callback`
Note that this is distinct from the redirect URI referred to in the Supabase dashboard
-### Obtain the WorkOS Secret
+## Obtain the WorkOS Secret
Head over to the API Keys page and obtain the secret key.
-### Connect a WorkOS Supported Identity Provider
+## Connect a WorkOS Supported Identity Provider
Set up the identity provider by visiting the setup link.
@@ -49,7 +47,7 @@ Set up the identity provider by visiting the setup link.
You can pick between any one of the many identity providers that WorkOS supports.
-### Add your WorkOS credentials into your Supabase Project
+## Add your WorkOS credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- In the left sidebar, click the `Authentication` icon (near the top)
@@ -58,29 +56,13 @@ You can pick between any one of the many identity providers that WorkOS supports
- Enter the `Client ID`, `Secret`, and `WorkOS URL` saved in the previous steps. The ``WorkOS URL` setting should be set to https://api.workos.com/
- Click `Save`
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented in the [Supabase OAuth Reference](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers). Note that you only need to include one of the three parameters: `connection`, `organization`, and `provider`.
-You can refer to the [WorkOS Documentation](https://workos.com/docs/reference/sso/authorize/) to learn more about the different methods.
-
-```js
-const { user, session, error } = await supabase.auth.signIn(
- {
- provider: 'workos',
- },
- {
- connection: '',
- organization: '',
- }
-)
-```
-
-Add a function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `workos` as the `provider`:
```js
async function signInWithWorkOS() {
- const { user, session, error } = await supabase.auth.signIn(
+ const { data, error } = await supabase.auth.signInWithOAuth(
{
provider: 'workos',
},
@@ -93,7 +75,9 @@ async function signInWithWorkOS() {
}
```
-To log out:
+Refer to the [WorkOS Documentation](https://workos.com/docs/reference/sso/authorize/) to learn more about the different methods.
+
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/auth/auth-zoom.mdx b/apps/reference/docs/guides/auth/auth-zoom.mdx
index cab2ad3e6f5..98763329bc8 100644
--- a/apps/reference/docs/guides/auth/auth-zoom.mdx
+++ b/apps/reference/docs/guides/auth/auth-zoom.mdx
@@ -17,16 +17,14 @@ Setting up Zoom logins for your application consists of 3 parts:
- Add your Zoom OAuth keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
-## Steps
-
-### Access your Zoom Developer account
+## Access your Zoom Developer account
- Go to [marketplace.zoom.us](https://marketplace.zoom.us/).
- Click on `Sign In` at the top right to log in.
-### Find your callback URL
+## Find your callback URL
The next step requires a callback URL, which looks like this:
@@ -47,7 +45,7 @@ The next step requires a callback URL, which looks like this:
/>
-### Create a Zoom Oauth App
+## Create a Zoom Oauth App
- Go to [marketplace.zoom.us](https://marketplace.zoom.us/).
- Click on `Sign In` at the top right to log in.
@@ -67,7 +65,7 @@ Under `Redirect URL for OAuth`
- Paste your `Callback URL`
- Click `Continue`
-### Enter your Zoom credentials into your Supabase Project
+## Enter your Zoom credentials into your Supabase Project
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- In the left sidebar, click the `Authentication` icon (near the top)
@@ -77,27 +75,19 @@ Under `Redirect URL for OAuth`
- Enter your `Zoom Client ID` and `Zoom Client Secret` saved in the previous step
- Click `Save`
-### Add login code to your client app
+## Add login code to your client app
-The JavaScript client code is documented here: [Supabase OAuth Client Code](/docs/reference/javascript/auth-signin#sign-in-using-third-party-providers)
-
-```js
-const { user, session, error } = await supabase.auth.signIn({
- provider: 'zoom',
-})
-```
-
-Add this function which you can call from a button, link, or UI element.
+When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `zoom` as the `provider`:
```js
async function signInWithZoom() {
- const { user, session, error } = await supabase.auth.signIn({
+ const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'zoom',
})
}
```
-To log out:
+When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
diff --git a/apps/reference/docs/guides/functions.mdx b/apps/reference/docs/guides/functions.mdx
index 5c358426ad1..0391adce248 100644
--- a/apps/reference/docs/guides/functions.mdx
+++ b/apps/reference/docs/guides/functions.mdx
@@ -7,29 +7,6 @@ sidebar_label: Overview
import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
-import ButtonCard from '@site/src/components/ButtonCard'
-const examples = [
- {
- name: 'With supabase-js',
- description: 'Use the Supabase client inside your Edge Function.',
- href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/select-from-table-with-auth-rls/index.ts',
- },
- {
- name: 'With CORS headers',
- description: 'Send CORS headers for invoking from the browser.',
- href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/browser-with-cors/index.ts',
- },
- {
- name: 'React Native with Stripe',
- description: 'Full example for using Supabase and Stripe, with Expo.',
- href: 'https://github.com/supabase-community/expo-stripe-payments-with-supabase-functions',
- },
- {
- name: 'Flutter with Stripe',
- description: 'Full example for using Supabase and Stripe, with Flutter.',
- href: 'https://github.com/supabase-community/flutter-stripe-payments-with-supabase-functions',
- },
-]
Edge Functions are server-side TypeScript functions, distributed globally at the edge—close to your users. They can be used for listening to webhooks or integrating your Supabase project with third-parties [like Stripe](https://github.com/supabase/supabase/tree/master/examples/edge-functions/supabase/functions/stripe-webhooks).
@@ -235,26 +212,6 @@ To see all the secrets which you have set remotely, use [`supabase secrets list`
supabase secrets list
```
-## Examples
-
-You can find a list of useful [Edge Function Examples](https://github.com/supabase/supabase/tree/master/examples/edge-functions) in our GitHub repository.
-
-
-
- {examples.map((x) => (
-
-
-
- ))}
-
-
-
## Suggestions
### Database Functions vs Edge Functions
@@ -313,5 +270,5 @@ serve(async (req) => {
- Cannot write to File System
- Edge Functions
- Local development - only one function at a time
- - Supabase Functions only supports `GET` and `POST` requests.
- - Supabase Functions do not support HTML responses.
+ - Supabase Functions only supports `POST`, `OPTIONS`, and `GET` requests.
+ - Serving of HTML content is not supported (`GET` requests that return `text/html` will be rewritten to `text/plain`).
diff --git a/apps/reference/docs/guides/functions/auth.mdx b/apps/reference/docs/guides/functions/auth.mdx
new file mode 100644
index 00000000000..da021238a02
--- /dev/null
+++ b/apps/reference/docs/guides/functions/auth.mdx
@@ -0,0 +1,63 @@
+---
+id: auth
+title: Auth
+description: Supabase Edge Functions and Auth.
+---
+
+Edge Functions work seamlessly with [Supabase Auth](/docs/guides/auth), allowing you to identify which user called your function.
+
+When [invoking](/docs/reference/javascript/invoke) a function with one of the [client libraries](/docs/reference), the logged in user's JWT is automatically attached to the function call and becomes accessible within your function.
+
+This is important, for example, to identify which customer's credit card should be charged. You can see this concept end-to-end in our [Stripe example app](https://github.com/supabase-community/expo-stripe-payments-with-supabase-functions).
+
+## Auth Context & RLS
+
+By creating a supabase client with the auth context from the function, you can do two things:
+
+1. Get the user object.
+2. Run queries in the context of the user with [Row Level Security (RLS)](/docs/guides/auth/row-level-security) policies enforced.
+
+```js title="supabase/functions/select-from-table-with-auth-rls/index.ts"
+import { serve } from 'https://deno.land/std@0.131.0/http/server.ts'
+import { createClient } from 'https://esm.sh/@supabase/supabase-js@2.0.0-rc.12'
+
+serve(async (req: Request) => {
+ try {
+ // Create a Supabase client with the Auth context of the logged in user.
+ const supabaseClient = createClient(
+ // Supabase API URL - env var exported by default.
+ Deno.env.get('SUPABASE_URL') ?? '',
+ // Supabase API ANON KEY - env var exported by default.
+ Deno.env.get('SUPABASE_ANON_KEY') ?? '',
+ // Create client with Auth context of the user that called the function.
+ // This way your row-level-security (RLS) policies are applied.
+ // highlight-next-line
+ { global: { headers: { Authorization: req.headers.get('Authorization')! } } }
+ )
+ // Now we can get the session or user object
+ // highlight-start
+ const {
+ data: { user },
+ } = await supabaseClient.auth.getUser()
+ // highlight-end
+
+ // And we can run queries in the context of our authenticated user
+ // highlight-start
+ const { data, error } = await supabaseClient.from('users').select('*')
+ if (error) throw error
+ // highlight-end
+
+ return new Response(JSON.stringify({ user, data }), {
+ headers: { 'Content-Type': 'application/json' },
+ status: 200,
+ })
+ } catch (error) {
+ return new Response(JSON.stringify({ error: error.message }), {
+ headers: { 'Content-Type': 'application/json' },
+ status: 400,
+ })
+ }
+})
+```
+
+See the [example on GitHub](https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/select-from-table-with-auth-rls/index.ts).
diff --git a/apps/reference/docs/guides/functions/examples.mdx b/apps/reference/docs/guides/functions/examples.mdx
new file mode 100644
index 00000000000..e56dc4da517
--- /dev/null
+++ b/apps/reference/docs/guides/functions/examples.mdx
@@ -0,0 +1,47 @@
+---
+id: examples
+title: Examples
+description: Useful Supabase Edge Functions Examples.
+---
+
+import ButtonCard from '@site/src/components/ButtonCard'
+const examples = [
+ {
+ name: 'With supabase-js',
+ description: 'Use the Supabase client inside your Edge Function.',
+ href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/select-from-table-with-auth-rls/index.ts',
+ },
+ {
+ name: 'With CORS headers',
+ description: 'Send CORS headers for invoking from the browser.',
+ href: 'https://github.com/supabase/supabase/blob/master/examples/edge-functions/supabase/functions/browser-with-cors/index.ts',
+ },
+ {
+ name: 'React Native with Stripe',
+ description: 'Full example for using Supabase and Stripe, with Expo.',
+ href: 'https://github.com/supabase-community/expo-stripe-payments-with-supabase-functions',
+ },
+ {
+ name: 'Flutter with Stripe',
+ description: 'Full example for using Supabase and Stripe, with Flutter.',
+ href: 'https://github.com/supabase-community/flutter-stripe-payments-with-supabase-functions',
+ },
+]
+
+You can find a list of useful [Edge Function Examples](https://github.com/supabase/supabase/tree/master/examples/edge-functions) in our GitHub repository.
+
+
+
+ {examples.map((x) => (
+
+
+
+ ))}
+
+
diff --git a/apps/reference/docs/guides/platform/logs.mdx b/apps/reference/docs/guides/platform/logs.mdx
index bcc2173f994..6810cce4433 100644
--- a/apps/reference/docs/guides/platform/logs.mdx
+++ b/apps/reference/docs/guides/platform/logs.mdx
@@ -34,7 +34,32 @@ To update the screenshots, ensure that at least one log line is selected to disp
-[Postgres logs](https://app.supabase.com/project/_/database/postgres-logs) show all queries and activity for your [database](../../guides/database).
+[Postgres logs](https://app.supabase.com/project/_/database/postgres-logs) show queries and activity for your [database](../../guides/database).
+
+By default, query logs are disabled for all new Supabase projects, as they can reveal metadata about the contents of your database (e.g. table and column names). If you'd like to enable query logs, you can enable and configure the [pgAudit extension](https://www.pgaudit.org/):
+
+- [Enable the pgAudit extension for your project](https://app.supabase.com/project/_/database/extensions)
+- [Reboot the DB](https://app.supabase.com/project/_/settings/general); a "Fast database reboot" is sufficient, and faster than a full project restart
+- Configure `pgaudit.log` to the [appropriate value](https://github.com/pgaudit/pgaudit/blob/master/README.md#pgauditlog)
+- You should be able to view query logs in your [log explorer](https://app.supabase.com/project/_/database/postgres-logs) now
+
+As an example, if you wanted to enable logs for writes and DDL statements for a single session, you could execute within the session:
+
+```sql
+set pgaudit.log = 'write, ddl';
+```
+
+To _permanently_ enable logs for all statements that relate to roles and privileges, you could execute (followed by a db reboot):
+
+```sql
+alter system set pgaudit.log to 'role';
+```
+
+To remove a system-wide setting, you can use (followed by a db reboot):
+
+```sql
+alter system reset pgaudit.log
+```
diff --git a/apps/reference/docs/guides/realtime/postgres-cdc.mdx b/apps/reference/docs/guides/realtime/postgres-cdc.mdx
index f8ca7c4728b..5752274dbbc 100644
--- a/apps/reference/docs/guides/realtime/postgres-cdc.mdx
+++ b/apps/reference/docs/guides/realtime/postgres-cdc.mdx
@@ -10,8 +10,14 @@ Anyone with access to a valid JWT signed with the project's JWT secret is able t
Clients can choose to receive `INSERT`, `UPDATE`, `DELETE`, or `*` (all) changes for all changes in a schema, a table in a schema, or a column's value in a table. Your clients should only listen to tables in the `public` schema and you must first enable the tables you want your clients to listen to.
+Postgres CDC works out of the box for tables in the `public` schema. You can listen to tables in your private schemas by granting table `SELECT` permissions to the database role found in your access token. You can run a query similar to the following:
+
+```sql
+GRANT SELECT ON "private_schema"."table" TO authenticated;
+```
+
:::caution
-Postgres CDC works out of the box for tables in the `public` schema. We do not yet recommend attempting to listen to tables in private schemas due to security concerns and additional permission requirements.
+We strongly encourage you to enable RLS and create policies for tables in private schemas. Otherwise, any role you grant access to will have unfettered read access to the table.
:::
You can do this in the [Replication](https://app.supabase.com/project/_/database/replication) section in the Dashboard or with the [SQL editor](https://app.supabase.com/project/_/sql):
diff --git a/apps/reference/docs/guides/realtime/quickstart.mdx b/apps/reference/docs/guides/realtime/quickstart.mdx
index e099abd3a46..f1918fe9ab6 100644
--- a/apps/reference/docs/guides/realtime/quickstart.mdx
+++ b/apps/reference/docs/guides/realtime/quickstart.mdx
@@ -235,7 +235,7 @@ const roomId = 'room1'
const userId = 'user1'
channel.on(
- 'postgres-changes',
+ 'postgres_changes',
{
event: 'INSERT',
schema: 'public',
diff --git a/apps/reference/docs/guides/storage-cdn.mdx b/apps/reference/docs/guides/storage-cdn.mdx
index 7527c9e8c3c..c4b918880fe 100644
--- a/apps/reference/docs/guides/storage-cdn.mdx
+++ b/apps/reference/docs/guides/storage-cdn.mdx
@@ -19,7 +19,7 @@ Aside from performance, CDNs also help with security and availability by mitigat
By default, assets are cached both in the CDN and in the user’s browser for 1 hour. After this, the CDN nodes ping the storage server to see if an object has been updated.
-You can modify this cache time when you are [uploading](https://supabase.com/docs/reference/javascript/next/storage-from-upload) or [updating](https://supabase.com/docs/reference/javascript/next/storage-from-update) an object by modifying the `cacheControl` parameter.
+You can modify this cache time when you are [uploading](https://supabase.com/docs/reference/javascript/storage-from-upload) or [updating](https://supabase.com/docs/reference/javascript/storage-from-update) an object by modifying the `cacheControl` parameter.
If you expect the object to not change at a given URL, setting a longer cache duration is preferable.
diff --git a/apps/reference/docs/guides/storage.mdx b/apps/reference/docs/guides/storage.mdx
index 0dfc47ef526..7170f5857c9 100644
--- a/apps/reference/docs/guides/storage.mdx
+++ b/apps/reference/docs/guides/storage.mdx
@@ -272,7 +272,7 @@ You can access the storage API directly with the same endpoint. See the
-## Community
-
-Reference documentation for community-contributed utilities.
-
-