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

Merge branch 'master' into chore/show-readonly-badge-on-project-card

Browse Source
This commit is contained in:
Alaister Young committed 2023-07-05 21:19:45 +10:00
2 parents 6f9754592d 0a4d240b72
commit a76ebe7f0e
858 files changed
+22806 -6052
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

DEVELOPERS.md
+5 -5
View File
@@ -69,11 +69,11 @@ To contribute code to [Supabase](https://supabase.com), you must fork the [Supab
Then visit, and edit, any of the following sites:
| Site | Directory | Scope name | Description | Local development server |
| ---------------------------------------------- | ------------ | ---------- | ------------------------------------ | -------------------------- |
| [supabase.com](https://supabase.com) | `/apps/www` | www | The main website | http://localhost:3000 |
| [app.supabase.com](https://app.supabase.com) | `/studio` | studio | Studio dashboard | http://localhost:8082 |
| [supabase.com/docs](https://supabase.com/docs) | `/apps/docs` | docs | Guides and Reference (Next.js based) | http://localhost:3001/docs |
| Site | Directory | Scope name | Description | Local development server |
| -------------------------------------------------------- | ------------ | ---------- | ------------------------------------ | -------------------------- |
| [supabase.com](https://supabase.com) | `/apps/www` | www | The main website | http://localhost:3000 |
| [supabase.com/dashboard](https://supabase.com/dashboard) | `/studio` | studio | Studio dashboard | http://localhost:8082 |
| [supabase.com/docs](https://supabase.com/docs) | `/apps/docs` | docs | Guides and Reference (Next.js based) | http://localhost:3001/docs |
#### Running sites individually
README.md
+5 -6
View File
@@ -12,9 +12,9 @@
- [x] Hosted Postgres Database. [Docs](https://supabase.com/docs/guides/database)
- [x] Authentication and Authorization. [Docs](https://supabase.com/docs/guides/auth)
- [x] Auto-generated APIs.
- [x] REST. [Docs](https://supabase.com/docs/guides/database/api#rest-api)
- [x] GraphQL. [Docs](https://supabase.com/docs/guides/database/api#graphql-api)
- [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/database/api#realtime-api)
- [x] REST. [Docs](https://supabase.com/docs/guides/api#rest-api-overview)
- [x] GraphQL. [Docs](https://supabase.com/docs/guides/api#graphql-api-overview)
- [x] Realtime subscriptions. [Docs](https://supabase.com/docs/guides/api#realtime-api-overview)
- [x] Functions.
- [x] Database Functions. [Docs](https://supabase.com/docs/guides/database/functions)
- [x] Edge Functions [Docs](https://supabase.com/docs/guides/functions)
@@ -40,7 +40,7 @@ To see how to Contribute, visit [Getting Started](./DEVELOPERS.md)
## Status
- [x] Alpha: We are testing Supabase with a closed set of customers
- [x] Public Alpha: Anyone can sign up over at [app.supabase.com](https://app.supabase.com). But go easy on us, there are a few kinks
- [x] Public Alpha: Anyone can sign up over at [supabase.com/dashboard](https://supabase.com/dashboard). But go easy on us, there are a few kinks
- [x] Public Beta: Stable enough for most non-enterprise use-cases
- [ ] Public: General Availability [[status](https://supabase.com/docs/guides/getting-started/features#feature-status)]
@@ -56,7 +56,7 @@ Supabase is a combination of open source tools. We’re building the features of
**Architecture**
Supabase is a [hosted platform](https://app.supabase.com). You can sign up and start using Supabase without installing anything.
Supabase is a [hosted platform](https://supabase.com/dashboard). You can sign up and start using Supabase without installing anything.
You can also [self-host](https://supabase.com/docs/guides/hosting/overview) and [develop locally](https://supabase.com/docs/guides/local-development).
![Architecture](https://github.com/supabase/supabase/blob/master/apps/docs/public/img/supabase-architecture.png)
@@ -260,4 +260,3 @@ Our approach for client libraries is modular. Each sub-library is a standalone i
- [Ukrainian / Українська](/i18n/README.uk.md)
- [Vietnamese / Tiếng Việt](/i18n/README.vi-vn.md)
- [List of translations](/i18n/languages.md) <!--- Keep only this -->
apps/docs/components/Frameworks.tsx
+8
View File
@@ -85,6 +85,14 @@ const Frameworks = () => {
},
href: '/guides/with-vue-3',
},
{
name: 'refine',
logo: {
light: '/docs/img/icons/refine-icon.svg',
dark: '/docs/img/icons/refine-icon.svg',
},
href: '/guides/getting-started/tutorials/with-refine',
},
]
return (
<div className="grid md:grid-cols-12 gap-4 not-prose">
apps/docs/components/HomePageCover.tsx
+5
View File
@@ -48,6 +48,11 @@ const HomePageCover = (props) => {
icon: '/docs/img/icons/nuxt-icon',
href: '/guides/getting-started/quickstarts/nuxtjs',
},
{
tooltip: 'refine',
icon: '/docs/img/icons/refine-icon',
href: '/guides/getting-started/quickstarts/refine',
},
]
const GettingStarted = () => (
apps/docs/components/MDX/database_setup.mdx
+3 -3
View File
@@ -12,7 +12,7 @@ Your database will be available in less than a minute.
**Finding your credentials:**
You can find your project credentials inside the project [settings](https://app.supabase.com/project/_/settings/), including:
You can find your project credentials inside the project [settings](https://supabase.com/dashboard/project/_/settings/), including:
- [Database credentials](https://app.supabase.com/project/_/settings/database): connection strings and connection pooler details.
- [API credentials](https://app.supabase.com/project/_/settings/database): your serverless API URL and `anon` / `service_role` keys.
- [Database credentials](https://supabase.com/dashboard/project/_/settings/database): connection strings and connection pooler details.
- [API credentials](https://supabase.com/dashboard/project/_/settings/database): your serverless API URL and `anon` / `service_role` keys.
apps/docs/components/MDX/project_setup.mdx
+3 -3
View File
@@ -8,7 +8,7 @@ Before we start building we're going to set up our Database and API. This is as
### Create a project
1. [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
1. [Create a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
1. Enter your project details.
1. Wait for the new database to launch.
@@ -24,7 +24,7 @@ Now we are going to set up the database schema. We can use the "User Management
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [SQL Editor](https://app.supabase.com/project/_/sql) page in the Dashboard.
1. Go to the [SQL Editor](https://supabase.com/dashboard/project/_/sql) page in the Dashboard.
2. Click **User Management Starter**.
3. Click **Run**.
@@ -41,5 +41,5 @@ Now we are going to set up the database schema. We can use the "User Management
Now that you've created some database tables, you are ready to insert data using the auto-generated API.
We just need to get the Project URL and `anon` key from the API settings.
1. Go to the [API Settings](https://app.supabase.com/project/_/settings/api) page in the Dashboard.
1. Go to the [API Settings](https://supabase.com/dashboard/project/_/settings/api) page in the Dashboard.
1. Find your Project `URL`, `anon`, and `service_role` keys on this page.
apps/docs/components/MDX/social_provider_settings_supabase.mdx
+2 -2
View File
@@ -1,6 +1,6 @@
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- Go to your [Supabase Project Dashboard](https://supabase.com/dashboard)
- In the left sidebar, click the `Authentication` icon (near the top)
- Click on [`Providers`](https://app.supabase.com/project/_/auth/providers) under the Configuration section
- Click on [`Providers`](https://supabase.com/dashboard/project/_/auth/providers) under the Configuration section
- Click on **{props.provider}** from the accordion list to expand and turn **{props.provider} Enabled** to ON
- Enter your **{props.provider} Client ID** and **{props.provider} Client Secret** saved in the previous step
- Click `Save`
apps/docs/components/MDX/social_provider_setup.mdx
+2 -2
View File
@@ -2,7 +2,7 @@ The next step requires a callback URL, which looks like this:
`https://<project-ref>.supabase.co/auth/v1/callback`
- Go to your [Supabase Project Dashboard](https://app.supabase.com)
- Go to your [Supabase Project Dashboard](https://supabase.com/dashboard)
- Click on the `Authentication` icon in the left sidebar
- Click on [`Providers`](https://app.supabase.com/project/_/auth/providers) under the Configuration section
- Click on [`Providers`](https://supabase.com/dashboard/project/_/auth/providers) under the Configuration section
- Click on **{props.provider}** from the accordion list to expand and you'll find your **Redirect URL**, you can click `Copy` to copy it to the clipboard
apps/docs/components/MDX/storage_management.mdx
+1 -1
View File
@@ -7,7 +7,7 @@ triggers. Note that it is not sufficient to delete the objects from the
`storage.objects` table because that would orphan and leak the actual storage objects in
the S3 backend. Instead, invoke the storage API within Postgres via the `http` extension.
Enable the [http extension for the `extensions` schema](https://app.supabase.com/project/_/database/extensions) in the Dashboard.
Enable the [http extension for the `extensions` schema](https://supabase.com/dashboard/project/_/database/extensions) in the Dashboard.
Then, define the following SQL functions in the SQL Editor to delete
storage objects via the API:
apps/docs/components/Navigation/Footer.tsx
+13 -15
View File
@@ -1,7 +1,7 @@
import Link from 'next/link'
import { Button } from 'ui'
import { primaryLinks, secondaryLinks } from '~/data/footer'
import { LayoutMainContent } from '../../layouts/DefaultLayout'
import { LayoutMainContent } from '~/layouts/DefaultLayout'
const Footer = () => (
<LayoutMainContent className="pt-0">
@@ -75,20 +75,18 @@ const Footer = () => (
</Button>
<Button type="text" asChild>
<a href="https://youtube.com/c/supabase" target="_blank" rel="noreferrer noopener">
<a>
<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.665 4.35595C15.481 3.66308 14.9388 3.11739 14.2505 2.93221C13.0028 2.5957 7.99964 2.5957 7.99964 2.5957C7.99964 2.5957 2.99655 2.5957 1.74883 2.93221C1.06047 3.11742 0.518326 3.66308 0.334321 4.35595C0 5.61181 0 8.23207 0 8.23207C0 8.23207 0 10.8523 0.334321 12.1082C0.518326 12.8011 1.06047 13.324 1.74883 13.5092C2.99655 13.8457 7.99964 13.8457 7.99964 13.8457C7.99964 13.8457 13.0027 13.8457 14.2505 13.5092C14.9388 13.324 15.481 12.8011 15.665 12.1082C15.9993 10.8523 15.9993 8.23207 15.9993 8.23207C15.9993 8.23207 15.9993 5.61181 15.665 4.35595ZM6.36334 10.6111V5.85307L10.545 8.23212L6.36334 10.6111Z"
fill="var(--colors-scale9)"
/>
</svg>
</a>
<svg
width="16"
height="17"
viewBox="0 0 16 17"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M15.665 4.35595C15.481 3.66308 14.9388 3.11739 14.2505 2.93221C13.0028 2.5957 7.99964 2.5957 7.99964 2.5957C7.99964 2.5957 2.99655 2.5957 1.74883 2.93221C1.06047 3.11742 0.518326 3.66308 0.334321 4.35595C0 5.61181 0 8.23207 0 8.23207C0 8.23207 0 10.8523 0.334321 12.1082C0.518326 12.8011 1.06047 13.324 1.74883 13.5092C2.99655 13.8457 7.99964 13.8457 7.99964 13.8457C7.99964 13.8457 13.0027 13.8457 14.2505 13.5092C14.9388 13.324 15.481 12.8011 15.665 12.1082C15.9993 10.8523 15.9993 8.23207 15.9993 8.23207C15.9993 8.23207 15.9993 5.61181 15.665 4.35595ZM6.36334 10.6111V5.85307L10.545 8.23212L6.36334 10.6111Z"
fill="var(--colors-scale9)"
/>
</svg>
</a>
</Button>
<Button type="text" asChild>
apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+34 -7
View File
@@ -210,21 +210,22 @@ export const gettingstarted: NavMenuConstant = {
{
name: 'Framework Quickstarts',
items: [
{ name: 'Next.js', url: '/guides/getting-started/quickstarts/nextjs' },
{ name: 'React', url: '/guides/getting-started/quickstarts/reactjs' },
{ name: 'NextJS', url: '/guides/getting-started/quickstarts/nextjs' },
{ name: 'NuxtJS', url: '/guides/getting-started/quickstarts/nuxtjs' },
{ name: 'RedwoodJS', url: '/guides/getting-started/quickstarts/redwoodjs' },
{ name: 'Flutter', url: '/guides/getting-started/quickstarts/flutter' },
{ name: 'SvelteKit', url: '/guides/getting-started/quickstarts/sveltekit' },
{ name: 'SolidJS', url: '/guides/getting-started/quickstarts/solidjs' },
{ name: 'Vue', url: '/guides/getting-started/quickstarts/vue' },
{ name: 'refine', url: '/guides/getting-started/quickstarts/refine' },
],
},
{
name: 'Web app tutorials',
items: [
{
name: 'NextJS',
name: 'Next.js',
url: '/guides/getting-started/tutorials/with-nextjs',
},
{
@@ -259,6 +260,10 @@ export const gettingstarted: NavMenuConstant = {
name: 'SvelteKit',
url: '/guides/getting-started/tutorials/with-sveltekit',
},
{
name: 'refine',
url: '/guides/getting-started/tutorials/with-refine',
},
],
},
{
@@ -349,6 +354,11 @@ export const SocialLoginItems = [
icon: '/docs/img/icons/discord-icon',
url: '/guides/auth/social-login/auth-discord',
},
{
name: 'Kakao',
icon: '/docs/img/icons/kakao-icon',
url: '/guides/auth/social-login/auth-kakao',
},
{
name: 'Keycloak',
icon: '/docs/img/icons/keycloak-icon',
@@ -424,7 +434,10 @@ export const auth = {
},
{
name: 'Quickstarts',
items: [{ name: 'Auth with React', url: '/guides/auth/quickstarts/react', items: [] }],
items: [
{ name: 'Next.js', url: '/guides/auth/quickstarts/nextjs', items: [] },
{ name: 'React', url: '/guides/auth/quickstarts/react', items: [] },
],
},
{
name: 'Authentication',
@@ -800,10 +813,6 @@ export const realtime: NavMenuConstant = {
name: 'Concepts',
url: '/guides/realtime/concepts',
},
{
name: 'Quickstart',
url: '/guides/realtime/quickstart',
},
{
name: 'Features',
url: undefined,
@@ -1058,6 +1067,10 @@ export const platform: NavMenuConstant = {
name: 'HTTP and Project Issues',
url: '/guides/platform/troubleshooting',
},
{
name: 'High Disk IO Consumption',
url: '/guides/platform/exhaust-disk-io',
},
{
name: 'High CPU Usage',
url: '/guides/platform/exhaust-cpu',
@@ -1175,6 +1188,20 @@ export const integrations: NavMenuConstant = {
url: '/guides/integrations',
items: [
{ name: 'Overview', url: '/guides/integrations/integrations' },
{
name: 'OAuth Apps (Beta)',
url: undefined,
items: [
{
name: 'Publish an OAuth App',
url: '/guides/integrations/oauth-apps/publish-an-oauth-app',
},
{
name: 'Authorize an OAuth App',
url: '/guides/integrations/oauth-apps/authorize-an-oauth-app',
},
],
},
{
name: 'Auth',
url: undefined,
apps/docs/components/reference/RefFunctionSection.tsx
+8 -11
View File
@@ -114,7 +114,13 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
>
{item.examples &&
item.examples.map((example, exampleIndex) => {
const exampleString = ''
const exampleString =
'' +
(example.code &&
example.code
.trim()
.replace(/^```.*/, '')
.replace(/```$/, ''))
const codeBlockLang = example?.code?.startsWith('```js')
? 'js'
@@ -133,7 +139,6 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
// // Create a single supabase client for interacting with your database
// const supabase = createClient('https://xyzcompany.supabase.co', 'public-anon-key')
// `
const currentExampleId = example.id
const staticExample = item.examples[exampleIndex]
const response = staticExample.response
@@ -152,15 +157,7 @@ const RefFunctionSection: React.FC<IRefFunctionSection> = (props) => {
language={codeBlockLang}
hideLineNumbers={true}
>
{exampleString +
(example.code &&
example.code
.replace(/```/g, '')
.replace('js', '')
.replace('ts', '')
.replace('dart', '')
.replace('c#', '')
.replace('kotlin', ''))}
{exampleString}
</CodeBlock>
{((tables && tables.length > 0) || sql) && (
apps/docs/components/reference/RefSectionHandler.tsx
+2 -1
View File
@@ -60,6 +60,7 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
const pageTitle = getPageTitle()
const section = props.sections.find((section) => section.slug === slug)
const fullTitle = `${pageTitle}${section ? ` - ${section.title}` : ''}`
const path = router.asPath.replace('/crawlers', '')
return (
<>
@@ -72,7 +73,7 @@ const RefSectionHandler = (props: RefSectionHandlerProps) => {
content={`https://supabase.com/docs/img/supabase-og-image.png`}
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="canonical" href={`https://supabase.com${router.basePath}${router.asPath}`} />
<link rel="canonical" href={`https://supabase.com${router.basePath}${path}`} />
</Head>
{props.isOldVersion && <OldVersionAlert sections={props.sections} />}
<RefSubLayout>
apps/docs/data/authProviders.ts
+10
View File
@@ -79,6 +79,16 @@ const authProviders = [
selfHosted: true,
authType: 'social',
},
{
name: 'Kakao',
logo: '/docs/img/icons/kakao-icon',
href: '/guides/auth/social-login/auth-kakao',
official: true,
supporter: 'Supabase',
platform: true,
selfHosted: true,
authType: 'social',
},
{
name: 'Keycloak',
logo: '/docs/img/icons/keycloak-icon',
apps/docs/data/footer.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export const primaryLinks = [
featherIcon: IconLifeBuoy,
text: 'Need some help?',
ctaLabel: 'Contact support',
url: 'https://app.supabase.com/support/new',
url: 'https://supabase.com/dashboard/support/new',
},
{
icon: 'M12.9521 10.5073C12.766 10.3212 12.5289 10.1943 12.2708 10.1427L10.6794 9.82467C9.80719 9.65024 8.90169 9.77152 8.10609 10.1693L7.89409 10.2747C7.0985 10.6725 6.193 10.7938 5.32076 10.6193L4.03343 10.362C3.81823 10.319 3.59574 10.3298 3.38571 10.3934C3.17569 10.457 2.9846 10.5715 2.82943 10.7267M5.33343 2.88867H10.6668L10.0001 3.55534V7.00334C10.0002 7.35693 10.1407 7.69602 10.3908 7.94601L13.7241 11.2793C14.5641 12.1193 13.9688 13.5553 12.7808 13.5553H3.21876C2.03076 13.5553 1.43609 12.1193 2.27609 11.2793L5.60943 7.94601C5.85949 7.69602 6.00002 7.35693 6.00009 7.00334V3.55534L5.33343 2.88867Z',
apps/docs/docs/ref/api/api.mdx
+1 -1
View File
@@ -15,7 +15,7 @@ The Management API is in `beta`. It is usable in it's current state, but it's li
## Authentication
All API requests require a Supabase Personal token to be included in the Authorization header: `Authorization Bearer <supabase_personal_token`.
To generate or manage your API token, visit your [account](https://app.supabase.com/account/tokens) page.
To generate or manage your API token, visit your [account](https://supabase.com/dashboard/account/tokens) page.
Your API tokens carry the same privileges as your user account, so be sure to keep it secret.
```bash
apps/docs/docs/ref/api/introduction.mdx
+1 -1
View File
@@ -23,7 +23,7 @@ hideTitle: true
## Authentication
All API requests require a Supabase Personal token to be included in the Authorization header: `Authorization Bearer <supabase_personal_token`.
To generate or manage your API token, visit your [account](https://app.supabase.com/account/tokens) page.
To generate or manage your API token, visit your [account](https://supabase.com/dashboard/account/tokens) page.
Your API tokens carry the same privileges as your user account, so be sure to keep it secret.
```bash
apps/docs/docs/ref/kotlin/installing.mdx
+134 -14
View File
@@ -181,12 +181,18 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
</RefSubLayout.EducationRow>
### Add KotlinX Serialization (required for PostgREST and Realtime serialization)
### Serialization
supabase-kt provides several different ways to encode and decode your custom objects.
By default, [KotlinX Serialization](https://github.com/Kotlin/kotlinx.serialization) is used.
<RefSubLayout.EducationRow>
<RefSubLayout.Examples>
<RefSubLayout.Details>
Add the serialization plugin
Use [KotlinX Serialization](https://github.com/Kotlin/kotlinx.serialization).
</RefSubLayout.Details>
<RefSubLayout.Examples>
<Tabs
size="small"
@@ -247,20 +253,134 @@ custom_edit_url: https://github.com/supabase/supabase/edit/master/web/spec/supab
</TabPanel>
</Tabs>
Now you can create serializable classes in your project:
```kotlin
@Serializable
data class Message(
val id: Int,
val content: String,
@SerialName("author_id")
val authorId: String
)
val client = createSupabaseClient(supabaseUrl, supabaseKey) {
//Already the default serializer
}
```
And use them in your Supabase queries:
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
Use [Moshi](https://github.com/square/moshi).
</RefSubLayout.Details>
<RefSubLayout.Examples>
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
implementation("io.github.jan-tennert.supabase:serializer-moshi:VERSION")
```
</TabPanel>
<TabPanel id="groovy" label="build.gradle">
```groovy
implementation 'io.github.jan-tennert.supabase:serializer-moshi:VERSION'
```
</TabPanel>
<TabPanel id="xml" label="pom.xml">
```xml
<dependency>
<groupId>io.github.jan-tennert.supabase</groupId>
<artifactId>serializer-moshi</artifactId>
<version>VERSION</version>
</dependency>
```
</TabPanel>
</Tabs>
```kotlin
val messages = client.postgrest["messages"].select().decodeList<Message>()
val client = createSupabaseClient(supabaseUrl, supabaseKey) {
defaultSerializer = MoshiSerializer()
}
```
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
Use [Jackson](https://github.com/FasterXML/jackson-module-kotlin).
</RefSubLayout.Details>
<RefSubLayout.Examples>
<Tabs
size="small"
type="underlined"
defaultActiveId="kotlin">
<TabPanel id="kotlin" label="build.gradle.kts">
```kotlin
implementation("io.github.jan-tennert.supabase:serializer-jackson:VERSION")
```
</TabPanel>
<TabPanel id="groovy" label="build.gradle">
```groovy
implementation 'io.github.jan-tennert.supabase:serializer-jackson:VERSION'
```
</TabPanel>
<TabPanel id="xml" label="pom.xml">
```xml
<dependency>
<groupId>io.github.jan-tennert.supabase</groupId>
<artifactId>serializer-jackson</artifactId>
<version>VERSION</version>
</dependency>
```
</TabPanel>
</Tabs>
```kotlin
val client = createSupabaseClient(supabaseUrl, supabaseKey) {
defaultSerializer = JacksonSerializer()
}
```
</RefSubLayout.Examples>
</RefSubLayout.EducationRow>
<RefSubLayout.EducationRow>
<RefSubLayout.Details>
Use custom serializer.
</RefSubLayout.Details>
<RefSubLayout.Examples>
```kotlin
class CustomSerializer: SupabaseSerializer {
override fun <T : Any> encode(type: KType, value: T): String {
//encode value to string
}
override fun <T : Any> decode(type: KType, value: String): T {
//decode value
}
}
```
```kotlin
val client = createSupabaseClient(supabaseUrl, supabaseKey) {
defaultSerializer = CustomSerializer()
}
```
</RefSubLayout.Examples>
apps/docs/docs/ref/kotlin/introduction.mdx
+18 -5
View File
@@ -18,15 +18,28 @@ This reference documents every object and method available in Supabase's Kotlin
Supported Kotlin targets:
- JVM
- Android
- iOS (Experimental)
- JS (Browser)
| **Module** | **GoTrue** | **Realtime** | **Postgrest** | **Storage** | **Functions** | **Apollo-GraphQL** |
| -------------------------------------- | ---------- | ------------ | ------------- | ----------- | ------------- | ------------------ |
| **JVM** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Android** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **JS** _(Browser)_ | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **IOS** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **MacOS** _(macosX64 & macosArm64)_ 🚧 | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **Windows** _(mingwX64)_ 🚧 | ☑️ | ✅ | ✅ | ✅ | ✅ | ❌ |
| **Linux** _(linuxX64)_ 🚧 | ☑️ | ✅ | ✅ | ✅ | ✅ | ❌ |
✅ = full support
☑️ = partial support: no built-in OAuth/OTP link handling. Linux also has no persistent storage.
🚧 = experimental/needs feedback
❌ = not supported
</div>
<div className="max-w-xl bg-slate-300 px-4 py-2 rounded-md">
<p>The Kotlin client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
<p>The Kotlin client library is created and maintained by the Supabase community, and is not an official library. Please be tolerant of areas where the library is still being developed, and — as with all the libraries — feel free to contribute wherever you find issues.</p>
<p>Huge thanks to official maintainer, [jan-tennert](https://github.com/jan-tennert).</p>
apps/docs/docs/reference/api.mdx
+1 -1
View File
@@ -15,7 +15,7 @@ The Management API is in `beta`. It is usable in it's current state, but it's li
## Authentication
All API requests require a Supabase Personal token to be included in the Authorization header: `Authorization Bearer <supabase_personal_token`.
To generate or manage your API token, visit your [account](https://app.supabase.com/account/tokens) page.
To generate or manage your API token, visit your [account](https://supabase.com/dashboard/account/tokens) page.
Your API tokens carry the same privileges as your user account, so be sure to keep it secret.
```bash
apps/docs/lib/mdx/generateRefMarkdown.tsx
+3 -2
View File
@@ -1,9 +1,10 @@
import fs from 'fs'
import { CodeHikeConfig, remarkCodeHike } from '@code-hike/mdx'
import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
import matter from 'gray-matter'
import { serialize } from 'next-mdx-remote/serialize'
import codeHikeTheme from 'config/code-hike.theme.json' assert { type: 'json' }
import remarkGfm from 'remark-gfm'
import { ICommonMarkdown } from '~/components/reference/Reference.types'
async function generateRefMarkdown(sections: ICommonMarkdown[], slug: string) {
@@ -52,7 +53,7 @@ async function generateRefMarkdown(sections: ICommonMarkdown[], slug: string) {
// https://mdxjs.com/packages/mdx/#compilefile-options
mdxOptions: {
useDynamicImport: true,
remarkPlugins: [[remarkCodeHike, codeHikeOptions]],
remarkPlugins: [remarkGfm, [remarkCodeHike, codeHikeOptions]],
},
// Indicates whether or not to parse the frontmatter from the mdx source
})
apps/docs/pages/_app.tsx
+7 -4
View File
@@ -1,5 +1,5 @@
import '../../../packages/ui/build/css/themes/light.css'
import '../../../packages/ui/build/css/themes/dark.css'
import '../../../packages/ui/build/css/themes/light.css'
import 'config/code-hike.scss'
import '../styles/main.scss?v=1.0.0'
@@ -13,6 +13,7 @@ import { useRouter } from 'next/router'
import { useCallback, useEffect, useState } from 'react'
import { AppPropsWithLayout } from 'types'
import { CommandMenuProvider } from 'ui'
import { TabsProvider } from 'ui/src/components/Tabs'
import Favicons from '~/components/Favicons'
import SiteLayout from '~/layouts/SiteLayout'
import { API_URL, IS_PLATFORM, LOCAL_SUPABASE } from '~/lib/constants'
@@ -150,9 +151,11 @@ function MyApp({ Component, pageProps }: AppPropsWithLayout) {
<AuthContainer>
<ThemeProvider>
<CommandMenuProvider site="docs">
<SiteLayout>
<Component {...pageProps} />
</SiteLayout>
<TabsProvider>
<SiteLayout>
<Component {...pageProps} />
</SiteLayout>
</TabsProvider>
</CommandMenuProvider>
</ThemeProvider>
</AuthContainer>
apps/docs/pages/guides/ai/engineering-for-scale.mdx
+4 -4
View File
@@ -12,7 +12,7 @@ Content sources for vectors can be extremely large. As you grow you should run y
## Simple workloads
For small workloads it's typical to store your data in a single database.
For small workloads, it's typical to store your data in a single database.
If you've used [Vecs](/docs/guides/ai/vecs-python-client) to create 3 different collections, you can expose collections to your web or mobile application using [views](/docs/guides/database/tables#views):
@@ -93,9 +93,9 @@ docs.query(
### Accessing external collections using Wrappers
Supabase supports [Foreign Data Wrappers](/blog/postgres-foreign-data-wrappers-rust). Wrappers allow you connect two databases together so that you can query them over the network.
Supabase supports [Foreign Data Wrappers](/blog/postgres-foreign-data-wrappers-rust). Wrappers allow you to connect two databases together so that you can query them over the network.
This involves 2 steps: connecting to your remote database from the primary, and creating a Foreign Table.
This involves 2 steps: connecting to your remote database from the primary and creating a Foreign Table.
#### Connecting your remote database
@@ -140,7 +140,7 @@ const { data, error } = await supabase
### Enterprise architecture
This diagram provides an example architecture, allowing you to access the collections either with our client libraries or using Vecs. You can add as many secondary databases as you need, in this example we show one only:
This diagram provides an example architecture that allows you to access the collections either with our client libraries or using Vecs. You can add as many secondary databases as you need (in this example we only show one):
<div>
<img
apps/docs/pages/guides/ai/examples/headless-vector-search.mdx
+2 -2
View File
@@ -37,7 +37,7 @@ There are 3 steps to build similarity search inside your documentation:
### Prepare your database
To prepare, create a [new Supabase project](https://database.new) and store the database and API credentials, which you can find in the project [settings](https://app.supabase.com/_/settings).
To prepare, create a [new Supabase project](https://database.new) and store the database and API credentials, which you can find in the project [settings](https://supabase.com/dashboard/_/settings).
Now we can use the [Headless Vector Search](https://github.com/supabase/headless-vector-search#set-up) instructions to set up the database:
@@ -46,7 +46,7 @@ Now we can use the [Headless Vector Search](https://github.com/supabase/headless
3. Apply the database migrations: `supabase db push`
4. Set your OpenAI key as a secret: `supabase secrets set OPENAI_KEY=sk-xxx`
5. Deploy the Edge Functions: `supabase functions deploy --no-verify-jwt`
6. Expose `docs` schema via API in Supabase Dashboard [settings](https://app.supabase.com/project/_/settings/api) > `API Settings` > `Exposed schemas`
6. Expose `docs` schema via API in Supabase Dashboard [settings](https://supabase.com/dashboard/project/_/settings/api) > `API Settings` > `Exposed schemas`
### Ingest your documentation
apps/docs/pages/guides/ai/examples/huggingface-image-captioning.mdx
+3 -3
View File
@@ -20,15 +20,15 @@ We can combine Hugging Face with [Supabase Storage](https://supabase.com/storage
## Setup
- Open your Supabase project dashboard or [create a new project](https://app.supabase.com/projects).
- [Create a new bucket](https://app.supabase.com/project/_/storage/buckets) called `images`.
- Open your Supabase project dashboard or [create a new project](https://supabase.com/dashboard/projects).
- [Create a new bucket](https://supabase.com/dashboard/project/_/storage/buckets) called `images`.
- Generate TypeScript types from remote Database.
- Create a new Database table called `image_caption`.
- Create `id` column of type `uuid` which references `storage.objects.id`.
- Create a `caption` column of type `text`.
- Regenerate TypeScript types to include new `image_caption` table.
- Deploy the function to Supabase: `supabase functions deploy huggingface-image-captioning`.
- Create the Database Webhook in the [Supabase Dashboard](https://app.supabase.com/project/_/database/hooks) to trigger the `huggingface-image-captioning` function anytime a record is added to the `storage.objects` table.
- Create the Database Webhook in the [Supabase Dashboard](https://supabase.com/dashboard/project/_/database/hooks) to trigger the `huggingface-image-captioning` function anytime a record is added to the `storage.objects` table.
## Generate TypeScript Types
apps/docs/pages/guides/ai/examples/nextjs-vector-search.mdx
+3 -3
View File
@@ -22,13 +22,13 @@ We assume that you have a Next.js project with a collection of `.mdx` files nest
## Create a project
1. [Create a new project](https://app.supabase.com) in the Supabase Dashboard.
1. [Create a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
1. Enter your project details.
1. Wait for the new database to launch.
## Prepare the database
Let's prepare the database schema. We can use the "OpenAI Vector Search" quickstart in the [SQL Editor](https://app.supabase.com/project/_/sql), or you can copy/paste the SQL below and run it yourself.
Let's prepare the database schema. We can use the "OpenAI Vector Search" quickstart in the [SQL Editor](https://supabase.com/dashboard/project/_/sql), or you can copy/paste the SQL below and run it yourself.
<Tabs
scrollable
@@ -38,7 +38,7 @@ Let's prepare the database schema. We can use the "OpenAI Vector Search" quickst
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [SQL Editor](https://app.supabase.com/project/_/sql) page in the Dashboard.
1. Go to the [SQL Editor](https://supabase.com/dashboard/project/_/sql) page in the Dashboard.
2. Click **OpenAI Vector Search**.
3. Click **Run**.
apps/docs/pages/guides/ai/google-colab.mdx
+3 -3
View File
@@ -17,7 +17,7 @@ export const meta = {
Google Colab is a hosted Jupyter Notebook service. It provides free access to computing resources, including GPUs and TPUs, and is well-suited to machine learning, data science, and education. We can use Colab to manage collections using [Supabase Vecs](/docs/guides/ai/vecs-python-client).
In this tutorial we'll connect to a database running on the Supabase [platform](https://app.supabase.com/). If you don't already have a database, you can create one here: [database.new](https://database.new).
In this tutorial we'll connect to a database running on the Supabase [platform](https://supabase.com/dashboard/). If you don't already have a database, you can create one here: [database.new](https://database.new).
## Create a new notebook
@@ -39,7 +39,7 @@ pip install vecs
## Connect to your database
Find the Postgres connection string for your Supabase project in the [database settings](https://app.supabase.com/_/settings/database) of the dashboard. Copy the "URI" format, which should look something like `postgresql:/postgres:<password>@<host>:5432/postgres`
Find the Postgres connection string for your Supabase project in the [database settings](https://supabase.com/dashboard/_/settings/database) of the dashboard. Copy the "URI" format, which should look something like `postgresql:/postgres:<password>@<host>:5432/postgres`
Create a new code block below the install block (`ctrl+m b`) and add the following code using the Postgres URI you copied above:
@@ -79,7 +79,7 @@ collection.upsert(
)
```
This will create a table inside your database within the `vecs` schema, called `colab_collection`. You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
This will create a table inside your database within the `vecs` schema, called `colab_collection`. You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/integrations/llamaindex.mdx
+1 -1
View File
@@ -52,7 +52,7 @@ Replace the `DB_CONNECTION` with your own connection string for your database, w
Now all that's left is to step through the notebook. You can do this by clicking the "execute" button (`ctrl+enter`) at the top left of each code cell. The notebook guides you through the process of creating a collection, adding data to it, and querying it.
You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/langchain.mdx
+20
View File
@@ -1,4 +1,6 @@
import Layout from '~/layouts/DefaultGuideLayout'
import { Tabs } from 'ui'
export const TabPanel = Tabs.Panel
export const meta = {
id: 'ai-lang-chain',
@@ -14,6 +16,21 @@ export const meta = {
Prepare you database with the relevant tables:
<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="dashboard"
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [SQL Editor](https://supabase.com/dashboard/project/_/sql) page in the Dashboard.
2. Click **LangChain** in the Quick start section.
3. Click **Run**.
</TabPanel>
<TabPanel id="sql" label="SQL">
```sql
-- Enable the pgvector extension to work with embedding vectors
create extension vector;
@@ -55,6 +72,9 @@ end;
$$;
```
</TabPanel>
</Tabs>
## Usage
You can now search your documents using any Node.js application. This is intended to be run on a secure server route.
apps/docs/pages/guides/ai/managing-collections.mdx
+3 -3
View File
@@ -7,7 +7,7 @@ export const meta = {
sidebar_label: 'Managing collections',
}
A collection is an group of vector records managed by the `vecs` Python library. Records can be added to or updated in a collection. Collections can be queried at any time, but should be indexed for scalable query performance.
A collection is a group of vector records managed by the `vecs` Python library. Records can be added to or updated in a collection. Collections can be queried at any time, but should be indexed for scalable query performance.
Supabase provides a [Python client](/docs/guides/ai/vecs-python-client) called `vecs` for managing unstructured vector stores in Postgres. If you come from a data science background, this unstructured data approach will feel familiar. If you are more interested in a structured data approach, see [Vector columns](/docs/guides/ai/vector-columns) or read our guide on [Structured & Unstructured Embeddings](/docs/guides/ai/structured-unstructured-embeddings).
@@ -32,7 +32,7 @@ vx = vecs.create_client(DB_CONNECTION)
### Create collection
You can create a collection to store vectors specifying the collections name and the number of dimensions in the vectors you intend to store.
You can create a collection to store vectors specifying the collection's name and the number of dimensions in the vectors you intend to store.
```python
docs = vx.create_collection(name="docs", dimension=3)
@@ -75,7 +75,7 @@ docs.upsert(
Collections can be queried immediately after being created.
However, for good performance, the collection should be indexed after records have been upserted.
Indexes should be created **after** the collection has been populated with records. Building an index on an empty collection will result in significantly reduced recall. Once the index has been created you can still upsert new documents into the collection but you should rebuild the index if the size of the collection more than doubles.
Indexes should be created **after** the collection has been populated with records. Building an index on an empty collection will significantly reduce recall. Once the index has been created you can still upsert new documents into the collection but you should rebuild the index if the size of the collection more than doubles.
Only one index may exist per-collection. By default, creating an index will replace any existing index.
apps/docs/pages/guides/ai/quickstarts/face-similarity.mdx
+3 -3
View File
@@ -3,11 +3,11 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'ai-vecs-python-client',
title: 'Face similarity search',
subtitle: 'Identify the celebrities you looks most similar to using Supabase Vecs.',
subtitle: 'Identify the celebrities who look most similar to you using Supabase Vecs.',
breadcrumb: 'AI Quickstarts',
}
This guide will walk you through a ["Face Similarity Search"](https://github.com/supabase/supabase/blob/master/examples/ai/face_similarity.ipynb) example using Colab and Supabase Vecs. You'll identify the celebrities you (or any other person) looks most similar to. You will:
This guide will walk you through a ["Face Similarity Search"](https://github.com/supabase/supabase/blob/master/examples/ai/face_similarity.ipynb) example using Colab and Supabase Vecs. You will be able to identify the celebrities who look most similar to you (or any other person). You will:
1. Launch a Postgres database that uses pgvector to store embeddings
1. Launch a notebook that connects to your database
@@ -49,7 +49,7 @@ Replace the `DB_CONNECTION` with your own connection string for your database, w
Now all that's left is to step through the notebook. You can do this by clicking the "execute" button (`ctrl+enter`) at the top left of each code cell. The notebook guides you through the process of creating a collection, adding data to it, and querying it.
You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/quickstarts/hello-world.mdx
+1 -1
View File
@@ -49,7 +49,7 @@ Replace the `DB_CONNECTION` with your own connection string for your database, w
Now all that's left is to step through the notebook. You can do this by clicking the "execute" button (`ctrl+enter`) at the top left of each code cell. The notebook guides you through the process of creating a collection, adding data to it, and querying it.
You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/quickstarts/text-deduplication.mdx
+1 -1
View File
@@ -50,7 +50,7 @@ Replace the `DB_CONNECTION` with your own connection string for your database, w
Now all that's left is to step through the notebook. You can do this by clicking the "execute" button (`ctrl+enter`) at the top left of each code cell. The notebook guides you through the process of creating a collection, adding data to it, and querying it.
You can view the inserted items in the [Table Editor](https://app.supabase.com/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
You can view the inserted items in the [Table Editor](https://supabase.com/dashboard/project/_/editor/), by selecting the `vecs` schema from the schema dropdown.
![Colab documents](/docs/img/ai/google-colab/colab-documents.png)
apps/docs/pages/guides/ai/vecs-python-client.mdx
+1 -1
View File
@@ -42,7 +42,7 @@ docs = vx.create_collection(name="docs", dimension=3)
### Add embeddings
Now we can insert some embeddings into our "docs" collection using the `usert()` command:
Now we can insert some embeddings into our "docs" collection using the `upsert()` command:
```py
import vecs
apps/docs/pages/guides/ai/vector-columns.mdx
+1 -1
View File
@@ -23,7 +23,7 @@ Vectors in Supabase are enabled via [pgvector](https://github.com/pgvector/pgvec
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "vector" and enable the extension.
apps/docs/pages/guides/api.mdx
+3 -3
View File
@@ -50,7 +50,7 @@ Reference:
## GraphQL API [#graphql-api-overview]
Supabase uses [pg_graphql](https://supabase.github.io/pg_graphql/) to expose a GraphQL API endpoint at `https://<project_ref>.supabase.co/graphql/v1/`.
You can introspect and query the GraphQL API of an existing Supabase project within Studio [here](https://app.supabase.com/project/_/api/graphiql),
You can introspect and query the GraphQL API of an existing Supabase project within Studio [here](https://supabase.com/dashboard/project/_/api/graphiql),
or navigate there manually at `API Docs > GraphQL > GraphiQL`.
The GraphQL interface is automatically reflected from your database's schema and supports:
@@ -72,11 +72,11 @@ Reference:
Supabase provides a Realtime API using [Realtime](https://github.com/supabase/realtime). You can use this to listen to database changes over websockets.
Realtime leverages PostgreSQL's built-in logical replication. You can manage your Realtime API simply by managing Postgres publications.
Go to your project's [Replication section](https://app.supabase.com/project/_/database/replication) to get started.
Go to your project's [Replication section](https://supabase.com/dashboard/project/_/database/replication) to get started.
## API URL and Keys
You can find the API URL and Keys in the [Dashboard](https://app.supabase.com/project/_/settings/api).
You can find the API URL and Keys in the [Dashboard](https://supabase.com/dashboard/project/_/settings/api).
<video width="99%" muted playsInline controls={true}>
<source
apps/docs/pages/guides/api/api-keys.mdx
+2 -2
View File
@@ -6,9 +6,9 @@ export const meta = {
description: 'Securing your Serverless API with Postgres Row Level Security.',
}
Supabase provides two default keys when you create a project: an `anon` key, and a `service_role` key. You can find both keys in the [API Settings](https://app.supabase.com/project/_/settings/api).
Supabase provides two default keys when you create a project: an `anon` key, and a `service_role` key. You can find both keys in the [API Settings](https://supabase.com/dashboard/project/_/settings/api).
The Serverless APIs are designed to work with Postgres Row Level Security (RLS). These keys both map to Postgres roles. You can find an `anon` user and a `service_role` user in the [Roles](http://app.supabase.com/project/_/database/roles) section of the dashboard.
The Serverless APIs are designed to work with Postgres Row Level Security (RLS). These keys both map to Postgres roles. You can find an `anon` user and a `service_role` user in the [Roles](http://supabase.com/dashboard/project/_/database/roles) section of the dashboard.
The keys are both long-lived JWTs. If you decode these keys, you will see that they contain the "role", an "issued date", and an "expiry date" ~10 years in the future.
apps/docs/pages/guides/api/creating-routes.mdx
+3 -3
View File
@@ -22,7 +22,7 @@ This creates a corresponding route `todos` which can accept `GET`, `POST`, `PATC
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Go to the [Table editor](https://supabase.com/dashboard/project/_/editor) page in the Dashboard.
1. Click **New Table** and create a table with the name `todos`.
1. Click **Save**.
1. Click **New Column** and create a column with the name `task` and type `text`.
@@ -54,7 +54,7 @@ create table
Every Supabase project has a unique API URL. Your API is secured behind an API gateway which requires an API Key for every request.
1. Go to the [Settings](https://app.supabase.com/project/_/settings/general) page in the Dashboard.
1. Go to the [Settings](https://supabase.com/dashboard/project/_/settings/general) page in the Dashboard.
2. Click **API** in the sidebar.
3. Find your API `URL`, `anon`, and `service_role` keys on this page.
@@ -198,7 +198,7 @@ By default Realtime is disabled on your database. Let's turn on Realtime for the
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Replication** in the sidebar.
3. Control which database events are sent by toggling **Insert**, **Update**, and **Delete**.
4. Control which tables broadcast changes by selecting **Source** and toggling each table.
apps/docs/pages/guides/api/joins-and-nesting.mdx
+1 -1
View File
@@ -91,7 +91,7 @@ const { data, error } = await supabase.from('countries').select(`
<TabPanel id="dart" label="Dart">
```dart
final data = await supabase.from('todos').select('id, name, cities(id, name)');
final data = await supabase.from('countries').select('id, name, cities(id, name)');
```
</TabPanel>
apps/docs/pages/guides/api/quickstart.mdx
+4 -4
View File
@@ -16,9 +16,9 @@ We'll create a database table called `todos` for storing tasks. This creates a c
<StepHikeCompact.Step step={1}>
<StepHikeCompact.Details title="Set up a Supabase project with a 'todos' table">
[Create a new project](https://app.supabase.com) in the Supabase Dashboard.
[Create a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
After your project is ready, create a table in your Supabase database. You can do this with either the Table interface or the [SQL Editor](https://app.supabase.com/project/_/sql).
After your project is ready, create a table in your Supabase database. You can do this with either the Table interface or the [SQL Editor](https://supabase.com/dashboard/project/_/sql).
</StepHikeCompact.Details>
@@ -110,7 +110,7 @@ We'll create a database table called `todos` for storing tasks. This creates a c
<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Fetch the data">
Find your API URL and Keys in your Dashboard [API Settings](https://app.supabase.com/project/_/settings/api). You can now query your "todos" table by appending `/rest/v1/todos` to the API URL.
Find your API URL and Keys in your Dashboard [API Settings](https://supabase.com/dashboard/project/_/settings/api). You can now query your "todos" table by appending `/rest/v1/todos` to the API URL.
Copy this block of code, substitute `<PROJECT_REF>` and `<ANON_KEY>`, then run it from a terminal.
@@ -141,7 +141,7 @@ You can query the route in your browser, by appending the `anon` key as a query
### Client libraries
We provide a numerous [Client Libraries](https://github.com/supabase/supabase#client-libraries).
We provide a number of [Client Libraries](https://github.com/supabase/supabase#client-libraries).
<Tabs
scrollable
apps/docs/pages/guides/api/rest/auto-generated-docs.mdx
+2 -2
View File
@@ -6,9 +6,9 @@ export const meta = {
description: 'Supabase provides documentation that updates automatically.',
}
Supabase generates documentation in the [Dashboard](https://app.supabase.com) which updates as you make database changes.
Supabase generates documentation in the [Dashboard](https://supabase.com/dashboard) which updates as you make database changes.
1. Go to the [API](https://app.supabase.com/project/_/api) page in the Dashboard.
1. Go to the [API](https://supabase.com/dashboard/project/_/api) page in the Dashboard.
2. Select any table under **Tables and Views** in the sidebar.
3. Switch between the JavaScript and the cURL docs using the tabs.
apps/docs/pages/guides/api/securing-your-api.mdx
+1 -1
View File
@@ -22,7 +22,7 @@ To enable RLS on any table:
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Authentication](https://app.supabase.com/project/_/auth/users) page in the Dashboard.
1. Go to the [Authentication](https://supabase.com/dashboard/project/_/auth/users) page in the Dashboard.
2. Click on **Policies** in the sidebar.
3. Select **Enable RLS** to enable Row Level Security.
apps/docs/pages/guides/auth.mdx
+11 -11
View File
@@ -64,7 +64,7 @@ You can enable third-party providers with the click of a button by navigating to
### Redirect URLs and wildcards
When using third-party providers, the [Supabase client library](/docs/reference/javascript/auth-signinwithoauth#sign-in-using-a-third-party-provider-with-redirect) redirects the user to the provider. When the third-party provider successfully authenticates the user, the provider redirects the user to the Supabase Auth callback URL where they are further redirected to the URL specified in the `redirectTo` parameter. This parameter defaults to the [`SITE_URL`](/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional [redirect URLs](https://app.supabase.com/project/_/auth/url-configuration).
When using third-party providers, the [Supabase client library](/docs/reference/javascript/auth-signinwithoauth#sign-in-using-a-third-party-provider-with-redirect) redirects the user to the provider. When the third-party provider successfully authenticates the user, the provider redirects the user to the Supabase Auth callback URL where they are further redirected to the URL specified in the `redirectTo` parameter. This parameter defaults to the [`SITE_URL`](/docs/reference/auth/config#site_url). You can modify the `SITE_URL` or add additional [redirect URLs](https://supabase.com/dashboard/project/_/auth/url-configuration).
You can use wildcard match patterns to support preview URLs from providers like Netlify and Vercel. See the [full list of supported patterns](https://pkg.go.dev/github.com/gobwas/glob#Compile). Use [this tool](https://www.digitalocean.com/community/tools/glob?comments=true&glob=http%3A%2F%2Flocalhost%3A3000%2F%2A%2A&matches=false&tests=http%3A%2F%2Flocalhost%3A3000&tests=http%3A%2F%2Flocalhost%3A3000%2F&tests=http%3A%2F%2Flocalhost%3A3000%2F%3Ftest%3Dtest&tests=http%3A%2F%2Flocalhost%3A3000%2Ftest-test%3Ftest%3Dtest&tests=http%3A%2F%2Flocalhost%3A3000%2Ftest%2Ftest%3Ftest%3Dtest) to test your patterns.
@@ -91,20 +91,20 @@ const getURL = () => {
let url =
process?.env?.NEXT_PUBLIC_SITE_URL ?? // Set this to your site URL in production env.
process?.env?.NEXT_PUBLIC_VERCEL_URL ?? // Automatically set by Vercel.
'http://localhost:3000/';
'http://localhost:3000/'
// Make sure to include `https://` when not localhost.
url = url.includes('http') ? url : `https://${url}`;
// Make sure to including trailing `/`.
url = url.charAt(url.length - 1) === '/' ? url : `${url}/`;
return url;
};
url = url.includes('http') ? url : `https://${url}`
// Make sure to include a trailing `/`.
url = url.charAt(url.length - 1) === '/' ? url : `${url}/`
return url
}
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'github'
provider: 'github',
options: {
redirectTo: getURL()
}
}
redirectTo: getURL(),
},
})
```
#### Mobile deep linking URIs
apps/docs/pages/guides/auth/auth-captcha.mdx
+1 -1
View File
@@ -51,7 +51,7 @@ In the Settings page, look for the **Sitekey** section and copy the key.
## Enable Captcha protection for your Supabase project
Navigate to the **[Authentication](https://app.supabase.com/project/_/settings/auth)** page in the Supabase Dashboard and find the **Enable Captcha protection** toggle under the **Security and Protection** section.
Navigate to the **[Authentication](https://supabase.com/dashboard/project/_/settings/auth)** page in the Supabase Dashboard and find the **Enable Captcha protection** toggle under the **Security and Protection** section.
![supabase_auth_general_settings.png](/docs/img/guides/auth-captcha/supabase_auth_general_settings.png)
apps/docs/pages/guides/auth/auth-email-templates.mdx
+1 -1
View File
@@ -22,7 +22,7 @@ The templating system provides the following variables for use:
| `{{ .ConfirmationURL }}` | Contains the confirmation URL. For example, a signup confirmation URL would look like: `https://project-ref.supabase.co/auth/v1/verify?token={{ .TokenHash }}&type=signup&redirect_to=https://example.com/path` . |
| `{{ .Token }}` | Contains a 6-digit One-Time-Password (OTP) that can be used instead of the `{{. ConfirmationURL }}` . |
| `{{ .TokenHash }}` | Contains a hashed version of the `{{ .Token }}`. This is useful for constructing your own email link in the email template. |
| `{{ .SiteURL }}` | Contains your application's Site URL. This can be configured in your project's [authentication settings](https://app.supabase.com/project/_/auth/url-configuration). |
| `{{ .SiteURL }}` | Contains your application's Site URL. This can be configured in your project's [authentication settings](https://supabase.com/dashboard/project/_/auth/url-configuration). |
## Limitations
apps/docs/pages/guides/auth/auth-email.mdx
+3 -3
View File
@@ -10,13 +10,13 @@ export const meta = {
Setting up Email logins for your Supabase application.
- Add Email authenticator to your [Supabase Project](https://app.supabase.com)
- Add Email authenticator to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your application - [JavaScript](https://github.com/supabase/supabase-js) | [Flutter](https://github.com/supabase/supabase-flutter)
## Configure email settings
1. For [Site URL](https://app.supabase.com/project/_/auth/url-configuration), enter the final (hosted) URL of your app.
1. For [Auth Providers](https://app.supabase.com/project/_/auth/providers), **enable email provider**.
1. For [Site URL](https://supabase.com/dashboard/project/_/auth/url-configuration), enter the final (hosted) URL of your app.
1. For [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers), **enable email provider**.
<Admonition type="info" label="Self hosting">
apps/docs/pages/guides/auth/auth-helpers/nextjs-pages.mdx
+4 -33
View File
@@ -14,16 +14,8 @@ This submodule provides convenience helpers for implementing user authentication
## Install the Next.js helper library
<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="npm"
>
<TabPanel id="npm" label="npm">
```sh
npm install @supabase/auth-helpers-nextjs
```sh Terminal
npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
```
This library supports the following tooling versions:
@@ -33,34 +25,13 @@ This library supports the following tooling versions:
Additionally, install the **React Auth Helpers** for components and hooks that can be used across all React-based frameworks.
```sh
```sh Terminal
npm install @supabase/auth-helpers-react
```
</TabPanel>
<TabPanel id="yarn" label="Yarn">
```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`
Additionally, install the **React Auth Helpers** for components and hooks that can be used across all React-based frameworks.
```sh
yarn add @supabase/auth-helpers-react
```
</TabPanel>
</Tabs>
## Set up environment variables
Retrieve your project URL and anon key in your project's [API settings](https://app.supabase.com/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
Retrieve your project URL and anon key in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env.local` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/nextjs/.env.local.example).
```bash .env.local
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
apps/docs/pages/guides/auth/auth-helpers/nextjs.mdx
+37 -25
View File
@@ -25,43 +25,55 @@ If you are using the `pages` directory, check out [Auth Helpers in Next.js Pages
</Admonition>
## Configuration
## Automatic Configuration (recommended)
### Install Next.js Auth Helpers library
Use the `create-next-app` command and the `with-supabase` template to automate the configuration of cookie-based auth with the Next.js Auth Helpers.
<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="npm"
>
<TabPanel id="npm" label="npm">
```sh
npm install @supabase/auth-helpers-nextjs
```sh Terminal
npx create-next-app -e with-supabase
```
</TabPanel>
<TabPanel id="yarn" label="Yarn">
This creates a new Next.js app configured with:
```sh
yarn add @supabase/auth-helpers-nextjs
```
</TabPanel>
</Tabs>
- [Cookie-based Auth](/docs/guides/auth/auth-helpers/nextjs#authentication)
- [Middleware to refresh user's session](/docs/guides/auth/auth-helpers/nextjs#managing-session-with-middleware)
- [Code Exchange Route](/docs/guides/auth/auth-helpers/nextjs#Managing-sign-in-with-code-exchange)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
### Declare Environment Variables
Retrieve your project's URL and anon key from your [API settings](https://app.supabase.com/project/_/settings/api), and create a `.env.local` file with the following environment variables:
Retrieve your project's URL and anon key from your [API settings](https://supabase.com/dashboard/project/_/settings/api), and create a `.env.local` file with the following environment variables:
```bash .env.local
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
```
Make sure you name these variables exactly as seen here, since these are picked up by the auth helpers library — you no longer have to explicitly pass them to a `createClient()` function as before.
### Run Next.js App
Run the development server and navigate to http://localhost:3000.
```sh Terminal
npm run dev
```
## Manual Configuration
### Install Next.js Auth Helpers library
```sh Terminal
npm install @supabase/auth-helpers-nextjs @supabase/supabase-js
```
### Declare Environment Variables
Retrieve your project's URL and anon key from your [API settings](https://supabase.com/dashboard/project/_/settings/api), and create a `.env.local` file with the following environment variables:
```bash .env.local
NEXT_PUBLIC_SUPABASE_URL=your-supabase-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
```
### Managing session with Middleware
@@ -614,7 +626,7 @@ const supabase = createClientComponentClient({ isSingleton: false })
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/SUS1t6Kq7-8"
src="https://www.youtube-nocookie.com/embed/ywvXGW6P4Gs"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
@@ -684,7 +696,7 @@ Check out the [Next.js auth example repo](https://github.com/supabase/supabase/t
<div className="video-container">
<iframe
src="https://www.youtube-nocookie.com/embed/B5TUzTKO9CE"
src="https://www.youtube-nocookie.com/embed/4_epZIxqCho"
frameBorder="1"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
apps/docs/pages/guides/auth/auth-helpers/remix.mdx
+4 -26
View File
@@ -22,39 +22,17 @@ This submodule provides convenience helpers for implementing user authentication
## Install the Remix helper library
<Tabs
scrollable
size="small"
type="underlined"
defaultActiveId="npm"
>
<TabPanel id="npm" label="npm">
```sh
npm install @supabase/auth-helpers-remix
```sh Terminal
npm install @supabase/auth-helpers-remix @supabase/supabase-js
```
This library supports the following tooling versions:
- Remix: `>=1.7.2`
</TabPanel>
<TabPanel id="yarn" label="Yarn">
```sh
yarn add @supabase/auth-helpers-remix
```
This library supports the following tooling versions:
- Remix: `>=1.7.2`
</TabPanel>
</Tabs>
## Set up environment variables
Retrieve your project URL and anon key in your project's [API settings](https://app.supabase.com/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/remix/.env.example).
Retrieve your project URL and anon key in your project's [API settings](https://supabase.com/dashboard/project/_/settings/api) in the Dashboard to set up the following environment variables. For local development you can set them in a `.env` file. See an [example](https://github.com/supabase/auth-helpers/blob/main/examples/remix/.env.example).
```bash .env
SUPABASE_URL=YOUR_SUPABASE_URL
@@ -765,7 +743,7 @@ export default function Index() {
</Tabs>
> Ensure you have [enabled replication](https://app.supabase.com/project/_/database/replication) on the table you are subscribing to.
> Ensure you have [enabled replication](https://supabase.com/dashboard/project/_/database/replication) on the table you are subscribing to.
## Migration Guide
apps/docs/pages/guides/auth/auth-helpers/sveltekit.mdx
+3 -3
View File
@@ -16,15 +16,15 @@ This submodule provides convenience helpers for implementing user authentication
This library supports Node.js `^16.15.0`.
```sh Terminal
npm install @supabase/auth-helpers-sveltekit
npm install @supabase/auth-helpers-sveltekit @supabase/supabase-js
```
### Declare Environment Variables
Retrieve your project's URL and anon key from your [API settings](https://app.supabase.com/project/_/settings/api), and create a `.env.local` file with the following environment variables:
Retrieve your project's URL and anon key from your [API settings](https://supabase.com/dashboard/project/_/settings/api), and create a `.env.local` file with the following environment variables:
```bash .env.local
# Find these in your Supabase project settings https://app.supabase.com/project/_/settings/api
# Find these in your Supabase project settings https://supabase.com/dashboard/project/_/settings/api
PUBLIC_SUPABASE_URL=https://your-project.supabase.co
PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```
apps/docs/pages/guides/auth/auth-magic-link.mdx
+8 -2
View File
@@ -17,11 +17,17 @@ Setting up Magic Link logins for your Supabase application.
## Add Magic Link into your Supabase Project
1. For [Site URL](https://app.supabase.com/project/_/auth/url-configuration), enter the final (hosted) URL of your app.
1. For [Auth Providers](https://app.supabase.com/project/_/auth/providers), **enable email provider**.
1. For [Site URL](https://supabase.com/dashboard/project/_/auth/url-configuration), enter the final (hosted) URL of your app.
1. For [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers), **enable email provider**.
## Add login code to your client app
<Admonition type="caution">
When making use of Magic Links with [the PKCE Flow](https://supabase.com/blog/supabase-auth-sso-pkce#introducing-pkce) do bear in mind that links can only be used in the same browser that they are sent from. Consequently, a magic link sent from Chrome on Desktop will be invalid if used on a Mobile Device.
</Admonition>
<Tabs
scrollable
size="small"
apps/docs/pages/guides/auth/auth-password-reset.mdx
+4 -4
View File
@@ -17,8 +17,8 @@ export const meta = {
Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail)
to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to
the update password page. This URL must be saved in your
allowed [Redirect URLs](https://app.supabase.com/project/_/auth/url-configuration) list found at
[Authentication > Redirect Configuration](https://app.supabase.com/project/_/auth/url-configuration) or it won't
allowed [Redirect URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) list found at
[Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't
redirect the user.
```ts
@@ -45,8 +45,8 @@ await supabase.auth.updateUser({ password: new_password })
Supabase provides a convenient method [`.resetPasswordForEmail`](/docs/reference/javascript/auth-resetpasswordforemail)
to reset a user password. This method takes a parameter of `redirectTo` which we will use to pass an absolute URL to
the callback page along with a query parameter to the update password page. This URL must be saved in your
allowed [Redirect URLs](https://app.supabase.com/project/_/auth/url-configuration) list found at
[Authentication > Redirect Configuration](https://app.supabase.com/project/_/auth/url-configuration) or it won't
allowed [Redirect URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) list found at
[Authentication > Redirect Configuration](https://supabase.com/dashboard/project/_/auth/url-configuration) or it won't
redirect the user.
```ts
apps/docs/pages/guides/auth/phone-login/messagebird.mdx
+4 -4
View File
@@ -24,7 +24,7 @@ We'll cover:
What you'll need:
- A MessageBird account (sign up here: https://dashboard.messagebird.com/en/sign-up)
- A Supabase project (create one here: https://app.supabase.com)
- A Supabase project (create one here: https://supabase.com/dashboard)
- A mobile phone capable of receiving SMS
## Steps
@@ -49,7 +49,7 @@ You will need the following values to get started:
- Live API Key / Test API Key
- MessageBird originator
Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings).
Now go to the Auth > Settings page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/settings).
You should see an option to enable Phone Signup.
@@ -68,7 +68,7 @@ Now the backend should be setup, we can proceed to add our client-side code!
The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
Go to Auth > Templates page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates).
Go to Auth > Templates page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/templates).
Use the variable `.Code` in the template to display the code.
@@ -276,7 +276,7 @@ The user does not have a password therefore will need to sign in via this method
## Resources
- [MessageBird Signup](https://dashboard.messagebird.com/en/sign-up)
- [Supabase Dashboard](https://app.supabase.com)
- [Supabase Dashboard](https://supabase.com/dashboard)
- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/phone-login/twilio.mdx
+37 -9
View File
@@ -7,16 +7,42 @@ export const meta = {
video: 'https://www.youtube.com/v/akScoPO01bc',
}
## Overview
In this guide we'll show you how to authenticate your users with SMS based One-Time Password (OTP) tokens.
There are two reasons to use Supabase SMS OTP tokens:
- You want users to log in with mobile number + password, and the mobile number should be verified via SMS
- You want users to log in with mobile number ONLY (i.e. passwordless login)
- You want users to log in with a phone number and password, and verify the phone number on signup with SMS
- You want users to log in with a phone number ONLY (i.e. passwordless login)
We'll cover:
What you'll need:
- Twilio account ([sign up](https://www.twilio.com/try-twilio))
- Supabase project (create one [here](https://supabase.com/dashboard))
- Mobile phone capable of receiving SMS
SMS Authentication can be done with either Twilio Verify or Twilio Programmable Messaging. [Twilio Verify](https://www.twilio.com/en-us/trusted-activation/verify) is a specialized OTP solution and is recommended for most developers that need over-the-phone authentication. Alternatively you can use [Twilio Programmable Messaging](https://www.twilio.com/docs/messaging) which offers generic SMS sending support.
## Twilio Verify
To set up Twilio Verify, you will need to:
1. Create a new [verification service](https://support.twilio.com/hc/en-us/articles/360033309133-Getting-Started-with-Twilio-Verify-V2) in the Twilio dashboard.
2. [Switch Phone Provider to Twilio Verify](https://supabase.com/dashboard/project/_/auth/providers)
3. Configure the Message Service ID field using the Verification Service ID obtained in 1.
When using Twilio Verify, OTPs are generated by Twilio. This means that:
- Unlike other providers, the OTP expiry duration and message content fields are not configurable via the Supabase dashboard. Please head to Twilio Verify to configure these settings.
- The token remains the same during its validity period until the verification is successful. This means if your user make another request within that period, they will receive the same token.
- Twilio Verify has a separate set of rate limits that apply. Visit Twilio's [Rate Limit and Timeouts page](https://www.twilio.com/docs/verify/api/rate-limits-and-timeouts) to find out more.
<Admonition type="caution">
At this time, Twilio Verify is only supported on the `whatsapp` and `sms` channels.
</Admonition>
## Twilio (Programmable Messaging)
In this section we'll cover:
- [Finding your Twilio credentials](#finding-your-twilio-credentials)
- [Using OTP with password based logins](#using-otp-with-password-based-logins)
@@ -25,7 +51,7 @@ We'll cover:
What you'll need:
- A Twilio account (sign up here: https://www.twilio.com/try-twilio)
- A Supabase project (create one here: https://app.supabase.com)
- A Supabase project (create one here: https://supabase.com/dashboard)
- A mobile phone capable of receiving SMS
## Video
@@ -68,7 +94,7 @@ You should now be able to see all three values you'll need to get started:
![All the credentials you'll need](/docs/img/guides/auth-twilio/6.png)
Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings).
Now go to the Auth > Settings page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/settings).
You should see an option to enable Phone Signup:
@@ -86,7 +112,7 @@ Now the backend should be setup, we can proceed to add our client-side code!
The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
Go to Auth > Templates page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates).
Go to Auth > Templates page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/templates).
Use the variable `.Code` in the template to display the OTP code. Here's an example in the SMS template.
@@ -349,8 +375,10 @@ let { data, error } = await supabase.auth.verifyOtp({
## Resources
- [Reasons to use Twilio Verify](https://www.twilio.com/blog/9-reasons-to-use-the-verify-api)
- [Twilio Verify Documentation](https://www.twilio.com/docs/verify)
- [Twilio Signup](https://www.twilio.com/try-twilio)
- [Supabase Dashboard](https://app.supabase.com)
- [Supabase Dashboard](https://supabase.com/dashboard)
- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/phone-login/vonage.mdx
+4 -4
View File
@@ -24,7 +24,7 @@ We'll cover:
What you'll need:
- A Vonage account (sign up here: https://dashboard.nexmo.com/sign-up)
- A Supabase project (create one here: https://app.supabase.com)
- A Supabase project (create one here: https://supabase.com/dashboard)
- A mobile phone capable of receiving SMS
## Steps
@@ -49,7 +49,7 @@ Select the country you want a number for. You will need a mobile phone number wi
### Configure Supabase
Now go to the Auth > Settings page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/settings).
Now go to the Auth > Settings page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/settings).
You should see an option to enable Phone Signup.
@@ -61,7 +61,7 @@ Now the backend should be setup, we can proceed to add our client-side code!
The SMS message sent to a phone containing an OTP code can be customized. This is useful if you need to mention a brand name or display a website address.
Go to Auth > Templates page in the Supabase dashboard (https://app.supabase.com/project/YOUR-PROJECT-REF/auth/templates).
Go to Auth > Templates page in the Supabase dashboard (https://supabase.com/dashboard/project/YOUR-PROJECT-REF/auth/templates).
Use the variable `.Code` in the template to display the code.
@@ -269,7 +269,7 @@ The user does not have a password therefore will need to sign in via this method
## Resources
- [Vonage Signup](https://dashboard.nexmo.com/sign-up)
- [Supabase Dashboard](https://app.supabase.com)
- [Supabase Dashboard](https://supabase.com/dashboard)
- [Supabase Row Level Security](/docs/guides/auth#row-level-security)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/quickstarts/nextjs.mdx
+94
View File
@@ -0,0 +1,94 @@
import Layout from '~/layouts/DefaultGuideLayout'
import StepHikeCompact from '~/components/StepHikeCompact'
export const meta = {
title: 'Use Supabase Auth with Next.js',
subtitle: 'Learn how to configure Supabase Auth for the Next.js App Router.',
breadcrumb: 'Auth Quickstarts',
}
<StepHikeCompact>
<StepHikeCompact.Step step={1}>
<StepHikeCompact.Details title="Create a new Supabase project">
[Launch a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://supabase.com/dashboard/project/_/sql).
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```sql SQL_EDITOR
select * from auth.users;
````
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={2}>
<StepHikeCompact.Details title="Create a Next.js app">
Use the `create-next-app` command and the `with-supabase` template, to create a Next.js app pre-configured with:
- [Supabase Auth](https://supabase.com/docs/guides/auth/auth-helpers/nextjs)
- [TypeScript](https://www.typescriptlang.org/)
- [Tailwind CSS](https://tailwindcss.com/)
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash Terminal
npx create-next-app -e with-supabase my-app && cd my-app
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={3}>
<StepHikeCompact.Details title="Declare Supabase Environment Variables">
Rename `.env.local.example` to `.env.local` and populate with [your project's URL and Anon Key](https://supabase.com/dashboard/project/_/settings/api).
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```text .env.local
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Start the app">
Start the development server, go to http://localhost:3000 in a browser, and you should see the contents of `app/page.tsx`.
To Sign Up a new user, navigate to http://localhost:3000/login, and click `Sign Up Now`.
Check out the [Supabase Auth docs](https://supabase.com/docs/guides/auth#authentication) for more authentication methods.
</StepHikeCompact.Details>
<StepHikeCompact.Code>
```bash Terminal
npm run dev
```
</StepHikeCompact.Code>
</StepHikeCompact.Step>
</StepHikeCompact>
export const Page = ({ children }) => <Layout meta={meta} children={children} hideToc={true} />
export default Page
apps/docs/pages/guides/auth/quickstarts/react.mdx
+4 -4
View File
@@ -3,7 +3,7 @@ import StepHikeCompact from '~/components/StepHikeCompact'
export const meta = {
title: 'Use Supabase Auth with React',
subtitle: 'Learn how to Supabase Auth with React.js.',
subtitle: 'Learn how to use Supabase Auth with React.js.',
breadcrumb: 'Auth Quickstarts',
}
@@ -12,9 +12,9 @@ export const meta = {
<StepHikeCompact.Step step={1}>
<StepHikeCompact.Details title="Create a new Supabase project">
[Launch a new project](https://app.supabase.com) in the Supabase Dashboard.
[Launch a new project](https://supabase.com/dashboard) in the Supabase Dashboard.
Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://app.supabase.com/project/_/sql).
Your new database has a table for storing your users. You can see that this table is currently empty by running some SQL in the [SQL Editor](https://supabase.com/dashboard/project/_/sql).
</StepHikeCompact.Details>
@@ -68,7 +68,7 @@ export const meta = {
<StepHikeCompact.Step step={4}>
<StepHikeCompact.Details title="Set up your login component">
In `index.js`, create a Supabase client using your [Project URL and public API (anon) key](https://app.supabase.com/project/_/settings/api).
In `index.js`, create a Supabase client using your [Project URL and public API (anon) key](https://supabase.com/dashboard/project/_/settings/api).
You can configure the Auth component to display whenever there is no session inside `supabase.auth.getSession()`
apps/docs/pages/guides/auth/row-level-security.mdx
+1 -1
View File
@@ -317,7 +317,7 @@ Initializing a client with a Service Key will not override RLS if a user token i
### Testing policies
To test policies on the database itself (i.e., from the [SQL Editor](https://app.supabase.com/project/_/sql) or from `psql`) without switching to your frontend and logging in as different users, you can utilize the following helper SQL procedures ([credits](https://github.com/supabase/supabase/issues/7311#issuecomment-1398648114)):
To test policies on the database itself (i.e., from the [SQL Editor](https://supabase.com/dashboard/project/_/sql) or from `psql`) without switching to your frontend and logging in as different users, you can utilize the following helper SQL procedures ([credits](https://github.com/supabase/supabase/issues/7311#issuecomment-1398648114)):
```sql
grant anon, authenticated to postgres;
apps/docs/pages/guides/auth/server-side-rendering.mdx
+53 -119
View File
@@ -7,58 +7,40 @@ export const meta = {
description: 'Render pages with user information on the server.',
}
Single-page apps with server-side rendering (SSR) is a popular way to optimize rendering
performance and leverage advanced caching strategies.
Single-page apps with server-side rendering (SSR) is a popular way to optimize rendering performance and leverage advanced caching strategies.
Supabase Auth supports server-side rendering when you need access to user
information, or your server needs to authorize API requests on behalf of your
user to render content.
Supabase Auth supports server-side rendering when you need access to user information, or your server needs to authorize API requests on behalf of your user to render content.
When a user authenticates with Supabase Auth, two pieces of information are
issued by the server:
When a user authenticates with Supabase Auth, two pieces of information are issued by the server:
1. **Access token** in the form of a JWT.
2. **Refresh token** which is a randomly generated string.
Most Supabase projects have their auth server listening on
`<project-ref>.supabase.co/auth/v1`, thus the access token and refresh token are
set as `sb-access-token` and `sb-refresh-token` cookies on the
`<project-ref>.supabase.co` domain.
Most Supabase projects have their auth server listening on `<project-ref>.supabase.co/auth/v1`, thus the access token and refresh token are set as `sb-access-token` and `sb-refresh-token` cookies on the `<project-ref>.supabase.co` domain.
<Admonition type="note">
These cookie names are for internal Supabase use only and may change without
warning. They are included in this guide for illustration purposes only.
These cookie names are for internal Supabase use only and may change without warning. They are included in this guide for illustration purposes only.
</Admonition>
Web browsers limit access to cookies across domains, consistent with the
[Same-Origin Policy
(SOP)](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy).
Web browsers limit access to cookies across domains, consistent with the [Same-Origin Policy (SOP)](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy).
Your web application cannot access these cookies,
nor will these cookies be sent to your application's server.
Your web application cannot access these cookies, nor will these cookies be sent to your application's server.
## Understanding the authentication flow
When you call one of the `signIn` methods, the client library running in the
browser sends the request to the Supabase Auth server. The Auth server determines
whether to verify a phone number, email and password combination, a Magic Link,
or use a social login (if you have any setup in your project).
When you call one of the `signIn` methods, the client library running in the browser sends the request to the Supabase Auth server. The Auth server determines whether to verify a phone number, email and password combination, a Magic Link, or use a social login (if you have any setup in your project).
Upon successful verification of the identity of the user, the Supabase Auth
server redirects the user back to your single-page app.
Upon successful verification of the identity of the user, the Supabase Auth server redirects the user back to your single-page app.
<Admonition type="tip">
You can configure [redirects URLs](https://app.supabase.com/project/_/auth/url-configuration) in the Supabase Dashboard. You can use [wildcard match patterns](/docs/guides/auth#redirect-urls-and-wildcards)
like `*` and `**` to allow redirects to different forms of URLs.
You can configure [redirects URLs](https://supabase.com/dashboard/project/_/auth/url-configuration) in the Supabase Dashboard. You can use [wildcard match patterns](/docs/guides/auth#redirect-urls-and-wildcards) like `*` and `**` to allow redirects to different forms of URLs.
</Admonition>
Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The **PKCE** flow is generally preferred when on the server.
It introduces a few additional steps which guard a against replay and URL capture attacks. Unlike the implicit flow, it also allows users to access the
`access_token` and `refresh_token` on the server.
Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The **PKCE** flow is generally preferred when on the server. It introduces a few additional steps which guard a against replay and URL capture attacks. Unlike the implicit flow, it also allows users to access the `access_token` and `refresh_token` on the server.
<Accordion
type="default"
@@ -74,30 +56,23 @@ It introduces a few additional steps which guard a against replay and URL captur
id={`ssr-implicit-flow`}
>
When using the implicit flow, a redirect URL will be returned with the following structure:
```
https://yourapp.com/...#access_token=<...>&refresh_token=<...>&...
```
When using the implicit flow, a redirect URL will be returned with the following structure:
```
https://yourapp.com/...#access_token=<...>&refresh_token=<...>&...
```
The first access and refresh tokens after a successful verification are
contained in the URL fragment (anything after the `#` sign) of the redirect
location. This is intentional and not configurable.
The first access and refresh tokens after a successful verification are contained in the URL fragment (anything after the `#` sign) of the redirect location. This is intentional and not configurable.
The client libraries are designed to listen for this type of URL, extract
the access token, refresh token and some extra information from it, and finally
persist it in local storage for further use by the library and your app.
The client libraries are designed to listen for this type of URL, extract the access token, refresh token and some extra information from it, and finally persist it in local storage for further use by the library and your app.
<Admonition type="info">
<Admonition type="info">
Web browsers do not send the URL fragment to the server they're making the request to. Since you may not be hosting the single-page app on a server under your direct control (such as on GitHub Pages or other freemium hosting providers), we want to prevent hosting services from getting access to your user's authorization credentials by default.
Even if the server is under your direct control, `GET` requests and their full URLs are often logged. This approach also avoids leaking credentials in request or access logs. If you wish to obtain the `access_token` and `refresh_token` on a server, please consider using the PKCE flow.
</Admonition>
Web browsers do not send the URL fragment to the server they're making the
request to. Since you may not be hosting the single-page app on a server under
your direct control (such as on GitHub Pages or other freemium hosting
providers), we want to prevent hosting services from getting access to your
user's authorization credentials by default. Even if the server is under your
direct control, `GET` requests and their full URLs are often logged. This
approach also avoids leaking credentials in request or access logs. If you wish to obtain the
`access_token` and `refresh_token` on a server, please consider using the PKCE flow.
</Admonition>
</Accordion.Item>
</div>
<div className="border-b pb-3">
@@ -105,18 +80,21 @@ approach also avoids leaking credentials in request or access logs. If you wish
header={<span className="text-scale-1200 font-bold">PKCE</span>}
id={`ssr-pkce-flow`}
>
When using the PKCE flow, a redirect URL will be returned with the following structure:
```
https://yourapp.com/...?code=<...>
```
The `code` parameter is commonly known as the Auth Code and can be exchanged for an access token by calling `exchangeCodeForSession(code)`.
<Admonition type="info">
For security purposes, the code has a validity of 5 minutes and can only be exchanged for an access token once. You
will need to restart the authentication flow from scratch if you wish to obtain a new access token.
For security purposes, the code has a validity of 5 minutes and can only be exchanged for an access token once. You will need to restart the authentication flow from scratch if you wish to obtain a new access token.
</Admonition>
As the flow is run server side, `localStorage` may not be available. You may configure the client library to use a custom storage adapter an alternate backing storage such as cookies
by setting the `storage` option to an object with the following methods:
As the flow is run server side, `localStorage` may not be available. You may configure the client library to use a custom storage adapter an alternate backing storage such as cookies by setting the `storage` option to an object with the following methods:
```js
const customStorageAdapter: SupportedStorage = {
getItem: (key) => {
@@ -161,26 +139,19 @@ approach also avoids leaking credentials in request or access logs. If you wish
}
)
```
You can read more about the PKCE flow [here](https://oauth.net/2/pkce/)
[Learn more](https://oauth.net/2/pkce/) about the PKCE flow.
</Accordion.Item>
</div>
</Accordion>
## Bringing it together
As seen from the authentication flow, the initial request after successful
login made by the browser to your app's server after user login **does not
contain any information about the user**. This is because first the client-side
JavaScript library must run before it makes the access and refresh token
available to your server.
As seen from the authentication flow, the initial request after successful login made by the browser to your app's server after user login **does not contain any information about the user**. This is because first the client-side JavaScript library must run before it makes the access and refresh token available to your server.
It is very important to make sure that the redirect route right after login
works without any server-side rendering. Other routes requiring authorization
do not have the same limitation, provided you send the access and refresh
tokens to your server.
It is very important to make sure that the redirect route right after login works without any server-side rendering. Other routes requiring authorization do not have the same limitation, provided you send the access and refresh tokens to your server.
This is traditionally done by setting cookies. Here's an example you
can add to the root of your application:
This is traditionally done by setting cookies. Here's an example you can add to the root of your application:
```typescript
supabase.auth.onAuthStateChange((event, session) => {
@@ -197,15 +168,9 @@ supabase.auth.onAuthStateChange((event, session) => {
})
```
This uses the standard
[`document.cookie` API](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie)
to set cookies on all paths of your app's domain. All subsequent requests
made by the browser to your app's server include the `my-access-token` and
`my-refresh-token` cookies (the names of the cookies and additional
parameters can be changed).
This uses the standard [`document.cookie` API](https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie) to set cookies on all paths of your app's domain. All subsequent requests made by the browser to your app's server include the `my-access-token` and `my-refresh-token` cookies (the names of the cookies and additional parameters can be changed).
In your server-side rendering code you can now access user and session
information:
In your server-side rendering code you can now access user and session information:
```typescript
const refreshToken = req.cookies['my-refresh-token']
@@ -228,23 +193,13 @@ if (refreshToken && accessToken) {
await supabase.auth.getUser()
```
Use `setSession({ access_token, refresh_token })` instead of
`setSession(refreshToken)` or `getUser(accessToken)` as refresh tokens or access tokens alone do not properly identify a user session.
Use `setSession({ access_token, refresh_token })` instead of `setSession(refreshToken)` or `getUser(accessToken)` as refresh tokens or access tokens alone do not properly identify a user session.
Access tokens are valid only for a short amount of time.
Even though refresh tokens are long-lived, there is no guarantee that a user
has an active session. They may have logged out and your application failed to
remove the `my-refresh-token` cookie, or some other failure occurred that left
a stale refresh token in the browser. Furthermore, a refresh token can only be
used a few seconds after it was first used. Only use a refresh token if the
access token is about to expire, which will avoid the introduction of difficult
to diagnose logout bugs in your app.
Even though refresh tokens are long-lived, there is no guarantee that a user has an active session. They may have logged out and your application failed to remove the `my-refresh-token` cookie, or some other failure occurred that left a stale refresh token in the browser. Furthermore, a refresh token can only be used a few seconds after it was first used. Only use a refresh token if the access token is about to expire, which will avoid the introduction of difficult to diagnose logout bugs in your app.
A good practice is to handle unauthorized errors by deferring rendering the
page in the browser instead of in the server. Some user information is
contained in the access token though, so in certain cases, you may be able to
use this potentially stale information to render a page.
A good practice is to handle unauthorized errors by deferring rendering the page in the browser instead of in the server. Some user information is contained in the access token though, so in certain cases, you may be able to use this potentially stale information to render a page.
## Frequently Asked Questions
@@ -256,57 +211,36 @@ To improve experience for your users, we recommend redirecting users to one spec
### How do I make the cookies `HttpOnly`?
This is not necessary. Both the access token and refresh token are designed to
be passed around to different components in your application. The browser-based
side of your application needs access to the refresh token to properly maintain
a browser session anyway.
This is not necessary. Both the access token and refresh token are designed to be passed around to different components in your application. The browser-based side of your application needs access to the refresh token to properly maintain a browser session anyway.
### My server is getting invalid refresh token errors. What's going on?
It is likely that the refresh token sent from the browser to your server is
stale. Make sure the `onAuthStateChange` listener callback is free of bugs and
is registered relatively early in your application's lifetime.
It is likely that the refresh token sent from the browser to your server is stale. Make sure the `onAuthStateChange` listener callback is free of bugs and is registered relatively early in your application's lifetime
When you receive this error on the server-side, try to defer
rendering to the browser where the client library can access an up-to-date
refresh token and present the user with a better experience.
When you receive this error on the server-side, try to defer rendering to the browser where the client library can access an up-to-date refresh token and present the user with a better experience.
### Should I set a shorter `Max-Age` parameter on the cookies?
The `Max-Age` or `Expires` cookie parameters only control whether the browser
sends the value to the server. Since a refresh token represents the
long-lived authentication session of the user on that browser, setting a short
`Max-Age` or `Expires` parameter on the cookies only results in a degraded
user experience.
The `Max-Age` or `Expires` cookie parameters only control whether the browser sends the value to the server. Since a refresh token represents the long-lived authentication session of the user on that browser, setting a short `Max-Age` or `Expires` parameter on the cookies only results in a degraded user experience.
The only way to ensure that a user has logged out or their session has ended
is to get the user's details with `getUser()`.
The only way to ensure that a user has logged out or their session has ended is to get the user's details with `getUser()`.
### What should I use for the `SameSite` property?
Make sure you [understand the behavior of the property in different
situations](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite)
as some properties can degrade the user experience.
Make sure you [understand the behavior of the property in different situations](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Set-Cookie/SameSite) as some properties can degrade the user experience.
A good default is to use `Lax` which sends cookies when users are
navigating to your site. Cookies typically require the `Secure` attribute,
which only sends them over HTTPS. However, this can be a problem when
developing on `localhost`.
A good default is to use `Lax` which sends cookies when users are navigating to your site. Cookies typically require the `Secure` attribute, which only sends them over HTTPS. However, this can be a problem when developing on `localhost`.
### Can I use server-side rendering with a CDN or cache?
Yes, but you need to be careful to include at least the refresh token cookie
value in the cache key. Otherwise you may be accidentally serving pages with
data belonging to different users!
Yes, but you need to be careful to include at least the refresh token cookie value in the cache key. Otherwise you may be accidentally serving pages with data belonging to different users!
Also be sure you set proper cache control headers. We recommend invalidating
cache keys every hour or less.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
Also be sure you set proper cache control headers. We recommend invalidating cache keys every hour or less.
### Which authentication flows have PKCE support?
At present, PKCE is supported on the Magic Link, OAuth, Sign Up, and Password Recovery routes. These correspond to the `signInWithOtp`, `signInWithOAuth`, `signUp`, and `resetPasswordForEmail` methods on the Supabase client library. When using PKCE with Phone and Email OTPs, there is no behavior change with respect to the implicit flow - an access token will be returned in the body when a request is successful.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/auth/social-login/auth-apple.mdx
+123 -86
View File
@@ -4,95 +4,53 @@ import AppleSecretGenerator from '~/components/AppleSecretGenerator'
export const meta = {
id: 'auth-apple',
title: 'Login with Apple',
description: 'Add Apple OAuth to your Supabase project',
description: 'Use Sign in with Apple with Supabase',
}
To enable Apple Auth for your project, you need to set up an Apple OAuth application and add the application credentials to your Supabase Dashboard.
Supabase Auth supports using [Sign in with Apple](https://developer.apple.com/sign-in-with-apple/) on the web and in native apps for iOS, macOS, watchOS or tvOS.
## Overview
Apple OAuth consists of six broad steps:
To support Sign in with Apple, you need to configure the [Apple provider in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) for your project.
- Obtaining an `App Id` with “Sign In with Apple” capabilities.
- Obtaining a `Services Id` - this will serve as the `client_id`.
- Obtaining a `secret key` that will be used to get our `client_secret`.
- Generating the `client_secret` using the `secret key`.
- Add your `client id` and `client secret` keys to your [Supabase Project](https://app.supabase.com).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
There are three general ways to use Sign in with Apple, depending on the application you're trying to build:
## Access your Apple Developer account
- Sign in on the web or in web-based apps
- Using an OAuth flow initiated by Supabase Auth using the [Sign in with Apple REST API](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api).
- Using [Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) directly in the browser, usually suitable for websites.
- Sign in natively inside iOS, macOS, watchOS or tvOS apps using [Apple's Authentication Services](https://developer.apple.com/documentation/authenticationservices)
- Go to [developer.apple.com](https://developer.apple.com).
- Click on `Account` at the top right to log in.
In some cases you're able to use the OAuth flow within web-based native apps such as with [React Native](https://reactnative.dev), [Expo](https://expo.dev) or other similar frameworks. It is best practice to use native Sign in with Apple capabilities on those platforms instead.
![Apple Developer Portal.](/docs/img/guides/auth-apple/apple-developer-portal.png)
Before you can use Sign in with Apple, you need to obtain an [Apple Developer](https://developer.apple.com) account.
## Obtain an App ID
## Using the OAuth flow for web
- Go to `Certificates, Identifiers & Profiles`.
- Click on `Identifiers` at the left.
- Click on the `+` sign in the upper left next to `Identifiers`.
- Select `App IDs` and click `Continue`.
- Select type `App` and click `Continue`.
- Fill out your app information:
- App description.
- Bundle ID (Apple recommends reverse-domain name style, so if your domain is acme.com and your app is called roadrunner, use: "com.acme.roadrunner").
- Scroll down and check `Sign In With Apple`.
- Click `Continue` at the top right.
- Click `Register` at the top right.
Sign in with Apple's OAuth flow is designed for web or browser based sign in methods. It can be used on web-based apps as well as websites, though some users can benefit by using Sign in with Apple JS directly.
## Obtain a Services ID
Behind the scenes, Supabase Auth uses the [REST APIs](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_rest_api) provided by Apple.
This will serve as the `client_id` when you make API calls to authenticate the user.
To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library:
- Go to `Certificates, Identifiers & Profiles`.
- Click on `Identifiers` at the left.
- Click on the `+` sign in the upper left next to `Identifiers`.
- Select `Services IDs` and click `Continue`.
- Fill out your information:
- App description.
- Bundle ID (you can't use the same Bundle ID from the previous step, but you can just add something to the beginning, such as "app." to make it app.com.acme.roadrunner").
- SAVE THIS ID -- this ID will become your `client_id` later.
- Click `Continue` at the top right.
- Click `Register` at the top right.
```ts
supabase.auth.signInWithOAuth({
provider: 'apple',
})
```
## Find your callback URL
This call takes the user to Apple's consent screen. Once the flow ends, the user's profile information is exchanged and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session.
<SocialProviderSetup provider="Apple" />
### Configuration
## Configure your Services ID
You will require the following information:
- Under `Identifiers`, click on your newly-created Services ID.
- Check the box next to `Sign In With Apple` to enable it.
- Click `Configure` to the right.
- Make sure your newly created Bundle ID is selected under `Primary App ID`
- Add your domain to the `Domains and Subdomains` box (do not add `https://`, just add the domain).
- In the `Return URLs` box, type the callback URL of your app which you found in the previous step and click `Next` at the bottom right.
- Click `Done` at the bottom.
- Click `Continue` at the top right.
- Click `Save` at the top right.
## Download your secret key
Now you'll need to download a `secret key` file from Apple that will be used to generate your `client_secret`.
- Go to `Certificates, Identifiers & Profiles`.
- Click on `Keys` at the left.
- Click on the `+` sign in the upper left next to `Keys`.
- Enter a `Key Name`.
- Check `Sign In with Apple`.
- Click `Configure` to the right.
- Select your newly-created Services ID from the dropdown selector.
- Click `Save` at the top right.
- Click `Continue` at the top right.
- Click `Register` at the top right.
- Click `Download` at the top right.
- Save the downloaded file -- this contains your "secret key" that will be used to generate your `client_secret`.
- Click `Done` at the top right.
## Generate a client secret
You need to configure a client secret when using Sign in with Apple for Web. This is a specially crafted [JWT signed with a secret key downloaded from Apple's Developer Center](https://developer.apple.com/documentation/signinwithapplerestapi/generate_and_validate_tokens).
1. Your Apple Developer account's **Team ID**, which is an alphanumeric string of 10 characters that uniquely identifies the developer of the app. It's often easily accessible in the upper right-side menu on the Apple Developer Console.
2. Register email sources for _Sign in with Apple for Email Communication_ which can be found in the [Services](https://developer.apple.com/account/resources/services/list) section of the Apple Developer Console.
3. An **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple once you create an App ID in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._)
4. A **Services ID** which uniquely identifies the web services provided by the app you registered in the previous step. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.web`.
5. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your Supabase project is hosted on. This is usually `<project-id>.supabase.co` while the redirect URL is `https://<project-id>.supabase.co/auth/v1/callback`.
6. Create a signing **Key** in the [Keys](https://developer.apple.com/account/resources/authkeys/list) section of the Apple Developer Console. You can use this key to generate a secret key using the tool below, which is added to your Supabase project's Auth configuration. Make sure you safely store the `AuthKey_XXXXXXXXXX.p8` file. If you ever loose access to it, or make it public accidentally please revoke it from the Apple Developer Console and create a new one immediately. You will have to generate a new secret key using this file every 6 months, so make sure you schedule a recurring meeting in your calendar!
7. Finally, add the information you configured above to the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers).
<Admonition>
Use this tool to generate a new Apple client secret. No keys leave your browser!
@@ -100,34 +58,113 @@ You need to configure a client secret when using Sign in with Apple for Web. Thi
<AppleSecretGenerator />
## Add your OAuth credentials to Supabase
## Using native sign in
<SocialProviderSettingsSupabase provider="Apple" />
Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Apple flow on iOS, macOS, watchOS or tvOS uses the [operating system's built-in functionalities](https://developer.apple.com/documentation/authenticationservices) to prompt the user for consent.
## Add login code to your client app
When the user provides consent, Apple issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth.
When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `apple` as the `provider`:
If you are building an iOS or macOS app using Flutter, you can use [apple_sign_in](https://pub.dev/packages/sign_in_with_apple) package to quickly get the user's consent and sign them in to your Supabase project:
```js
async function signInWithApple() {
const { data, error } = await supabase.auth.signInWithOAuth({
```dart
import 'package:sign_in_with_apple/sign_in_with_apple.dart';
import 'package:crypto/crypto.dart';
Future<AuthResponse> signInWithApple() {
// Generate a random string
final rawNonce = _generateRandomString();
final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
final credential = await SignInWithApple.getAppleIDCredential(
scopes: [
AppleIDAuthorizationScopes.email,
AppleIDAuthorizationScopes.fullName,
],
nonce: hashedNonce,
);
final idToken = credential.identityToken;
if (idToken == null) {
throw 'Could not find ID Token from generated credential.';
}
return signInWithIdToken(
provider: Provider.apple,
idToken: idToken,
nonce: rawNonce,
);
}
```
In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so:
```ts
await supabase.auth.signInWithIdToken({
provider: 'apple',
token: '<identity token received from the OS>',
})
```
Please take a look at these open-source projects which may help you obtain an ID token directly from the OS:
- [invertase/react-native-apple-authentication](https://github.com/invertase/react-native-apple-authentication)
- [Expo AppleAuthentication](https://docs.expo.dev/versions/latest/sdk/apple-authentication/)
For apps written in Swift, please consult the [community maintained library](/docs/reference/swift/introduction).
### Configuration
Native sign in requires less configuration steps than OAuth flow. You will need to perform these steps:
1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._)
2. Register all of the App IDs that will be using your Supabase project in the [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
Note that if you're building a native app only, you do not need to setup the OAuth flow.
## Using Sign in with Apple JS
[Sign in with Apple JS](https://developer.apple.com/documentation/sign_in_with_apple/sign_in_with_apple_js) is an official Apple framework for authenticating Apple users on websites. Although it can be used in web-based apps, those use cases will benefit more with the OAuth flow described above. We recommend using this method on classic websites only.
You can use the `signInWithIdToken()` method from the Supabase JavaScript library on the website to obtain an access and refresh token once the user has given consent using Sign in with Apple JS:
```ts
function signIn() {
const data = await AppleID.auth.signIn()
await supabase.auth.signInWithIdToken({
provider: 'apple',
token: data.id_token,
nonce: '<nonce used in AppleID.auth.init>',
})
}
```
When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
Alternatively, you can use the `AppleIDSignInOnSuccess` event with the `usePopup` option:
```js
async function signout() {
const { error } = await supabase.auth.signOut()
}
```ts
// Listen for authorization success.
document.addEventListener('AppleIDSignInOnSuccess', async (event) => {
await supabase.auth.signInWithIdToken({
provider: 'apple',
token: event.data.id_token,
nonce: '<value used in appleid-signin-nonce meta tag>',
})
})
```
## Resources
Please make sure you request for the scope `name email` when initializing the library.
- [Apple Developer Account](https://developer.apple.com).
- Thanks to [Janak Amarasena](https://medium.com/@janakda) who did all the heavy lifting in [How to configure Sign In with Apple](https://medium.com/identity-beyond-borders/how-to-configure-sign-in-with-apple-77c61e336003).
### Configuration
To use Sign in with Apple JS you need to configure these options:
1. Have an **App ID** which uniquely identifies the app you are building. You can create a new App ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/bundleId) section in the Apple Developer Console (use the filter menu in the upper right side to see all App IDs). These usually are a reverse domain name string, for example `com.example.app`. Make sure you configure Sign in with Apple for the App ID you created or already have, in the Capabilities list. At this time Supabase Auth does not support Server-to-Server notification endpoints, so you should leave that setting blank. (In the past App IDs were referred to as _bundle IDs._)
2. Obtain a **Services ID** attached to the App ID that uniquely identifies the website. Use this value as the client ID when initializing Sign in with Apple JS. You can create a new Services ID from the [Identifiers](https://developer.apple.com/account/resources/identifiers/list/serviceId) section in the Apple Developer Console (use the filter menu in the upper right side to see all Services IDs). These usually are a reverse domain name string, for example `com.example.app.website`.
3. Configure Website URLs for the newly created **Services ID**. The web domain you should use is the domain your website is hosted on. The redirect URL must also point to a page on your website that will receive the callback from Apple.
4. Register the Services ID you created to your project's [Apple provider configuration in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
Note that if you're using Sign in with Apple JS you do not need to configure the OAuth settings.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/social-login/auth-bitbucket.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Bitbucket Auth for your project, you need to set up a BitBucket OAuth
Setting up Bitbucket logins for your application consists of 3 parts:
- Create and configure a Bitbucket OAuth Consumer on [Bitbucket](https://bitbucket.org)
- Add your Bitbucket OAuth Consumer keys to your [Supabase Project](https://app.supabase.com)
- Add your Bitbucket OAuth Consumer keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Bitbucket account
apps/docs/pages/guides/auth/social-login/auth-discord.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Discord Auth for your project, you need to set up a Discord Applicatio
Setting up Discord logins for your application consists of 3 parts:
- Create and configure a Discord Application [Discord Developer Portal](https://discord.com/developers)
- Add your Discord OAuth Consumer keys to your [Supabase Project](https://app.supabase.com)
- Add your Discord OAuth Consumer keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Discord account
apps/docs/pages/guides/auth/social-login/auth-facebook.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Facebook Auth for your project, you need to set up a Facebook OAuth ap
Setting up Facebook logins for your application consists of 3 parts:
- Create and configure a Facebook Application on the [Facebook Developers Site](https://developers.facebook.com)
- Add your Facebook keys to your [Supabase Project](https://app.supabase.com)
- Add your Facebook keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Facebook Developer account
apps/docs/pages/guides/auth/social-login/auth-github.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable GitHub Auth for your project, you need to set up a GitHub OAuth applic
Setting up GitHub logins for your application consists of 3 parts:
- Create and configure a GitHub OAuth App on [GitHub](https://github.com)
- Add your GitHub OAuth keys to your [Supabase Project](https://app.supabase.com)
- Add your GitHub OAuth keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your GitHub account
apps/docs/pages/guides/auth/social-login/auth-gitlab.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable GitLab Auth for your project, you need to set up a GitLab OAuth applic
Setting up GitLab logins for your application consists of 3 parts:
- Create and configure a GitLab Application on [GitLab](https://gitlab.com)
- Add your GitLab Application keys to your [Supabase Project](https://app.supabase.com)
- Add your GitLab Application keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your GitLab account
apps/docs/pages/guides/auth/social-login/auth-google.mdx
+257 -89
View File
@@ -3,120 +3,288 @@ import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'auth-google',
title: 'Login with Google',
description: 'Add Google OAuth to your Supabase project',
description: 'Use Sign in with Google on the web, in native apps or with Chrome extensions',
}
To enable Google Auth for your project, you need to set up a Google OAuth application and add the application credentials to your Supabase Dashboard.
Supabase Auth supports Sign in with Google on the web, native Android applications and Chrome extensions.
## Overview
Setting up Google logins for your application consists of 3 parts:
To support Sign in with Google you need to configure the [Google provider in the Supabase dashboard](https://supabase.com/dashboard/project/_/auth/providers) for your project.
- Create and configure a Google Project on the [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard)
- Add your Google OAuth keys to your [Supabase Project](https://app.supabase.com)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
There are three general ways to use Sign in with Google, depending on the application you're building:
## Access your Google Cloud Platform account
- Sign in on the web or in web-based apps
- Using an OAuth flow initiated by Supabase Auth using [Google Identity Authorization with OAuth 2.0 for Web Server Applications](https://developers.google.com/identity/protocols/oauth2/web-server).
- Using a [personalized sign-in button](https://developers.google.com/identity/gsi/web/guides/personalized-button) or [One Tap](https://developers.google.com/identity/gsi/web/guides/display-google-one-tap) and [automatic sign-in](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out) for users already logged in to their Google account.
- Sign in in native Android apps and Chrome extensions
- Go to [cloud.google.com](https://cloud.google.com).
- Click on `Sign in` at the top right to log in.
In some cases you're able to use the OAuth flow within web-based native apps such as with React Native, Expo or other similar frameworks. It is best practice to use native Sign in with Google capabilities whenever possible.
![Google Developer Portal.](/docs/img/guides/auth-google/google-portal.png)
Before you can use Sign in with Google, you need to obtain a [Google Cloud Platform](https://console.cloud.google.com/home/dashboard) account and have a project ready or create a new one.
## Create a Google Cloud Platform Project
## Using the OAuth flow for the web
- Click on `Select a Project` at the top left.
- (Or, if a project is currently selected, click on the current project name at the top left.)
- Click `New Project` at the top right.
- Fill in your app information, then click `Create`.
- (This can take a few minutes.)
- This should bring you to the dashboard for your new project.
Sign in with Google's OAuth flow is designed for web or browser based sign in methods. It can be used in web-based apps as well as in websites, though sometimes it is worthwhile considering using One Tap login directly.
## Create the OAuth Keys for your project
Behind the scenes, Supabase Auth uses the [Google OAuth 2.0 APIs](https://developers.google.com/identity/openid-connect/openid-connect), which are OpenID Connect certified, to perform the authentication.
From your project's dashboard screen:
To initiate sign in, you can use the `signInWithOAuth()` method from the Supabase JavaScript library:
- In the search bar at the top labeled `Search products and resources` type `OAuth`.
- Click on `OAuth consent screen` from the list of results.
- On the `OAuth consent screen` page select `External`.
- Click `Create`.
## Edit your app information
- On the `Edit app registration` page fill out your app information.
- Click `Save and continue` at the bottom.
## Find your callback URL
<SocialProviderSetup provider="Google" />
## Create your Google credentials
- Click `Credentials` at the left to go to the `Credentials` page on the Google Cloud Platform console.
- Click `Create Credentials` near the top then select `OAuth client ID`
- On the `Create OAuth client ID` page, select your application type. If you're not sure, choose `Web application`.
- Fill in your app name.
- At the bottom, under `Authorized redirect URIs` click `Add URI`.
- Enter your callback URI under `Authorized redirect URIs` at the bottom.
- Enter your callback URI in the `Valid OAuth Redirect URIs` box.
- Click `Save Changes` at the bottom right.
- Click `Create`.
Copy your new OAuth credentials
- A box will appear called `OAuth client created`.
- Copy and save the values under `Your Client ID` and `Your Client Secret`.
## Enter your Google credentials into your Supabase Project
<SocialProviderSettingsSupabase provider="Google" />
## Add login code to your client app
When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `google` as the `provider`:
```js
async function signInWithGoogle() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
})
}
```ts
supabase.auth.signInWithOAuth({
provider: 'google',
})
```
You can view the full list of query parameters and their descriptions [here](https://developers.google.com/identity/protocols/oauth2/web-server#creatingclient).
This call takes the user to Google's consent screen. When the flow ends, the user's profile information is exchanegd and validated with Supabase Auth before it redirects back to your web application with an access and refresh token representing the user's session.
When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
You can additionally extract the `provider_token` from the session (on initial login only) which is the OAuth 2.0 access token issued by Google that grants your application access to the Google services for the authenticated users. Please store this token in local storage, cookies or in your database or server.
```js
async function signout() {
const { error } = await supabase.auth.signOut()
}
```
Google does not send out a refresh token by default, so you will need to pass parameters like these to `signInWithOAuth()` in order to extract the `provider_refresh_token`:
## Obtain the provider refresh token
Google OAuth2.0 doesn't return the `provider_refresh_token` by default. If you need the `provider_refresh_token` returned, you will need to add additional query parameters:
```js
async function signInWithGoogle() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
queryParams: {
access_type: 'offline',
prompt: 'consent',
hd: 'domain.com', // google will also allow OAuth logins to be restricted to a specified domain using the 'hd' parameter
},
```ts
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'google',
options: {
queryParams: {
access_type: 'offline',
prompt: 'consent',
},
},
})
```
### Configuration
To use the OAuth 2.0 flow, you will require the following information:
1. Obtain OAuth credentials for your Google Cloud project in the [Credentials](https://console.developers.google.com/apis/credentials) page of the console. When creating a new credential, choose _Web application_. In _Authorized redirect URIs_ enter `https://<project-id>.supabase.co/auth/v1/callback`. This URL will be seen by your users, and you can customize it by configuring [custom domains](/docs/guides/platform/custom-domains).
2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. Within _Authorized domains_ make sure you add your Supabase project's domain `<project-id>.supabase.co`. Configure the non-sensitive scopes by making sure the following ones are selected: `.../auth/userinfo.email`, `.../auth/userinfo.profile`, `openid`. If you're selecting other sensitive scopes, your app may require additional verification. In those cases, it's best to use [custom domains](/docs/guides/platform/custom-domains).
3. Finally, add the client ID and secret from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers).
## Using native sign in
Unlike the OAuth flow which requires the use of a web browser, the native Sign in with Google flow on Android uses the [operating system's built-in functionalities](https://developers.google.com/android/reference/com/google/android/gms/auth/api/identity/package-summary) to prompt the user for consent. Note that native sign-in has been rebranded as _One Tap sign-in on Android_ by Google, which you should not confuse with _One Tap sign in for web_, as mentioned below.
When the user provides consent, Google issues an identity token (commonly abbreviated as ID token) that is then sent to your project's Supabase Auth server. When valid, a new user session is started by issuing an access and refresh token from Supabase Auth.
If you are building a Flutter app, you can use [flutter_appauth](https://pub.dev/packages/flutter_appauth) package to sign a user into your Supabase project:
````dart
import 'package:crypto/crypto.dart';
import 'package:flutter_appauth/flutter_appauth.dart';
// Generate a random string
final rawNonce = generateRandomString();
final hashedNonce = sha256.convert(utf8.encode(rawNonce)).toString();
// Your registered Google client ID here.
// This will be different for iOS and Android
const clientId = 'YOUR_GOODLE_CLIENT_ID';
// bundle ID for iOS, package name for Android here
final packageName = 'io.supabase.example';
/// fixed for google login
final redirectUrl = '$packageName:/google_auth';
/// fixed for google login
const discoveryUrl =
'https://accounts.google.com/.well-known/openid-configuration';
final appAuth = FlutterAppAuth();
// authorize the user by opening the concent page
final result = await appAuth.authorize(
AuthorizationRequest(
clientId,
redirectUrl,
discoveryUrl: discoveryUrl,
nonce: hashedNonce,
scopes: [
'openid',
'email',
],
),
);
if (result == null) {
throw AuthException(
'Could not find AuthorizationResponse after authorizing');
}
// Request the access and id token to google
final tokenResponse = await appAuth.token(
TokenRequest(
clientId,
redirectUrl,
authorizationCode: result.authorizationCode,
discoveryUrl: discoveryUrl,
codeVerifier: result.codeVerifier,
nonce: result.nonce,
scopes: [
'openid',
'email',
],
),
);
final idToken = tokenResponse?.idToken;
if (idToken == null) {
throw AuthException('Could not find idToken from the token response');
}
await signInWithIdToken(
provider: Provider.google,
idToken: idToken,
accessToken: tokenResponse?.accessToken,
nonce: rawNonce,
);```
In the Supabase JavaScript library, which you can use with web-based native frameworks like React Native or Expo, you can invoke this functionality like so:
```ts
await supabase.auth.signInWithIdToken({
provider: 'google',
token: '<identity token received from the OS>',
access_token: '<access token received from the OS>'
})
````
Please take a look at these open-source projects which may help you obtain an ID token directly from the OS:
- [react-native-google-signin/google-signin](https://github.com/react-native-google-signin/google-signin).
For apps written in Kotlin, please consult the [community maintained library](/docs/reference/kotlin/introduction).
### Configuration
1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Android_ or _iOS_ depending on the mobile operating system your app is built for.
- For Android, use the instructions on screen to provide the SHA-1 certificate fingerprint used to sign your Android app.
- For iOS, use the instructions on screen to provide the app Bundle ID, and App Store ID and Team ID if the app is already published on the Apple AppStore.
2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service.
3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_.
Note that you do not have to configure the OAuth flow in the Supabase Dashboard in order to use native sign in.
## Using native sign in for Chrome extensions
Similar to the native sign in for Android, you can use the Chrome browser's [identity APIs](https://developer.chrome.com/docs/extensions/reference/identity/) to launch an authentication flow.
First, you need to configure your `manifest.json` file like so:
```json
{
"permissions": ["identity"],
"oauth2": {
"client_id": "<client ID>",
"scopes": ["openid", "email", "profile"]
}
}
```
Then you should call the [`chrome.identity.launchWebAuthFlow()`](https://developer.chrome.com/docs/extensions/reference/identity/#method-launchWebAuthFlow) function to trigger the sign in flow. On success, call the `supabase.auth.signInWithIdToken()` function to complete sign in with your Supabase project.
```ts
const manifest = chrome.runtime.getManifest()
const url = new URL('https://accounts.google.com/o/oauth2/auth')
url.searchParams.set('client_id', manifest.oauth2.client_id)
url.searchParams.set('response_type', 'id_token')
url.searchParams.set('access_type', 'offline')
url.searchParams.set('redirect_uri', `https://${chrome.runtime.id}.chromiumapp.org`)
url.searchParams.set('scope', manifest.oauth2.scopes.join(' '))
chrome.identity.launchWebAuthFlow(
{
url: url.href,
interactive: true,
},
async (redirectedTo) => {
if (chrome.runtime.lastError) {
// auth was not successful
} else {
// auth was successful, extract the ID token from the redirectedTo URL
const url = new URL(redirectedTo)
const params = new URLSearchParams(url.hash)
const { data, error } = await supabase.auth.signInWithIdToken({
provider: 'google',
token: params.get('id_token'),
})
}
}
)
```
### Configuration
You will need to configure a client ID for your Chrome extension:
1. Configure OAuth credentials for your Google Cloud project in the [Credentials](https://console.cloud.google.com/apis/credentials) page of the console. When creating a new OAuth client ID, choose _Chrome extension_ for the application type. For _Item ID_ provide the unique ID of your Chrome extension. You can get this by calling `chrome.runtime.id` within the extension, or from the Web Store URL of the extension. For example, the [Google Translate extension](https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb) has the Web Store URL `https://chrome.google.com/webstore/detail/google-translate/aapbdbdomjkkjkaonfhkkikfgjllcleb` and the last part `aapbdbdomjkkjkaonfhkkikfgjllcleb` is its unique ID.
2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app.
3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers), under _Authorized Client IDs_.
Note that you do not have to configure the OAuth flow in the Supabase Dashboard to sign in with Google inside Chrome extensions.
## Using personalized sign-in buttons, One Tap or automatic sign-in
Most web apps and websites can utilize Google's [personalized sign-in buttons](https://developers.google.com/identity/gsi/web/guides/personalized-button), [One Tap](https://developers.google.com/identity/gsi/web/guides/features) or [automatic sign-in](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out) for the best user experience.
Under the hood, these sign in methods end with an identity token being issued by [Sign in with Google for Web](https://developers.google.com/identity/gsi/web/guides/overview). You can then use the `supabase.auth.signInWithIdToken()` method to immediately issue an access and refresh tokens for the user, without needing to build any additional UIs or flows.
To get started, you can use the [HTML Code Generator](https://developers.google.com/identity/gsi/web/tools/configurator) to customize the look, feel, features and behavior of the Sign in with Google button. Make sure you pick the _Swap to JavaScript callback_ option and name the function that will receive a [`CredentialResponse`](https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse) when sign in completes.
For example, this HTML code shows a typical Sign in with Google button:
```html
<div
id="g_id_onload"
data-client_id="<client ID>"
data-context="signin"
data-ux_mode="popup"
data-callback="handleSignInWithGoogle"
data-nonce=""
data-auto_select="true"
data-itp_support="true"
></div>
<div
class="g_id_signin"
data-type="standard"
data-shape="pill"
data-theme="outline"
data-text="signin_with"
data-size="large"
data-logo_alignment="left"
></div>
```
When the user signs in, the `handleSignInWithGoogle` function will be called:
```ts
async function handleSignInWithGoogle(response) {
const { data, error } = await supabase.auth.signInWithIdToken({
token: response.credential,
nonce: 'NONCE', // must be the same one as provided in data-nonce (if any)
})
}
```
## Resources
Use of nonce is recommended, though optional. Make sure each nonce is generated randomly and available both in the `data-nonce` attribute as well as in the `handleSignInWithGoogle` callback function; otherwise the ID token will not be accepted.
- [Supabase Account - Free Plan OK](https://supabase.com)
- [Supabase JS Client](https://github.com/supabase/supabase-js)
- [Google Cloud Platform Console](https://console.cloud.google.com/home/dashboard)
### Configuration
1. Obtain OAuth credentials for your Google Cloud project in the [Credentials](https://console.developers.google.com/apis/credentials) page of the console. When creating a new credential, choose _Web application_. As you're using the Google sign in button, you should configure the _Authorized JavaScript origins_ and _Authorized redirect URIs_ to the website where the buttons appear. You should not use your Supabase project domain name. For this use case, the client secret provided is not needed and can be ignored.
2. Configure the [OAuth Consent Screen](https://console.cloud.google.com/apis/credentials/consent). This information is shown to the user when giving consent to your app. In particular, make sure you have set up links to your app's privacy policy and terms of service.
3. Finally, add the client ID from step 1 in the [Google provider on the Supabase Dashboard](https://supabase.com/dashboard/project/_/auth/providers) under _Authorized Client IDs_.
Note that you do not have to configure the OAuth flow client ID and secret in the Supabae Dashboard when using this approach!
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/auth/social-login/auth-kakao.mdx
+97
View File
@@ -0,0 +1,97 @@
import Layout from '~/layouts/DefaultGuideLayout'
export const meta = {
id: 'auth-kakao',
title: 'Login with Kakao',
description: 'Add Kakao OAuth to your Supabase project',
}
To enable Kakao Auth for your project, you need to set up an Kakao OAuth application and add the application credentials to your Supabase Dashboard.
## Overview
Kakao OAuth consists of six broad steps:
- Create and configure your app in the [Kakao Developer Portal](https://developers.kakao.com).
- Obtaining a `REST API key` - this will serve as the `client_id`.
- Generating the `Client secret code` - this will serve as the `client_secret`.
- Additional configurations on Kakao Developers Portal.
- Add your `client id` and `client secret` keys to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your Kakao Developer account
- Go to [Kakao Developers Portal](https://developers.kakao.com).
- Click on `Login` at the top right to log in.
![Kakao Developers Portal.](/docs/img/guides/auth-kakao/kakao-developers-page.png)
## Create and configure your app
- Go to `My Application`.
- Click on `Add an application` at the top.
- Fill out your app information:
- App icon.
- App name.
- Company name.
- Click `Save` at the bottom right.
## Obtain a REST API key
This will serve as the `client_id` when you make API calls to authenticate the user.
- Go to `My Application`.
- Click on your app.
- You will be redirected to `Summary` tab of your app.
- In the `App Keys` section you will see `REST API key` -- this ID will become your `client_id` later.
## Find your callback URL
<SocialProviderSetup provider="Kakao" />- To add callback URL on Kakao, go to `Product settings` >
`Kakao Login` > `Redirect URI`.
## Generate and activate a `client_secret`
- Go to `Product settings` > `Kakao Login` > `Security`.
- Click on the `Kakao Login` switch to enable Kakao Login.
- Click on `generate code` at the bottom to generate the `Client secret code` -- this will serve as a `client_secret` for your supabase project.
- Make sure you enabled `Client sercet code` by selecting `enable` from the `Activation state` section.
## Additional configurations on Kakao Developers Portal
- Make sure the Kakao Login is enabled in the `Kakao Login` tab.
- Set following scopes under the "Consent Items": account_email, profile_image, profile_nickname
![Consent items needs to be set.](/docs/img/guides/auth-kakao/kakao-developers-consent-items-set.png)
## Add your OAuth credentials to Supabase
<SocialProviderSettingsSupabase provider="Kakao" />
## Add login code to your client app
When your user signs in, call [signInWithOAuth()](/docs/reference/javascript/auth-signinwithoauth) with `kakao` as the `provider`:
```js
async function signInWithKakao() {
const { data, error } = await supabase.auth.signInWithOAuth({
provider: 'kakao',
})
}
```
When your user signs out, call [signOut()](/docs/reference/javascript/auth-signout) to remove them from the browser session and any objects from localStorage:
```js
async function signout() {
const { error } = await supabase.auth.signOut()
}
```
## Resources
- [Kakao Developers Portal](https://developers.kakao.com).
export const Page = ({ children }) => <Layout meta={meta} children={children} />
export default Page
apps/docs/pages/guides/auth/social-login/auth-linkedin.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable LinkedIn Auth for your project, you need to set up a LinkedIn OAuth ap
Setting up LinkedIn logins for your application consists of 3 parts:
- Create and configure a LinkedIn Project and App on the [LinkedIn Developer Dashboard](https://www.linkedin.com/developers/apps).
- Add your LinkedIn `client_id` and `client_secret` to your [Supabase Project](https://app.supabase.com).
- Add your LinkedIn `client_id` and `client_secret` to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your LinkedIn Developer account
apps/docs/pages/guides/auth/social-login/auth-notion.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Notion Auth for your project, you need to set up a Notion Application
Setting up Notion logins for your application consists of 3 parts:
- Create and configure a Notion Application [Notion Developer Portal](https://www.notion.so/my-integrations)
- Retrieve your OAuth client ID and OAuth client secret and add them to your [Supabase Project](https://app.supabase.com)
- Retrieve your OAuth client ID and OAuth client secret and add them to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Create your notion integration
apps/docs/pages/guides/auth/social-login/auth-slack.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Slack Auth for your project, you need to set up a Slack OAuth applicat
Setting up Slack logins for your application consists of 3 parts:
- Create and configure a Slack Project and App on the [Slack Developer Dashboard](https://api.slack.com/apps).
- Add your Slack `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
- Add your Slack `API Key` and `API Secret Key` to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your Slack Developer account
apps/docs/pages/guides/auth/social-login/auth-spotify.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Spotify Auth for your project, you need to set up a Spotify OAuth appl
Setting up Spotify logins for your application consists of 3 parts:
- Create and configure a Spotify Project and App on the [Spotify Developer Dashboard](https://developer.spotify.com/dashboard/).
- Add your Spotify `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
- Add your Spotify `API Key` and `API Secret Key` to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your Spotify Developer account
apps/docs/pages/guides/auth/social-login/auth-twitch.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Twitch Auth for your project, you need to set up a Twitch Application
Setting up Twitch logins for your application consists of 3 parts:
- Create and configure a Twitch Application [Twitch Developer Console](https://dev.twitch.tv/console)
- Add your Twitch OAuth Consumer keys to your [Supabase Project](https://app.supabase.com)
- Add your Twitch OAuth Consumer keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Twitch Developer account
apps/docs/pages/guides/auth/social-login/auth-twitter.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Twitter Auth for your project, you need to set up a Twitter OAuth appl
Setting up Twitter logins for your application consists of 3 parts:
- Create and configure a Twitter Project and App on the [Twitter Developer Dashboard](https://developer.twitter.com/en/portal/dashboard).
- Add your Twitter `API Key` and `API Secret Key` to your [Supabase Project](https://app.supabase.com).
- Add your Twitter `API Key` and `API Secret Key` to your [Supabase Project](https://supabase.com/dashboard).
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js).
## Access your Twitter Developer account
apps/docs/pages/guides/auth/social-login/auth-zoom.mdx
+1 -1
View File
@@ -13,7 +13,7 @@ To enable Zoom Auth for your project, you need to set up a Zoom OAuth applicatio
Setting up Zoom logins for your application consists of 3 parts:
- Create and configure a Zoom OAuth App on [Zoom App Marketplace](https://marketplace.zoom.us/)
- Add your Zoom OAuth keys to your [Supabase Project](https://app.supabase.com)
- Add your Zoom OAuth keys to your [Supabase Project](https://supabase.com/dashboard)
- Add the login code to your [Supabase JS Client App](https://github.com/supabase/supabase-js)
## Access your Zoom Developer account
apps/docs/pages/guides/auth/sso/auth-sso-saml.mdx
+10 -5
View File
@@ -7,6 +7,11 @@ export const meta = {
video: 'https://www.youtube.com/v/em1cpOAXknM',
}
<Admonition>
Looking for guides on how to use Single Sign-On with the Supabase dashboard? Head on over to
[Enable SSO for Your Organization](/docs/guides/platform/sso).
</Admonition>
Supabase Auth supports enterprise-level Single Sign-On (SSO) for any identity providers compatible with the using the SAML 2.0 protocol. This is a non-exclusive list of supported identity providers:
- Google Workspaces (formerly known as GSuite)
@@ -15,7 +20,7 @@ Supabase Auth supports enterprise-level Single Sign-On (SSO) for any identity pr
- PingIdentity
- OneLogin
If you're having issues with identity provider software not on this list, please [open a support ticket](https://app.supabase.com/support/new).
If you're having issues with identity provider software not on this list, please [open a support ticket](https://supabase.com/dashboard/support/new).
## Prerequisites
@@ -23,7 +28,7 @@ This guide requires the use of the [Supabase CLI](/docs/guides/cli). Please make
You can use the `supabase sso` [subcommands](/docs/reference/cli/supabase-sso) to manage your project's configuration.
SAML 2.0 support is disabled by default on Supabase projects. You can configure this on the [Auth Providers](https://app.supabase.com/project/_/auth/providers) page on your project.
SAML 2.0 support is disabled by default on Supabase projects. You can configure this on the [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers) page on your project.
Please note that SAML 2.0 support is offered on plans Pro and above. Check the [Pricing](https://supabase.com/pricing) page for more information.
@@ -130,7 +135,7 @@ CREATE POLICY "View organization settings."
## Managing SAML 2.0 connections
Once you've enabled SAML 2.0 support on your project via the [Auth Providers](https://app.supabase.com/project/_/auth/providers) page in the dashboard, you can use the [Supabase CLI](/docs/reference/cli/supabase-sso) to add, update, remove and view information about identity providers.
Once you've enabled SAML 2.0 support on your project via the [Auth Providers](https://supabase.com/dashboard/project/_/auth/providers) page in the dashboard, you can use the [Supabase CLI](/docs/reference/cli/supabase-sso) to add, update, remove and view information about identity providers.
### Add a connection
@@ -287,7 +292,7 @@ supabase sso remove <provider-id> --project-ref <your-project>
If successful, the details of the removed identity provider will be shown. All user accounts from that identity provider will be immediately logged out. User information will remain in the system, but it will no longer be possible for any of those accounts to be accessed in the future, even if you add the connection again.
If you need to reassign those user accounts to another identity provider, please [open a support ticket](https://app.supabase.com/support/new).
If you need to reassign those user accounts to another identity provider, please [open a support ticket](https://supabase.com/dashboard/support/new).
A [list of all](/docs/reference/cli/supabase-sso-list) registered identity providers can be displayed by running:
@@ -364,7 +369,7 @@ Should you run into this problem, it is most likely a misconfiguration issue **o
At this time it is not possible to extract the RSA private key used by your project's Supabase Auth server. This is done to keep the private key as secure as possible, given that SAML does not offer an easy way to rotate keys without disrupting service. (Please use a SAML 2.0 Metadata URL whenever possible for this reason!)
If you really need access to the key, please [open a support ticket](https://app.supabase.com/support/new) and we'll try to support you as best as possible.
If you really need access to the key, please [open a support ticket](https://supabase.com/dashboard/support/new) and we'll try to support you as best as possible.
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/cli/managing-environments.mdx
+2 -2
View File
@@ -23,7 +23,7 @@ Make sure you have these installed on your local machine:
To get started:
- Create a [Supabase project](https://app.supabase.com) or use an existing one
- Create a [Supabase project](https://supabase.com/dashboard) or use an existing one
- Initialize a local Git repository
<div className="video-container">
@@ -53,7 +53,7 @@ supabase link --project-ref $PROJECT_ID
You can get your `$PROJECT_ID` from your project's dashboard URL:
```
https://app.supabase.com/project/<project-id>
https://supabase.com/dashboard/project/<project-id>
```
If you're using an existing Supabase project, you might have made schema changes through the Dashboard.
apps/docs/pages/guides/database.mdx
+1 -1
View File
@@ -98,7 +98,7 @@ Read about resetting your database password [here](/docs/guides/database/managin
## Next steps
- Read more about [Postgres](https://www.postgresql.org/about/)
- Sign in: [app.supabase.com](https://app.supabase.com)
- Sign in: [supabase.com/dashboard](https://supabase.com/dashboard)
export const Page = ({ children }) => <Layout meta={meta} children={children} />
apps/docs/pages/guides/database/arrays.mdx
+3 -3
View File
@@ -20,7 +20,7 @@ Create a test table with a text array (an array of strings):
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Go to the [Table editor](https://supabase.com/dashboard/project/_/editor) page in the Dashboard.
1. Click **New Table** and create a table with the name `arraytest`.
1. Click **Save**.
1. Click **New Column** and create a column with the name `textarray`, type `text`, and select **Define as array**.
@@ -49,7 +49,7 @@ create table arraytest (
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Go to the [Table editor](https://supabase.com/dashboard/project/_/editor) page in the Dashboard.
1. Select the `arraytest` table.
1. Click **Insert row** and add `["Harry", "Larry", "Moe"]`.
1. Click **Save.**
@@ -85,7 +85,7 @@ const { data, error } = await supabase
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Table editor](https://app.supabase.com/project/_/editor) page in the Dashboard.
1. Go to the [Table editor](https://supabase.com/dashboard/project/_/editor) page in the Dashboard.
1. Select the `arraytest` table.
You should see:
apps/docs/pages/guides/database/connecting-to-postgres.mdx
+6 -6
View File
@@ -11,19 +11,19 @@ Supabase provides several options for programmatically connecting to your Postgr
1. Direct connections using Postgres' standard connection system
2. Connection pooling using PgBouncer
3. Programmatic access uing the [Serverless APIs](/docs/guides/api)
3. Programmatic access using the [Serverless APIs](/docs/guides/api)
## Serverless APIs
Supabase provides auto-updating [APIs](/docs/guides/database/api). This is the easiest way to get started if you are managing data (fetching, inserting, updating). We provides several types of API to suit your preferences:
- [REST](/docs/guides/database/api#rest-api): interact with your database through a REST interface.
- [GraphQL](/docs/guides/database/api#graphql-api): interact with your database through a GraphQL interface.
- [Realtime](/docs/guides/database/api#realtime-api): listen to database changes over websockets.
- [REST](/docs/guides/api#rest-api-overview): interact with your database through a REST interface.
- [GraphQL](/docs/guides/api#graphql-api-overview): interact with your database through a GraphQL interface.
- [Realtime](/docs/guides/api#realtime-api-overview): listen to database changes over websockets.
## Direct connections
Every Supabase project provides a full Postgres database. You can connect to the database using [any tool which supports Postgres](#integrations). You can find the connection string in the [Database settings](https://app.supabase.com/project/_/settings/database) inside the dashboard:
Every Supabase project provides a full Postgres database. You can connect to the database using [any tool which supports Postgres](#integrations). You can find the connection string in the [Database settings](https://supabase.com/dashboard/project/_/settings/database) inside the dashboard:
1. Go to the `Settings` section.
2. Click `Database`.
@@ -38,7 +38,7 @@ Every Supabase project provides a full Postgres database. You can connect to the
## Connection Pooler
Every Supabase project comes with PgBouncer for connection pooling. A connection pooler is useful for managing a large number of _temporary_ connections. For example, if you are using [Prisma](/docs/guides/integrations/prisma), Drizzle, Kysely, or anything deployed to a Serverless environment (AWS Lambdas or Edge Functions). You can find the connection pool config in the [Database settings](https://app.supabase.com/project/_/settings/database) inside the dashboard:
Every Supabase project comes with PgBouncer for connection pooling. A connection pooler is useful for managing a large number of _temporary_ connections. For example, if you are using [Prisma](/docs/guides/integrations/prisma), Drizzle, Kysely, or anything deployed to a Serverless environment (AWS Lambdas or Edge Functions). You can find the connection pool config in the [Database settings](https://supabase.com/dashboard/project/_/settings/database) inside the dashboard:
1. Go to the `Settings` section.
2. Click `Database`.
apps/docs/pages/guides/database/extensions.mdx
+1 -1
View File
@@ -19,7 +19,7 @@ Supabase has pre-installed some of the most useful open source extensions.
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click **Extensions** in the sidebar.
3. Enable or disable an extension.
apps/docs/pages/guides/database/extensions/http.mdx
+1 -1
View File
@@ -45,7 +45,7 @@ You can use the `http` extension to make these network requests from Postgres.
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "http" and enable the extension.
apps/docs/pages/guides/database/extensions/hypopg.mdx
+1 -1
View File
@@ -20,7 +20,7 @@ The motivation for HypoPG is to allow users to quickly search for an index to im
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "hypopg" and enable the extension.
apps/docs/pages/guides/database/extensions/pg_graphql.mdx
+1 -1
View File
@@ -24,7 +24,7 @@ For more information about how the SQL schema is reflected into a GraphQL schema
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pg_graphql" and enable the extension.
apps/docs/pages/guides/database/extensions/pg_hashids.mdx
+1 -1
View File
@@ -18,7 +18,7 @@ export const meta = {
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pg_hashids" and enable the extension.
apps/docs/pages/guides/database/extensions/pg_jsonschema.mdx
+1 -1
View File
@@ -18,7 +18,7 @@ export const meta = {
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pg_jsonschema" and enable the extension.
apps/docs/pages/guides/database/extensions/pg_stat_monitor.mdx
+1 -1
View File
@@ -24,7 +24,7 @@ For more information on query optimization, check out the [query performance gui
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pg_stat_monitor" and enable the extension.
apps/docs/pages/guides/database/extensions/pg_stat_statements.mdx
+1 -1
View File
@@ -34,7 +34,7 @@ For more information on query optimization, check out the [query performance gui
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pg_stat_statements" and enable the extension.
apps/docs/pages/guides/database/extensions/pgaudit.mdx
+1 -1
View File
@@ -20,7 +20,7 @@ PGAudit grants fine grain control over which statements and objects are emitted
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pgaudit" and enable the extension.
apps/docs/pages/guides/database/extensions/pgcron.mdx
+1 -1
View File
@@ -21,7 +21,7 @@ The `pg_cron` extension is a simple cron-based job scheduler for PostgreSQL that
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pg_cron" and enable the extension.
apps/docs/pages/guides/database/extensions/pgjwt.mdx
+1 -1
View File
@@ -18,7 +18,7 @@ The [pgjwt](https://github.com/michelp/pgjwt) (PostgreSQL JSON Web Token) extens
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pgjwt" and enable the extension.
apps/docs/pages/guides/database/extensions/pgnet.mdx
+1 -1
View File
@@ -26,7 +26,7 @@ It differs from the `http` extension in that it is asynchronous by default. This
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pg_net" and enable the extension.
apps/docs/pages/guides/database/extensions/pgrepack.mdx
+1 -1
View File
@@ -35,7 +35,7 @@ Get started with pg_repack by enabling the extension in the Supabase Dashboard.
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pg_repack" and enable the extension.
apps/docs/pages/guides/database/extensions/pgroonga.mdx
+1 -1
View File
@@ -18,7 +18,7 @@ export const meta = {
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pgroonga" and enable the extension.
apps/docs/pages/guides/database/extensions/pgrouting.mdx
+1 -1
View File
@@ -32,7 +32,7 @@ The core functionality of `pgRouting` is a set of path finding algorithms includ
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pgrouting" and enable the extension.
apps/docs/pages/guides/database/extensions/pgsodium.mdx
+1 -1
View File
@@ -63,7 +63,7 @@ It also enables some Postgres specific features including:
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pgsodium" and enable the extension.
apps/docs/pages/guides/database/extensions/pgtap.mdx
+1 -1
View File
@@ -25,7 +25,7 @@ Let's cover some basic concepts:
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "pgtap" and enable the extension.
apps/docs/pages/guides/database/extensions/pgvector.mdx
+1 -1
View File
@@ -33,7 +33,7 @@ This is particularly useful if you're building on top of OpenAI's [GPT-3](https:
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "vector" and enable the extension.
apps/docs/pages/guides/database/extensions/plpgsql_check.mdx
+1 -1
View File
@@ -18,7 +18,7 @@ export const meta = {
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "plpgsql_check" and enable the extension.
apps/docs/pages/guides/database/extensions/plv8.mdx
+1 -1
View File
@@ -25,7 +25,7 @@ It can be used for database functions, triggers, queries and more.
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "plv8" and enable the extension.
apps/docs/pages/guides/database/extensions/postgis.mdx
+1 -1
View File
@@ -26,7 +26,7 @@ You can get started with PostGIS by enabling the PostGIS extension in your Supab
>
<TabPanel id="dashboard" label="Dashboard">
1. Go to the [Database](https://app.supabase.com/project/_/database/tables) page in the Dashboard.
1. Go to the [Database](https://supabase.com/dashboard/project/_/database/tables) page in the Dashboard.
2. Click on **Extensions** in the sidebar.
3. Search for "postgis" and enable the extension.
Loaded 100 of 858 files, more files were not shown because too many files have changed in this diff. Show more