zackha/nuxt-content-supabase-comments

Nuxt Content Supabase Comments

This project is to demonstrate how Supabase can be used as a comments system on a static Nuxt3 website.

The primay purpose of this is to enable comments on a SSG blog. As such it includes several useful modules:

• Nuxt Content
• Nuxt Supabase
• Nuxt Tailwind

TODO:

• Allow users to submit comments
• Determine why comments are only loading locally
• Nested comments

Notes

Setup

Clone and install dependencies (using yarn):

git clone git@github.com:MattFaz/nuxt-content-supabase-comments.git blog
cd blog
yarn install

Rename .env.example file to .env and add your credentials:

mv .env.example .env

Start the development server:

yarn dev

Generate static site:

npx nuxi generate

Supabase Setup

Create Tables:

-- Create a table for Public Profiles
create table if not exists public.profiles (
  id uuid references auth.users not null primary key,
  updated_at timestamp with time zone,
  username text unique
  constraint username_length check (char_length(username) >= 3)
);

-- Create a table for Comments
create table if not exists public.comments (
  id bigint generated always as identity primary key,
  created_at timestamp with time zone default(now()),
  parent_comment_id int,
  text text not null,
  updated_at timestamp with time zone,
  profile_id uuid references public.profiles not null,
  post_uuid uuid not null
)

Enable Row Level Security on Profiles table:

--- Enable Row Level Security for Profiles table
alter table public.profiles
  enable row level security;

Create Policies on tables:

create policy "Public profiles are viewable by everyone." on public.profiles
  for select using (true);

create policy "Users can insert their own profile." on public.profiles
  for insert with check (auth.uid() = id);

create policy "Users can update own profile." on public.profiles
  for update using (auth.uid() = id);

create policy "Comments are viewable by everyone."
  on public.comments for select
  using ( true );

create policy "Users can create Comments."
  on public.comments for insert
  with check (auth.role() = 'authenticated');

create policy "Users can update own Comments."
  on public.comments for update
  using ( auth.uid() = profile_id );

Create Function & Trigger to create Profile on User Signup:

-- function to insert a row into public.profiles
create function public.handle_new_user()
returns trigger
language plpgsql
security definer set search_path = public
as $$
begin
  insert into public.profiles (id, username)
  values (new.id, new.raw_user_meta_data ->> 'username');
  return new;
end;
$$;

-- trigger the function every time a user is created
create trigger on_auth_user_created
  after insert on auth.users
  for each row execute procedure public.handle_new_user();