## I have read the
[CONTRIBUTING.md](https://github.com/supabase/supabase/blob/master/CONTRIBUTING.md)
file.
YES
## What kind of change does this PR introduce?
Feature — the visual redesign itself.
Part 5 of 6 in a stack that splits the library redesign into reviewable
pieces. The four PRs beneath it carry the build, content and Markdown
work; what's left here is layout, navigation and styling.
## What is the current behavior?
The library is laid out like a documentation site: a sidebar tree of
framework folders, a homepage that lists links, and a guide page that
opens with prose. That shape suits reference material, but the library's
job is to help someone find a block and install it — and the sidebar is
the only way to discover one.
## What is the new behavior?
The homepage is the catalog itself — blocks grouped by what they do
(authentication, database, storage, realtime, messaging, AI,
foundations) rather than by framework, each with a preview of what it
renders, filterable by category.
Navigation moves into a site header whose Explore menu opens the same
categories, so the catalog is reachable from any page and the per-page
sidebar tree is gone.
A guide opens with what the reader came for: the block's name, the
install command, and a preview pane with tabs — the running component
and its files — before any prose. The file tree that used to sit
mid-page under "Folder structure" is one of those tabs. Every guide also
offers a copy of the agent prompt that points at its Markdown.
Getting-started pages get the same treatment: the quickstart is now a
framework-tabbed walkthrough rather than a wall of setup links.
## Additional context
`BlockOverviewTabs` renders Preview and Files here. #50369, stacked on
top of this one, adds the third "What's added" tab — it is the only part
of the redesign that depends on the new resource analyzer, which is why
it sits above this PR rather than below it.
Also removes what the redesign orphaned: the table-of-contents component
and its `remark` / `mdast-util-toc` dependencies, and the sidebar nav
and command-item configuration the new header replaced.
The block source changes are typography only — auth card titles move
from `text-2xl` to `font-medium text-lg tracking-normal` — which is what
regenerates the auth registry artifacts.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added a redesigned Supabase Library catalog with categorized blocks,
framework-aware navigation, previews, file views, and installation
actions.
* Added framework-specific quickstart guides for Next.js, React, Vue,
Nuxt, React Router, and TanStack Start.
* Added copy-to-clipboard prompts, “Open in v0” actions, starter
templates, and richer visual previews.
* **Improvements**
* Updated documentation layouts, FAQ content, typography, navigation,
accessibility, and responsive behavior.
* Improved mobile navigation, framework selection, and standardized
block installation guidance.
* Refined authentication and social-login block presentation with more
consistent heading styles.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: Danny White <3104761+dnywh@users.noreply.github.com>
## What kind of change does this PR introduce?
Copy fix in ui-library and vue starter blocks.
## What is the current behavior?
Auth starter templates use **Login**, **Logout**, and **Logging in...**
in button labels and form copy.
## What is the new behavior?
User-facing labels use **Sign in**, **Sign out**, and **Signing in...**,
matching the platform standard
([#49874](https://github.com/supabase/supabase/pull/49874),
[#49877](https://github.com/supabase/supabase/pull/49877)).
File names, component names, and routes (`/login`, `/logout`) are
unchanged.
## To test
Open ui-library auth block previews and confirm sign-in and sign-out
button labels.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
- **Style**
- Updated authentication interface wording from “Login” to “Sign in” and
“Logout” to “Sign out” across password-based and social authentication
flows.
- Updated loading-state text from “Logging in...” to “Signing in...” for
sign-in buttons.
- Refreshed related descriptions, form titles, and account links while
preserving destinations, styling, and authentication behavior.
- Applied consistent wording across supported authentication pages and
frameworks.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
<img width="1510" height="860" alt="image"
src="https://github.com/user-attachments/assets/36a748b7-bdeb-4685-8bb1-da911711874b"
/>
Introduces a new OAuth consent block in preparation for offering more
MCP focused blocks that require authentication and consent. The general
approach for this is to decouple consent block from authentication block
but provide guidance on how to use both. The alternative is to add auth
as a dependency to consent but apps may already have their own
authentication UI / flows.
The block is also positioned as a general OAuth Consent vs MCP Consent
as it can be put to use for other use cases outside of MCP on projects
who want to make use of the OAuth 2.1 Server offering.
A couple of changes outside of the block itself were required:
- Updated the Auth blocks to allow for a `next` param to redirect users
to after signing in
- Updated middleware so next param is correctly passed through to sign
in
## How to test
Requires Docker and a Supabase CLI recent enough to support
`[auth.oauth_server]` (verified on 2.109.0 / GoTrue v2.192.0).
### 1. Local Supabase with the OAuth server enabled
In your `supabase/config.toml`, edit the existing `[auth.oauth_server]`
section — `supabase init` already writes one, and adding a second fails
with `table oauth_server already exists`:
```toml
[auth.oauth_server]
enabled = true
authorization_url_path = "/oauth/consent"
allow_dynamic_registration = true
```
Set `site_url` to wherever your test app runs (e.g.
`http://localhost:3100`), then `supabase start`. Grab the API URL and
publishable key from `supabase status`.
### 2. A consumer app with the blocks installed
The consent block ships no login route by design, so pair it with an
auth block:
```bash
npx create-next-app@latest consent-test --ts --tailwind --app --yes
```
```bash
cd consent-test && npx shadcn@latest init -d -y && npx shadcn@latest add https://supabase.com/library/r/password-based-auth-nextjs.jsonhttps://supabase.com/library/r/oauth-consent-nextjs.json
```
To test this branch before it deploys, run `pnpm --filter ui-library
dev` and use `http://localhost:3004/library/r/...` instead. If you
changed anything under `registry/default/blocks/oauth-consent/**`, run
`pnpm --filter ui-library build:registry` first — shadcn fetches the
generated `public/r/*.json`, not the source.
Put `NEXT_PUBLIC_SUPABASE_URL` and
`NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY` in `.env.local` and start the app
on the port you set as `site_url`.
### 3. Register an OAuth client and start a real authorization request
```bash
curl -s -X POST http://127.0.0.1:54321/auth/v1/oauth/clients/register -H "Content-Type: application/json" -d '{"client_name":"Test Client","redirect_uris":["http://localhost:3100/callback"],"grant_types":["authorization_code"],"response_types":["code"],"scope":"openid profile email"}'
```
Then open the authorize URL in a browser (not curl — you need the
redirect chain and cookies):
```
http://127.0.0.1:54321/auth/v1/oauth/authorize?client_id=<id>&response_type=code&redirect_uri=http://localhost:3100/callback&scope=openid+profile+email&state=xyz&code_challenge=<challenge>&code_challenge_method=S256
```
Auth mints the `authorization_id` and redirects to
`<site_url>/oauth/consent?authorization_id=…`. An MCP client pointed at
your app is an even better driver, since that's the real consumer shape.
### 4. Cases to walk
| Case | Expected |
| --- | --- |
| Signed out, hit the authorize URL | Lands on
`/auth/login?next=%2Foauth%2Fconsent%3Fauthorization_id%3D…`; after
login, returns to the consent screen |
| Consent screen | Shows client name, redirect URI, signed-in email, and
requested scopes from `getAuthorizationDetails` |
| Allow access | Redirects to `redirect_uri` with `code` and your
original `state`; the code exchanges at `/oauth/token` for a real access
token |
| Deny | Redirects with `error=access_denied` and your `state` |
| Re-run the same authorize URL after approving | Skips the screen,
straight to callback with a new code |
| Visit `/oauth/consent` with no `authorization_id` | "This page needs
an authorization_id" |
| Stale or bogus `authorization_id` | Error shown, buttons still usable
|
| Double-click Allow | Exactly one `POST
/oauth/authorizations/<id>/consent` |
Test the react, react-router, or tanstack variant the same way if you're
touching them — the hook is duplicated per framework, so a fix in one
doesn't carry.
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
* **New Features**
* Added an OAuth 2.1 consent experience with client details, requested
scopes, redirect URI, and approve/deny actions.
* Added OAuth consent examples and registry blocks for Next.js, React,
React Router, and TanStack Start.
* Added OAuth documentation, navigation, and framework support across
the UI library.
* **Bug Fixes**
* Login flows now safely preserve valid same-origin redirect
destinations while rejecting unsafe URLs.
* OAuth routes can handle consent flows before authentication and
redirect safely to sign-in.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
Sorted all imports in all packages, `cms`, `design-system` and
`ui-library` apps by running `pnpm format` on them.
All changes in this PR are done by the script.
* add ts any checks
* fix linting issues
* updated more file rules
* updated runtime files
* updated turbo to remove lints
* removed eslint and reference from next
* Revert the pnpm lock to the one from master.
---------
Co-authored-by: Ivan Vasilov <vasilov.ivan@gmail.com>
* Add social login block.
* Regen the registry.
* Fix the nextjs social auth.
* Add social auth blocks for RR, Tanstack and React.
* Minor fixes.
* Add docs.
* Update the docs.
* Minor fixes to the blocks.
* Update the docs.
* Fix various doc issues.
* Fix the redirect in the password-based auth.
* Fix note about supabase clients in docs.
* Use with instead of assert in the registry imports.
* Update all auth blocks to use /protected.
* Update all docs for the password-based auth.
* Add new label to social auth.
* Fix docs issues.
* Light mode fix
* Smol fixes
* Fix the origin in the login route.
* Add social auth to the landing page.
* Regenerate the registry.
---------
Co-authored-by: Terry Sutton <saltcod@gmail.com>
* Change the destinations for next auth routes.
* Change the folder definition to /auth.
* Fix wrong docs.
* More fixes.
* Fix the redirect url to include the base path.
* Minor fixes to the other auth blocks.
* Fix example URLs. Remove some extra code.
* Minor fixes for the avatar stack demo.
* More fixes.
* Copy the design-system app into a new one for ui-library.
* Remove unneeded content.
* Add supabase config.
* Cleanup the css.
* Add bunch of packages.
* Cleanup the registry.
* Regenerate the registry.
* Add needed components for documenting components.
* Add the pages for the components.
* Fix the RegistryBlock.
* Various fixes.
* Add a turbo definition for ui-library.
* Rename Remix to React Router.
* Reorder the pages for all frameworks.
* Remove the bottom pager.
* Fix the pages and command menu.
* Various fixes.
* Minor fixes.
* Add ai editor rules.
* Various fixes.
* Add local supabase env vars.
* Try to fix a package error.
* Bunch of various fixes.
* Fix lint errors.
