Skip to main content
This guide walks you through setting up a Supabase project with the required database schema, authentication providers, and Edge Functions for the Bookmarks application.

​
Prerequisites

Supabase Account

Sign up for a free account at supabase.com

Supabase CLI

Optional but recommended for local development

​
Create a New Project

1

Create Project

  1. Log in to your Supabase Dashboard
  2. Click “New Project”
  3. Enter your project details:
    • Name: Bookmarks (or your preferred name)
    • Database Password: Choose a strong password
    • Region: Select the closest region to your users
  4. Click “Create new project”
Project creation takes 2-3 minutes. Your database will be provisioned automatically.
2

Save Project Credentials

Once created, navigate to Project Settings > API and save:
  • Project URL
  • anon/public key
You’ll need these for your environment variables.

​
Database Schema

The Bookmarks application uses a single bookmarks table to store all bookmark data.

​
Create the Bookmarks Table

1

Open SQL Editor

Navigate to the SQL Editor in your Supabase dashboard.
2

Create Table

Run the following SQL to create the bookmarks table:
CREATE TABLE bookmarks (
  id BIGSERIAL PRIMARY KEY,
  title TEXT NOT NULL,
  domain TEXT NOT NULL,
  url TEXT NOT NULL,
  description TEXT,
  image TEXT,
  created_at TIMESTAMPTZ DEFAULT NOW(),
  saved_by UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
  tags TEXT[] DEFAULT '{}',
  pinned BOOLEAN DEFAULT FALSE
);
This creates a table with the following columns:
  • id: Auto-incrementing primary key
  • title: Bookmark title (from metadata)
  • domain: Website domain
  • url: Full bookmark URL
  • description: Meta description
  • image: Preview image URL
  • created_at: Timestamp of when bookmark was saved
  • saved_by: User ID (foreign key to auth.users)
  • tags: Array of tag strings
  • pinned: Boolean flag for pinned bookmarks
3

Enable Row Level Security

Enable RLS to ensure users can only access their own bookmarks:
ALTER TABLE bookmarks ENABLE ROW LEVEL SECURITY;
4

Create RLS Policies

Add policies to allow users to manage their bookmarks:
-- Allow users to view their own bookmarks
CREATE POLICY "Users can view own bookmarks"
  ON bookmarks FOR SELECT
  USING (auth.uid() = saved_by);

-- Allow users to insert their own bookmarks
CREATE POLICY "Users can insert own bookmarks"
  ON bookmarks FOR INSERT
  WITH CHECK (auth.uid() = saved_by);

-- Allow users to update their own bookmarks
CREATE POLICY "Users can update own bookmarks"
  ON bookmarks FOR UPDATE
  USING (auth.uid() = saved_by);

-- Allow users to delete their own bookmarks
CREATE POLICY "Users can delete own bookmarks"
  ON bookmarks FOR DELETE
  USING (auth.uid() = saved_by);

​
Database Indexes (Optional)

For better query performance, add these indexes: 
-- Index on saved_by for faster user queries
CREATE INDEX idx_bookmarks_saved_by ON bookmarks(saved_by);

-- Index on created_at for sorting
CREATE INDEX idx_bookmarks_created_at ON bookmarks(created_at DESC);

-- Index on pinned for filtering
CREATE INDEX idx_bookmarks_pinned ON bookmarks(pinned);

-- GIN index on tags for array queries
CREATE INDEX idx_bookmarks_tags ON bookmarks USING GIN(tags);

​
Authentication Configuration

The application supports OAuth providers and magic link (OTP) authentication.

​
Supported Authentication Methods

The app implements social login and email OTP authentication via /src/stores/AuthStore.ts:18-45
1

Enable Authentication Providers

Navigate to Authentication > Providers in your Supabase dashboard.
2

Configure OAuth Providers

Enable and configure your preferred OAuth providers:
  1. Create OAuth credentials in Google Cloud Console
  2. Add authorized redirect URI: https://your-project.supabase.co/auth/v1/callback
  3. Enter Client ID and Client Secret in Supabase
3

Configure Email Authentication

  1. Navigate to Authentication > Providers > Email
  2. Enable “Email OTP” for magic link authentication
  3. Customize the email template if desired
4

Set Redirect URLs

In Authentication > URL Configuration, add your application URLs:
  • Site URL: http://localhost:5173 (development) or your production URL
  • Redirect URLs: Add both development and production URLs
http://localhost:5173
https://yourdomain.com

​
Edge Functions Setup

The application uses two Edge Functions for enhanced functionality.
Edge Functions require deployment before they can be used. Ensure you have the Supabase CLI installed.

​
1. Get Metadata Function

This function fetches website metadata (title, description, images) when users add bookmarks.
1

Create Function Directory

mkdir -p supabase/functions/get-metadata
2

Create Function File

Create supabase/functions/get-metadata/index.ts:
import { serve } from 'https://deno.land/[email protected]/http/server.ts'

serve(async (req) => {
  try {
    const url = await req.text()
    
    // Fetch the URL and extract metadata
    const response = await fetch(url)
    const html = await response.text()
    
    // Parse metadata from HTML
    const titleMatch = html.match(/<title>(.*?)<\/title>/i)
    const descMatch = html.match(/<meta name="description" content="(.*?)">/i)
    const imageMatch = html.match(/<meta property="og:image" content="(.*?)">/i)
    
    const metadata = {
      title: titleMatch ? titleMatch[1] : '',
      description: descMatch ? descMatch[1] : '',
      images: imageMatch ? [imageMatch[1]] : [],
      domain: new URL(url).hostname,
      url: url
    }
    
    return new Response(JSON.stringify(metadata), {
      headers: { 'Content-Type': 'application/json' }
    })
  } catch (error) {
    return new Response(JSON.stringify({ error: error.message }), {
      status: 500,
      headers: { 'Content-Type': 'application/json' }
    })
  }
})
3

Deploy Function

supabase functions deploy get-metadata

​
2. Generate Tags Function

This function uses AI to automatically generate relevant tags for bookmarks.
1

Create Function Directory

mkdir -p supabase/functions/generate-tags
2

Create Function File

Create supabase/functions/generate-tags/index.ts with your AI integration logic.
3

Deploy Function

supabase functions deploy generate-tags
4

Get Function URLs

After deployment, your function URLs will be:
https://your-project-id.supabase.co/functions/v1/get-metadata
https://your-project-id.supabase.co/functions/v1/generate-tags
Add these to your environment variables.

​
Verify Setup

1

Check Database

Navigate to Table Editor and verify the bookmarks table exists with correct columns.
2

Test Authentication

Go to Authentication > Users and test creating a user with your configured providers.
3

Verify Edge Functions

Check Edge Functions to ensure both functions are deployed and active.

​
Next Steps

Configure Environment Variables

Set up your local and production environment variables

Setup Authentication

Implement authentication in your application

Build docs developers (and LLMs) love

Get started for freeTalk to us