Files
supabase/apps/studio/components
Chris StocktonandChris Stockton 8a4bca34a7 feat: add documentation and UI integration for Before User Created hook (#36567)
* feat: add documentation and UI integration for Before User Created hook

- Added new guide: `before-user-created-hook.mdx`, documenting usage, inputs,
  outputs, and multiple complete examples for HTTP and SQL.
- Updated navigation menu and hook index table to include the new hook.
- Hook is now listed as available on Free and Pro plans.

Studio changes:
- Registered `Before User Created` hook in `hooks.constants.ts` with proper
  title, slug, and configuration keys.
- Enabled Docs button linking to hook guide in both `CreateHookSheet` and `HookCard` components.
- Extended hook listing page to support docs access via `secondaryActions`.

This hook allows developers to intercept and reject user creation across all
flows (email/password, OAuth, SSO, SAML, anonymous) - enabling custom signup
logic like domain allowlists, geofencing, or account gating.

* fix: add subnet to mdx lint allowed list

* fix: incorporate feedback and spelling changes

* feat: add allow/deny domain and CIDR examples to before-user-created hook

This commit enhances the documentation for the before-user-created auth hook:
- Adds production-ready SQL examples for blocking or allowing signups by email domain (signup_email_domains) and IP address or CIDR (signup_networks)
- Introduces enum-based classification (allow vs deny) for both domain and network restrictions
- Adds full migration-style snippets for easy copy/paste into Supabase SQL Editor
- Includes updated HTTP examples that delegate to Postgres functions via Supabase client rpc()
- Adds environment setup guidance and edge function scaffolding

* fix: pnpm format

---------

Co-authored-by: Chris Stockton <chris.stockton@supabase.io>
2025-07-02 14:54:07 -07:00
..
2025-07-02 15:54:39 +02:00
2025-07-02 15:54:39 +02:00

Writing components

Where to create your components

  • For components that declare the general structure and layout of a page:
    • /components/layouts/xxx
  • For components that are tightly coupled to a specific interface:
    • /components/interfaces/xxx
  • For components that are meant to be reusable across multiple pages:
    • /components/ui/xxx
  • Note: We're gradually moving files out of the to-be-cleaned folder into the respective folders as we refactor

Component structure

  • If a component has constants and utility methods that are tightly coupled to itself, keep them close to the component and enclose them in a folder with an index.tsx as an entry point
  • Otherwise it can just be a file on its own
  • For example:
    • components/ui
      - SampleComponentA
        - SampleComponentA.tsx
        - SampleComponentA.constants.ts
        - SampleComponentA.utils.ts
        - SampleComponentA.types.ts
        - index.ts
      - SampleComponentB.tsx
      

Template for building components


// Declare the prop types of your component
interface ComponentAProps {
  sampleProp: string
}

// Name your component accordingly
const ComponentA = ({ sampleProp }: ComponentAProps) => {
  return <div>ComponentA: {sampleProp}</div>
}

export default ComponentA