Feedback Fort: Outseta with React & Supabase

This article explains how to implement the Feedback Fort application using Outseta for user management and Supabase for data storage with a React frontend. We'll focus on the high-level concepts and key integration points, with links to additional resources.

The Feedback Fort application provides these core capabilities:

1. User Authentication: Secure login/signup via Outseta
2. Feedback Submission: Authenticated users can submit feedback
3. Voting System: Users can upvote feedback items
4. Status Tracking: Feedback items have statuses (new, in-progress, completed, etc.)
5. Responsive UI: Works on mobile and desktop devices

👉 To jump straight into code, head on over to the Quick Start in the GitHub repo readme

The Big Picture

As described in Feedback Fort: An introduction, the application implements a split architecture with clear boundaries of responsibility:

• Outseta: Handles all user management (authentication, profiles, billing)
• Supabase: Stores application-specific data (feedback items and votes)

This separation avoids the synchronization challenges that often occur when duplicating user information across systems. Instead, we connect entities through UID references, maintaining a clean architecture while still providing all necessary functionality.

Getting Started

To implement Feedback Fort with Outseta, React, and Supabase, you'll need:

1. An Outseta account
2. A Supabase project
3. Basic knowledge of React

For a complete implementation, check out our GitHub repository, which includes:

• Database migration scripts
• Token exchange implementation
• Complete sample application

You can also see the live demo to experience the application in action. Feel free to sign up and add dummy feedback, we'll clean the database once a day.

Setting up Outseta with React

When integrating Outseta with React applications, there are several key considerations to ensure smooth functionality:

Enabling DOM Monitoring

For single-page applications like React, it's crucial to enable monitorDom in your Outseta configuration. This setting ensures Outseta can detect changes to the DOM structure as React renders components, rather than only processing elements during initial page load. 

You can see the full Outseta configuration and setup in the index.html file.

Using Environment Variables & Dynamic Redirect URLs

The application stores your Outseta subdomain in an environment variable to keep your codebase flexible and deployment-friendly. And overrides the registrationConfirmationUrl and authenticationCallbackUrl to ensure the user is always redirected to the current domain/page.

Data Attributes to load embeds and handle visibility

The application uses data attributes to load the Outseta embeds and handle visibility; you could also use the embed SDK code. See the Kitchen Sink demo for data attributes and code examples side by side.

<button
  data-o-anonymous // Only shown when user is logged out
  data-o-auth="1"
  data-mode="popup"
  data-widget-mode="login"
>
  Login
</button>

You can view the full embed setup in Navbar.jsx, and see additional uses of the visibility data attributes in for instance the AddFeedbackForm.jsx.

Supabase Database Structure

The Feedback Fort application uses three main database components in Supabase:

1. Feedback Table: Stores user-submitted feedback items with title, description, status, and reference to the person who submitted it
2. Vote Table: Tracks which users have voted for which feedback items
3. Active Feedback View: Provides a convenient way to retrieve active feedback with vote counts

Each table includes Row Level Security (RLS) policies that connect with the authentication system, ensuring that:

• Anyone can read feedback and votes
• Only authenticated users can create feedback and votes
• Users can only update their submitted feedback and placed votes
• No one can delete feedback or votes (deletion happens by updating deleted_at, ie. a soft delete)

As discussed in Feedback Fort: An introduction, the application does not replicate the users in Supabase. 

You'll find the full schema in the migrations folder and initial seed data in the seed file.

The Importance of Row-Level Security

Supabase works differently from traditional backends. Instead of securing data through custom API endpoints with business logic, Supabase uses Row Level Security (RLS) policies defined at the database level. This approach lets your frontend code query the database directly while enforcing security rules. Each request is authenticated and filtered according to the RLS policies you define, ensuring users can only access data they're permitted to see.

Because of this direct database access model, you must never use the Supabase service role key in frontend code. The service role key bypasses all RLS policies and would completely expose your data. This key should only be used in secure server environments (like Supabase Edge Functions) where privileged operations are necessary.

Unfortunately, bypassing RLS with service keys in client code is a common security mistake in many applications (especially those that are vibe codes), often leading to severe data breaches.

Integrating Outseta with Supabase

The key challenge in this architecture is connecting Outseta authentication with Supabase's Row Level Security (RLS). Feedback Forst solves this by implementing a token exchange mechanism in a Supabase Edge Function.

Token Exchange Process (Backend)

For detailed instructions on implementing the token exchange, refer to our guide: Integrate Supabase with Outseta Auth for Row Level Security (RLS).

In summary, the token exchange works as follows:

1. User authenticates with Outseta and receives an Outseta JWT
2. The application exchanges this token for a Supabase JWT using a Supabase Edge Function
3. The Supabase JWT includes claims from the Outseta token that can be used in RLS policies
4. All subsequent requests to Supabase use the Supabase JWT

This approach allows us to:

• Maintain Outseta as the source of truth for user management
• Leverage Supabase's powerful Row Level Security features
• Keep a clean separation of concerns between systems

Token Exchange Process (Frontend)

The React frontend needs to handle token management efficiently:

1. Retrieve the Outseta token: Get the authenticated user's Outseta JWT
2. Exchange for a Supabase token: Send the Outseta token to our Edge Function
3. Cache the result: Store the Supabase token until the Outseta token changes

The application initializes a Supabase client that dynamically sets the correct access token on each request using the above steps to ensure it always use the correct access token.

You can see the complete implementation in client.js, which shows both the token exchange logic and the Supabase client setup.

Deployment

Deploying your Feedback Fort application is straightforward. The GitHub repository includes detailed instructions for setting up both:

1. The Supabase Edge Function for token exchange
2. The React application on hosting services like Netlify or Vercel

We've already deployed a live demo that you can explore to see the application in action.