Supabase MCP Server - Notes Application

Description

A full-featured notes management application built with Model Context Protocol (MCP) integration and Supabase as the database backend. The application ensures secure user access with role-based isolation through combined protection at the application level (JWT) and database level (RLS policies).

Features

🔐 Security

• OAuth 2.0 Authentication - supports Email/Password and GitHub login
• JWT Token Validation - protects MCP endpoints
• Row Level Security (RLS) - database policies for user data isolation
• XSS Protection - HTML escape functions in client code

📝 Functionality

• CRUD Operations - Create, read, update, and delete notes
• User Association - each note is linked to its creator
• Responsive Interface - optimized for all devices
• User Management - login, registration, and logout

🏗️ Architecture

• Backend: Node.js Express server with MCP integration
• Frontend: HTML/CSS/JavaScript without external dependencies
• Database: Supabase PostgreSQL
• API: RESTful MCP endpoints with JWT authentication

Getting Started

Prerequisites

• Node.js (v14+)
• Supabase project (https://supabase.com)
• Postman for API testing (optional)

Installation

1. Navigate to project directory:

cd supabase-mcp-server

2. Install dependencies:

npm install

3. Configure .env file:

cp .env.example .env

Fill in the following values from your Supabase project:

SUPABASE_URL=https://your-project.supabase.co
SUPABASE_ANON_KEY=your-anon-key
PORT=3000

4. Start the server:

npm start

The server will start at http://localhost:3000

Usage

Frontend Application

1. Open http://localhost:3000 in your browser
2. Choose a login option:
   • Email/Password: Enter your email and password
   • GitHub: Click the GitHub button
3. After login, you can:
   • Create notes - fill in title and content, click "Add"
   • Edit notes - click "Edit", make changes, click "Save"
   • Delete notes - click "Delete" and confirm

MCP Endpoints (Postman)

The application provides MCP endpoints for CRUD operations:

Postman Collection: Open postman_collection.json in Postman

Testing Steps:

1. Log in to the frontend
2. Copy the JWT token (displayed in the application)
3. In Postman, go to Collection Variables
4. Paste the token in the {{token}} variable
5. Execute the requests

Technical Details

notes Table:

CREATE TABLE notes (
  id BIGINT PRIMARY KEY GENERATED BY DEFAULT AS IDENTITY,
  user_id UUID REFERENCES auth.users(id) ON DELETE CASCADE,
  title TEXT NOT NULL,
  content TEXT,
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

RLS Policies

Four RLS policies protect data access:

Policy	Operation	Condition
Users see own notes	SELECT	auth.uid() = user_id
Users insert own notes	INSERT	auth.uid() = user_id
Users update own notes	UPDATE	auth.uid() = user_id
Users delete own notes	DELETE	auth.uid() = user_id

Local Testing

1. Open two browser windows - one for each user
2. Log in with different accounts
3. Create notes in each account
4. Verify that each user sees only their own notes