WP Supabase Integration – Documentation

WP Supabase Integration:
The Ultimate Guide

1. Introduction & Overview

Welcome to the comprehensive guide for the WP Supabase Integration plugin. This manual is designed to provide you with all the information you need to seamlessly connect your WordPress site with your Supabase project, enabling real-time user synchronization, secure authentication, and advanced role management.

Our plugin solves the long-standing challenge of integrating the world’s most popular CMS with the modern, powerful backend of Supabase. Forget fragile APIs, clunky third-party tools, or time-consuming custom code. WP Supabase Integration offers a fully-native, no-code solution that brings enterprise-grade user management to your WordPress site, whether it’s a traditional blog, a headless application, a membership platform, or an e-commerce store.

2. Key Features Explained

2.1. Authentication That Just Works

Experience a robust and secure authentication system engineered for the modern web. The plugin offers Passwordless Magic Login via Supabase, providing a streamlined and highly secure user experience by eliminating traditional passwords. JWT-based authentication is supported out-of-the-box, ensuring modern security standards and enabling seamless integration with front-end applications. You have full control to configure custom redirects after successful login or signup, allowing for tailored user journeys. Built-in encryption and advanced security headers guarantee enterprise-grade protection for your user data. Say goodbye to insecure login flows or token mismatches. This is security by design, not by patchwork.

2.2. Real-Time, Two-Way User Sync

Achieve instant, bi-directional user and role synchronization between your WordPress and Supabase platforms.

  • Supabase to WordPress: New users created or authenticated via Supabase (e.g., through your mobile app or external frontend) are automatically synced and created as users in WordPress.
  • WordPress to Supabase: Any user registrations or updates made directly within WordPress instantly reflect in your Supabase project.
  • Role-Based Mapping: Define precise rules to map Supabase roles or custom user statuses (e.g., anon, authenticated, pro_plan) to specific WordPress roles (e.g., Subscriber, Contributor, Author, Administrator). This powerful feature ensures access levels are consistent across both systems.
  • Conflict Prevention: The plugin includes intelligent mechanisms to avoid role conflicts, allowing you to establish a single source of truth for user permissions. This simplifies management and enhances security.
Whether you’re running a membership site, a SaaS product, or an eCommerce platform, your user data stays consistent and clean across both systems, eliminating manual data entry and potential inconsistencies.

2.3. A Smarter Admin Experience

Manage your integrated ecosystem with unprecedented ease through a clean, intuitive, and powerful admin dashboard within your WordPress environment.

  • Live Sync Status & Error Logs: Gain immediate insights into the health of your integration. Real-time logs allow you to quickly identify and resolve any synchronization or authentication issues.
  • Built-in Testing Tools: Validate your setup with one-click diagnostic tests that confirm the connection and data flow between WordPress and Supabase.
  • Copy-Paste Setup Instructions: Our guided setup process ensures you can get started in under 5 minutes, providing clear, actionable instructions.
Even non-technical users can configure and deploy a fully synced WordPress-Supabase ecosystem, significantly reducing reliance on developer resources.

2.4. Fortified Security Protocols

Security is not an afterthought; it’s fundamental to WP Supabase Integration.

  • AES-256-CBC Encryption: Sensitive credentials, such as your Supabase Service Role Key, are encrypted at rest within your WordPress database using AES-256-CBC, a robust and industry-standard encryption algorithm.
  • Rate Limiting: Protects your integration endpoints against brute-force attacks and denial-of-service attempts by limiting the rate of incoming requests.
  • Security Headers: Automatically sets hardened HTTP security headers (e.g., X-Content-Type-Options, X-Frame-Options, Content-Security-Policy) for all relevant responses. These headers instruct web browsers on how to behave, mitigating common web vulnerabilities such as Cross-Site Scripting (XSS) and Clickjacking.
  • Log Sanitization: All internal event logs generated by the plugin are carefully sanitized. This means that sensitive user data or critical system information is never stored in plain text within the logs, preventing accidental exposure or data leaks.
This plugin is built for developers and site owners who prioritize privacy, compliance, and robust security for their production environments.

2.5. Built for Modern Use Cases

WP Supabase Integration is versatile and designed to power a wide array of modern web applications:

  • Membership Sites: Seamlessly assign access levels, sync member statuses, and manage gated content based on Supabase authentication and roles.
  • WooCommerce Stores: Link your e-commerce customer accounts directly with Supabase users, centralizing data and streamlining processes for subscriptions and orders.
  • SaaS Products: Control subscription logic, user access, and complex user flows, extending your SaaS application with flexible WordPress content capabilities.
  • Learning Platforms (LMS): Track student enrollments, course progress, and learning data in Supabase, while delivering course content and managing student roles through WordPress.
  • Community Hubs: Enable users to register once and manage their roles, permissions, and profiles across all your frontends and backend community platforms effortlessly.
  • Headless WordPress & Frontend Apps: Perfect for developers using React, Next.js, Vue, or other frameworks with Supabase as their backend, needing to sync user data and authentication with WordPress for content management or specific WP features.

3. Quick Start Guide

Get your WordPress and Supabase connected in under 5 minutes with these simple, no-code steps.

  1. Install the Plugin

    From your WordPress admin dashboard, navigate to **Plugins > Add New**. Search for “WP Supabase Integration”, then click “Install Now” and “Activate”. This is your rocket engine for integration!

  2. Add Supabase Credentials

    Once activated, go to the new “**Supabase Integration**” menu item in your WordPress admin sidebar. In the main settings tab, paste your **Supabase Project URL** and **Public Anon Key** into the respective fields. These can be found in your Supabase Project Settings > API.

  3. Run Connection Test

    Click the “Run Connection Test” button within the plugin dashboard. This built-in diagnostic tool will verify secure real-time data flow between your WordPress site and Supabase project. A success message confirms your basic integration is live!

  4. Enable Webhook (Optional for Full Two-Way Sync)

    For full bi-directional user and role synchronization, navigate to the “**Webhooks**” tab in the plugin. Copy the provided Webhook URL and paste it into your Supabase project’s “Database > Webhooks” section. Configure the events you want to trigger (e.g., `INSERT` on auth.users for new sign-ups). Your systems are now a unified cosmic entity!

    Important: Detailed webhook setup instructions with screenshots and specific code examples for Supabase triggers (like handle_new_user) are provided directly within the plugin’s Webhooks tab.

4. Advanced Setup & Configuration

4.1. Supabase Project Database Setup

To leverage the full power of user profile management and two-way sync, it’s highly recommended to set up a public.profiles table linked to auth.users in your Supabase project. This table allows you to store additional user-specific metadata beyond what’s in auth.users.

Recommended profiles Table Schema:

CREATE TABLE public.profiles (
  id uuid REFERENCES auth.users ON DELETE CASCADE NOT NULL PRIMARY KEY,
  first_name text,
  last_name text,
  full_name text GENERATED ALWAYS AS (first_name || ' ' || last_name) STORED,
  avatar_url text,
  -- Add any other custom profile fields relevant to your application
  updated_at timestamp with time zone DEFAULT now()
);

ALTER TABLE public.profiles ENABLE ROW LEVEL SECURITY;
CREATE POLICY "Public profiles are viewable by everyone." ON public.profiles FOR SELECT USING (true);
CREATE POLICY "Users can insert their own profile." ON public.profiles FOR INSERT WITH CHECK (auth.uid() = id);
CREATE POLICY "Users can update their own profile." ON public.profiles FOR UPDATE USING (auth.uid() = id);

New User Trigger (for profiles table):

This trigger automatically creates a new row in your public.profiles table whenever a new user signs up via Supabase Authentication (auth.users).

CREATE FUNCTION public.handle_new_user()
RETURNS TRIGGER AS $$
BEGIN
  INSERT INTO public.profiles (id)
  VALUES (new.id);
  RETURN new;
END;
$$ LANGUAGE plpgsql SECURITY DEFINER;

-- Important: Revoke execution for public role
REVOKE EXECUTE ON FUNCTION public.handle_new_user() FROM public;

CREATE TRIGGER on_auth_user_created
  AFTER INSERT ON auth.users
  FOR EACH ROW EXECUTE PROCEDURE public.handle_new_user();

4.2. Magic Link Edge Function for Secure Redirects

For seamless passwordless authentication and custom redirects after a user clicks a magic link, we highly recommend deploying a simple Supabase Edge Function. This function intercepts the magic link callback, verifies the token, and securely redirects the user to your intended destination (e.g., your React app dashboard or a specific WordPress page).

// Example: supabase/functions/magic-login-redirect/index.ts
// (Detailed code provided in plugin dashboard)
// This function captures the magic link token and securely redirects.
// Full code and deployment instructions are available in the plugin dashboard.
// It typically involves parsing the URL, setting Supabase session, and redirecting.

import { createClient } from 'https://esm.sh/@supabase/supabase-js@2'

Deno.serve(async (req) => {
  const supabaseClient = createClient(
    Deno.env.get('SUPABASE_URL') ?? '',
    Deno.env.get('SUPABASE_ANON_KEY') ?? '',
    {
      auth: { persistSession: false },
    }
  )

  const { searchParams } = new URL(req.url)
  const token = searchParams.get('token')
  const next = searchParams.get('next') || Deno.env.get('HOME_URL') || 'https://yourwordpresssite.com/dashboard' // Fallback URL

  if (token) {
    // Exchange the token for a session
    const { data, error } = await supabaseClient.auth.verifyOtp({ token, type: 'magiclink' });
    if (error) {
        console.error('Magic link verification error:', error);
        return new Response('Authentication failed', { status: 401 });
    }
    // Redirect with the access token (or cookie if you set it)
    const redirectUrl = new URL(next);
    // You might also pass the access_token in hash or query for client-side frameworks to pick up
    // redirectUrl.hash = `access_token=${data.session.access_token}`;
    // Or set a cookie here if the client is expecting it

    return new Response(null, {
      status: 303, // See Other
      headers: {
        Location: redirectUrl.toString(),
      },
    })
  }

  return new Response('Missing token', { status: 400 })
})

4.3. Webhook Secrets & Security

To ensure the integrity and security of your bi-directional sync, it’s critical to use webhook secrets. The plugin generates a unique secret key that you should configure in your Supabase webhook settings. This secret acts as a shared password, allowing the plugin to verify that incoming webhook requests from Supabase are legitimate and have not been tampered with.

Always protect your webhook secrets and avoid exposing them in public repositories.

5. User & Role Management

WP Supabase Integration offers powerful, automated tools for managing user data and roles consistently across your WordPress site and your Supabase-backed application.

5.1. Two-Way Synchronization

The core strength of the plugin lies in its seamless, real-time bi-directional synchronization:

  • Supabase to WordPress: When a user signs up (e.g., via your app’s frontend) or is updated in Supabase, their profile and role information is automatically pushed to your WordPress user database. This is essential for managing content access, membership levels, or e-commerce purchases within WordPress.
  • WordPress to Supabase: Conversely, when a new user registers directly on your WordPress site or an existing WordPress user’s profile/role is updated, these changes are instantly reflected in your Supabase auth.users and public.profiles tables. This keeps your Supabase backend as the central source of truth.
This eliminates manual data entry, prevents data silos, and ensures all parts of your system are always working with the most current user information.

5.2. Role Mapping

The plugin’s intuitive dashboard allows you to define flexible role mapping rules. This is crucial for translating user states in Supabase (which might be custom roles or subscription statuses) into standard WordPress user roles.

Role Mapping Table Example:

Supabase Role/Status WordPress Role Description
anon Subscriber Default role for new users/visitors
authenticated Contributor Logged-in user with basic content creation access
pro_plan Author Users with ‘pro’ subscription, higher privileges
admin_role Administrator Full administrative access across platforms

You can add as many custom mappings as your application requires, ensuring that a user’s permissions are correctly applied across both platforms.

5.3. Conflict Prevention & Single Source of Truth

The plugin is designed to intelligently handle potential role conflicts. You can configure which platform acts as the “single source of truth” for specific user attributes or roles. This prevents inconsistencies and ensures that user permissions are always correct, regardless of where the user data originated or was last updated.

6. Security Protocols

Security is paramount, and WP Supabase Integration is built with robust protocols to protect your data and platform integrity.

  • AES-256-CBC Encryption: Sensitive credentials (like your Supabase Service Role Key) are encrypted at rest within your WordPress database using AES-256-CBC, a strong and widely trusted symmetric encryption standard. This adds an extra layer of protection against unauthorized access.
  • JWT-based Authentication: Leverages JSON Web Tokens (JWTs) for secure, stateless authentication. JWTs provide a cryptographically signed token that verifies user identity without needing to store session data on the server, reducing session vulnerabilities.
  • Rate Limiting: Protects your integration endpoints against brute-force attacks and excessive requests by limiting the rate of incoming connections.
  • Security Headers: Automatically sets hardened HTTP security headers (e.g., X-Content-Type-Options, X-Frame-Options, Content-Security-Policy) for all relevant responses. These headers instruct web browsers on how to behave, mitigating common web vulnerabilities such as Cross-Site Scripting (XSS) and Clickjacking.
  • Log Sanitization: All internal event logs generated by the plugin are carefully sanitized. This means that sensitive user data or critical system information is never stored in plain text within the logs, preventing accidental exposure or data leaks.
  • Best Practices Adherence: The plugin is developed following secure coding principles and integrates with Supabase’s own robust security features, providing a layered defense approach.
Best Practice: Always store your Supabase keys securely. **Never expose your Supabase Service Role Key on the client-side of any application.** This key has administrative privileges. Only use the Public Anon Key in client-side code.

7. Troubleshooting Common Issues

If you encounter any issues while setting up or using WP Supabase Integration, please refer to these common troubleshooting steps. The plugin’s built-in Event Log is your first line of defense for diagnostics.

7.1. Connection Test Failed

If your one-click connection test within the plugin dashboard fails:

  1. Supabase Project URL & Public Anon Key: Double-check that you have copied and pasted these credentials correctly into the plugin settings. Ensure there are no leading/trailing spaces. These can be found under your Supabase Project Settings > API.
  2. Network Connectivity: Verify that your WordPress server can reach Supabase’s API. A firewall on your server or a security policy from your hosting provider might be blocking outgoing HTTPS connections to Supabase’s endpoints. Contact your hosting provider if you suspect this is the case.
  3. Supabase Project Status: Log into your Supabase dashboard and ensure your project is active and healthy. Check the “Project Status” section.

7.2. Users Not Syncing Bi-Directionally

If user data or roles are not synchronizing between WordPress and Supabase:

  1. Webhook Configuration: This is the most common cause. Ensure your webhook in Supabase is correctly configured:
    • The **Webhook URL** must be the exact URL provided by the plugin.
    • The **Webhook Secret** in Supabase must exactly match the secret generated by the plugin.
    • The correct **events** (e.g., `INSERT` on auth.users for new sign-ups).
  2. Plugin Event Log: Always check the plugin’s Event Log (accessible from the dashboard). It will record specific errors if a sync attempt failed, providing valuable clues.
  3. Role Mapping Rules: If roles aren’t syncing correctly, review your role mapping rules in the plugin dashboard. Ensure that Supabase roles/statuses have a corresponding WordPress role defined.
  4. Permissions: Verify that your Supabase database policies (Row Level Security) allow the necessary `SELECT`, `INSERT`, `UPDATE` operations on your `profiles` table by the authenticated user role.

7.3. Authentication Errors / Magic Link Issues

If users are having trouble logging in, receiving magic links, or experiencing incorrect redirects:

  1. Supabase Authentication Settings: Review your Supabase Authentication settings. Ensure “Allowed Callback URLs” include the exact redirect URLs your application uses after authentication. Also, verify email templates are correctly configured if using email-based auth.
  2. Magic Link Edge Function: If you’ve deployed a custom Magic Link Edge Function (as recommended for advanced redirects), ensure it’s correctly deployed, the environment variables are set, and its logic correctly handles the redirection.
  3. JWT Secret Mismatch: The JWT secret in your plugin settings must exactly match the JWT secret in your Supabase project settings (under Project Settings > API). A mismatch will cause token verification failures.
  4. Caching: Clear any caching plugins on your WordPress site or server-side caches, as stale cache can sometimes interfere with authentication flows.

8. Frequently Asked Questions

For quick answers to common inquiries, refer to this extended FAQ.

What is WP Supabase Integration?
A powerful WordPress plugin that connects your WordPress site with your Supabase project. It syncs users, handles authentication (including passwordless login), and maps roles — giving you full control across both platforms, without needing to write custom backend code.
Can I use this with my React or frontend app?
Yes! If your app (built in React, Next.js, Vue, etc.) uses Supabase for authentication or data, you can use this plugin to connect that app to WordPress. It lets you manage users, roles, and access permissions across both platforms seamlessly.
How does it help frontend developers?
Frontend developers can use Supabase as their backend and let WordPress handle content, user roles, and memberships — all while syncing everything in real-time. No need to reinvent auth systems or build complex APIs.
What use cases does this plugin support?
  • Frontend apps built with Supabase (React, Vue, etc.)
  • WordPress-based membership or LMS platforms
  • WooCommerce + Supabase sync
  • SaaS products needing user management
  • Communities needing single login between frontend and WordPress
Does it support two-way synchronization?
Yes. Users created or updated in Supabase are synced to WordPress — and vice versa. You can also set up optional webhooks to enable instant real-time sync for certain actions.
Is it secure enough for production use?
100%. It includes:
  • JWT-based login
  • AES-256-CBC encryption
  • Security headers
  • Rate limiting
  • Sanitized logs
This is built for developers who care about privacy, compliance, and security.
Can I map Supabase subscriptions or roles to WordPress roles?
Yes. You can configure role mapping so that a user’s status in Supabase (e.g., “Pro”, “Student”, “Admin”) maps to the correct WordPress role — and keep those roles in sync.
Do I need to write custom code or APIs to use it?
Not at all. Everything is handled inside the WordPress dashboard with guided setup. No coding or third-party bridges required.
How fast is the setup?
Setup takes less than 5 minutes:
  • Install the plugin
  • Paste your Supabase credentials
  • Run the built-in connection test
  • Optionally enable two-way sync with one webhook
What happens if my app, Supabase, or WordPress go out of sync?
The plugin provides a status dashboard, real-time logs, and manual sync tools so you can test and fix issues instantly. It’s designed for reliability and observability.
Is this plugin compatible with WooCommerce or LearnDash?
Yes. It works alongside major plugins like WooCommerce, LearnDash, MemberPress, and more — syncing users and roles with Supabase smoothly.