Files
supabase/apps/ui-library/scripts/clean-registry.ts
T
19d7233580 feat(ui-library): add headless app block for TanStack Start (#49579)
## 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 — a new UI Library block. Stacked on #49573 (already in main)

Fixes AI-1064

## What is the new behavior?

Adds `headless-app-tanstack`: customers sign in, authorize an MCP
client, and use the product through agent tool calls. It composes the
existing Password-Based Auth, OAuth Consent, and MCP Server blocks.

- `/agents` provides a copyable connection prompt, lists OAuth
authorizations, and lets customers revoke access.
- The shared MCP runtime exposes `whoami` plus example task CRUD tools.
Tools use the caller's Supabase client, with database grants and RLS
enforcing ownership.
- A root-level `supabase/` directory supplies local Auth/OAuth
configuration, a declarative tasks schema, and Edge Function files,
including `.env.example`.
- Docs cover local setup, signing keys, migrations, environment
configuration, deployment, and extending the tools.
`/example/headless-app` previews the sign-in, consent, connect, and
connected states.

Shared block fixes make a fresh install work:

- Explicit public URL resolution fixes OAuth discovery in local Edge
Runtime when middleware runtime detection fails. Both external OAuth
access tokens and ordinary authenticated app session tokens remain
supported; embedded agents do not need an additional consent flow.
- Registry targets keep backend files outside `src/`, and generated
consumer routes omit source-only TypeScript suppressions.
- Signup respects `auth.email.enable_confirmations`; sign-in/signup
preserve the return destination. Missing consent IDs retain the existing
error state without serializing `null` into the URL.

## How to test

Use the UI Library on **staging** and follow the block pages'
instructions.

1. Open the **Headless App** block page for TanStack Start. Install it
into a fresh app and follow the setup instructions through connecting an
MCP client.
2. Sign up, open `/agents`, and use the connection prompt to authorize a
client. Call `whoami`, then create, list, update, and delete a task.
3. Confirm the client appears on `/agents`. Revoke access and verify it
disappears and token refresh fails. An existing access token can
continue working until it expires.
4. Follow the **MCP Server** block page's embedded-agent instructions
using an authenticated app session. Confirm tools work without another
OAuth consent flow and `whoami` returns `client_id: null`.
5. With a second user, confirm each user can only access their own
tasks. Check that signup behaves correctly for the configured
email-confirmation setting.
6. Check the Headless App preview states and run the installed app's
typecheck and production build.

## Validation performed

Fresh local installation and browser/SDK verification passed: 26 live
MCP/Data API checks, 10 Deno tests, and 7 connection-page component
tests. Also passed UI Library typecheck, targeted lint,
registry/Markdown builds, and fresh consumer typecheck/production build.
Both OAuth and ordinary app session authentication were exercised.

Hosted deployment and consuming the confirmation-email link were not
tested.



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Added a TanStack Headless App example with sign-in, OAuth consent, MCP
connection, and connected-agent screens.
- Added task management tools for listing, creating, updating, and
deleting tasks through MCP.
- Added connected-agent management, including server URL and prompt
copying, refresh, and access revocation.
  - Added a new Headless App registry block and documentation.

- **Bug Fixes**
- Preserved intended destinations through sign-up, email confirmation,
and protected-route login redirects.
- Improved OAuth discovery URL handling across forwarded-host
deployments.

- **Documentation**
- Updated setup, environment, deployment, and Supabase CLI guidance for
headless apps and MCP servers.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: Cursor Agent <cursoragent@cursor.com>
Co-authored-by: Saxon Fletcher <SaxonF@users.noreply.github.com>
Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
Co-authored-by: repro <repro@local>
Co-authored-by: Raúl Barroso <code@raulb.dev>
2026-09-14 10:30:26 +10:00

84 lines
2.7 KiB
TypeScript

import * as fs from 'fs'
import * as path from 'path'
function processJsonFile(filePath: string) {
try {
// Read the file
const content = fs.readFileSync(filePath, 'utf8')
const json = JSON.parse(content)
// Convert to string to do replacement
let stringified = JSON.stringify(json, null, 2)
// Perform the replacement
stringified = stringified
.replace(/\/ui\/example\/password-based-auth/g, '')
.replace(/\/example\/password-based-auth/g, '')
.replaceAll(
"import { Link } from '@/registry/default/components/ui/link'",
"import Link from 'next/link'"
)
// Replace the file origin path to exclude the monorepo structure
.replaceAll('node_modules/@supabase/vue-blocks/', '')
// Blocks that combine() across all client variants hard-code the nextjs
// client path in their source. Rewrite that import per-variant so each
// generated artifact points at the client file it actually bundles.
const variantClientMap: Record<string, string> = {
react: 'react',
'react-router': 'react-router',
tanstack: 'tanstack',
}
const baseName = path.basename(filePath, '.json')
for (const [suffix, clientDir] of Object.entries(variantClientMap)) {
if (baseName.endsWith(`-${suffix}`)) {
stringified = stringified.replaceAll(
'@/registry/default/clients/nextjs/lib/supabase/client',
`@/registry/default/clients/${clientDir}/lib/supabase/client`
)
break
}
}
// Registry source routes are absent from this app's generated TanStack tree.
// Consumers generate their own tree, where this suppression would be unused.
stringified = stringified.replaceAll(
'// @ts-expect-error The local generated route tree does not include this block route.\\n',
''
)
// Write back to file
fs.writeFileSync(filePath, stringified)
console.log(`✓ Updated ${filePath}`)
} catch (error) {
console.error(`Error processing ${filePath}:`, error)
}
}
function processDirectory(directoryPath: string) {
const files = fs.readdirSync(directoryPath)
files.forEach((file) => {
const fullPath = path.join(directoryPath, file)
const stat = fs.statSync(fullPath)
if (stat.isDirectory()) {
processDirectory(fullPath)
} else if (path.extname(file) === '.json') {
processJsonFile(fullPath)
}
})
}
// Start processing from the specified directory
const targetDir = path.join(process.cwd(), 'public/r')
if (!fs.existsSync(targetDir)) {
console.error('Target directory does not exist:', targetDir)
process.exit(1)
}
console.log('Starting JSON file processing...')
processDirectory(targetDir)
console.log('Processing complete!')