Enabling Data & Users on your website

Simple websites use frontend code to display content in a visitor's browser. For more complex websites and web applications, you may need to store data, authenticate user identities, or run additional server-side logic that doesn't happen in the browser.

Data & Users adds backend support to your B12 site, powered by Supabase. This lets you build websites with databases, user authentication, secrets, edge functions, real-time features, and more.

Enabling Data & Users

1. In the left sidebar, click Data & Users.
2. Click Enable Data & users.
3. Wait 1–2 minutes while the feature is set up. A new settings panel will appear when it's ready. Once enabled, you'll see two sections in the panel: Secrets and Edge Functions.

Building with the AI Agent

Once Data & Users is enabled, the AI Agent can manage your Supabase backend directly and write both the frontend and backend code needed to bring a feature to life. You describe what you want in plain language, and the Agent handles the technical implementation.

Here's what the Agent can build for you:

• User accounts and login: Set up email and password sign-up, email verification, password reset flows, and members-only pages that redirect unauthenticated visitors.

• Database management: Create and manage database tables, define relationships between them, and set access rules so users only see data they're allowed to see.

• Third-party API connections: Connect external services via edge functions. Store your API keys securely as Secrets, and the Agent will reference them in the code it writes.

• Real-time features: Build pages that update automatically when new data comes in, without requiring a page refresh.

Example prompts to try:

Add a login page with email and password sign-up, and send a confirmation email when someone registers.

Add a chatbot that uses my OpenAI API key to answer questions about my business.

Secrets and edge functions

Secrets and edge functions work together to keep sensitive information secure while allowing your website to communicate with external services.

Secrets

Secrets are a secure place to store sensitive information your website needs (like API keys) without exposing that information in your code. When you save a secret, it's encrypted and stored securely. Your edge functions can access it by referencing its name rather than its actual value.

Example: Instead of writing openai_key = "sk-abc123..." directly in your code — where anyone with access could see it — you store that value as a secret and reference it as process.env.OPENAI_KEY.

Edge functions

Edge functions run code on your backend to keep secrets secure and handle tasks that can't be completed in the browser. An edge function may respond to a specific trigger ( like a form submission or an incoming request from another service) and can help you incorporate third-party tools into your workflows

Common uses for secrets and edge functions together include:

• Calling third-party APIs, such as sending transactional emails or processing payments
• Receiving data from external services (also called webhooks)
• Validating or transforming data before it's saved

Example: When a customer places an order through your website, an edge function can automatically send them a confirmation email in the background using your email provider's API key stored as a secret.