Extend with Supabase
What is Supabase?
Section titled “What is Supabase?”Supabase is an open-source Firebase alternative that provides developers with a comprehensive suite of backend services. When integrated with Frontend, it enables you to add data your storefront needs that doesn’t live in Shopify.
Products, inventory, carts, orders, and customer accounts stay in Shopify and come from the Storefront API. Supabase is for everything your storefront adds on top — wishlists, product reviews, saved carts, loyalty points, and shopping assistant conversation history.
By leveraging Supabase, you can enhance your storefront with:
- Powerful Database Solutions: Store and query relational data
- Serverless Functions: Execute backend code without managing servers
- File Storage: Manage user uploads securely
- Authentication: Control access to customer-only areas of your storefront
- Realtime Subscriptions: Build interactive, collaborative experiences
Connecting Your Project to Supabase
Section titled “Connecting Your Project to Supabase”Setting Up the Connection
Section titled “Setting Up the Connection”- Navigate to your Frontend dashboard
- Locate and click the Supabase button in the integrations section
- In the connection modal, you can either:
- Link an existing Supabase project by selecting it from your organization
- Create a new Supabase project directly from the interface
Once connected, your Frontend project will gain immediate access to Supabase’s features, allowing you to extend your storefront well beyond what Shopify stores for you.
Connection Benefits
Section titled “Connection Benefits”- Simplified Authentication Flow: Seamless user management
- Unified Development Experience: All services accessible through consistent APIs
- Automatic Environment Configuration: Frontend handles the connection details
Building with the Supabase Database
Section titled “Building with the Supabase Database”Supabase provides a powerful PostgreSQL database for the data your storefront adds on top of Shopify — reviews, wishlists, loyalty, and saved carts.
Key Database Features
Section titled “Key Database Features”- Full PostgreSQL Compatibility: Leverage the complete feature set of PostgreSQL
- Intuitive Interface: Manage your database through Supabase’s admin panel
- Row-Level Security (RLS): Implement granular access control directly in your database
- Foreign Key Relationships: Build complex data models with referential integrity
How Frontend AI Helps
Section titled “How Frontend AI Helps”Frontend AI can intelligently generate database operations for common scenarios:
- Creating optimal table structures
- Establishing relationships between data entities
- Writing secure RLS policies that protect your data
- Generating optimized queries for common operations
Leveraging Serverless Edge Functions
Section titled “Leveraging Serverless Edge Functions”Edge functions provide server-side capabilities without the complexity of managing infrastructure, bringing a new dimension to your Frontend applications.
What You Can Build
Section titled “What You Can Build”With Supabase Edge Functions and Frontend AI, you can implement functionality like:
- Third-party API Integration: Connect with services like OpenAI, Stripe, or email providers
- Data Processing: Transform and analyze data before presenting it to users
- Secure Operations: Perform actions that require API keys or sensitive information
- Custom Business Logic: Implement complex workflows beyond client capabilities
Deployment Workflow
Section titled “Deployment Workflow”Frontend streamlines the development of Edge Functions:
- Generate function code through Frontend AI
- Test directly in your development environment
- Deploy with a single click from your dashboard
- Access from your Frontend application using provided client libraries
Authentication Options
Section titled “Authentication Options”Supabase offers flexible authentication that can complement or replace Shopify’s built-in authentication.
Authentication Strategies
Section titled “Authentication Strategies”- For Shopify Storefronts: Leverage Shopify’s Customer Accounts for seamless checkout experiences
- For Custom Applications: Utilize Supabase Auth with multiple provider options:
- Email/Password
- Magic Links
- OAuth providers (Google, GitHub, etc.)
- Phone authentication
Integration Benefits
Section titled “Integration Benefits”- Unified User Profiles: Combine authentication with database records
- Permission-Based Access: Control what each customer can access in your storefront
- Custom User Flows: Design registration and login experiences that match your brand