Implementation Plan - Supabase Integration & Google Sign-In

Migrate the Mendoop waitlist builder project from local storage simulations to a live Supabase database and authenticate users via actual Google OAuth.

Action Required from User

To support live Google Sign-In and database persistence, please execute the following steps:

1. Google Auth Provider Setup in Supabase:

- Go to your Supabase Project Dashboard → Authentication → Providers → Google.

- Enable the Google provider.

- Enter your Google Client ID and Google Client Secret (obtained from the Google Cloud Console).

2. Redirect URL Configuration:

- In Supabase, navigate to Authentication → URL Configuration.

- Ensure the Site URL is set to http://localhost:3000 (for local development) and add http://localhost:3000/dashboard to the Redirect URLs list.

3. Database Schema Execution:

- Go to the SQL Editor in your Supabase Dashboard and run the following script to create tables and configure Row Level Security (RLS):

`sql

-- Create waitlists table

create table public.waitlists (

id uuid default gen_random_uuid() primary key,

name text not null,

slug text not null unique,

release_date date,

image_url text,

bio text,

collect_phone boolean default false,

owner_uid text not null, -- Stores user's Supabase Auth user ID

created_at timestamptz default now() not null,

updated_at timestamptz default now() not null

);

-- Create subscribers table

create table public.subscribers (

id uuid default gen_random_uuid() primary key,

waitlist_id uuid references public.waitlists(id) on delete cascade not null,

email text not null,

email2 text,

phone text,

joined_at timestamptz default now() not null

);

-- Enable Row Level Security (RLS)

alter table public.waitlists enable row level security;

alter table public.subscribers enable row level security;

-- waitlists Policies

-- 1. Anyone can read any waitlist (public view by slug)

create policy "Allow public read waitlists"

on public.waitlists for select

using (true);

-- 2. Authenticated users can insert their own waitlists

create policy "Allow user insert own waitlists"

on public.waitlists for insert

with check (auth.uid()::text = owner_uid);

-- 3. Authenticated users can update their own waitlists

create policy "Allow user update own waitlists"

on public.waitlists for update

using (auth.uid()::text = owner_uid);

-- 4. Authenticated users can delete their own waitlists

create policy "Allow user delete own waitlists"

on public.waitlists for delete

using (auth.uid()::text = owner_uid);

-- subscribers Policies

-- 1. Anyone can register/join waitlists (insert subscribers)

create policy "Allow public insert subscribers"

on public.subscribers for insert

with check (true);

-- 2. Only the owner of the waitlist can select its subscribers

create policy "Allow owners view subscribers"

on public.subscribers for select

using (

exists (

select 1 from public.waitlists

where waitlists.id = subscribers.waitlist_id

and waitlists.owner_uid = auth.uid()::text

)

);

`

---

Proposed Changes

[Component: Env Variables Setup]

#### MODIFY] [.env

We will expose the Supabase credentials to the browser by adding client-prefixed aliases:

`env

NEXT_PUBLIC_SUPABASE_URL="https://naavblmebohjjscrufin.supabase.co"

NEXT_PUBLIC_SUPABASE_ANON_KEY="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."

`

---

[Component: Supabase client]

#### NEW] [supabase.js

Initialize the standard Supabase client package.

---

[Component: Authentication UI]

#### MODIFY] [GoogleAuthModal.js

Replace the simulated fields and inputs with a clean call to trigger Google OAuth:

`javascript

import { supabase } from "@/utils/supabase";

// ...

await supabase.auth.signInWithOAuth({

provider: 'google',

options: {

redirectTo: ${window.location.origin}/dashboard

}

});

`

---

[Component: Waitlist CRUD Operations]

#### MODIFY] [db.js

We will deprecate the LocalStorage engine and replace its functions with async Supabase clients fetching and storing records in the live databases.

#### MODIFY] [dashboard/page.js

Update views, list loaders, and editors to handle asynchronous queries and retrieve session auth user states directly from supabase.auth.getSession().

#### MODIFY] [w/[slug]/page.js

Replace standard localStorage slug queries with live queries checking the waitlist and posting new joins.

Verification Plan

Automated Tests

• Run npm install @supabase/supabase-js
• Test build npm run build to verify standard type check safety and compilation parameters.

Manual Verification

• Test user redirect flows when clicking "Continue with Google".
• Verify waitlists and subscriber leads write directly to the Supabase Database dashboard.