MGX Docs

Appearance

MGX

Integrations

Supabase Connect ​

Supabase is an open-source backend platform that allows users with zero development experience to easily configure a backend for their websites. It eliminates the need for complex coding and offers a suite of tools to handle backend operations seamlessly.

When creating websites with MGX, the added data is stored only in the browser's memory and lost upon refresh or closure. To enable persistent data storage and backend-like functionality, we provide a solution by connecting MGX with Supabase.

Key Advantages ​

  • No Development Experience Required: Designed for non-technical users, making it easy to get started without prior coding knowledge.
  • Quick Setup: Get your backend up and running in minutes to accelerate your development process.
  • Highly Scalable: Seamlessly adapt to user growth, allowing your project to expand without limitations.
  • Cost-Effective: Offers a free tier ideal for small projects and startups.

By integrating MGX with Supabase, you can transform your website into a fully functional application with persistent storage and advanced features.

Connecting Supabase to MGX ​

Linking your Supabase account to MGX is straightforward and designed to be user-friendly, even for those with minimal technical expertise. Here's a concise guide to get you started:

1. Start the Supabase Integration in MGX

  • Open your MGX project chat interface.
  • Locate the Supabase tab at the top-right corner and click the Connect Supabase button.
  • MGX will present a connection setup interface that you can follow.

2. Authenticate and Configure Your Project A popup will appear, prompting you to sign in to your Supabase account.

  • Select your organization from the dropdown menu.
  • Click Authorize MGX to authorize your Supabase account.
    (Connection completes in seconds – no manual configuration needed)

Once authorized, you can:

  • Choose an existing Supabase project from the list, or
  • Click +Add New One to add a new organization instantly.
    (If you need guidance, the MGX Assistant is available to walk you through Connecting Supabase to MGX)

3. Automatic Configuration

  • Once your project is selected, MGX will automatically connect to your Supabase project. It will gather your database structure, tables, and security settings.
  • When you see the "Supabase Connected" notification, your backend is fully configured and ready for use.

Enhancing Your App with Supabase Features: ​

User Authentication

  • User Accounts and Login: Enable sign-up and login with options like email/password or social logins (Google, Twitter, Github).

Data Storage

  • Store and Use Real Data: Save app data (e.g., user profiles, posts) and display up-to-date info to users.

Edge Functions

  • Custom backend logic: Implement specific functionality by running custom backend code on Supabase (e.g., email sending, payment processing, and external API integration).

By following these simple steps, you can seamlessly connect Supabase to MGX and unlock a wealth of features to make your app truly functional.

User Authentication ​

After creating your app in MGX, one of the first things you'll likely want to implement is user authentication. Supabase Auth simplifies adding authentication and authorization to your app. In this process, MGX will guide you through two methods: Email and Password and Social Logins (Google).

Email and Password ​

1. Connect Supabase with MGX

  • Ensure you have a valid Supabase account.
  • Click the authorization button in the top-right corner of the chat interface to authorize your Supabase account.
  • Select the Supabase project you want to use.

2. Tell the Agents Your Requirements

  • Input your requirements in the chat. For example, you can simply prompt: "Add authentication".
  • This will typically generate a basic login and registration page connected to Supabase's authentication system.

3. Create Users for Testing

  • Use the newly added login/registration interface to create a test user.
  • Refresh the page to verify the user session persists.
  • Optionally, go to your Supabase dashboard, navigate to Authentication > Users, and manually add a user for testing.

4. Deploy Your App

  • Deploy your app to MGX's app world.

Social Logins (Google) ​

1. Configure Google OAuth in Supabase Project

  • Navigate to the Authentication page in your Supabase dashboard.
  • Go to the Sign In/Up subpage.
  • Locate the Google option and toggle the switch to enable it.
    (For detailed Supabase configuration steps, refer to the Configuring Google OAuth in Supabase or Supabase Docs.)

2. Tell the Agents Your Requirements

  • Input your requirements in the chat. For example: "Add Google authentication".
  • This will typically add a Continue with Google button to your login page.

3. Test Google Authentication

  • Go to the login page.
  • Click the Continue with Google button.
  • Log in with a Google account and verify the user profile is correctly updated.
  • Complete the Google OAuth flow to ensure the user is redirected back to your app.

4. Deploy Your App

  • Deploy your app to MGX's app world.

Configuring Google OAuth in Supabase ​

1. Create a Google Cloud Project

  • Access the Google Cloud Console
  • Create a New Project
    • Click the dropdown menu at the top and select New Project.
    • Enter a project name, select a billing account, and click Create.

2. Configure Google OAuth Credentials

  • Set Up the Consent Screen
    • In the search bar, type OAuth and open the OAuth consent screen.
    • Fill in your app's name, user support email, and other required fields.
    • Select External or Internal, then click Create.
  • Create an OAuth Client ID
    • Click Create OAuth Client, then select OAuth Client ID.
    • For Application Type, choose Web application.
    • In Authorized redirect URIs, add the callback URL from the Supabase dashboard.
    • Click Create and note down the generated Client ID and Client Secret.

3. Configure Google OAuth in Supabase

  • Log in to the Supabase Dashboard
  • Enable Google OAuth
    • Navigate to the Authentication page.
    • In the Providers section, find the Google option and enable it.
    • Add the Client ID and Client Secret generated earlier to the respective fields.
  • Save Configuration
    • Click Save to apply the changes.

Data Storage ​

After the authentication configuration of your app is completed, you may also want to store user data.
Once connected to Supabase, simply tell MGX what data you want to save in the database. The agents will automatically configure database tables and integrate them directly into your UI.

1. Define Your Requirements

  • Enter your requirements in the chat. For example: "Please ensure that new trip records are saved to the database".
  • Describe the data you want to store as clearly as possible.
  • MGX will automatically configure the required database structure based on your input.

2. Test the Functionality in MGX

  • Create sample data in your app, such as adding a few "trip records" through the UI.
  • Save the data and refresh the page. The data will be synced to the Supabase database.
  • Log in to Supabase and verify whether the newly added data exists in the database.

3. Validate Data Synchronization Between MGX and Supabase

  • Open the Supabase dashboard and navigate to the Table Editor.
  • Modify existing data or create new data.
  • Changes made in Supabase will be synced in real-time to your MGX app.
  • Return to MGX and verify whether the modified or newly created data is displayed correctly.
  • If the data syncs successfully, your configuration is complete.

4. Deploy Your App

Edge Functions ​

Supabase Edge Functions are serverless backend programs deployed on server nodes close to your users. They eliminate the need to build and maintain traditional servers, enabling you to run any custom logic with lower network latency and faster response times. In most web applications, the frontend (buttons, forms, UI) handles basic interactions, but some critical operations must run on the backend, such as:

  • Automatically sending a welcome email after user registration;
  • Invoking AI APIs to analyze or score content upon form submission;
  • Integrating third-party payment gateways and recording order details during checkout. All of these operations are implemented via Edge Functions.

Common Use Cases ​

Using Supabase Edge Functions in MGX, you can:

  • Send welcome emails: Automatically email new users a welcome message with next-step guidance after they register, boosting engagement and onboarding experience.
  • Handle user form submissions: Upon feedback, sign-up, or comment submission, automatically generate and send a confirmation notification (e.g., "We've received your feedback and will review it shortly") so users know their action succeeded.
  • Schedule reminders: Set daily or weekly notifications via email or push (for meetings, tasks, or events) to help users manage their time and stay productive.
  • Leverage AI services: After the user enters text, automatically call AI APIs like OpenAI for grammar checking or intelligent rewriting, and return the optimized results to the user.
  • Process online payments: When users initiate a payment on your e-commerce or service platform, integrate with gateways like Stripe to securely handle transactions and display clear success or failure pages with order details.

Key Storage and Management ​

Many applications require keys or API credentials to connect with third-party services (e.g., Stripe, OpenAI). When Supabase is connected, MGX provides a secure way to manage and use these secrets. Through MGX's integration with Supabase, whenever a function needs a secret, MGX automatically detects it and prompts you to enter the required value. You simply click the Agent's "Add API Key" button and enter your key; MGX then encrypts and stores it in Supabase's Edge Functions Secrets Manager. At runtime, these keys are securely injected into the function, preventing credentials from being stored in plaintext.

Add and Deploy Backend Functions ​

After connecting to Supabase, tell the Agent what you need:

  • In the chat, type your request. For example: "Generate a webpage that calls the Gemini API to estimate food calories and returns the result when I upload a food photo."
  • Once the Agent has generated the code, two buttons will appear: "Add API Key" and "View in Edge Function".
  • Click "Add API Key".
  • Enter your API key and click "Send".
  • Click "View in Edge Function".
  • You will be redirected to the Supabase Edge Function page. Security Note: All keys are encrypted and stored in Supabase; MGX cannot access them.

FAQ ​

How do I add Supabase backend features to my application?
Does Supabase support social logins?
Do I need to create a separate Supabase project for my app?
After connecting Supabase, will the connection remain if I remix my project?
Can I use one Supabase database for multiple MGX projects?
Why isn’t my project showing up under Supabase organizations?
Why do I see “The organization has been bound by another user” when connecting to Supabase?