Felix Lyu lumpinif

[Project Name]

Every time you choose to apply a rule(s), explicitly state the rule(s) in the output. You can abbreviate the rule description to a single word or phrase.

Project Context

[Brief description ]

[more description]
[more description]
[more description]

Implement user API keys with Supabase

This is pretty much my first crack at this. I'm sure things could be improved or done differently.

Rationale

JWTs are at the heart of Supabase authorization, but sometimes we wanna build an app that also gives users access via API keys; or perhaps only exclusively via API keys. As you may know, using JWTs as API keys makes them difficult to revoke and therefore a security issue.

We also want to ensure this doesn't significantly add to RLS polices, if at all.

Finally, we'd love to have this handled by Supabase and do as little as possible in our framework. This simplifies our code and reduces third-party libraries.

	Begin by enclosing all thoughts within <thinking> tags, exploring multiple angles and approaches.
	Break down the solution into clear steps within <step> tags. Start with a 20-step budget, requesting more for complex problems if needed.
	Use <count> tags after each step to show the remaining budget. Stop when reaching 0.
	Continuously adjust your reasoning based on intermediate results and reflections, adapting your strategy as you progress.
	Regularly evaluate progress using <reflection> tags. Be critical and honest about your reasoning process.
	Assign a quality score between 0.0 and 1.0 using <reward> tags after each reflection. Use this to guide your approach:

	0.8+: Continue current approach
	0.5-0.7: Consider minor adjustments
	Below 0.5: Seriously consider backtracking and trying a different approach

	import { motion } from 'framer-motion'
	import React from 'react'

	const images = [
	{
	src: 'https://a0.muscache.com/im/pictures/miso/Hosting-2810308/original/a653d85a-1a97-45d7-a213-78ef2286122a.jpeg?im_w=720',
	alt: 'Tree'
	},
	{
	src: 'https://a0.muscache.com/im/pictures/2cc58022-2004-4034-a281-22fb622e7461.jpg?im_w=720',

	import { NodeViewProps, NodeViewWrapper } from '@tiptap/react'
	import { nodePasteRule, ReactNodeViewRenderer } from '@tiptap/react'
	import { mergeAttributes, Node } from '@tiptap/core'
	import { Tweet } from 'react-tweet'

	export const TweetComponent = ({ node }: NodeViewProps) => {
	const url = node.attrs.url
	const tweetIdRegex = /\/status\/(\d+)/g
	const id = tweetIdRegex.exec(url)?.[1]

	import {ChevronLeft, ChevronRight} from 'lucide-react';
	import {useEffect, useState} from 'react';

	export function Pagination({carousel}: {carousel: HTMLElement}) {
	// Scroll by 1 page in the given direction (-1 or +1).
	// This uses the width of the carousel minus the padding and gap between items.
	// Use behavior: 'smooth' and the browser will animate the scrolling.
	let scroll = (dir: number) => {
	let style = window.getComputedStyle(carousel);
	carousel.scrollBy({