Supabase UI Library

https://supabase.com/ui
Admin
A collection of React components and blocks built on the shadcn/ui library that connect your...
Tokens:18,707
Snippets:163
Trust Score:10
Update:3 months ago
Show doc for...
Tokens:
Raw
### Install shadcn/ui with Next.js

Source: https://supabase.com/ui/docs/getting-started/quickstart

Use this command to start a new Next.js project with Supabase UI integration. Ensure you have Node.js and npm/yarn installed.

```bash
npx create-next-app -e with-supabase
```

--------------------------------

### Install Platform Kit for Next.js

Source: https://supabase.com/ui/docs/platform/platform-kit

Use this command to add the Platform Kit to your Next.js project. Ensure you have npx, npm, yarn, or bun installed.

```bash
npx shadcn@latest add @supabase/platform-kit-nextjs
```

--------------------------------

### Basic Realtime Chat Usage

Source: https://supabase.com/ui/docs/nextjs/realtime-chat

Demonstrates the basic setup for the RealtimeChat component, requiring a room name and username.

```javascript
import { RealtimeChat } from '@/components/realtime-chat'

export default function ChatPage() {
  return <RealtimeChat roomName="my-chat-room" username="john_doe" />
}
```

--------------------------------

### Usage Example of CurrentUserAvatar

Source: https://supabase.com/ui/docs/nextjs/current-user-avatar

Demonstrates how to integrate the CurrentUserAvatar component into your Next.js application. This example shows it within a header component.

```typescript
'use client'
 
import { CurrentUserAvatar } from '@/components/current-user-avatar'
 
const CurrentUserAvatarDemo = () => {
  return (
    <Header className="flex items-center justify-between">
      <h1>Lumon Industries</h1>
      <CurrentUserAvatar />
    </Header>
  )
}
 
export default CurrentUserAvatarDemo
```

--------------------------------

### Install Current User Avatar Next.js

Source: https://supabase.com/ui/docs/nextjs/current-user-avatar

Install the Current User Avatar component for Next.js using npm, yarn, or bun.

```bash
npx shadcn@latest add @supabase/current-user-avatar-nextjs
```

--------------------------------

### Realtime Chat with Message Persistence

Source: https://supabase.com/ui/docs/nextjs/realtime-chat

Illustrates how to handle incoming messages by providing an `onMessage` callback to store messages persistently, for example, in a database.

```javascript
import { RealtimeChat } from '@/components/realtime-chat'
import { useMessagesQuery } from '@/hooks/use-messages-query'
import { storeMessages } from '@/lib/store-messages'

export default function ChatPage() {
  const { data: messages } = useMessagesQuery()
  const handleMessage = (messages: ChatMessage[]) => {
    // Store messages in your database
    await storeMessages(messages)
  }

  return <RealtimeChat roomName="my-chat-room" username="john_doe" onMessage={handleMessage} />
}
```

--------------------------------

### RealtimeAvatarStack Usage in Next.js

Source: https://supabase.com/ui/docs/nextjs/realtime-avatar-stack

Example of how to use the RealtimeAvatarStack component within a Next.js page. It requires importing the component and passing a roomName prop.

```typescript
import { RealtimeAvatarStack } from '@/components/realtime-avatar-stack'
 
export default function Page() {
  return (
    <Header className="flex items-center justify-between">
      <h1>Lumon Industries</h1>
      <RealtimeAvatarStack roomName="break_room" />
    </Header>
  )
}
```

--------------------------------

### Using useRealtimeFlow Hook for Full Control

Source: https://supabase.com/ui/docs/nextjs/realtime-flow

Demonstrates using the useRealtimeFlow hook for programmatic control over nodes and edges, suitable for custom node types and dynamic updates. It requires ReactFlowProvider and basic ReactFlow setup.

```javascript
import {
  ReactFlow,
  ReactFlowProvider,
  Background,
  Controls,
  type Node,
  type Edge,
} from '@xyflow/react'
import { useRealtimeFlow } from '@/hooks/use-realtime-flow'
 
const initialNodes: Node[] = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
  { id: '2', position: { x: 250, y: 150 }, data: { label: 'Node B' } },
]
 
export default function FlowPage() {
  const { nodes, edges, synced, onNodesChange, onEdgesChange, onConnect, setNodes, setEdges } =
    useRealtimeFlow({
      channel: 'my-flow',
      initialNodes,
    })
 
  return (
    <ReactFlowProvider>
      <ReactFlow
        nodes={synced ? nodes : []}
        edges={synced ? edges : []}
        onNodesChange={synced ? onNodesChange : undefined}
        onEdgesChange={synced ? onEdgesChange : undefined}
        onConnect={synced ? onConnect : undefined}
        fitView
      >
        <Background />
        <Controls />
      </ReactFlow>
    </ReactFlowProvider>
  )
}
```

--------------------------------

### InfiniteList Component Usage

Source: https://supabase.com/ui/docs/react/infinite-query

This component demonstrates how to use the InfiniteList to display a list of todo items. Ensure the Checkbox component from shadcn/ui is installed and types are regenerated. Row Level Security (RLS) is enabled by default on the Supabase table.

```jsx
'use client'
 
import { InfiniteList } from './infinite-component'
import { Checkbox } from '@/components/ui/checkbox'
import { SupabaseQueryHandler } from '@/hooks/use-infinite-query'
import { Database } from '@/lib/supabase.types'
 
type TodoTask = Database['public']['Tables']['todos']['Row']
 
// Define how each item should be rendered
const renderTodoItem = (todo: TodoTask) => {
  return (
    <div
      key={todo.id}
      className="border-b py-3 px-4 hover:bg-muted flex items-center justify-between"
    >
      <div className="flex items-center gap-3">
        <Checkbox defaultChecked={todo.is_complete ?? false} />
        <div>
          <span className="font-medium text-sm text-foreground">{todo.task}</span>
          <div className="text-sm text-muted-foreground">
            {new Date(todo.inserted_at).toLocaleDateString()}
          </div>
        </div>
      </div>
    </div>
  )
}
 
const orderByInsertedAt: SupabaseQueryHandler<'todos'> = (query) => {
  return query.order('inserted_at', { ascending: false })
}
 
export const InfiniteListDemo = () => {
  return (
    <div className="bg-background h-[600px]">
      <InfiniteList
        tableName="todos"
        renderItem={renderTodoItem}
        pageSize={3}
        trailingQuery={orderByInsertedAt}
      />
    </div>
  )
}

```

--------------------------------

### Updating Nodes and Edges with useRealtimeFlow Hook

Source: https://supabase.com/ui/docs/nextjs/realtime-flow

Provides examples of how to add, update, and remove nodes and edges using the setNodes and setEdges functions returned by the useRealtimeFlow hook. These functions behave like React's useState setters.

```javascript
// Add a node
setNodes((prev) => [...prev, newNode])
 
// Update a node
setNodes((prev) => prev.map((n) => (n.id === '1' ? { ...n, data: { label: 'Updated' } } : n)))
 
// Remove a node and its connected edges
setNodes((prev) => prev.filter((n) => n.id !== '1'))
setEdges((prev) => prev.filter((e) => e.source !== '1' && e.target !== '1'))
```

--------------------------------

### RealtimeMonaco with Custom Persistence Options

Source: https://supabase.com/ui/docs/nextjs/realtime-monaco

Configure persistence with specific table and column names, and a store timeout using `SupabasePersistenceOptions`.

```javascript
<RealtimeMonaco
  channel="realtime-monaco-demo"
  language="typescript"
  persistence={{
    table: 'yjs_documents',
    roomColumn: 'room',
    stateColumn: 'state',
    storeTimeout: 2000,
  }}
/>
```

--------------------------------

### Basic Realtime Flow Usage

Source: https://supabase.com/ui/docs/nextjs/realtime-flow

Demonstrates the basic integration of the RealtimeFlow component with initial nodes and edges. Ensure the 'realtime-flow-demo' channel is unique for your collaboration session.

```javascript
import { RealtimeFlow } from '@/components/realtime-flow'
 
const nodes = [
  { id: '1', position: { x: 0, y: 0 }, data: { label: 'Node A' } },
  { id: '2', position: { x: 250, y: 150 }, data: { label: 'Node B' } },
]
 
const edges = [{ id: 'e1-2', source: '1', target: '2' }]
 
export default function FlowPage() {
  return <RealtimeFlow channel="realtime-flow-demo" initialNodes={nodes} initialEdges={edges} />
}
```

--------------------------------

### Realtime Chat with Initial Messages

Source: https://supabase.com/ui/docs/nextjs/realtime-chat

Shows how to initialize the RealtimeChat component with a list of existing messages, fetched using a custom hook.

```javascript
import { RealtimeChat } from '@/components/realtime-chat'
import { useMessagesQuery } from '@/hooks/use-messages-query'

export default function ChatPage() {
  const { data: messages } = useMessagesQuery()

  return <RealtimeChat roomName="my-chat-room" username="john_doe" messages={messages} />
}
```

--------------------------------

### Create Supabase Browser Client

Source: https://supabase.com/ui/docs/react-router/client

Use this function to create a Supabase client for browser environments. Ensure VITE_SUPABASE_URL and VITE_SUPABASE_PUBLISHABLE_KEY are set in your .env.local file.

```typescript
/// <reference types="vite/types/importMeta.d.ts" />
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    import.meta.env.VITE_SUPABASE_URL!,
    import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY!
  )
}
```

--------------------------------

### Initialize Query Function

Source: https://supabase.com/ui/docs/react/infinite-query

Initializes the query by setting loading states and fetching the first page of data. This is typically called once when the component mounts.

```typescript
const initialize = async () => {
    setState({ isLoading: true, isSuccess: false, data: [] })
    await fetchNextPage()
    setState({ isLoading: false, hasInitialFetch: true })
  }
```

--------------------------------

### Basic RealtimeMonaco Component Usage

Source: https://supabase.com/ui/docs/nextjs/realtime-monaco

Import and use the RealtimeMonaco component with a specified channel and language.

```javascript
import { RealtimeMonaco } from '@/components/realtime-monaco'

export default function MonacoPage() {
  return <RealtimeMonaco channel="realtime-monaco-demo" language="typescript" />
}
```

--------------------------------

### RealtimeMonaco with Boolean Persistence

Source: https://supabase.com/ui/docs/nextjs/realtime-monaco

Enable persistence by passing `true` to the `persistence` prop. This uses default table and column names.

```javascript
import { RealtimeMonaco } from '@/components/realtime-monaco'

export default function MonacoPage() {
  return <RealtimeMonaco channel="realtime-monaco-demo" language="typescript" persistence />
}
```

--------------------------------

### SupabasePersistenceOptions

Source: https://supabase.com/ui/docs/nextjs/realtime-flow

Options to configure how the Realtime Flow state is persisted to Supabase. These options allow customization of the table, schema, and columns used for storing the real-time data, as well as a debounce delay for persistence.

```APIDOC
### SupabasePersistenceOptions

Option| Type| Default| Description  
---|---|---|---  
`table`| `string`| `'yjs_documents'`| Name of the Postgres table used to store documents.  
`schema`| `string`| `'public'`| Schema where the table is located.  
`roomColumn`| `string`| `'room'`| Column used as the document identifier.  
`stateColumn`| `string`| `'state'`| Column used to store the binary Yjs state.  
`storeTimeout`| `number`| `1000`| Debounce delay (ms) before persisting changes.
```

--------------------------------

### Realtime Flow with Persistence Enabled

Source: https://supabase.com/ui/docs/nextjs/realtime-flow

Shows how to enable persistence for the RealtimeFlow component by passing the 'persistence' prop. This saves the diagram state to the Supabase database.

```javascript
import { RealtimeFlow } from '@/components/realtime-flow'
 
export default function FlowPage() {
  return (
    <RealtimeFlow
      channel="realtime-flow-demo"
      initialNodes={nodes}
      initialEdges={edges}
      persistence
    />
  )
}
```

--------------------------------

### Environment Variables for Supabase Management

Source: https://supabase.com/ui/docs/platform/platform-kit

Configure your environment variables in a `.env.local` file to enable Supabase management features, including AI queries. Ensure your personal access token and API keys are securely managed.

```dotenv
SUPABASE_MANAGEMENT_API_TOKEN=your-personal-access-token
NEXT_PUBLIC_ENABLE_AI_QUERIES=true
OPENAI_API_KEY=your-openai-api-key
```

--------------------------------

### AI SQL Generation API Route

Source: https://supabase.com/ui/docs/platform/platform-kit

This API route handles POST requests to generate SQL queries. It requires a 'prompt' and 'projectRef' in the request body. It first retrieves the database schema, formats it, and then uses OpenAI to generate the SQL query. Error handling is included for missing parameters, permission issues, and AI generation failures.

```typescript
1import {
  NextResponse
} from 'next/server'
import OpenAI from 'openai'
import createClient from 'openapi-fetch'

import type { paths } from '@/platform/platform-kit-nextjs/lib/management-api-schema'
import { listTablesSql } from '@/platform/platform-kit-nextjs/lib/pg-meta'

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY,
})

const client = createClient<paths>({
  baseUrl: 'https://api.supabase.com',
  headers: {
    Authorization: `Bearer ${process.env.SUPABASE_MANAGEMENT_API_TOKEN}`,
  },
})

// Function to get database schema
async function getDbSchema(projectRef: string) {
  const token = process.env.SUPABASE_MANAGEMENT_API_TOKEN
  if (!token) {
    throw new Error('Supabase Management API token is not configured.')
  }

  const sql = listTablesSql()

  const { data, error } = await client.POST('/v1/projects/{ref}/database/query', {
    params: {
      path: {
        ref: projectRef,
      },
    },
    body: {
      query: sql,
      read_only: true,
    },
  })

  if (error) {
    throw error
  }

  return data as any
}

function formatSchemaForPrompt(schema: any) {
  let schemaString = ''
  if (schema && Array.isArray(schema)) {
    schema.forEach((table: any) => {
      const columnInfo = table.columns.map((c: any) => `${c.name} (${c.data_type})`)
      schemaString += `Table "${table.name}" has columns: ${columnInfo.join(', ')}.\n`
    })
  }
  return schemaString
}

export async function POST(request: Request) {
  try {
    const { prompt, projectRef } = await request.json()

    if (!prompt) {
      return NextResponse.json({ message: 'Prompt is required.' }, { status: 400 })
    }
    if (!projectRef) {
      return NextResponse.json({ message: 'projectRef is required.' }, { status: 400 })
    }

    // Implement your permission check here (e.g. check if the user is a member of the project)
    // In this example, everyone can access all projects
    const userHasPermissionForProject = Boolean(projectRef)

    if (!userHasPermissionForProject) {
      return NextResponse.json(
        { message: 'You do not have permission to access this project.' },
        { status: 403 }
      )
    }

    // 1. Get database schema
    const schema = await getDbSchema(projectRef)
    const formattedSchema = formatSchemaForPrompt(schema)

    // 2. Create a prompt for OpenAI
    const systemPrompt = `You are an expert SQL assistant. Given the following database schema, write a SQL query that answers the user's question. Return only the SQL query, do not include any explanations or markdown.\n\nSchema:\n${formattedSchema}`

    // 3. Call OpenAI to generate SQL using responses.create (plain text output)
    const response = await openai.responses.create({
      model: 'gpt-4.1',
      instructions: systemPrompt, // Use systemPrompt as instructions
      input: prompt, // User's question
    })

    const sql = response.output_text

    if (!sql) {
      return NextResponse.json(
        { message: 'Could not generate SQL from the prompt.' },
        { status: 500 }
      )
    }

    // 4. Return the generated SQL
    return NextResponse.json({ sql })
  } catch (error: any) {
    console.error('AI SQL generation error:', error)
    const errorMessage = error.message || 'An unexpected error occurred.'
    const status = error.response?.status || 500
    return NextResponse.json({ message: errorMessage }, { status })
  }
}
```

--------------------------------

### Store Creation for Infinite Query

Source: https://supabase.com/ui/docs/react/infinite-query

Creates a store to manage the state of the infinite query, including data, count, loading, and error states. It uses a memoized hook to ensure the store is created only when necessary dependencies change.

```typescript
const store = useMemo(
    () =>
      createStore<TData, T>({
        tableName,
        columns,
        pageSize,
        getTrailingQuery: () => trailingQueryRef.current,
      }),
    [tableName, columns, pageSize, trailingQueryKey]
  )
```

--------------------------------

### Dropzone Component Implementation

Source: https://supabase.com/ui/docs/nextjs/dropzone

The core Dropzone component integrates with Supabase Storage uploads. It handles drag-and-drop functionality, file previews, upload status, and error display. Requires `use-supabase-upload` hook and utility functions.

```typescript
'use client'

import { CheckCircle, File, Loader2, Upload, X } from 'lucide-react'
import { createContext, useCallback, useContext, type PropsWithChildren } from 'react'

import { cn } from '@/lib/utils'
import { type UseSupabaseUploadReturn } from '@/hooks/use-supabase-upload'
import { Button } from '@/components/ui/button'

export const formatBytes = (
  bytes: number,
  decimals = 2,
  size?: 'bytes' | 'KB' | 'MB' | 'GB' | 'TB' | 'PB' | 'EB' | 'ZB' | 'YB'
) => {
  const k = 1000
  const dm = decimals < 0 ? 0 : decimals
  const sizes = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']

  if (bytes === 0 || bytes === undefined) return size !== undefined ? `0 ${size}` : '0 bytes'
  const i = size !== undefined ? sizes.indexOf(size) : Math.floor(Math.log(bytes) / Math.log(k))
  return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}

type DropzoneContextType = Omit<UseSupabaseUploadReturn, 'getRootProps' | 'getInputProps'>

const DropzoneContext = createContext<DropzoneContextType | undefined>(undefined)

type DropzoneProps = UseSupabaseUploadReturn & {
  className?: string
}

const Dropzone = ({ 
  className,
  children,
  getRootProps,
  getInputProps,
  ...restProps
}: PropsWithChildren<DropzoneProps>) => {
  const isSuccess = restProps.isSuccess
  const isActive = restProps.isDragActive
  const isInvalid = 
    (restProps.isDragActive && restProps.isDragReject) || 
    (restProps.errors.length > 0 && !restProps.isSuccess) || 
    restProps.files.some((file) => file.errors.length !== 0)

  return (
    <DropzoneContext.Provider value={{ ...restProps }}>
      <div
        {...getRootProps({
          className: cn(
            'border-2 border-gray-300 rounded-lg p-6 text-center bg-card transition-colors duration-300 text-foreground',
            className,
            isSuccess ? 'border-solid' : 'border-dashed',
            isActive && 'border-primary bg-primary/10',
            isInvalid && 'border-destructive bg-destructive/10'
          ),
        })}
      >
        <input {...getInputProps()} />
        {children}
      </div>
    </DropzoneContext.Provider>
  )
}
const DropzoneContent = ({ className }: { className?: string }) => {
  const { 
    files,
    setFiles,
    onUpload,
    loading,
    successes,
    errors,
    maxFileSize,
    maxFiles,
    isSuccess,
  } = useDropzoneContext()

  const exceedMaxFiles = files.length > maxFiles

  const handleRemoveFile = useCallback(
    (fileName: string) => {
      setFiles(files.filter((file) => file.name !== fileName))
    },
    [files, setFiles]
  )

  if (isSuccess) {
    return (
      <div className={cn('flex flex-row items-center gap-x-2 justify-center', className)}>
        <CheckCircle size={16} className="text-primary" />
        <p className="text-primary text-sm">
          Successfully uploaded {files.length} file{files.length > 1 ? 's' : ''}
        </p>
      </div>
    )
  }

  return (
    <div className={cn('flex flex-col', className)}>
      {files.map((file, idx) => {
        const fileError = errors.find((e) => e.name === file.name)
        const isSuccessfullyUploaded = !!successes.find((e) => e === file.name)

        return (
          <div 
            key={`${file.name}-${idx}`}
            className="flex items-center gap-x-4 border-b py-2 first:mt-4 last:mb-4 "
          >
            {file.type.startsWith('image/') ? (
              <div className="h-10 w-10 rounded-sm border overflow-hidden shrink-0 bg-muted flex items-center justify-center">
                <img src={file.preview} alt={file.name} className="object-cover" />
              </div>
            ) : (
              <div className="h-10 w-10 rounded-sm border bg-muted flex items-center justify-center">
                <File size={18} />
              </div>
            )}

            <div className="shrink grow flex flex-col items-start truncate">
              <p title={file.name} className="text-sm truncate max-w-full">
                {file.name}
              </p>
              {file.errors.length > 0 ? (
                <p className="text-xs text-destructive">
                  {file.errors
                    .map((e) =>

```

--------------------------------

### Use Infinite Query Hook

Source: https://supabase.com/ui/docs/react/infinite-query

The main hook for implementing infinite scrolling. It synchronizes the external store state with the component and initializes the data fetch on mount if needed.

```typescript
function useInfiniteQuery<TData extends SupabaseTableData<T>, T extends SupabaseTableName = SupabaseTableName>(
  props: UseInfiniteQueryProps<T>
) {
  const tableName = props.tableName
  const columns = props.columns ?? '*'
  const pageSize = props.pageSize ?? 20
  const trailingQuery = props.trailingQuery
  const trailingQueryKey = props.trailingQueryKey
  const trailingQueryRef = useRef(trailingQuery)

  trailingQueryRef.current = trailingQuery

  const store = useMemo(
    () =>
      createStore<TData, T>({
        tableName,
        columns,
        pageSize,
        getTrailingQuery: () => trailingQueryRef.current,
      }),
    [tableName, columns, pageSize, trailingQueryKey]
  )

  const state = useSyncExternalStore(
    store.subscribe,
    () => store.getState(),
    () => initialState as StoreState<TData>
  )

  useEffect(() => {
    if (!state.hasInitialFetch && typeof window !== 'undefined') {
      store.initialize()
    }
  }, [state.hasInitialFetch, store])

  return {
    data: state.data,
    count: state.count,
    isSuccess: state.isSuccess,
    isLoading: state.isLoading,
    isFetching: state.isFetching,
    error: state.error,
    hasMore: state.count > state.data.length,
    fetchNextPage: store.fetchNextPage,
  }
}
```

--------------------------------

### Basic Dropzone Usage with Supabase Upload Hook

Source: https://supabase.com/ui/docs/nextjs/dropzone

This snippet demonstrates how to use the Dropzone component with the useSupabaseUpload hook for file uploads to a Supabase Storage bucket. Configure allowed MIME types, maximum files, and maximum file size.

```javascript
'use client'

import {
  Dropzone,
  DropzoneContent,
  DropzoneEmptyState,
} from '@/components/dropzone'
import { useSupabaseUpload } from '@/hooks/use-supabase-upload'

const FileUploadDemo = () => {
  const props = useSupabaseUpload({
    bucketName: 'test',
    path: 'test',
    allowedMimeTypes: ['image/*'],
    maxFiles: 2,
    maxFileSize: 1000 * 1000 * 10, // 10MB,
  })

  return (
    <div className="w-[500px]">
      <Dropzone {...props}>
        <DropzoneEmptyState />
        <DropzoneContent />
      </Dropzone>
    </div>
  )
}

export { FileUploadDemo }
```

--------------------------------

### Infinite Query Hook Implementation

Source: https://supabase.com/ui/docs/react/infinite-query

This is the core implementation of the `useInfiniteQuery` hook in TypeScript. It handles data fetching, state management, and type safety for Supabase tables. It requires a Supabase client to be initialized.

```typescript
1'use client'
2
3import { PostgrestQueryBuilder, type PostgrestClientOptions } from '@supabase/postgrest-js'
4import { type SupabaseClient } from '@supabase/supabase-js'
5import { useEffect, useMemo, useRef, useSyncExternalStore } from 'react'
6
7import { createClient } from '@/lib/supabase/client'
8
9const supabase = createClient()
10
11// The following types are used to make the hook type-safe. It extracts the database type from the supabase client.
12type SupabaseClientType = typeof supabase
13
14// Utility type to check if the type is any
15type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N
16
17// Extracts the database type from the supabase client. If the supabase client doesn't have a type, it will fallback properly.
18type Database =
19  SupabaseClientType extends SupabaseClient<infer U>
20    ? IfAny<
21        U,
22        {
23          public: {
24            Tables: Record<string, any>
25            Views: Record<string, any>
26            Functions: Record<string, any>
27          }
28        },
29        U
30      >
31    : {
32        public: {
33          Tables: Record<string, any>
34          Views: Record<string, any>
35          Functions: Record<string, any>
36        }
37      }
38
39// Change this to the database schema you want to use
40type DatabaseSchema = Database['public']
41
42// Extracts the table names from the database type
43type SupabaseTableName = keyof DatabaseSchema['Tables']
44
45// Extracts the table definition from the database type
46type SupabaseTableData<T extends SupabaseTableName> = DatabaseSchema['Tables'][T]['Row']
47
48// Default client options for PostgrestQueryBuilder
49type DefaultClientOptions = PostgrestClientOptions
50
51type SupabaseSelectBuilder<T extends SupabaseTableName> = ReturnType<
52  PostgrestQueryBuilder<
53    DefaultClientOptions,
54    DatabaseSchema,
55    DatabaseSchema['Tables'][T],
56    T
57  >['select']
58>
59
60// A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.
61type SupabaseQueryHandler<T extends SupabaseTableName> = (
62  query: SupabaseSelectBuilder<T>
63) => SupabaseSelectBuilder<T>
64
65interface UseInfiniteQueryProps<T extends SupabaseTableName, Query extends string = '*'> {
66  // The table name to query
67  tableName: T
68  // The columns to select, defaults to `*`
69  columns?: string
70  // The number of items to fetch per page, defaults to `20`
71  pageSize?: number
72  // A function that modifies the query. Can be used to sort, filter, etc. If .range is used, it will be overwritten.
73  trailingQuery?: SupabaseQueryHandler<T>
74  // Optional key that identifies the current trailing query shape (e.g. filters/sort/search).
75  // When this changes, the internal store is recreated so stale paginated rows are discarded.
76  trailingQueryKey?: unknown
77}
78
79interface StoreState<TData> {
80  data: TData[]
81  count: number
82  isSuccess: boolean
83  isLoading: boolean
84  isFetching: boolean
85  error: Error | null
86  hasInitialFetch: boolean
87}
88
89type Listener = () => void
90
91interface StoreProps<T extends SupabaseTableName> {
92  tableName: T
93  columns?: string
94  pageSize?: number
95  getTrailingQuery: () => SupabaseQueryHandler<T> | undefined
96}
97
98function createStore<TData extends SupabaseTableData<T>, T extends SupabaseTableName>(
99  props: StoreProps<T>
100) {
101  const { tableName, columns = '*', pageSize = 20, getTrailingQuery } = props
102
103  let state: StoreState<TData> = {
104    data: [],
105    count: 0,
106    isSuccess: false,
107    isLoading: false,
108    isFetching: false,
109    error: null,
110    hasInitialFetch: false,
111  }
112
113  const listeners = new Set<Listener>()
114
115  const notify = () => {
116    listeners.forEach((listener) => listener())
117  }
118
119  const setState = (newState: Partial<StoreState<TData>>) => {
120    state = { ...state, ...newState }
121    notify()
122  }
123
124  const fetchPage = async (skip: number) => {
125    if (state.hasInitialFetch && (state.isFetching || state.count <= state.data.length)) return
126
127    setState({ isFetching: true })
128
129    let query = supabase
130      .from(tableName)
131      .select(columns, { count: 'exact' }) as unknown as SupabaseSelectBuilder<T>
132
133    const trailingQuery = getTrailingQuery()
134    if (trailingQuery) {
135      query = trailingQuery(query)
136    }

```

--------------------------------

### Realtime Flow with Custom Persistence Options

Source: https://supabase.com/ui/docs/nextjs/realtime-flow

Configures the RealtimeFlow component's persistence with custom options, specifying the table, room column, state column, and store timeout. Ensure these match your Supabase table schema.

```javascript
import type { SupabasePersistenceOptions } from '@supabase-labs/y-supabase'
 
const persistenceOptions = {
  table: 'yjs_documents',
  roomColumn: 'room',
  stateColumn: 'state',
  storeTimeout: 2000,
} satisfies SupabasePersistenceOptions
 
export default function FlowPage() {
  return (
    <RealtimeFlow
      channel="realtime-flow-demo"
      initialNodes={nodes}
      initialEdges={edges}
      persistence={persistenceOptions}
    />
  )
}
```

--------------------------------

### Create Supabase Browser Client for Next.js

Source: https://supabase.com/ui/docs/nextjs/client

Use this function to create a Supabase client for browser-side operations in your Next.js application. Ensure NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY environment variables are set.

```typescript
import { createBrowserClient } from '@supabase/ssr'

export function createClient() {
  return createBrowserClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL!,
    process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!
  )
}
```

--------------------------------

### Dropzone Component Rendering Logic

Source: https://supabase.com/ui/docs/nextjs/dropzone

Renders the list of uploaded files, including their status (uploading, error, success) and provides options to remove files or initiate an upload. Handles cases for exceeding maximum file limits.

```typescript
const Dropzone = ({ className }: DropzoneProps) => {
  const { files, loading, isSuccessfullyUploaded, fileError, exceedMaxFiles, maxFiles, maxFileSize, onUpload, handleRemoveFile } = useDropzoneContext()

  return (
    <div
      className={cn(
        'relative flex flex-col rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
        className
      )}
    >
      <DropzoneContent />
      {exceedMaxFiles && (
        <p className="text-sm text-left mt-2 text-destructive">
          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file
          {files.length - maxFiles > 1 ? 's' : ''}.
        </p>
      )}
      {files.length > 0 && !exceedMaxFiles && (
        <div className="mt-2">
          <Button
            variant="outline"
            onClick={onUpload}
            disabled={files.some((file) => file.errors.length !== 0) || loading}
          >
            {loading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Uploading...
              </>
            ) : (
              <>
                Upload files
              </>
            )}
          </Button>
        </div>
      )}
    </div>
  )
}

const DropzoneContent = () => {
  const { files, loading, isSuccessfullyUploaded, fileError, maxFileSize, handleRemoveFile } = useDropzoneContext()

  return (
    <div className="flex flex-col gap-y-2">
      {files.map((file) => (
        <div
          key={file.name}
          className="flex items-center justify-between gap-x-2"
        >
          <div className="flex items-center gap-x-2 overflow-hidden">
            <FileIcon className="shrink-0" />
            <div className="flex flex-col overflow-hidden">
              <p className="truncate font-medium">{file.name}</p>
              {!fileError && !isSuccessfullyUploaded && (
                <p className="text-xs text-muted-foreground">
                  {file.errors.length > 0
                    ? file.errors.map((e) =>
                        e.message.startsWith('File is larger than')
                          ? `File is larger than ${formatBytes(maxFileSize, 2)} (Size: ${formatBytes(file.size, 2)})`
                          : e.message
                      )
                      .join(', ')
                    : loading && !isSuccessfullyUploaded
                    ? 'Uploading file...'
                    : !!fileError
                    ? `Failed to upload: ${fileError.message}`
                    : isSuccessfullyUploaded
                    ? 'Successfully uploaded file'
                    : formatBytes(file.size, 2)}
                </p>
              )}
            </div>
          </div>

          {!loading && !isSuccessfullyUploaded && (
            <Button
              size="icon"
              variant="link"
              className="shrink-0 justify-self-end text-muted-foreground hover:text-foreground"
              onClick={() => handleRemoveFile(file.name)}
            >
              <X />
            </Button>
          )}
        </div>
      ))}
      {exceedMaxFiles && (
        <p className="text-sm text-left mt-2 text-destructive">
          You may upload only up to {maxFiles} files, please remove {files.length - maxFiles} file
          {files.length - maxFiles > 1 ? 's' : ''}.
        </p>
      )}
      {files.length > 0 && !exceedMaxFiles && (
        <div className="mt-2">
          <Button
            variant="outline"
            onClick={onUpload}
            disabled={files.some((file) => file.errors.length !== 0) || loading}
          >
            {loading ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Uploading...
              </>
            ) : (
              <>
                Upload files
              </>
            )}
          </Button>
        </div>
      )}
    </div>
  )
}
```

--------------------------------

### Create Supabase Table for Persistence

Source: https://supabase.com/ui/docs/nextjs/realtime-monaco

Define the necessary SQL table in your Supabase project to store Yjs document states for persistence.

```sql
create table yjs_documents (
  room text primary key,
  state text not null
);
```

--------------------------------

### useRealtimeFlow Options

Source: https://supabase.com/ui/docs/nextjs/realtime-flow

Options available for the useRealtimeFlow hook to configure real-time synchronization and state management.

```APIDOC
## useRealtimeFlow Options

### `channel`
- **Type**: `string`
- **Description**: Unique channel name used to sync diagram state between collaborators in the same session.

### `initialNodes`
- **Type**: `Node[]`
- **Description**: Initial nodes to populate the diagram. Only used if no existing state is found after sync.

### `initialEdges`
- **Type**: `Edge[]`
- **Description**: Initial edges to populate the diagram. Only used if no existing state is found after sync.

### `awareness`
- **Type**: `boolean | Awareness`
- **Description**: Enables presence tracking between users. Pass `false` to disable or a custom `Awareness` instance. Defaults to `true`.

### `persistence`
- **Type**: `boolean | SupabasePersistenceOptions`
- **Description**: Persists diagram state to Supabase so it survives page reloads. Pass `true` for defaults or an options object for fine-grained control.
```

--------------------------------

### Supabase Sign-up Email Template HTML

Source: https://supabase.com/ui/docs/nextjs/password-based-auth

HTML content for the sign-up email template. Includes a confirmation link with token and redirect parameters.

```html
<h2>Confirm your email address</h2>
 
<p>Follow the link below to confirm this email address and finish signing up.</p>
<p>
  <a
    href="{{ .SiteURL }}/auth/confirm?token_hash={{ .TokenHash }}&type=email&next={{ .RedirectTo }}"
    >Confirm email address</a
  >
</p>
```

--------------------------------

### Infinite Query with Sorting

Source: https://supabase.com/ui/docs/react/infinite-query

Fetches data from a table and sorts it by a specified column in descending order. Use this when you need to display data chronologically or by importance.

```javascript
const { data, fetchNextPage } = useInfiniteQuery({
  tableName: 'products',
  columns: '*',
  pageSize: 10,
  trailingQuery: (query) => query.order('created_at', { ascending: false }),
})

return (
  <div>
    {data.map((item) => (
      <ProductCard key={item.id} product={item} />
    ))}
    <Button onClick={fetchNextPage}>Load more products</Button>
  </div>
)
```

--------------------------------

### Next.js Auth Route Handler for Email Verification

Source: https://supabase.com/ui/docs/nextjs/password-based-auth

This route handler verifies email OTP tokens for sign-up confirmation or password resets. It redirects the user to a specified page upon success or an error page if verification fails.

```typescript
import { type EmailOtpType } from '@supabase/supabase-js'
import { redirect } from 'next/navigation'
import { type NextRequest } from 'next/server'

import { createClient } from '@/lib/supabase/server'

export async function GET(request: NextRequest) {
  const { searchParams } = new URL(request.url)
  const token_hash = searchParams.get('token_hash')
  const type = searchParams.get('type') as EmailOtpType | null
  const _next = searchParams.get('next')
  const next = _next?.startsWith('/') ? _next : '/'

  if (token_hash && type) {
    const supabase = await createClient()

    const { error } = await supabase.auth.verifyOtp({
      type,
      token_hash,
    })
    if (!error) {
      // redirect user to specified redirect URL or root of app
      redirect(next)
    } else {
      // redirect the user to an error page with some instructions
      redirect(`/auth/error?error=${error?.message}`)
    }
  }

  // redirect the user to an error page with some instructions
  redirect(`/auth/error?error=No token hash or type`)
}
```

--------------------------------

### Initial State for Infinite Query

Source: https://supabase.com/ui/docs/react/infinite-query

Defines the initial state for the infinite query hook to prevent hydration errors. It includes properties for data, count, loading, success, fetching, and error states.

```typescript
const initialState: any = {
  data: [],
  count: 0,
  isSuccess: false,
  isLoading: false,
  isFetching: false,
  error: null,
  hasInitialFetch: false,
}
```

--------------------------------

### Dropzone Empty State Component

Source: https://supabase.com/ui/docs/nextjs/dropzone

Displays the initial empty state of the dropzone, prompting users to upload files. It shows upload instructions, maximum file count, and maximum file size if configured.

```typescript
const DropzoneEmptyState = ({ className }: { className?: string }) => {
  const { maxFiles, maxFileSize, inputRef, isSuccess } = useDropzoneContext()

  if (isSuccess) {
    return null
  }

  return (
    <div className={cn('flex flex-col items-center gap-y-2', className)}>
      <Upload size={20} className="text-muted-foreground" />
      <p className="text-sm">
        Upload{!!maxFiles && maxFiles > 1 ? ` ${maxFiles}` : ''} file
        {!maxFiles || maxFiles > 1 ? 's' : ''}
      </p>
      <div className="flex flex-col items-center gap-y-1">
        <p className="text-xs text-muted-foreground">
          Drag and drop or{' '}
          <a
            onClick={() => inputRef.current?.click()}
            className="underline cursor-pointer transition hover:text-foreground"
          >
            select {maxFiles === 1 ? `file` : 'files'}
          </a>{' '}
          to upload
        </p>
        {maxFileSize !== Number.POSITIVE_INFINITY && (
          <p className="text-xs text-muted-foreground">
            Maximum file size: {formatBytes(maxFileSize, 2)}
          </p>
        )}
      </div>
    </div>
  )
}
```

--------------------------------

### RealtimeMonaco Component for Next.js

Source: https://supabase.com/ui/docs/nextjs/realtime-monaco

Use this component to embed a collaborative Monaco editor. It requires a channel for synchronization and supports various configurations for awareness, persistence, and theming.

```typescript
'use client'

import { Editor } from '@monaco-editor/react'
import { SupabasePersistenceOptions } from '@supabase-labs/y-supabase'
import { Awareness } from 'y-protocols/awareness.js'

import { useConnectOnMount } from '../hooks/use-connect-on-mount'

type RealtimeMonacoProps = {
  channel: string
  language?: string
  height?: string | number
  className?: string
  awareness?: boolean | Awareness
  persistence?: boolean | SupabasePersistenceOptions
  theme?: 'light' | 'dark'
}

const DEFAULT_HEIGHT = 550

const RealtimeMonaco = ({
  channel,
  language = 'javascript',
  height = DEFAULT_HEIGHT,
  awareness = true,
  persistence,
  theme,
  ...rest
}: RealtimeMonacoProps) => {
  const { connectOnMount } = useConnectOnMount({ channel, persistence, awareness })

  return (
    <Editor
      height={height}
      language={language}
      theme={theme === 'dark' ? 'vs-dark' : 'light'}
      onMount={connectOnMount}
      {...rest}
    />
  )
}

export { RealtimeMonaco }
```

--------------------------------

### Add Toaster for Notifications in Root Layout

Source: https://supabase.com/ui/docs/platform/platform-kit

Include the Toaster component in your application's root layout file (e.g., `layout.tsx` or `App.tsx`) to display toast notifications for Supabase-related events.

```javascript
import { Toaster } from '@/components/ui/sonner'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}
```

--------------------------------

### RealtimeMonaco Without Awareness

Source: https://supabase.com/ui/docs/nextjs/realtime-monaco

Disable the sharing of cursor and selection positions between collaborators by setting `awareness` to `false`.

```javascript
<RealtimeMonaco channel="realtime-monaco-demo" awareness={false} />
```

--------------------------------

### Cursor Component for Displaying Cursors

Source: https://supabase.com/ui/docs/nextjs/realtime-cursor

This component is used to render individual cursors, including their pointer icon and associated username. It accepts styling and color props for customization.

```typescript
import { MousePointer2 } from 'lucide-react'

import { cn } from '@/lib/utils'

export const Cursor = ({
  className,
  style,
  color,
  name,
}: {
  className?: string
  style?: React.CSSProperties
  color: string
  name: string
}) => {
  return (
    <div className={cn('pointer-events-none', className)} style={style}>
      <MousePointer2 color={color} fill={color} size={30} />

      <div
        className="mt-1 px-2 py-1 rounded-sm text-xs font-bold text-white text-center"
        style={{ backgroundColor: color }}
      >
        {name}
      </div>
    </div>
  )
}

```

--------------------------------

### Infinite Query Fetching Logic

Source: https://supabase.com/ui/docs/react/infinite-query

Handles fetching a specific page of data, updating the state with new data, count, and error information. It appends new data to existing data and updates the fetch status.

```typescript
const { data: newData, count, error } = await query.range(skip, skip + pageSize - 1)

    if (error) {
      console.error('An unexpected error occurred:', error)
      setState({ error })
    } else {
      setState({
        data: [...state.data, ...(newData as TData[])],
        count: count || 0,
        isSuccess: true,
        error: null,
      })
    }
    setState({ isFetching: false })
```
Tokens:
Raw