Posts tagged #outseta

📝 ✨ ~ Customer Bastien: your MCP server has a permission problem

Tue, 10 Mar 2026 00:00:00 GMT

Back in August I built the Outseta MCP server MVP to showcase how one could enable Jean-Claude (my Claude Code instance) and other AI tools to manage stuff in your Outseta account. Stuff like users, billing, email lists etc.

No delete tools were included, but it had both write and update tools. After months of very little feedback Bastien opened an issue that made me go "oh, I didn't even know that was possible."

The problem I hadn't noticed

When you add an MCP server to Claude Desktop, it asks what permission level you want for the tools. Always allow, require approval, or never. Pretty standard.

The catch? Claude Desktop was showing all 15 Outseta tools as one undifferentiated blob. "Other tools." So your choices were: decide permission settings for all. Or do them one by one.

Bastien pointed to the Notion MCP server as the reference. There, read-only tools and write tools show up as separate groups. You can batch set the permission for each group 🤯

I had not noticed that MCP servers could do that.

The fix: tool annotations

Turns out the MCP spec has an annotations system. You set hints on each tool — readOnlyHint, destructiveHint, openWorldHint — and the client uses those to group and scope permissions.

I defined three tiers:

const READ_ANNOTATION = {
  readOnlyHint: true,
  destructiveHint: false,
  openWorldHint: true,
} as const;

const WRITE_ANNOTATION = {
  readOnlyHint: false,
  destructiveHint: false,
  openWorldHint: true,
} as const;

const DESTRUCTIVE_ANNOTATION = {
  ...WRITE_ANNOTATION,
  destructiveHint: true,
} as const;

Then categorized all 15 tools:

7 read-only — get_accounts, get_people, get_plans, get_plan_families, get_email_lists, get_email_list_subscribers, preview_subscription_change
7 write — register_account, create_person, add_person_to_account, create_plan, create_plan_family, create_email_list, subscribe_to_email_list
1 destructive — change_subscription

And now Claude Desktop shows them as separate groups with independent permission settings:

Why `change_subscription` gets the destructive flag

This was the one I had to think about. Most write tools here are creating things — a new person, a new plan. Easy to undo. But changing a subscription hits billing. Prorations, invoice changes, real money moving. That's not a casual "oops, delete it" situation.

Claude Desktop doesn't actually render a separate group for destructive vs. regular writes — yet. But destructiveHint is in the spec for a reason. When clients start using it, the annotation is already there. And honestly, it's just good documentation. Anyone reading the tool list can see: this one has consequences.

The API change

The SDK has two ways to register tools. The positional-args version (server.tool()) doesn't support annotations cleanly. The config-object version (server.registerTool()) does:

server.registerTool(
  "get_accounts",
  {
    description: "Query accounts with filtering and pagination",
    inputSchema: GetAccountsSchema.shape,
    annotations: READ_ANNOTATION,
  },
  async (params) => {
    // ...
  },
);

Both are built into @modelcontextprotocol/sdk. No custom code needed. I just hadn't used registerTool before.

If you're building an MCP server

Three things I'd steal from this:

Look at the Notion MCP server. I keep hearing good things about it, and it clearly uses the spec features well. A solid reference if you're figuring out annotations.
Annotate your tools from day one. The three-constant pattern (READ, WRITE, DESTRUCTIVE) covers most cases. Your users get granular permissions for free.
Think about what "destructive" means in your domain. For Outseta, it's billing mutations — and deletions too, when we add those. For your tool it might be deleting records, sending emails, or modifying permissions. If the user would want a confirmation dialog, it's probably destructive.

Customer like Bastien are worth their weight in gold 🙏

Building an MCP server? I'm curious what what other patterns you've discovered that I should know about. Hit me up!

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ The insight layer your SaaS is missing

Mon, 09 Mar 2026 00:00:00 GMT

An agent wants to know which onboarding emails aren't landing. Right now it downloads everything, reads through it all, figures out the patterns. Every time. For every user, every session. That's expensive, slow, and wasteful.

What if the SaaS provider did that work once?

"If we as service providers can provide a layer on top of our content with some vector search and some thematic extraction — we run a little AI on our side that could pull out themes." <cite>🎧 Me on Slow & Steady 236@36:16 (February 2026) ↓</cite>

Pre-process the data. Extract themes, compute scores, build embeddings. The agent asks for themes first, then drills into the specific content it needs. Two steps instead of downloading the whole archive every time.

I did this with podcast transcripts

I've built exactly this for the Slow & Steady podcast. Raw transcripts go in, and out comes a structured knowledge base: ideas extracted, stories tagged, quotable moments indexed by theme. When I ask Jean-Claude (my Claude Code instance) "what should I blog about?", it doesn't read through 236 episodes of raw audio transcripts. It searches the processed knowledge base, finds the themes, then pulls the specific quotes it needs to give me ideas.

(Sidenote: if you want this for your podcast, drop me a line.)

Now imagine this for your SaaS

So I pitched Benedikt, my-cohost and the founder of Userlist, on doing something similar for their users' emails. Their MCP server can do CRUD: list users, get a broadcast, create a campaign. But what if it could also answer "which onboarding emails aren't landing?" or "what should my next broadcast be about?" without the agent doing all the analysis itself? Pre-process the engagement data, and the agent gets the answer in one call.

At Outseta we're in the same spot. Our MCP MVP mirrors the API. Fine for basic operations. But the questions we actually want agents to answer aren't CRUD:

"Which customers are at risk?" — that needs a computed score, not a list endpoint. "What topics drive conversions?" — that needs pattern analysis across email and billing data. "Where are users getting stuck?" — that needs theme extraction from support tickets.

If we pre-process this, build the insights on our side so the agent gets patterns instead of spending tokens discovering them every time, I think we'll be even more valuable to our customers. And their agents.

Agents and humans, same insights

But while we are at it, let's not limit insights to the agent layer. Build the insight layer into your product and expose it through the UI, API, MCP, CLI, whatever comes next.

The interface changes. The insights stay.

At Outseta we have billing, email, support, CRM all in one place. A system of record so to speak. Now the question is: what insights do we build on top of it?

The smartest API is the one that already did the thinking.

Queen Raae works part-time as Outseta's Developer Advocate.
Userlist's co-founder Benedikt Deicke is Queen Raae's co-host on Slow & Steady podcast.

📝 ✨ ~ Outseta, a system of record?

Sat, 07 Mar 2026 00:00:00 GMT

At Outseta we have billing, auth, email, support, and CRM under one roof. We used to explain that as a convenience story — "you don't need five tools." Fine. True. But not exactly exciting.

Then on a recent episode of Slow&Steady I was exploring how Outseta's all-in-one nature could be a real differentiator when it comes to AI agents:

"In this era of AI-enabled business operations, it can be a very big differentiator that we actually have your billing data, we have your accounts, we have your email list, and we have your emails and we have your support documentation. We have all of that." <cite>🎧 Me on Slow & Steady 236@21:39 (February 2026) ↓</cite>

Later that week Geoff shared this article in our team chat. The argument: value is moving upward into the agent layer and downward into the data layer. Everything in the middle gets crushed. Build at the data layer, become the system of record, and you become irreplaceable.

Agents come and go, data layer is forever. <cite>David Ondrej</cite>

Outseta doesn't need to become a system of record. We are a system of record 🥳

What that actually looks like

When your business data is spread across five tools, an agent needs five connections, five auth flows, and has to match up records across all of them. When it's all in one place, you can point the agent to your one tool and ask:

"Did my newsletter on topic X lead to more sales?" Who opened, who clicked, crossed with who converted after. That answer lives at the intersection of your email data and your billing data.

"Which customers are at risk of churning?" Login frequency, billing status, support tickets, email engagement. All at once. A customer who stopped opening emails, filed two support tickets, and had a failed payment last week? That's a signal you only see when the data lives together.

"What are trial users struggling with that our onboarding emails don't cover?" Support tickets from people in their first 14 days, crossed with what your onboarding sequence actually addresses. The gaps show up fast when an agent can see both sides.

But the real thing is having it act

Tell it to draft a campaign based on the topics that actually converted. Have it pause billing for the at-risk customer, send a check-in email, and flag the account for support. Ask it to rewrite your onboarding sequence to cover the gaps your support tickets keep revealing.

Or let it do all of that on its own. An agent watching your data continuously, adjusting campaigns while you sleep, catching churn signals before you notice, rewriting onboarding emails every time a new pattern shows up in support 🙈🙉🙊

That's what a system of record unlocks. Not just a convenient place to keep your data. A foundation your agents can actually build on.

It looks like the convenience story is becoming the agent story.

Time will tell ⌛

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ No perfect MCP needed, Jean-Claude will figure it out

Sat, 07 Feb 2026 00:00:00 GMT

In what became AI episode #2 I asked Benedikt if he had shipped the Userlist MCP server.

Kind of. OAuth flows are working. But the schemas are hard to automatically generate, so I've been looking into replacing the current serializer library.

And I was like hold up, hold up!

Does your API send back proper error messages? You know, if I send a too long title when scheduling a broadcast, does it tell me it's too long?

Yeah. It does.

Then ship it.

These models are genuinely good at figuring things out now. When our friend Jean-Claude hits an error, he will read the error message and try again. You might be on the hook for more tokens than necessary, but he will get it right eventually. And if you are lucky he remembers how to do it right the next time 🤯

Turns out it's not just me saying this. The MCP spec itself says tool execution errors "contain actionable feedback that language models can use to self-correct and retry with adjusted parameters."

And the folks using MCP servers for marketing right now? They're not sitting there watching each API call:

"They're just YOLOing things and sending them off into subagents. So if it takes four tries to get this broadcast up, they're not even gonna see that. They're just gonna see it when it's done." <cite>🎧 Me on Slow & Steady 236@33:07 (February 2026) ↓</cite>

I'm not saying schemas don't matter. They do! Rich descriptions, proper types, field constraints — all of that makes the experience smoother. But out the gate you're fine with "title is a string". Better done, than perfect as they say at Userlist.

On the topic of MCP Servers, my next step for the Outseta MCP is to publish it as a remote MCP server making it accessible for those not ready to npx @outseta/outseta-mcp. And yeah, I've been stuck picking the perfect hosting setup. Same trap, different serializer library.

What's the MCP you've been not-shipping? 😬

Queen Raae works part-time as Outseta's Developer Advocate.
Userlist's co-founder Benedikt Deicke is Queen Raae's co-host on Slow & Steady podcast.

📝 ✨ ~ It Actually One-Shotted It 🥳

Fri, 06 Feb 2026 00:00:00 GMT

I copy-pasted my new Outseta + Next.js article into Cursor and said "Let's create a simple Next demo using Outseta." Hit enter. And it one-shotted it. Completely correct.

I tried this a while back. Same kind of task — integrate Outseta. And I could not for the life of me get it to work. It kept inventing a react SDK that didn't exist, even when I gave it the exact script set up I wanted in the header.

But this time: Boom.

I looked through the code and the Outseta integration was there, the exact way I would have done it.

Hear me talk about it on Slow & Steady ep. 235 (at the 16:19 mark) ↓

We've gone from "I think we need to change how Outseta works in order to work with AI" to "AI can actually do it the way we expect it to."

That's a pretty big shift.

So what changed? I think it's the model. But it could be that I've gotten better at the context stuff as well...

When I was testing way back when, as in mid last year (2025), I tried all kinds of ways. Concrete step-by-step instructions, detailed specs, minimal specs, full access to Outseta's knowledge base, you name it. Still garbage. Now I pasted in a single knowledge base article and the AI just got it. But here's the thing...The article was written with the help of Claude 😬 and I'm much more experienced prompt engineer these days. Perhaps that's what made the difference. Or a bit of both? Honestly, I'm not sure.

I might actually test this. Same article, same prompt, different models. See who one-shots it and who tries to download an SDK that doesn't exist.

Stay tuned 🤓

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ Three render modes your Framer components should handle

Tue, 09 Dec 2025 00:00:00 GMT

If you're building code components or code overrides for Framer, you'll want to handle three different render modes: canvas, preview, and live.

Canvas — The Framer editor. Your component is rendered as a static preview while designing.

Preview — Preview mode. Interactive, but still in the Framer environment.

Live — The published site where custom code such as the Outseta script executes.

Unexpectedly (at least to me 😆), Framer's RenderTarget returns "preview" for both preview and live as I've defined them. This makes sense for design, but not for more app-like functionality as I've found out while building Outseta code overrides and components that depend on the execution of custom code.

The Solution

After some trial and error, I found the most robust way to distinguish between preview and live is to check the hostname. If it includes "framercanvas.com", it's preview, otherwise it's live.

Live is intentionally the fallback mode, so if Framer changes the preview hostname the component will still work as expected in the more crucial live mode.

import { RenderTarget } from "framer";

type RenderMode = "canvas" | "preview" | "live";

function getRenderMode(): RenderMode {
  const renderTarget = RenderTarget.current();

  if (renderTarget === RenderTarget.canvas) {
    return "canvas";
  } else if (renderTarget === RenderTarget.preview && window?.location.host.includes("framercanvas.com")) {
    return "preview";
  } else {
    return "live";
  }
}

Why not do feature checks instead?

This is a valid approach — we could check for the presence of the Outseta script and only continue with Outseta logic if present:

if (typeof Outseta !== "undefined") {
  // Outseta is available, do the thing
}

This handles the error, but it doesn't give you control over the designer experience. With feature checks alone we're not asking "what experience should I provide for this mode?"

With explicit mode handling you can, for example:

Add props like showOnPreview to force a specific state, letting designers preview logged-in views without having to publish
Write to the console in live mode when the Outseta script is missing and remove the component — but in preview mode a missing script is expected, so no need to clutter the console with warnings
Skip analytics events in canvas and preview — only fire them in live mode
And so on...

Key Takeaways

Framer code runs in three modes: canvas, preview, and live — each needs different behavior
External scripts only run in live mode — your code needs fallbacks for canvas and preview
Live as fallback is intentional — if Framer changes their preview hostname, your published site still works
Mode checks > feature checks — they give you control over the designer experience, not just error avoidance

What is your approach to handling render modes in Framer? Are there edge cases I haven't covered? I'd love to hear about it.

Happy building! 🛠️

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ Copy current URL with a Framer Code Override

Mon, 27 Oct 2025 00:00:00 GMT

I've been browsing the Framer community forum lately as I'm working on an updated Outseta Framer Plugin.

There I found a question about how to add a "copy link" code override and threw together a code override.

What are Code Overrides?

Code overrides are Higher Order React Components that wrap around "stuff" on the Framer canvas. So if you are a React developer, you can use code overrides to add all sorts of functionality to a Framer site.

Framer is really onto something here with seperating design from functionality 🤩

The Ask

Copy the current page URL to the clipboard with a Code Override.

The Solution

A lightweight Code Override that adds copy-to-clipboard functionality to any element.

The Code

import { forwardRef, type ComponentType } from "react";

export function withCopyURL(Component): ComponentType {
  return forwardRef((props, ref) => {
    const handleClick = async () => {
      try {
        const currentURL = window.location.href;
        await navigator.clipboard.writeText(currentURL);
        console.log("URL copied to clipboard:", currentURL);
      } catch (err) {
        console.error("Failed to copy URL:", err);
      }
    };

    return <Component ref={ref} {...props} onClick={handleClick} style={{ cursor: "pointer" }} />;
  });
}

How to Use It

In Framer, open the Assets panel and go to the Code tab
Click the + button to create a new Code Override file and name it
Paste the code above into the file
Select any element on your canvas (a button, icon, or text layer)
In the properties panel, find Code Override and select withCopyURL

That's it! Now when someone clicks that element, the current page URL gets copied to their clipboard.

You can add visual feedback like hover states or tap animation in the Framer canvas.

Going Further

You could extend this Code Override to:

Show a toast notification after copying ("Link copied!")
Copy a custom URL instead of the current one (great for referral links)
Track copy events in your analytics

PS: The Clipboard API works in all modern browsers, but it requires a secure context (HTTPS). It'll work fine on your published Framer site, but might act up on localhost without HTTPS.

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ UPDATE requires SELECT Row Level Security (RLS) permissions in Postgres/Supabase

Sat, 10 May 2025 00:00:00 GMT

When implementing Row Level Security (RLS) in PostgreSQL for Feedback Fort made with React + Supabase + Outseta edition, I spent way way way too long figuring out why soft deleting a vote by updating deleted_at kept stating:

new row violates row-level security policy for table "vote"

😩😩😩

Let's hope this article saves you some time!

My setup

I had configured two separate policies:

-- For viewing active votes
CREATE POLICY "Anyone can view active votes"
  ON vote FOR SELECT
  USING (deleted_at IS NULL);

-- For updating votes
CREATE POLICY "Users can update their votes"
  ON vote FOR UPDATE
  USING (auth.jwt() ->> 'sub' = outseta_person_uid)
  WITH CHECK (auth.jwt() ->> 'sub' = outseta_person_uid);

In my (still beginners) mental model of RLS, the UPDATE policy would only be used when updating the vote, and the SELECT policy would be used when selecting the vote.

The issue

So I googled, and found some intersting new knowleged by reading the PostgreSQL docs.

"Typically an UPDATE command also needs to read data from columns in the relation being updated (e.g., in a WHERE clause or a RETURNING clause, or in an expression on the right hand side of the SET clause). In this case, SELECT rights are also required on the relation being updated, and the appropriate SELECT or ALL policies will be applied in addition to the UPDATE policies."

Or in other words: UPDATE operations implicitly require SELECT access to the rows being modified

But the user did in fact have SELECT permissions on the vote as when initating the update, deleted_at value was NULL.

So why was the update failing?

😠😠😠

After much googling and head scratching, and testing it seems like SELECT policies must be valid BOTH before AND after an UPDATE operation.

I have not succeeded in finding any documentation on this, but numerous posts on Stack Overflow and Github issues seem to suggest this is the case.

But Claude gave me this explanation:

PostgreSQL requires SELECT policies to be valid both before and after an UPDATE operation to maintain transactional consistency. This ensures you can always see the results of your own modifications and prevents situations where rows would 'disappear' mid-transaction.

I would love to get a more authoritative source on this, if you have one, please let me know (queen@raae.codes)!

The Solution

The solution in my case was to change the SELECT policy to allow anyone to see active votes and all their votes regardless of status.

-- Modified SELECT policy to see your own votes regardless of deleted status
CREATE POLICY "Users can view their votes"
  ON vote FOR SELECT
  USING (deleted_at IS NULL OR auth.jwt() ->> 'sub' = outseta_person_uid);

This policy combines two visibility rules:

Anyone can see active votes (where deleted_at IS NULL)
Users can always see their votes (where auth.jwt() ->> 'sub' = outseta_person_uid), regardless of deletion status

The complete Feedback Fort code is available on GitHub.

Key Takeaway

RLS is easy to get started with, but also easy to mess up.
Read the docs 🤪

But more to the point of this article, remember:

UPDATE operations first need to SELECT the rows they'll modify
After an UPDATE, you must still have SELECT access to the modified row

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ How to use JWT from any auth provider with Supabase RLS

Thu, 01 May 2025 00:00:00 GMT

Supabase provides Row Level Security (RLS) as a way to control access to your data. RLS makes it possible to query data from your client without an API layer. But what if you want to use your existing authentication system, instead of Supabase Auth?

This is something our Outseta users struggled with. I was pretty sure it was possible, but it took me some time to come up with the solution. I realised it could be used with any JWT-based auth provider, so I thought I'd share the solution here as well.

I've also created a full React + Supabase + Outseta demo app that you can use as a starting point for your own project. Full source code is available on GitHub.

</aside>

The Problem

You have an existing authentication system that issues JWTs, but you want to leverage Supabase's Row Level Security (RLS) features that expect Supabase-signed tokens.

The Solution

Exchange your authentication provider's JWT for a Supabase-signed JWT, then use the latter for all Supabase operations.

How It Works

The token exchange must happen server-side and follows these steps:

Verify the original JWT using your auth provider's public key or JWKS endpoint
Create a new JWT with additional claims required by Supabase
Sign the new JWT with your Supabase JWT Secret
Use the Supabase-signed JWT in subsequent requests

Implementation Steps

1. Set Up Your Authentication Provider

And take note of the shape for the JWT payload they provide, typical it will include things like:

sub: The unique ID of the authenticated user
email: User's email address
name: User's name
org_id: User's organisation ID

For an example, check out the Outseta JWT docs.

2. Create an Exchange Function

Deploy a server-side function that handles the token exchange. This can be:

A Supabase Edge Function
An API route in your application server
A serverless function somewhere

We'll use a Supabase Edge Function for this example, but the same principles apply to any server-side function.

You'll need the following environment variables for the Edge Function (found in Supabase Console under Edge Functions -> Secrets):

SUPABASE_JWT_SECRET: Your Supabase JWT secret (found in the Supabase Console under Project Settings -> Data API)
AUTH_JWKS_URL: The JWKS URL for your auth provider (found in the auth provider's docs)
- or AUTH_PUBLIC_KEY: The public key for your auth provider (found in the auth provider's docs)

To deploy the function, run:

supabase functions deploy exchange --no-verify-jwt

or upload the function from the Supabase Console making sure to disable the "Enforce JWT Verification" option.

The --no-verify-jwt flag is essential because this endpoint is requested with the JWTs from your external auth provider, not a Supabase-signed tokens. Without this flag, Supabase would automatically reject these requests as it would try to verify them as Supabase JWTs.

Here's a sample exchange function using Supabase Edge Functions:

// File: /functions/exchange/index.ts
// Deploy with: supabase functions deploy exchange --no-verify-jwt

import * as jose from "https://deno.land/x/jose@v4.14.4/index.ts";

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Headers": "authorization, x-client-info, apikey, content-type",
};

Deno.serve(async (req) => {
  if (req.method === "OPTIONS") {
    return new Response("ok", { headers: corsHeaders });
  }

  // Get the original JWT from the Authorization header
  const authHeader = req.headers.get("Authorization");
  const originalJwt = authHeader?.split(" ")[1] || "";

  try {
    // OPTION 1: Verify with JWKS URL
    const JWKS = jose.createRemoteJWKSet(new URL(Deno.env.get("AUTH_JWKS_URL")));

    // OPTION 2: Verify with public key
    // const publicKey = await jose.importSPKI(Deno.env.get("AUTH_PUBLIC_KEY"), "RS256");

    // Verify the token
    const { payload } = await jose.jwtVerify(originalJwt, JWKS);

    // Add the required role claim if not already present for a valid Supabase JWT
    payload.role = "authenticated"; // Required by Supabase

    // Add or modify any other claims you need for RLS policies
    // payload.some_claim = "some claim";

    // Sign with Supabase JWT secret
    const supabaseSecret = new TextEncoder().encode(Deno.env.get("SUPABASE_JWT_SECRET"));

    const supabaseJwt = await new jose.SignJWT(payload)
      .setProtectedHeader({ alg: "HS256", typ: "JWT" })
      .setIssuer("supabase")
      .setIssuedAt(payload.iat)
      .setExpirationTime(payload.exp || "")
      .sign(supabaseSecret);

    // Return the Supabase JWT
    return new Response(JSON.stringify({ supabaseJwt }), {
      headers: { ...corsHeaders, "Content-Type": "application/json" },
      status: 200,
    });
  } catch (error) {
    console.error("JWT verification failed:", error.message);
    return new Response(JSON.stringify({ error: "Invalid token" }), {
      headers: { ...corsHeaders, "Content-Type": "application/json" },
      status: 401,
    });
  }
});

3. Use the Exchanged JWT with Supabase Client

The most elegant way to use the exchanged JWT is to configure the Supabase client with a custom accessToken handler that automatically exchanges tokens:

import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

// Create Supabase client with automatic token exchange
export const supabase = createClient(supabaseUrl, supabaseAnonKey, {
  accessToken: async (fallbackToken) => {
    // Get the original JWT from your auth provider
    const originalJwt = getAuthProviderToken(); // Replace with your auth provider's method

    if (!originalJwt) {
      return null; // No token available
    }

    // Exchange it for a Supabase token
    const supabaseJwt = await exchangeToken(originalJwt);
    return supabaseJwt || fallbackToken;
  },
});

// Function to exchange the original JWT for a Supabase JWT
async function exchangeToken(originalJwt) {
  // Perhaps add some caching here to avoid unnecessary exchanges,
  // only need to exchange if originalJwt has changed
  try {
    console.log("Exchanging token for Supabase access");
    const response = await fetch(`${supabaseUrl}/functions/v1/exchange`, {
      method: "POST",
      headers: {
        Authorization: `Bearer ${originalJwt}`,
        "Content-Type": "application/json",
      },
    });

    if (!response.ok) {
      throw new Error(`Token exchange failed: ${response.status}`);
    }

    const { supabaseJwt } = await response.json();
    return supabaseJwt;
  } catch (error) {
    console.error("Error exchanging token:", error);
    return null;
  }
}

// Example usage - just use the supabase client normally!
// The token exchange happens automatically behind the scenes
const { data, error } = await supabase.from("my_table").select("*");

Creating RLS Policies with the Exchanged JWT

Supabase makes the decoded JWT available in RLS policies through the built-in auth.jwt() function:

-- Example: Only allow users to read their own records
CREATE POLICY "Users can read their own data" ON my_table
  FOR SELECT
  -- Using auth.jwt() ->> 'sub'instead of auth.uid() as you could with Supabase auth
  USING (auth.jwt() ->> 'sub' = user_id);

-- Example: Organization-based access if you have an org_id claim
CREATE POLICY "Users can access organization data" ON org_resources
  FOR ALL
  USING (auth.jwt() ->> 'org_id' = organization_id);

Setting Default Values from JWT Claims

You can also use JWT claims as default values for table columns:

-- Example: Automatically set the user_id when a record is created
ALTER TABLE my_table
  ALTER COLUMN user_id SET DEFAULT auth.jwt() ->> 'sub';

-- Example: Set organization_id from JWT claim
ALTER TABLE org_resources
  ALTER COLUMN organization_id SET DEFAULT auth.jwt() ->> 'org_id';

Important Considerations

Security: Always verify the original JWT on the server side before exchanging it
Claims Mapping: Transfer all relevant claims from the original JWT to the Supabase JWT
Expiration: Preserve the original token's expiration time in the Supabase token
Error Handling: Handle verification failures gracefully

Conclusion

By implementing this token exchange pattern, you can continue using your existing authentication system while taking full advantage of Supabase's powerful RLS capabilities. This approach gives you the flexibility to use any JWT-based auth provider that does not have a built-in Supabase integration, such as Outseta.

Happy building! 🚀

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ Select post variant with a Code Override in Framer

Mon, 18 Mar 2024 00:00:00 GMT

This week I'm building a Framer x Outseta Patreon clone live on stream together with Damien, a designer I know from the Interwebz.

We'll design the site in Framer, use Outseta for authentication and protection of members-only content, and stitch it all together with Framer's Code Overrides.

The feature we tackled today was to show a different post-item variant based on the link to the post. We'll configure Outseta to protect all pages starting with "/posts/locked-" from unauthenticated visitors, so it makes sense to use the same mechanism for selecting the "locked" design of the post.

The Code Override

The Code Override checks if the link of the post starts with "/posts/locked-". If the link does, it selects the "locked" variant, and if not it selects the "primary" variant:

export function withCorrectVariant(Component): ComponentType {
  return (props) => {
    const { link } = props;
    const variant = link.startsWith("/posts/locked-") ? "Locked" : "Primary";
    return <Component {...props} variant={variant} />;
  };
}

That Code Override name is not my best work, please help me out by suggesting a better name!

Gotcha: the link property is the pathname sans domain to the, and it starts with a "/".

The Result

The items linking to pages starting with "/posts/locked-" now show the "locked" variant and the rest show the "primary" variant.

Extending Framer functionality with Code Overrides is such a superpower, especially if you are someone who can spell variant right on the first try...I cannot as becomes evident if you watch the full stream on YouTube.

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ Join us in building MixPod

Thu, 02 Nov 2023 00:00:00 GMT

We may have been sailing in silence...but our adventures through the high seas of the World Wide Web never stops 🌊

A new idea for a treasure hunt has been brewing: MixPod 🎧

Our maiden voyage commences tomorrow (Saturday) at 11:00 CET on YouTube.
Join us as we plot the course and create the MixPod Treasure Map.

What's MixPod, you wonder?
Think of it as mixtapes but for podcast episodes.

All the best,
Queen Raae

PS: The project is made possible by Outseta, and we're hopeful more sponsors will join us along the way.

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ How to send an email in 10 days from your app?

Tue, 19 Sep 2023 00:00:00 GMT

How would you send an email 10 days from now in your app?

Below is a cleaned-up version of my response to Aditya Malani when he asked this question on x-bird app.

Drip Campaigns: Platforms like Userlist, ConvertKit, or Outseta offer capabilities to set up drip campaigns with delays you may trigger from your app.

Email Scheduling: Services like like SendGrid and Mailchimp Transactional let you schedule emails in the future.

Cron job: Set up a cron job (for Node, there is node-cron) to periodically check the time since the event and send an email through providers such as Resend when the elapsed time hits 10 days.

Queues: Last but not least, you may use a queue solution with delay capabilities like RabbitMQ or Inngest with SendGrid, Resend etc.

Any I missed? Any your favorite way?

All the best,
Queen Raae

PS: Remember to move your Gatsby Cloud sites soon (mostly a reminder to myself).

Queen Raae works part-time as Outseta's Developer Advocate.
Userlist's co-founder Benedikt Deicke is Queen Raae's co-host on Slow & Steady podcast.

📝 ✨ ~ Keeping things around until the session ends

Thu, 11 May 2023 00:00:00 GMT

As mentioned when talking about search params, an Outseta customer wanted to pass along the UTM search params to the Outseta SignUp widget so that a visitor who came in through https://example.com?utm_source=facebook&utm_medium=paid_social&utm_campaign=summer_sale gets attributed to the summer sale paid Facebook ad.

The vistor might not sign up at the first page they land on, so it makes sense to keep the UTM search params around for the entirety of the session.

Vanilla JS again has our backs:

var params = new URL(window.location).searchParams;
var utmSource = params.get("utm_source");
var utmCampaign = params.get("utm_campaign");
var utmMedium = params.get("utm_medium");

if (UtmSource || UtmCampaign || UtmMedium) {
  try {
    sessionStorage.setItem("UtmSource", utmSource);
    sessionStorage.setItem("UtmCampaign", utmCampaign);
    sessionStorage.setItem("UtmMedium", utmMedium);
  } catch (error) {
    console.warn("Could not save UTM params to session storage");
  }
}

The try block is essential because turning off cookies in a browser also disables session storage as it can be used for the same purposes (tracking people) as you see here. So you want to make sure you handle that.

In addition, if you add this script to every page, the values will be overridden by empty strings on subsequent page visits. Therefore we add that if statement to ensure we have all the values we expect a visitor landing on a page from our campaign to have. Make sure to tweak this to your use case!

All the best,
Queen Raae

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ BBQ Season 🍢 And this week's schedule

Mon, 08 May 2023 00:00:00 GMT

Last week's BBQ turned out great even though we had to dress up quite a bit 🤣

We'll be hosting a BBQ for WebDevs in Oslo on Tuesday, May 23rd at 18.00, so if you live in town or are headed for NDC {Oslo}, we'd love to see you! Wanna come, reply to this email ↩️

Tomorrow we'll interview Natalia, database extraordinaire at Microsoft, for the Data in the Wild podcast.

This week

🔴 🦋 Data Model Chat with Natalia from Microsoft · Data in the wild · A podcast from Xata — the serverless database platform
— Tuesday, May 9th @ 12:00 CEST

🔴 🏴‍☠️ Visualising Outseta customers on the map using React Leaflet + Gatsby · JamstackPirates
— Thursday, May 11th @ 19:00 CEST

Next month

🎒 Attending React Norway · Let me know if you are going!
— Friday, June 16th

🔴 🖼️ Cloudinary DevJam · Cloudinary
— Wednesday, June 21st @ 20:00 CEST

All the best,
Queen Raae

Queen Raae and family worked on several projects for Xata.
Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ How to properly handle search (query) params in javascript

Sat, 06 May 2023 00:00:00 GMT

An Outseta customer wanted to pass along the UTM search params to the Outseta SignUp widget so that a visitor who came in through https://example.com?utm_source=facebook&utm_medium=paid_social&utm_campaign=summer_sale gets attributed to the summer sale paid Facebook ad.

Search, or query params, is the information after the ? in a URL such as utm_source=facebook&utm_medium=paid_social&utm_campaign=summer_sale in our example.

UTM is a set of params commonly used for tracking marketing efforts, but you can add anything here to suit your needs.

I did some quick googling and came over many creative solutions like separating out the search params by splitting on ? etc.

However, vanilla JS supports this use case out of the box 🤯

const url = new URL(
  "https://example.com?utm_source=facebook&utm_medium=paid_social&utm_campaign=summer_sale"
);

console.log(
  url.searchParams.get("utm_source"),
  url.searchParams.get("utm_medium"),
  url.searchParams.get("utm_campaign")
);

// Output: facebook paid_social summer_sale

URL is the constructor you should reach for every time you deal with URLs, and the searchParams we are accessing here conforms to the URLSearchParams interface with methods such as has, sort, getAll and more.

Never try to deal with URLs yourself; JS got your back!

You'll also need to keep the values arround in session storage to make use of them later.

All the best,
Queen Raae

Queen Raae works part-time as Outseta's Developer Advocate.

📝 ✨ ~ Sometimes you POST to update, sometimes you PUT

Fri, 14 Apr 2023 00:00:00 GMT

I once spent what felt like an eternity not understanding why updating a ConvertKit subscriber resulted in a 404. Luckily half moon was watching and let me know I needed to use PUT, not POST for this.

Using PUT is technically the correct use of the HTTP methods:

The difference between POST and PUT is that PUT requests are idempotent. That is, calling the same PUT request multiple times will always produce the same result. In contrast, calling a POST request repeatedly have side effects of creating the same resource multiple times.

<cite>W3Schools</cite>

But not what my favorite API in the whole wide world, the Stripe API and many others, does. Stripe use POST for both creation and updating.

POST /v1/customers POST /v1/customers/:id <cite>Stripe API Docs</cite>

But once burned, I always double-check, which saved us when using the Outseta API on yesterday's rum-fueled treasure hunt. The Outseta API also uses PUT for updates.

So this is your reminder to double-check that HTTP Method before pursuing other explanations for failing updates.

All the best,
Queen Raae

Queen Raae works part-time as Outseta's Developer Advocate.

Posts tagged #outseta

📝 ✨ ~ Customer Bastien: your MCP server has a permission problem

The problem I hadn't noticed

The fix: tool annotations

Why change_subscription gets the destructive flag

The API change

If you're building an MCP server

📝 ✨ ~ The insight layer your SaaS is missing

I did this with podcast transcripts

Now imagine this for your SaaS

Agents and humans, same insights

📝 ✨ ~ Outseta, a system of record?

What that actually looks like

But the real thing is having it act

📝 ✨ ~ No perfect MCP needed, Jean-Claude will figure it out

📝 ✨ ~ It Actually One-Shotted It 🥳

📝 ✨ ~ Three render modes your Framer components should handle

The Solution

Why not do feature checks instead?

Key Takeaways

📝 ✨ ~ Copy current URL with a Framer Code Override

What are Code Overrides?

The Ask

The Solution

The Code

How to Use It

Going Further

📝 ✨ ~ UPDATE requires SELECT Row Level Security (RLS) permissions in Postgres/Supabase

My setup

The issue

The Solution

Key Takeaway

📝 ✨ ~ How to use JWT from any auth provider with Supabase RLS

The Problem

The Solution

How It Works

Implementation Steps

1. Set Up Your Authentication Provider

2. Create an Exchange Function

3. Use the Exchanged JWT with Supabase Client

Creating RLS Policies with the Exchanged JWT

Setting Default Values from JWT Claims

Important Considerations

Conclusion

📝 ✨ ~ Select post variant with a Code Override in Framer

The Code Override

The Result

📝 ✨ ~ Join us in building MixPod

📝 ✨ ~ How to send an email in 10 days from your app?

📝 ✨ ~ Keeping things around until the session ends

📝 ✨ ~ BBQ Season 🍢 And this week's schedule

This week

Next month

📝 ✨ ~ How to properly handle search (query) params in javascript

📝 ✨ ~ Sometimes you POST to update, sometimes you PUT

Why `change_subscription` gets the destructive flag