Connect Your Web App to Supabase with Hostinger Horizons

Title: How to Integrate Supabase with Your Web App Using Hostinger Horizons

Date: April 23, 2025
Author: Aris Sentika

Hostinger Horizons is a no-code AI-powered platform that allows you to build fully functional web applications simply by describing your project. To enhance its capabilities, it now supports integration with Supabase—a powerful backend-as-a-service tool.

In this guide, you’ll learn how to connect your Hostinger Horizons web app to a Supabase database, enabling features like user authentication, dynamic content, and real-time updates. We’ll also walk you through common errors and how to fix them.

Why Use Supabase?

Supabase brings dynamic functionality to your web app by providing a backend infrastructure with features like:

– Dynamic data storage – Accept and store user input, such as account creation or personalized content.
– Authentication – Use built-in email or social login mechanisms.
– Real-time data – Enable collaboration and live updates using Supabase Realtime.
– API integrations – Connect third-party services like OpenAI for advanced capabilities.

If your web app is static and doesn’t require user interaction, Hostinger Horizons alone is enough. But for interactive features, Supabase is essential.

Common Use Cases:

– User login and registration
– Personalized dashboards
– Collaborative tools (e.g., chat, notes)
– Real-time notifications

How to Connect Supabase with Hostinger Horizons

Step 1: Build Your Web App

Before integrating Supabase, make sure your app is fully developed in Hostinger Horizons. For example, prompt the AI to build a login and sign-up page:

Prompt:
Create a login page that asks users for their email address and password. On that page, add a link to the sign-up page. Set up authentication, which I’ll enable using Supabase later.

Step 2: Create a Supabase Account

1. Visit the Supabase sign-up page.
2. Enter your email and password, then click Sign Up.
3. Confirm your email via the link sent to your inbox.
4. Fill in your organization details and select a plan (choose the free plan to start).
5. Click Create Organization.
6. Create a new project by entering the required information and clicking Create New Project.

Step 3: Connect Supabase to Hostinger Horizons

1. Open your Hostinger Horizons dashboard.
2. Navigate to Supabase → Add Organization.
3. Log in to your Supabase account in the pop-up window.
4. Authorize Hostinger Horizons to access your Supabase account.
5. Select your Supabase organization and project, then click Connect.
6. Confirm the integration when prompted.

Once connected, your project status in Hostinger Horizons will show as Connected.

Step 4: Set Up Database Tables (If Required)

Hostinger Horizons might prompt you to run an SQL query to set up necessary database tables. If so:

1. Go to your Supabase project dashboard.
2. Open the SQL Editor from the sidebar.
3. Paste the provided SQL query and click Run.

Testing the Integration

To verify everything works:

– Use Hostinger Horizons’ preview feature to interact with your app.
– Test user registration, login, and other dynamic features.
– For example, in a note-taking app, create an account, log in, and set a reminder note.

If features work as expected—such as notes persisting after login or notifications triggering—you’ve successfully integrated Supabase.

Troubleshooting Common Issues

1. Authentication Not Working

– Ensure users confirm their email via the link sent by Supabase.
– If the confirmation link uses localhost:3000, update it:
– Go to Supabase → Authentication → URL Configuration.
– Replace the Site URL with your live app’s domain.
– Save changes and retry the verification.

2. Real-time Features Not Syncing

– Supabase’s Realtime must be manually enabled:
– Go to Supabase → Database → Publications.
– Under Source, toggle Replication on for necessary tables.

3. Invalid API Keys

– If you manually inserted API keys and encounter errors, paste the error into Hostinger Horizons and ask it to fix the issue.

Security Best Practices

– Store API keys in environment variables, not in your app’s code.
– Use HTTPS to encrypt communication between your app and Supabase.
– Set up custom domains and configure CORS to restrict access.
– Use Supabase’s Row Level Security (RLS) to ensure users can only access their own data.
– Regularly review user roles and permissions in your database.

Conclusion

Hostinger Horizons makes it easy to build apps without coding. By integrating Supabase, you can unlock advanced features like authentication, real-time data, and dynamic content.

To integrate:

1. Build your app in Hostinger Horizons.
2. Create a Supabase account and project.
3. Authorize the integration from the Horizons dashboard.
4. Set up your