diff --git a/.github/workflows/fix-typos.yml b/.github/workflows/fix-typos.yml
index a7af81d334d..02c50f7416d 100644
--- a/.github/workflows/fix-typos.yml
+++ b/.github/workflows/fix-typos.yml
@@ -10,7 +10,7 @@ concurrency:
cancel-in-progress: true
permissions:
- contents: read
+ contents: write
pull-requests: write
jobs:
diff --git a/.github/workflows/publish_image.yml b/.github/workflows/publish_image.yml
index 40c142134ab..9865b284630 100644
--- a/.github/workflows/publish_image.yml
+++ b/.github/workflows/publish_image.yml
@@ -124,6 +124,12 @@ jobs:
docker buildx imagetools create -t supabase/studio:latest \
supabase/studio@${{ needs.release_x86.outputs.image_digest }} \
supabase/studio@${{ needs.release_arm.outputs.image_digest }}
+ echo "Published Registry Images" >> $GITHUB_STEP_SUMMARY
+ echo "" >> $GITHUB_STEP_SUMMARY
+ echo "| Image | Link |" >> $GITHUB_STEP_SUMMARY
+ echo "|-------|------|" >> $GITHUB_STEP_SUMMARY
+ echo "| \`supabase/studio:${{ needs.settings.outputs.image_version }}\` | [View on Docker Hub](https://hub.docker.com/r/supabase/studio/tags?name=${{ needs.settings.outputs.image_version }}) |" >> $GITHUB_STEP_SUMMARY
+ echo "| \`supabase/studio:latest\` | [View on Docker Hub](https://hub.docker.com/r/supabase/studio/tags?name=latest) |" >> $GITHUB_STEP_SUMMARY
publish:
needs:
diff --git a/.github/workflows/studio-e2e-test.yml b/.github/workflows/studio-e2e-test.yml
index 469818511bf..e7f0cbb39b7 100644
--- a/.github/workflows/studio-e2e-test.yml
+++ b/.github/workflows/studio-e2e-test.yml
@@ -17,8 +17,9 @@ jobs:
test:
timeout-minutes: 60
runs-on: blacksmith-4vcpu-ubuntu-2404
- # Require approval only for pull requests from forks
- environment: ${{ github.event_name == 'pull_request' && github.event.pull_request.head.repo.fork && 'Studio E2E Tests' || '' }}
+
+ env:
+ OPENAI_API_KEY: ${{ secrets.OPENAI_API_KEY }}
steps:
- uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4.3.0
diff --git a/apps/design-system/config/docs.ts b/apps/design-system/config/docs.ts
index 834cb30c460..a8989a070bf 100644
--- a/apps/design-system/config/docs.ts
+++ b/apps/design-system/config/docs.ts
@@ -85,6 +85,11 @@ export const docsConfig: DocsConfig = {
href: '/docs/fragments/assistant-chat',
items: [],
},
+ {
+ title: 'EmptyStatePresentational',
+ href: '/docs/fragments/empty-state-presentational',
+ items: [],
+ },
{
title: 'Modal',
href: '/docs/fragments/modal',
diff --git a/apps/design-system/content/docs/accessibility.mdx b/apps/design-system/content/docs/accessibility.mdx
index 7d2fd7ad637..8677b350c52 100644
--- a/apps/design-system/content/docs/accessibility.mdx
+++ b/apps/design-system/content/docs/accessibility.mdx
@@ -21,18 +21,31 @@ About to push some code? At a minimum, check your work against this list:
## Focus management
-All interactive page elements should be reachable by keyboard. They should also provide visual feedback upon selection via a `focus-visible` state. We use consistent focus styles such as `inset-focus` so users recognize this state instantly.
+All interactive page elements should be reachable by keyboard. Given the below inconsistency between devices and browsers, add `tabIndex={0}` to all buttons, links, and non-text inputs, ideally at the component level. Consider tying the state of `tabIndex` to the `disabled` state of a component, if applicable.
-```jsx
-
-
{name}
-
-
+Chromium-based browsers and Firefox handle this automatically via the Tab key. Safari, by default, requires the Option key to also be held down. Enabling _Keyboard navigation_ on macOS Settings [removes this requirement](https://mayank.co/blog/safari-focus/#keyboard-navigation) but makes links non-tabbable as a result.
+
+Interactive page elements should also provide visual feedback upon selection via a `focus-visible` state. We use consistent focus styles such as `inset-focus` so users recognize this state instantly.
+
+[Button](../components/button) has all of the above built-in. Bespoke interactive elements however, such as the below clickable [TableRow](../components/table), require these props to be added manually:
+
+```tsx showLineNumbers {3, 5-11}
+ handleBucketNavigation(name, event)}
+ onKeyDown={(event) => {
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault()
+ handleBucketNavigation(name, event)
+ }
+ }}
+ tabIndex={0}
+>
+
+
{name}
+
+
```
Consider also affordances like `ctrl` and `meta` key support for opening in a new tab. Anything that you can do with a mouse input should be replicable by keyboard.
@@ -51,13 +64,45 @@ Some keyboard-navigable content may be contain hundreds or thousands of items. H
- Pagination or virtualization
- “Jump to” shortcuts to skip ahead
-## Screen reader support
+## Screen readers
-Textual elements are supported out-of-the-box by screen readers. Imagery of course should be described by `alt` tags.
+Textual elements are supported out-of-the-box by screen readers.
-Less obvious however are scaffolding elements that only makes sense visually, when paired with other content. For example: a table column for actions may not have a visual _Actions_ label because its purpose is obvious to a sighted person. For everyone else’s sake, this column should be titled with `sr-only` text:
+### Imagery
-```jsx
+Images should have their contents described with an `alt` attribute. Write an objective description of the content rather than its context. For example:
+
+```tsx showLineNumbers {2}
+// Correct: painting a picture with words
+
+
+// Incorrect: Unhelpful context
+
+```
+
+Icons and other visual elements that aren’t strictly images should use the `aria-label` attribute. For example:
+
+```tsx showLineNumbers {2}
+
+
+
+```
+
+Visual elements that are _purely_ visual aids may be removed from the accessibility tree via the `aria-hidden` attribute. For example:
+
+```tsx showLineNumbers {2}
+
+
+
+```
+
+Never use `aria-hidden={true}` on focusable elements, since these are critical pieces of functionality.
+
+### Scaffolding
+
+Some scaffolding elements only make sense visually, in the context of surrounding visual content. For example: a table column for actions may not have a visual _Actions_ label because its purpose is obvious (by nearby contents) to a sighted person. For everyone else’s sake, this column should be titled with `sr-only` text:
+
+```tsx showLineNumbers {2}
Actions
diff --git a/apps/design-system/content/docs/components/button.mdx b/apps/design-system/content/docs/components/button.mdx
index 53c183989c5..2fe36168c07 100644
--- a/apps/design-system/content/docs/components/button.mdx
+++ b/apps/design-system/content/docs/components/button.mdx
@@ -122,3 +122,13 @@ Displaying only an Icon in a button.
Supports slot behavior with `asChild` prop.
+
+## Accessibility
+
+[Keyboard focus](../accessibility#focus-management) is automatically handled:
+
+- Enabled buttons default to `tabIndex={0}` (keyboard accessible)
+- Disabled buttons default to `tabIndex={-1}` (removed from tab order)
+- You can still override with an explicit `tabIndex` prop when needed
+
+You therefore don't need to manually set `tabIndex`, as Button handles it automatically based on its `disabled` state.
diff --git a/apps/design-system/content/docs/fragments/empty-state-presentational.mdx b/apps/design-system/content/docs/fragments/empty-state-presentational.mdx
new file mode 100644
index 00000000000..74435dd33b5
--- /dev/null
+++ b/apps/design-system/content/docs/fragments/empty-state-presentational.mdx
@@ -0,0 +1,12 @@
+---
+title: EmptyStatePresentational
+description: An initial state with value propositions and actions.
+component: true
+fragment: true
+---
+
+
+
+Supports both Lucide icons and custom icon components from the `icons` package. Expects a title, description, and optional action buttons or other children.
+
+See also [Empty States](../ui-patterns/empty-states).
diff --git a/apps/design-system/content/docs/ui-patterns/empty-states.mdx b/apps/design-system/content/docs/ui-patterns/empty-states.mdx
index 53a3a8d96be..a069124ea6a 100644
--- a/apps/design-system/content/docs/ui-patterns/empty-states.mdx
+++ b/apps/design-system/content/docs/ui-patterns/empty-states.mdx
@@ -42,7 +42,7 @@ Perhaps the user has not yet created any data. The presentation of this empty st
#### Presentational
-The user may be learning about a feature for the first time, and this experience benefits from user education or onboarding. In cases like these, the empty state should put more focus on the feature’s value proposition and an action the user can take.
+The user may be learning about a feature for the first time, and could benefit from lightweight feature education or onboarding. Use the dedicated [EmptyStatePresentational](../fragments/empty-state-presentational) component in this case, putting emphasis on an action the user can take.
@@ -56,7 +56,9 @@ Keep in mind that empty states will likely appear after a visual loading state.
## Components
-There is not yet a shared empty state UI component. The context and needs for each placement differ enough to warrant custom components for each placement.
+For presentational empty states (initial states with value propositions and actions), use the [EmptyStatePresentational](../fragments/empty-state-presentational) component from `ui-patterns`. This component provides a consistent structure with support for icons, titles, descriptions, and action buttons.
+
+For other empty state scenarios (zero results, missing routes, etc), custom components may still be appropriate as the context and needs for each placement can differ significantly.
## External references
diff --git a/apps/design-system/registry/default/example/empty-state-initial-state-presentational.tsx b/apps/design-system/registry/default/example/empty-state-initial-state-presentational.tsx
index 4200a1e3b4f..b4103936eaf 100644
--- a/apps/design-system/registry/default/example/empty-state-initial-state-presentational.tsx
+++ b/apps/design-system/registry/default/example/empty-state-initial-state-presentational.tsx
@@ -1,22 +1,18 @@
import { BucketPlus } from 'icons'
import { Plus } from 'lucide-react'
import { Button } from 'ui'
+import { EmptyStatePresentational } from 'ui-patterns'
export default function EmptyStateInitialStatePresentational() {
return (
-
+
)
}
diff --git a/apps/design-system/registry/default/example/empty-state-missing-route.tsx b/apps/design-system/registry/default/example/empty-state-missing-route.tsx
index 0c0f9b63ea4..004dd0e1cbc 100644
--- a/apps/design-system/registry/default/example/empty-state-missing-route.tsx
+++ b/apps/design-system/registry/default/example/empty-state-missing-route.tsx
@@ -17,7 +17,7 @@ export default function EmptyStateMissingRoute() {
{
- e.preventDefault()
+ e.preventDefault() // Just for demo purposes
}}
>
Head back
diff --git a/apps/design-system/registry/default/example/page-layout-list.tsx b/apps/design-system/registry/default/example/page-layout-list.tsx
index e848704080b..7b5dc84a157 100644
--- a/apps/design-system/registry/default/example/page-layout-list.tsx
+++ b/apps/design-system/registry/default/example/page-layout-list.tsx
@@ -71,7 +71,7 @@ export default function PageLayoutList(): React.JSX.Element {
}
+ icon={}
className="w-full lg:w-52"
/>
diff --git a/apps/design-system/registry/fragments.ts b/apps/design-system/registry/fragments.ts
index 7534016172c..d35061a82ac 100644
--- a/apps/design-system/registry/fragments.ts
+++ b/apps/design-system/registry/fragments.ts
@@ -7,6 +7,12 @@ export const fragments: Registry = [
files: ['/Dialogs/ConfirmationModal.tsx'],
optionalPath: '/Dialogs',
},
+ {
+ name: 'EmptyStatePresentational',
+ type: 'components:fragment',
+ files: ['/EmptyStatePresentational/index.tsx'],
+ optionalPath: '/EmptyStatePresentational',
+ },
{
name: 'TextConfirmModal',
type: 'components:fragment',
diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
index 15b1f182fe1..92037e9c9c1 100644
--- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
+++ b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.constants.ts
@@ -800,6 +800,16 @@ export const auth: NavMenuConstant = {
},
],
},
+ {
+ name: 'OAuth 2.1 Server',
+ items: [
+ { name: 'Overview', url: '/guides/auth/oauth-server' },
+ { name: 'Getting Started', url: '/guides/auth/oauth-server/getting-started' },
+ { name: 'OAuth Flows', url: '/guides/auth/oauth-server/oauth-flows' },
+ { name: 'MCP Authentication', url: '/guides/auth/oauth-server/mcp-authentication' },
+ { name: 'Token Security & RLS', url: '/guides/auth/oauth-server/token-security' },
+ ],
+ },
{
name: 'Third-party auth',
enabled: allAuthProvidersEnabled,
@@ -1154,14 +1164,6 @@ export const database: NavMenuConstant = {
name: 'Setting up',
url: '/guides/database/replication/replication-setup' as `/${string}`,
},
- {
- name: 'Destinations',
- url: '/guides/database/replication/replication-destinations' as `/${string}`,
- items: [
- { name: 'BigQuery', url: '/guides/database/replication/replication-bigquery' },
- { name: 'Iceberg', url: '/guides/database/replication/replication-iceberg' },
- ],
- },
{
name: 'Monitoring',
url: '/guides/database/replication/replication-monitoring' as `/${string}`,
@@ -1170,7 +1172,7 @@ export const database: NavMenuConstant = {
],
},
{
- name: 'Manual Replication',
+ name: 'Manual replication',
url: '/guides/database/replication/manual-replication-setup' as `/${string}`,
items: [
{
@@ -2407,6 +2409,7 @@ export const security: NavMenuConstant = {
{ name: 'Platform configuration', url: '/guides/security/platform-security' },
{ name: 'Product configuration', url: '/guides/security/product-security' },
{ name: 'Security testing', url: '/guides/security/security-testing' },
+ { name: 'Platform Audit Logs', url: '/guides/security/platform-audit-logs' },
],
},
{
diff --git a/apps/docs/content/_partials/api_rate_limits.mdx b/apps/docs/content/_partials/api_rate_limits.mdx
new file mode 100644
index 00000000000..1ff37000887
--- /dev/null
+++ b/apps/docs/content/_partials/api_rate_limits.mdx
@@ -0,0 +1,65 @@
+## Rate limits
+
+Rate limits are applied to prevent abuse and ensure fair usage of the Management API. Rate limits are based on a per-user, per-scope model, meaning each user gets independent rate limits for each project and organization they interact with.
+
+### Standard rate limit
+
+| Limit | Duration | Scope |
+| ------------ | -------- | ---------------------------------- |
+| 120 requests | 1 minute | Per user, per project/organization |
+
+When you exceed this rate limit, all subsequent API calls will return a `429 Too Many Requests` response for the remainder of the minute. Once the time window expires, your request quota resets and you can make requests again.
+
+### Rate limit scope
+
+Rate limits are applied with per-user + per-scope isolation:
+
+- **Project scope**: Rate limits apply independently to each project. Requests to one project do not count toward the limit of another project.
+- **Organization scope**: Rate limits apply independently to each organization. Requests to one organization do not count toward the limit of another organization.
+
+This means you can make 120 requests to Project A and 120 requests to Project B within the same minute without hitting rate limits, as they are tracked separately.
+
+### Rate limit response headers
+
+Every API response includes rate limit information in the following headers:
+
+- `X-RateLimit-Limit` - The maximum number of requests allowed in the current time window
+- `X-RateLimit-Remaining` - The number of requests remaining before you hit the rate limit
+- `X-RateLimit-Reset` - The number of milliseconds remaining until your rate limit resets
+
+You can use these headers to monitor your usage and implement proactive rate limit handling before receiving a 429 response.
+
+### How rate limits are tracked
+
+Your requests are identified and tracked using one of the following identifiers, in this order of priority:
+
+1. **OAuth App ID** - If your request is authenticated via an OAuth application
+2. **User ID** - If your request is authenticated with a personal access token
+3. **IP Address** - If your request is unauthenticated (extracted from request headers)
+
+Each identifier is combined with the scope (project or organization) to create a unique tracking key. This ensures that rate limits are isolated per user and per scope, preventing one project or organization from affecting another.
+
+### Endpoint exceptions
+
+Some endpoints have stricter rate limits than the standard 120 requests per minute to prevent abuse of resource-intensive operations:
+
+| Endpoint | Limit | Duration | Reason |
+| ---------------------------------------------------------- | ----------- | -------- | --------------------------------------------------- |
+| `GET /v1/projects/:ref/endpoints/logs.all` | 30 requests | 1 minute | Analytics log queries are computationally expensive |
+| `GET /v1/projects/:ref/endpoints/usage.api-counts` | 30 requests | 1 minute | Analytics aggregation is computationally expensive |
+| `GET /v1/projects/:ref/endpoints/usage.api-requests-count` | 30 requests | 1 minute | Analytics aggregation is computationally expensive |
+| `GET /v1/projects/:ref/database/context` | 10 requests | 1 minute | Database context operations are resource-intensive |
+| `GET /v1/projects/:ref/database/context` | 1 request | 1 second | Burst limit to prevent rapid successive requests |
+| `POST /v1/projects/:ref/config/custom-hostname/initialize` | 10 requests | 1 minute | These operations are expensive |
+| `POST /v1/projects/:ref/config/custom-hostname/reverify` | 10 requests | 1 minute | These operations are expensive |
+| `DELETE /v1/projects/:ref/config/custom-hostname` | 10 requests | 1 minute | These operations are expensive |
+| `GET /v1/projects/:ref/config/vanity-subdomain` | 10 requests | 1 minute | These operations are expensive |
+
+**Note:** The `GET /v1/projects/:ref/database/context` endpoint has dual rate limiting. You can make up to 10 requests per minute, but also no more than 1 request per second to prevent burst traffic.
+
+### Best practices
+
+- **Monitor rate limit headers** - Check the `X-RateLimit-Remaining` header to see how many requests you have left. When it approaches 0, slow down your requests to avoid hitting the limit.
+- **Implement exponential backoff** - When you receive a 429 response, wait before retrying. You can use the `X-RateLimit-Reset` header (milliseconds) to determine exactly how long to wait.
+- **Batch operations** - Where possible, combine multiple operations into fewer API calls to reduce your request count.
+- **Be mindful of expensive endpoints** - Analytics, database context, and domain endpoints have stricter limits, so use them judiciously.
diff --git a/apps/docs/content/guides/auth/auth-hooks/custom-access-token-hook.mdx b/apps/docs/content/guides/auth/auth-hooks/custom-access-token-hook.mdx
index 4c0af8c9c46..6d93202ef6f 100644
--- a/apps/docs/content/guides/auth/auth-hooks/custom-access-token-hook.mdx
+++ b/apps/docs/content/guides/auth/auth-hooks/custom-access-token-hook.mdx
@@ -16,11 +16,11 @@ Optional Claims: `jti`, `nbf`, `app_metadata`, `user_metadata`, `amr`,
**Inputs**
-| Field | Type | Description |
-| ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `user_id` | `string` | Unique identifier for the user attempting to sign in. |
-| `claims` | `object` | Claims which are included in the access token. |
-| `authentication_method` | `string` | The authentication method used to request the access token. Possible values include: `oauth`, `password`, `otp`, `totp`, `recovery`, `invite`, `sso/saml`, `magiclink`, `email/signup`, `email_change`, `token_refresh`, `anonymous`. |
+| Field | Type | Description |
+| ----------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `user_id` | `string` | Unique identifier for the user attempting to sign in. |
+| `claims` | `object` | Claims which are included in the access token. |
+| `authentication_method` | `string` | The authentication method used to request the access token. Possible values include: `oauth`, `password`, `otp`, `totp`, `recovery`, `invite`, `sso/saml`, `magiclink`, `email/signup`, `email_change`, `token_refresh`, `oauth_provider/authorization_code`, `anonymous`. |
+ {[
+ {
+ name: 'Getting Started',
+ description:
+ 'Enable OAuth 2.1, configure your authorization endpoint, and register your first client.',
+ href: '/guides/auth/oauth-server/getting-started',
+ },
+ {
+ name: 'OAuth Flows',
+ description: 'Detailed walkthrough of authorization code and refresh token flows.',
+ href: '/guides/auth/oauth-server/oauth-flows',
+ },
+ {
+ name: 'MCP Authentication',
+ description: 'Authenticate AI agents and LLM tools using Model Context Protocol.',
+ href: '/guides/auth/oauth-server/mcp-authentication',
+ },
+ {
+ name: 'Token Security & RLS',
+ description: 'Control data access with Row Level Security policies for OAuth clients.',
+ href: '/guides/auth/oauth-server/token-security',
+ },
+ ].map((x) => (
+
+
+ {x.description}
+
+
+ ))}
+
+
+## Resources
+
+- [GitHub Discussion](https://github.com/orgs/supabase/discussions/38022) - Share your use cases and help shape the roadmap
+- [Discord Community](https://discord.supabase.com/) - Get help and share what you're building
diff --git a/apps/docs/content/guides/auth/oauth-server/getting-started.mdx b/apps/docs/content/guides/auth/oauth-server/getting-started.mdx
new file mode 100644
index 00000000000..fbcdbcd1694
--- /dev/null
+++ b/apps/docs/content/guides/auth/oauth-server/getting-started.mdx
@@ -0,0 +1,614 @@
+---
+id: 'oauth-server-getting-started'
+title: 'Getting Started with OAuth 2.1 Server'
+description: 'Learn how to enable OAuth 2.1 and register client applications in your Supabase project'
+---
+
+This guide will walk you through setting up your Supabase project as an OAuth 2.1 identity provider, from enabling the feature to registering your first client application.
+
+## Prerequisites
+
+Before you begin, make sure you have:
+
+- A Supabase project (create one at [supabase.com](https://supabase.com))
+- Admin access to your project
+- (Optional) [Supabase CLI](/docs/guides/cli) v2.54.11 or higher for local development
+
+## Overview
+
+Setting up OAuth 2.1 in your Supabase project involves these steps:
+
+1. Enable OAuth 2.1 server capabilities in your project
+2. Configure your authorization path
+3. Build your authorization UI (frontend)
+4. Register OAuth client applications
+
+
+
+Testing OAuth flows is often easier on a Supabase project since it's already accessible on the web, no tunnel or additional configuration needed.
+
+
+
+## Enable OAuth 2.1 server
+
+OAuth 2.1 server is currently in beta and free to use during the beta period on all Supabase plans.
+
+
+
+
+1. Go to your project dashboard
+2. Navigate to **Authentication** > **OAuth Server** in the sidebar
+3. Enable OAuth 2.1 server capabilities
+
+
+
+
+Edit your `supabase/config.toml` file and add the OAuth server configuration:
+
+```toml
+[auth.oauth_server]
+enabled = true
+authorization_url_path = "/oauth/consent"
+allow_dynamic_registration = false # Optional: enable dynamic client registration
+```
+
+Start or restart your local Supabase instance:
+
+```bash
+supabase start
+# or if already running:
+supabase stop && supabase start
+```
+
+
+
+
+Once enabled, your project will expose the necessary OAuth endpoints:
+
+
+
+
+| Endpoint | URL |
+| -------------------------- | ---------------------------------------------------------------------------------- |
+| **Authorization endpoint** | `https://.supabase.co/auth/v1/oauth/authorize` |
+| **Token endpoint** | `https://.supabase.co/auth/v1/oauth/token` |
+| **JWKS endpoint** | `https://.supabase.co/auth/v1/.well-known/jwks.json` |
+| **Discovery endpoint** | `https://.supabase.co/.well-known/oauth-authorization-server/auth/v1` |
+| **OIDC discovery** | `https://.supabase.co/auth/v1/.well-known/openid-configuration` |
+
+
+
+
+| Endpoint | URL |
+| -------------------------- | ----------------------------------------------------------------------- |
+| **Authorization endpoint** | `http://localhost:54321/auth/v1/oauth/authorize` |
+| **Token endpoint** | `http://localhost:54321/auth/v1/oauth/token` |
+| **JWKS endpoint** | `http://localhost:54321/auth/v1/.well-known/jwks.json` |
+| **Discovery endpoint** | `http://localhost:54321/.well-known/oauth-authorization-server/auth/v1` |
+| **OIDC discovery** | `http://localhost:54321/auth/v1/.well-known/openid-configuration` |
+
+### Expose local instance to the world
+
+To test OAuth flows with external applications, you can expose your local Supabase instance using a tunnel solution (such as [ngrok](https://ngrok.com/) or [Cloudflare Tunnel](https://developers.cloudflare.com/cloudflare-one/networks/connectors/cloudflare-tunnel/)).
+
+When using a tunnel, configure the `jwt_issuer` field in your `supabase/config.toml` to match your tunnel URL:
+
+```toml
+[auth]
+jwt_issuer = "https://my-tunnel.url/auth/v1"
+```
+
+This ensures that JWTs issued by your local instance use the correct issuer claim for token validation, and serves the discovery endpoint at the correct location with accurate discovery information.
+
+
+
+
+
+
+**Use asymmetric JWT signing keys for better security**
+
+By default, Supabase uses HS256 (symmetric) for signing JWTs. For OAuth use cases, we recommend migrating to asymmetric algorithms like RS256 or ES256. Asymmetric keys are more scalable and secure because:
+
+- OAuth clients can validate JWTs using the public key from your JWKS endpoint
+- No need to share your JWT secret with third-party applications
+- More resilient architecture for distributed systems
+
+Learn more about [configuring JWT signing keys](/docs/guides/auth/signing-keys).
+
+**Note:** If you plan to use OpenID Connect ID tokens (by requesting the `openid` scope), asymmetric signing algorithms are **required**. ID token generation will fail with HS256.
+
+
+
+## Configure your authorization path
+
+Before registering clients, you need to configure where your authorization UI will live.
+
+1. In your project dashboard, navigate to **Authentication** > **OAuth Server**
+2. Set the **Authorization Path** (e.g., `/oauth/consent`)
+
+
+
+The authorization path is combined with your Site URL (configured in **Authentication** > **URL Configuration**) to create the full authorization endpoint URL.
+
+
+
+Your authorization UI will be at the combined Site URL + Authorization Path. For example:
+
+- Site URL: `https://example.com` (from **Authentication** > **URL Configuration**)
+- Authorization Path: `/oauth/consent` (from **OAuth Server** settings)
+- Your authorization UI: `https://example.com/oauth/consent`
+
+When OAuth clients initiate the authorization flow, Supabase Auth will redirect users to this URL with an `authorization_id` query parameter. You'll use [Supabase JavaScript library OAuth methods](https://github.com/supabase/supabase-js/blob/master/packages/core/auth-js/src/GoTrueClient.ts#L2159-L2163) to handle the authorization:
+
+- `supabase.auth.oauth.getAuthorizationDetails(authorization_id)` - Retrieve client and authorization details
+- `supabase.auth.oauth.approveAuthorization(authorization_id)` - Approve the authorization request
+- `supabase.auth.oauth.denyAuthorization(authorization_id)` - Deny the authorization request
+
+## Build your authorization UI
+
+This is where you build the **frontend** for your authorization flow. When third-party apps initiate OAuth, users will be redirected to your authorization path (configured in the previous step) with an `authorization_id` query parameter.
+
+Your authorization UI should:
+
+1. **Extract authorization_id** - Get the `authorization_id` from the URL query parameters
+2. **Authenticate the user** - If not already logged in, redirect to your login page (preserving the authorization_id)
+3. **Retrieve authorization details** - Use `supabase.auth.oauth.getAuthorizationDetails(authorization_id)` to get client information including requested scopes
+4. **Display consent screen** - Show the user what app is requesting access and what scopes/permissions are being requested
+5. **Handle user decision** - Call either `approveAuthorization(authorization_id)` or `denyAuthorization(authorization_id)` based on user choice
+
+The authorization details include a `scopes` field that contains the scopes requested by the client (e.g., `["openid", "email", "profile"]`). You should display these scopes to the user so they understand what information will be shared.
+
+
+
+This is a **frontend implementation**. You're building the UI that displays the consent screen and handles user interactions. The actual OAuth token generation is handled by Supabase Auth after you call the approve/deny methods.
+
+
+
+### Example authorization UI
+
+Here's how to build a minimal authorization page at your configured path (e.g., `/oauth/consent`):
+
+
+
+
+```tsx
+// app/oauth/consent/page.tsx
+import { createServerClient } from '@supabase/ssr'
+import { cookies } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export default async function ConsentPage({
+ searchParams,
+}: {
+ searchParams: { authorization_id?: string }
+}) {
+ const authorizationId = searchParams.authorization_id
+
+ if (!authorizationId) {
+ return
+ Are you sure you wish to regenerate the client secret for "{appToEdit?.client_name}"?
+ You'll need to update it in all applications that use it. This action cannot be undone.
+
+
+
+ )
+}
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/DeleteOAuthAppModal.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/DeleteOAuthAppModal.tsx
index acd888f8aee..5b228d8ed8b 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/DeleteOAuthAppModal.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/DeleteOAuthAppModal.tsx
@@ -1,8 +1,8 @@
import type { OAuthClient } from '@supabase/supabase-js'
import { useParams } from 'common'
-import type { OAuthServerAppDeleteVariables } from 'data/oauth-server-apps/oauth-server-app-delete-mutation'
-import { useSupabaseClientQuery } from 'hooks/use-supabase-client-query'
+import { useProjectEndpointQuery } from 'data/config/project-endpoint-query'
+import type { OAuthServerAppDeleteVariables } from 'data/oauth-server-apps/oauth-server-app-delete-mutation'
import ConfirmationModal from 'ui-patterns/Dialogs/ConfirmationModal'
interface DeleteOAuthAppModalProps {
@@ -22,15 +22,12 @@ export const DeleteOAuthAppModal = ({
}: DeleteOAuthAppModalProps) => {
const { ref: projectRef } = useParams()
- const { data: supabaseClientData } = useSupabaseClientQuery({ projectRef })
-
+ const { data: endpointData } = useProjectEndpointQuery({ projectRef })
const onConfirmDeleteApp = () => {
- if (!selectedApp) return
-
onDelete({
projectRef,
- supabaseClient: supabaseClientData?.supabaseClient,
- clientId: selectedApp.client_id,
+ clientId: selectedApp?.client_id,
+ clientEndpoint: endpointData?.endpoint,
})
}
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/NewOAuthAppBanner.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/NewOAuthAppBanner.tsx
index 9718ffcc647..15db2542317 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/NewOAuthAppBanner.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/NewOAuthAppBanner.tsx
@@ -23,23 +23,23 @@ export const NewOAuthAppBanner = ({ oauthApp, onClose }: NewOAuthAppBannerProps)
Do copy this client id and client secret and store it in a secure place - you will not
be able to see it again.
-
+
{}}
onCopy={() => toast.success('Client Id copied to clipboard')}
/>
- {
+ const isCreating = !appToEdit
setShowCreateSheet(false)
+ setSelectedAppToEdit(null)
setSelectedApp(undefined)
- setNewOAuthApp(app)
+ // Only show banner for new apps or regenerated secrets, not for simple edits
+ if (isCreating || app.client_secret) {
+ setNewOAuthApp(app)
+ }
}}
onCancel={() => {
setShowCreateSheet(false)
+ setSelectedAppToEdit(null)
setSelectedApp(undefined)
}}
/>
@@ -312,13 +358,11 @@ export const OAuthAppsList = () => {
confirmLabel="Confirm"
onCancel={() => setShowRegenerateDialog(false)}
onConfirm={() => {
- if (selectedApp?.client_id) {
- regenerateSecret({
- projectRef,
- supabaseClient: supabaseClientData?.supabaseClient,
- clientId: selectedApp.client_id,
- })
- }
+ regenerateSecret({
+ projectRef,
+ clientId: selectedApp?.client_id,
+ clientEndpoint: endpointData?.endpoint,
+ })
setShowRegenerateDialog(false)
}}
>
diff --git a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
index 491804aff12..82c554c7a6a 100644
--- a/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
+++ b/apps/studio/components/interfaces/Auth/OAuthApps/OAuthServerSettingsForm.tsx
@@ -12,13 +12,14 @@ import {
ScaffoldSectionContent,
ScaffoldSectionTitle,
} from 'components/layouts/Scaffold'
+import { InlineLink } from 'components/ui/InlineLink'
import NoPermission from 'components/ui/NoPermission'
import { GenericSkeletonLoader } from 'components/ui/ShimmeringLoader'
import { useAuthConfigQuery } from 'data/auth/auth-config-query'
import { useAuthConfigUpdateMutation } from 'data/auth/auth-config-update-mutation'
import { useOAuthServerAppsQuery } from 'data/oauth-server-apps/oauth-server-apps-query'
import { useAsyncCheckPermissions } from 'hooks/misc/useCheckPermissions'
-import { useSupabaseClientQuery } from 'hooks/use-supabase-client-query'
+import { DOCS_URL } from 'lib/constants'
import {
Button,
Card,
@@ -100,12 +101,7 @@ export const OAuthServerSettingsForm = () => {
isSuccess: isPermissionsLoaded,
} = useAsyncCheckPermissions(PermissionAction.READ, 'custom_config_gotrue')
- const { data: supabaseClientData } = useSupabaseClientQuery({ projectRef })
-
- const { data: oAuthAppsData } = useOAuthServerAppsQuery({
- projectRef,
- supabaseClient: supabaseClientData?.supabaseClient,
- })
+ const { data: oAuthAppsData } = useOAuthServerAppsQuery({ projectRef })
const oauthApps = oAuthAppsData?.clients || []
@@ -222,14 +218,9 @@ export const OAuthServerSettingsForm = () => {
<>
Enable OAuth server functionality for your project to create and manage
OAuth applications.{' '}
-
+
Learn more
-
+
}
>
@@ -320,14 +311,11 @@ export const OAuthServerSettingsForm = () => {
<>
Enable dynamic OAuth app registration. Apps can be registered
programmatically via APIs.{' '}
-
Learn more
-
+
}
>
@@ -369,31 +357,27 @@ export const OAuthServerSettingsForm = () => {
variant="warning"
visible={showDynamicAppsConfirmation}
size="large"
- title="Enable dynamic client registration"
- confirmLabel="Enable dynamic registration"
+ title="Enable dynamic OAuth app registration"
+ confirmLabel="Enable dynamic app registration"
onConfirm={confirmDynamicApps}
onCancel={cancelDynamicApps}
alert={{
title:
- 'By confirming, you acknowledge the risks and would like to move forward with enabling dynamic client registration.',
+ 'By confirming, you acknowledge the risks and would like to move forward with enabling dynamic OAuth app registration.',
}}
>
- Enabling dynamic client registration will open up a public API endpoint that anyone can
- use to register OAuth applications with your app. This can be a security concern, as
- attackers could register OAuth applications with legitimate-sounding names and send them
- to your users for approval.
+ Dynamic OAuth apps (also known as dynamic client registration) exposes a public endpoint
+ allowing anyone to register OAuth clients. Bad actors could create malicious apps with
+ legitimate-sounding names to phish your users for authorization.
- If your users don't look carefully and accept, the attacker could potentially take over
- the user's account. Attackers can also flood your application with thousands of OAuth
- applications that cannot be attributed to anyone (as it's a public endpoint), and make it
- difficult for you to find and shut them down, or even find legitimate ones.
+ You may also see spam registrations that are difficult to trace or moderate, making it
+ harder to identify trustworthy applications in your OAuth apps list.
- If dynamic client registration is enabled, the consent screen is forced to be enabled for
- all OAuth flows and can no longer be disabled. Disabling the consent screen opens up a
- CSRF vulnerability in your app.
+ Only enable this if you have a specific use case requiring programmatic client
+ registration and understand the security implications.
+ {enableSmtp ? (
+ <>
+ Rate limit for sending emails will be increased to 30 and{' '}
+
+ can be adjusted
+ {' '}
+ after enabling custom SMTP
+
+ ) : (
+ 'Rate limit for sending emails will be reduced to 2 after disabling custom SMTP'
+ )}
+
)}
-
+
+ {form.formState.isDirty && (
+
+ )}
+
+
diff --git a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
index d336d36c9e9..3f372efe3d8 100644
--- a/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
+++ b/apps/studio/components/interfaces/Auth/Users/UsersV2.tsx
@@ -20,9 +20,9 @@ import { User, useUsersInfiniteQuery } from 'data/auth/users-infinite-query'
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
import { useIsFeatureEnabled } from 'hooks/misc/useIsFeatureEnabled'
import { useLocalStorageQuery } from 'hooks/misc/useLocalStorage'
+import { useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
-import { useQueryStateWithSelect } from 'hooks/misc/useQueryStateWithSelect'
import { cleanPointerEventsNoneOnBody, isAtBottom } from 'lib/helpers'
import { parseAsArrayOf, parseAsString, parseAsStringEnum, useQueryState } from 'nuqs'
import {
@@ -365,7 +365,7 @@ export const UsersV2 = () => {
isCountLoaded &&
isCountWithinThresholdForSortBy
) {
- if (specificFilterColumn === 'id' && localStorageFilter !== 'id') {
+ if (specificFilterColumn === 'email' && localStorageFilter !== 'email') {
setSpecificFilterColumn(localStorageFilter)
}
if (sortByValue === 'id:asc' && localStorageSortByValue !== 'id:asc') {
diff --git a/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx b/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx
index 1360bca87e6..f47d9540ba4 100644
--- a/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx
+++ b/apps/studio/components/interfaces/Billing/InvoiceStatusBadge.tsx
@@ -1,4 +1,5 @@
import { InlineLink } from 'components/ui/InlineLink'
+import { DOCS_URL } from 'lib/constants'
import { Badge, Tooltip, TooltipContent, TooltipTrigger } from 'ui'
import { InvoiceStatus } from './Invoices.types'
@@ -72,7 +73,7 @@ const InvoiceStatusBadge = ({
If you run into this, we recommend{' '}
-
+
topping up your credits
{' '}
in advance to avoid running into this in the future.
diff --git a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
index 31b71135184..643b3d907e3 100644
--- a/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
+++ b/apps/studio/components/interfaces/Connect/DatabaseConnectionString.tsx
@@ -1,7 +1,6 @@
import { BookOpen, ChevronDown, ExternalLink } from 'lucide-react'
import { parseAsString, useQueryState } from 'nuqs'
import { HTMLAttributes, ReactNode, useEffect, useMemo, useState } from 'react'
-import Link from 'next/link'
import { useParams } from 'common'
import { getAddons } from 'components/interfaces/Billing/Subscription/Subscription.utils'
@@ -15,7 +14,7 @@ import { useReadReplicasQuery } from 'data/read-replicas/replicas-query'
import { useProjectAddonsQuery } from 'data/subscriptions/project-addons-query'
import { useSendEventMutation } from 'data/telemetry/send-event-mutation'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
-import { IS_PLATFORM } from 'lib/constants'
+import { DOCS_URL, IS_PLATFORM } from 'lib/constants'
import { pluckObjectFields } from 'lib/helpers'
import { useDatabaseSelectorStateSnapshot } from 'state/database-selector'
import {
@@ -335,15 +334,13 @@ export const DatabaseConnectionString = () => {
Learn how to connect to your
Postgres databases.
-
Read docs
-
+
diff --git a/apps/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx b/apps/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
index fd00454dadf..12bbcc53be6 100644
--- a/apps/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
+++ b/apps/studio/components/interfaces/Database/Backups/BackupsEmpty.tsx
@@ -1,12 +1,13 @@
-import { Info } from 'lucide-react'
+import { DatabaseBackup } from 'lucide-react'
+
+import { EmptyStatePresentational } from 'ui-patterns'
export const BackupsEmpty = () => {
return (
-
diff --git a/apps/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx b/apps/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
index f827dd88ebe..5c4eda6e488 100644
--- a/apps/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
+++ b/apps/studio/components/interfaces/Database/Migrations/MigrationsEmptyState.tsx
@@ -1,13 +1,12 @@
-import { Maximize2, Minimize2, Terminal } from 'lucide-react'
-import { useState } from 'react'
+import { Terminal } from 'lucide-react'
import { useParams } from 'common'
import CommandRender from 'components/interfaces/Functions/CommandRender'
-import { cn, Collapsible } from 'ui'
+import { Card, CardContent, CardHeader, CardTitle } from 'ui'
+import { EmptyStatePresentational } from 'ui-patterns'
-const MigrationsEmptyState = () => {
+export const MigrationsEmptyState = () => {
const { ref } = useParams()
- const [showInstructions, setShowInstructions] = useState(false)
const commands = [
{
@@ -33,7 +32,7 @@ const MigrationsEmptyState = () => {
},
},
{
- comment: 'Run all migrations against this project',
+ comment: 'Run all migrations for this project',
command: `supabase db push`,
jsx: () => {
return (
@@ -46,58 +45,20 @@ const MigrationsEmptyState = () => {
]
return (
-
-
-
-
Database migrations
-
- Database changes are managed through "migrations" and they are a common way of tracking
- changes to your database over time. You can run migrations against your project's
- database via the Supabase CLI.
-
+ Automatically replicate your data to external data warehouses and analytics platforms in
+ real-time. No manual exports, no lag.
+
- Replicate database changes to multiple destinations - no manual exports, no lag. Limited
- rollout for external destinations has begun, read replicas available now.
+ We are currently in private alpha and slowly
+ onboarding new customers to ensure stable data pipelines. Request access below to join the
+ waitlist. Read replicas are available now.
}>
- Request early access
+ Request alpha access
}>
diff --git a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
index b6ac02c09af..5ccee96a937 100644
--- a/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
+++ b/apps/studio/components/interfaces/Database/Replication/Destinations.tsx
@@ -14,7 +14,7 @@ import { useReplicationPipelinesQuery } from 'data/replication/pipelines-query'
import { useReplicationSourcesQuery } from 'data/replication/sources-query'
import { useSelectedOrganizationQuery } from 'hooks/misc/useSelectedOrganization'
import { DOCS_URL } from 'lib/constants'
-import { Button, cn, Input_Shadcn_ } from 'ui'
+import { Button, cn, Input } from 'ui'
import { GenericSkeletonLoader } from 'ui-patterns'
import { DestinationPanel } from './DestinationPanel/DestinationPanel'
import { DestinationRow } from './DestinationRow'
@@ -100,18 +100,14 @@ export const Destinations = () => {
+
+// Incorrect: Unhelpful context
+
+ 
+
+