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:

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