Smart Bookmark App

A secure, multi-user bookmark manager with real-time synchronization, built with Next.js App Router and Supabase.

Features

• Authentication: Google OAuth login (Supabase Auth).
• Security: Row Level Security (RLS) ensures users only see their own data.
• Real-time: Instant updates across tabs using Supabase Realtime.
• Performance: Server Actions and Optimistic updates (via router.refresh).

Setup Instructions

1. Environment Setup

Update .env with your Supabase credentials:

NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

2. Supabase Setup

1. Create a new Supabase project.
2. Go to the SQL Editor in your Supabase dashboard.
3. Copy and paste the contents of supabase_schema.sql and run it.
4. Go to Authentication -> Providers and enable Google.
5. (Optional for local dev) Add http://localhost:3000 to your Redirect URLs in Supabase Authentication settings.

3. Run Locally

npm install
npm run dev

Open http://localhost:3000.

Troubleshooting

Google OAuth 400 Bad Request Error

If you encounter a 400 (Bad Request) error during login, it typically means Supabase rejected the authentication request.

Potential Causes:

1. Redirect URL not allowed: The URL http://localhost:3000/auth/callback is not in your Supabase "Redirect URLs" allowlist.
2. Google Provider not enabled/configured: The Google login provider isn't fully set up in Supabase.
3. Google Cloud Misconfiguration: The Authorized Redirect URI in Google Cloud Console is incorrect.

How to Fix:

1. Supabase - Redirect URLs:
   • Go to Authentication -> URL Configuration.
   • Add http://localhost:3000/auth/callback to Redirect URLs.
2. Supabase - Google Provider:
   • Go to Authentication -> Providers -> Google.
   • Ensure it is Enabled.
   • Verify Client ID and Client Secret match your Google Cloud credentials.
3. Google Cloud Console:
   • Ensure your Authorized redirect URI is set to https://<your-project-ref>.supabase.co/auth/v1/callback (your Supabase Callback URL, NOT localhost).

Real-Time Updates Not Working

If you don't see bookmarks appearing instantly in other tabs:

1. Enable Realtime: Realtime is disabled by default for new tables.
   • Go to Supabase Dashboard -> Database -> Publications.
   • Ensure supabase_realtime includes the bookmarks table.
   • Or via SQL: alter publication supabase_realtime add table bookmarks;
2. Check RLS: Ensure your Row Level Security policies allow SELECT for your user.

Deployment

1. Push to GitHub.
2. Import project into Vercel.
3. Add the NEXT_PUBLIC_SUPABASE_URL and NEXT_PUBLIC_SUPABASE_ANON_KEY environment variables in Vercel.
4. Update your Supabase Authentication Redirect URLs to include your Vercel deployment URL (e.g., https://your-app.vercel.app/auth/callback).
5. Update Google Cloud Console Authorized Redirect URIs with the production URL.

Challenges & Solutions

Real-Time Synchronization with Server Components

Challenge: Next.js App Router uses Server Components by default, which don't automatically re-render when data changes in the database. Solution: We used a client-side component (RealtimeBookmarks) to subscribe to Supabase Postgres Changes. When a change is detected (INSERT/DELETE), it calls router.refresh(). This triggers a soft refresh of the current route, causing Server Components to re-fetch data without losing client-side state (like scroll position).

Authentication & Middleware

Challenge: Protecting routes and managing sessions securely. Solution: specific Supabase middleware manages the session refresh and protects routes by checking for an active user session, redirecting unauthenticated users to /login.