feat: add Firebase Auth with Google sign-in

Frontend guard shows login screen for unauthenticated users.
Backend verifies Firebase ID tokens on all protected endpoints.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.env.example

@@ -2,3 +2,12 @@ POSTGRES_USER=favs
 POSTGRES_PASSWORD=favs
 POSTGRES_DB=favs
 ANTHROPIC_API_KEY=sk-ant-...
+
+# Firebase
+VITE_FIREBASE_API_KEY=
+VITE_FIREBASE_AUTH_DOMAIN=
+VITE_FIREBASE_PROJECT_ID=
+VITE_FIREBASE_STORAGE_BUCKET=
+VITE_FIREBASE_MESSAGING_SENDER_ID=
+VITE_FIREBASE_APP_ID=
+VITE_FIREBASE_MEASUREMENT_ID=

.gitignore

@@ -3,3 +3,5 @@ __pycache__/
 .venv/
 .env
 .DS_Store
+node_modules/
+dist/

backend/app/auth.py

@@ -0,0 +1,24 @@
+import firebase_admin
+from firebase_admin import auth as firebase_auth, credentials
+from fastapi import Depends, HTTPException, status
+from fastapi.security import HTTPAuthorizationCredentials, HTTPBearer
+
+from app.config import settings
+
+if settings.firebase_project_id:
+    firebase_admin.initialize_app(options={"projectId": settings.firebase_project_id})
+
+bearer = HTTPBearer()
+
+
+async def get_current_user(
+    cred: HTTPAuthorizationCredentials = Depends(bearer),
+) -> dict:
+    try:
+        decoded = firebase_auth.verify_id_token(cred.credentials)
+        return decoded
+    except Exception:
+        raise HTTPException(
+            status_code=status.HTTP_401_UNAUTHORIZED,
+            detail="Invalid or expired token",
+        )

backend/app/config.py

@@ -5,6 +5,7 @@ class Settings(BaseSettings):
     database_url: str = "postgresql+asyncpg://favs:favs@favs-db:5432/favs"
     anthropic_api_key: str = ""
     categorize_model: str = "claude-haiku-4-5-20251001"
+    firebase_project_id: str = ""
 
     model_config = {"env_file": ".env"}
 

backend/app/routers/bookmarks.py

@@ -4,6 +4,7 @@ from fastapi import APIRouter, Depends, HTTPException
 from sqlalchemy import select
 from sqlalchemy.ext.asyncio import AsyncSession
 
+from app.auth import get_current_user
 from app.database import get_db
 from app.models import Bookmark
 from app.schemas import BookmarkCreate, BookmarkResponse, BookmarkUpdate
@@ -13,7 +14,9 @@ router = APIRouter(prefix="/api/bookmarks", tags=["bookmarks"])
 
 @router.get("/", response_model=list[BookmarkResponse])
 async def list_bookmarks(
-    category: str | None = None, db: AsyncSession = Depends(get_db)
+    category: str | None = None,
+    db: AsyncSession = Depends(get_db),
+    _user: dict = Depends(get_current_user),
 ):
     query = select(Bookmark).order_by(Bookmark.created_at.desc())
     if category:
@@ -23,7 +26,7 @@ async def list_bookmarks(
 
 
 @router.get("/{bookmark_id}", response_model=BookmarkResponse)
-async def get_bookmark(bookmark_id: uuid.UUID, db: AsyncSession = Depends(get_db)):
+async def get_bookmark(bookmark_id: uuid.UUID, db: AsyncSession = Depends(get_db), _user: dict = Depends(get_current_user)):
     result = await db.execute(select(Bookmark).where(Bookmark.id == bookmark_id))
     bookmark = result.scalar_one_or_none()
     if not bookmark:
@@ -32,7 +35,7 @@ async def get_bookmark(bookmark_id: uuid.UUID, db: AsyncSession = Depends(get_db
 
 
 @router.post("/", response_model=BookmarkResponse, status_code=201)
-async def create_bookmark(data: BookmarkCreate, db: AsyncSession = Depends(get_db)):
+async def create_bookmark(data: BookmarkCreate, db: AsyncSession = Depends(get_db), _user: dict = Depends(get_current_user)):
     bookmark = Bookmark(**data.model_dump())
     db.add(bookmark)
     await db.commit()
@@ -42,7 +45,7 @@ async def create_bookmark(data: BookmarkCreate, db: AsyncSession = Depends(get_d
 
 @router.put("/{bookmark_id}", response_model=BookmarkResponse)
 async def update_bookmark(
-    bookmark_id: uuid.UUID, data: BookmarkUpdate, db: AsyncSession = Depends(get_db)
+    bookmark_id: uuid.UUID, data: BookmarkUpdate, db: AsyncSession = Depends(get_db), _user: dict = Depends(get_current_user),
 ):
     result = await db.execute(select(Bookmark).where(Bookmark.id == bookmark_id))
     bookmark = result.scalar_one_or_none()
@@ -56,7 +59,7 @@ async def update_bookmark(
 
 
 @router.delete("/{bookmark_id}", status_code=204)
-async def delete_bookmark(bookmark_id: uuid.UUID, db: AsyncSession = Depends(get_db)):
+async def delete_bookmark(bookmark_id: uuid.UUID, db: AsyncSession = Depends(get_db), _user: dict = Depends(get_current_user)):
     result = await db.execute(select(Bookmark).where(Bookmark.id == bookmark_id))
     bookmark = result.scalar_one_or_none()
     if not bookmark:

backend/app/routers/categorize.py

@@ -1,6 +1,7 @@
 from fastapi import APIRouter, Depends
 from sqlalchemy.ext.asyncio import AsyncSession
 
+from app.auth import get_current_user
 from app.categorizer import categorize_pending
 from app.database import get_db
 
@@ -8,6 +9,6 @@ router = APIRouter(tags=["categorize"])
 
 
 @router.post("/api/categorize")
-async def run_categorize(db: AsyncSession = Depends(get_db)):
+async def run_categorize(db: AsyncSession = Depends(get_db), _user: dict = Depends(get_current_user)):
     count = await categorize_pending(db)
     return {"categorized": count}

backend/requirements.txt

@@ -4,3 +4,4 @@ sqlalchemy[asyncio]==2.0.36
 asyncpg==0.30.0
 pydantic-settings==2.7.1
 anthropic==0.43.0
+firebase-admin==6.6.0

docker-compose.yml

@@ -22,6 +22,7 @@ services:
     environment:
       DATABASE_URL: postgresql+asyncpg://favs:favs@favs-db:5432/favs
       ANTHROPIC_API_KEY: ${ANTHROPIC_API_KEY}
+      FIREBASE_PROJECT_ID: ${VITE_FIREBASE_PROJECT_ID}
     depends_on:
       favs-db:
         condition: service_healthy
@@ -29,5 +30,21 @@ services:
       - ./backend:/app
     command: uvicorn app.main:app --host 0.0.0.0 --port 8000 --reload
 
+  favs-ui:
+    build:
+      context: ./frontend
+      args:
+        - VITE_FIREBASE_API_KEY=${VITE_FIREBASE_API_KEY}
+        - VITE_FIREBASE_AUTH_DOMAIN=${VITE_FIREBASE_AUTH_DOMAIN}
+        - VITE_FIREBASE_PROJECT_ID=${VITE_FIREBASE_PROJECT_ID}
+        - VITE_FIREBASE_STORAGE_BUCKET=${VITE_FIREBASE_STORAGE_BUCKET}
+        - VITE_FIREBASE_MESSAGING_SENDER_ID=${VITE_FIREBASE_MESSAGING_SENDER_ID}
+        - VITE_FIREBASE_APP_ID=${VITE_FIREBASE_APP_ID}
+        - VITE_FIREBASE_MEASUREMENT_ID=${VITE_FIREBASE_MEASUREMENT_ID}
+    ports:
+      - "3000:80"
+    depends_on:
+      - favs-api
+
 volumes:
   favs_pgdata:

frontend/.dockerignore

@@ -0,0 +1,2 @@
+node_modules
+dist

frontend/Dockerfile

@@ -0,0 +1,17 @@
+FROM node:22-alpine AS build
+WORKDIR /app
+COPY package.json package-lock.json* ./
+RUN npm install
+COPY . .
+ARG VITE_FIREBASE_API_KEY
+ARG VITE_FIREBASE_AUTH_DOMAIN
+ARG VITE_FIREBASE_PROJECT_ID
+ARG VITE_FIREBASE_STORAGE_BUCKET
+ARG VITE_FIREBASE_MESSAGING_SENDER_ID
+ARG VITE_FIREBASE_APP_ID
+ARG VITE_FIREBASE_MEASUREMENT_ID
+RUN npm run build
+
+FROM nginx:alpine
+COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=build /app/dist /usr/share/nginx/html

frontend/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Favs</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.js"></script>
+</body>
+</html>

frontend/nginx.conf

@@ -0,0 +1,13 @@
+server {
+    listen 80;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location /api/ {
+        proxy_pass http://favs-api:8000;
+    }
+
+    location / {
+        try_files $uri $uri/ /index.html;
+    }
+}

frontend/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "favs-ui",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5",
+    "firebase": "^11.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0",
+    "vite": "^6.0"
+  }
+}

frontend/src/App.vue

@@ -0,0 +1,116 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useAuth } from './composables/useAuth.js'
+import { getBookmarks, triggerCategorize } from './api.js'
+import BookmarkForm from './components/BookmarkForm.vue'
+import BookmarkList from './components/BookmarkList.vue'
+
+const { user, loading, loginWithGoogle, logout } = useAuth()
+
+const bookmarks = ref([])
+const activeCategory = ref(null)
+const categorizing = ref(false)
+const status = ref('')
+
+const categories = computed(() => {
+  const cats = new Set()
+  bookmarks.value.forEach(b => { if (b.category) cats.add(b.category) })
+  return [...cats].sort()
+})
+
+const filtered = computed(() => {
+  if (!activeCategory.value) return bookmarks.value
+  return bookmarks.value.filter(b => b.category === activeCategory.value)
+})
+
+async function load() {
+  if (!user.value) return
+  bookmarks.value = await getBookmarks()
+}
+
+function onCreated(bookmark) {
+  bookmarks.value.unshift(bookmark)
+}
+
+function onDeleted(id) {
+  bookmarks.value = bookmarks.value.filter(b => b.id !== id)
+}
+
+function setCategory(cat) {
+  activeCategory.value = activeCategory.value === cat ? null : cat
+}
+
+async function categorize() {
+  categorizing.value = true
+  status.value = ''
+  try {
+    const res = await triggerCategorize()
+    status.value = `${res.categorized} bookmarks categorized`
+    await load()
+  } catch (e) {
+    status.value = `Error: ${e.message}`
+  } finally {
+    categorizing.value = false
+  }
+}
+
+onMounted(() => {
+  const stop = setInterval(() => {
+    if (!loading.value) {
+      clearInterval(stop)
+      if (user.value) load()
+    }
+  }, 50)
+})
+</script>
+
+<template>
+  <div class="container">
+    <!-- Loading -->
+    <div v-if="loading" class="empty">Loading...</div>
+
+    <!-- Login -->
+    <div v-else-if="!user" class="login-screen">
+      <h1>favs</h1>
+      <p class="login-subtitle">Your personal bookmarks</p>
+      <button class="btn-google" @click="loginWithGoogle">Sign in with Google</button>
+    </div>
+
+    <!-- App -->
+    <div v-else>
+      <div class="header">
+        <h1>favs</h1>
+        <div class="user-info">
+          <span class="user-email">{{ user.email }}</span>
+          <button class="btn-logout" @click="logout">Logout</button>
+        </div>
+      </div>
+
+      <BookmarkForm @created="onCreated" />
+
+      <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;">
+        <button class="btn-categorize" @click="categorize" :disabled="categorizing">
+          {{ categorizing ? 'Categorizing...' : 'Categorize' }}
+        </button>
+        <span v-if="status" class="status">{{ status }}</span>
+      </div>
+
+      <div v-if="categories.length" class="category-bar">
+        <button
+          class="category-pill"
+          :class="{ active: !activeCategory }"
+          @click="activeCategory = null"
+        >all</button>
+        <button
+          v-for="cat in categories"
+          :key="cat"
+          class="category-pill"
+          :class="{ active: activeCategory === cat }"
+          @click="setCategory(cat)"
+        >{{ cat }}</button>
+      </div>
+
+      <BookmarkList :bookmarks="filtered" @deleted="onDeleted" />
+    </div>
+  </div>
+</template>

frontend/src/api.js

@@ -0,0 +1,32 @@
+import { getIdToken } from './firebase.js'
+
+const BASE = '/api'
+
+async function request(path, options = {}) {
+  const token = await getIdToken()
+  const headers = {
+    'Content-Type': 'application/json',
+    ...options.headers,
+  }
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`
+  }
+  const res = await fetch(`${BASE}${path}`, { ...options, headers })
+  if (!res.ok) throw new Error(`${res.status} ${res.statusText}`)
+  if (res.status === 204) return null
+  return res.json()
+}
+
+export const getBookmarks = (category) => {
+  const qs = category ? `?category=${encodeURIComponent(category)}` : ''
+  return request(`/bookmarks/${qs}`)
+}
+
+export const createBookmark = (data) =>
+  request('/bookmarks/', { method: 'POST', body: JSON.stringify(data) })
+
+export const deleteBookmark = (id) =>
+  request(`/bookmarks/${id}`, { method: 'DELETE' })
+
+export const triggerCategorize = () =>
+  request('/categorize', { method: 'POST' })

frontend/src/components/BookmarkForm.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { ref } from 'vue'
+import { createBookmark } from '../api.js'
+
+const emit = defineEmits(['created'])
+const title = ref('')
+const link = ref('')
+
+async function submit() {
+  if (!title.value.trim() || !link.value.trim()) return
+  const bookmark = await createBookmark({
+    title: title.value.trim(),
+    link: link.value.trim(),
+  })
+  emit('created', bookmark)
+  title.value = ''
+  link.value = ''
+}
+</script>
+
+<template>
+  <form class="bookmark-form" @submit.prevent="submit">
+    <input v-model="title" placeholder="Title" required />
+    <input v-model="link" placeholder="https://..." required />
+    <button type="submit" class="btn-add">Add</button>
+  </form>
+</template>

frontend/src/components/BookmarkList.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { deleteBookmark } from '../api.js'
+
+defineProps({ bookmarks: Array })
+const emit = defineEmits(['deleted'])
+
+async function remove(id) {
+  await deleteBookmark(id)
+  emit('deleted', id)
+}
+</script>
+
+<template>
+  <div v-if="!bookmarks.length" class="empty">No bookmarks yet</div>
+  <div v-for="b in bookmarks" :key="b.id" class="bookmark-item">
+    <div class="bookmark-info">
+      <a :href="b.link" target="_blank" rel="noopener" class="bookmark-title">{{ b.title }}</a>
+      <div class="bookmark-meta">
+        <span v-if="b.category" class="bookmark-category">{{ b.category }}</span>
+        {{ new Date(b.created_at).toLocaleDateString() }}
+      </div>
+    </div>
+    <button class="btn-delete" @click="remove(b.id)">delete</button>
+  </div>
+</template>

frontend/src/composables/useAuth.js

@@ -0,0 +1,20 @@
+import { ref, onMounted } from 'vue'
+import { onAuthStateChanged } from 'firebase/auth'
+import { auth, loginWithGoogle, logout } from '../firebase.js'
+
+const user = ref(null)
+const loading = ref(true)
+
+let initialized = false
+
+export function useAuth() {
+  if (!initialized) {
+    initialized = true
+    onAuthStateChanged(auth, (u) => {
+      user.value = u
+      loading.value = false
+    })
+  }
+
+  return { user, loading, loginWithGoogle, logout }
+}

frontend/src/firebase.js

@@ -0,0 +1,24 @@
+import { initializeApp } from 'firebase/app'
+import { getAuth, GoogleAuthProvider, signInWithPopup, signOut } from 'firebase/auth'
+
+const app = initializeApp({
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
+  appId: import.meta.env.VITE_FIREBASE_APP_ID,
+})
+
+export const auth = getAuth(app)
+
+const provider = new GoogleAuthProvider()
+
+export const loginWithGoogle = () => signInWithPopup(auth, provider)
+export const logout = () => signOut(auth)
+
+export async function getIdToken() {
+  const user = auth.currentUser
+  if (!user) return null
+  return user.getIdToken()
+}

frontend/src/main.js

@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './style.css'
+
+createApp(App).mount('#app')

frontend/src/style.css

@@ -0,0 +1,239 @@
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  background: #0f0f0f;
+  color: #e0e0e0;
+  line-height: 1.5;
+}
+
+.container {
+  max-width: 700px;
+  margin: 2rem auto;
+  padding: 0 1rem;
+}
+
+h1 {
+  font-size: 1.5rem;
+  margin-bottom: 1.5rem;
+  color: #fff;
+}
+
+/* Form */
+.bookmark-form {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1.5rem;
+}
+
+.bookmark-form input {
+  flex: 1;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid #333;
+  border-radius: 6px;
+  background: #1a1a1a;
+  color: #e0e0e0;
+  font-size: 0.875rem;
+}
+
+.bookmark-form input:focus {
+  outline: none;
+  border-color: #555;
+}
+
+.bookmark-form input::placeholder {
+  color: #666;
+}
+
+/* Buttons */
+button {
+  padding: 0.5rem 1rem;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background 0.15s;
+}
+
+.btn-add {
+  background: #2563eb;
+  color: #fff;
+}
+
+.btn-add:hover {
+  background: #1d4ed8;
+}
+
+.btn-categorize {
+  background: #1a1a1a;
+  color: #a0a0a0;
+  border: 1px solid #333;
+  margin-bottom: 1rem;
+}
+
+.btn-categorize:hover {
+  background: #252525;
+  color: #fff;
+}
+
+.btn-delete {
+  background: none;
+  color: #555;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+}
+
+.btn-delete:hover {
+  color: #ef4444;
+}
+
+/* Category bar */
+.category-bar {
+  display: flex;
+  gap: 0.375rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.category-pill {
+  padding: 0.25rem 0.75rem;
+  border-radius: 999px;
+  background: #1a1a1a;
+  color: #888;
+  border: 1px solid #282828;
+  font-size: 0.75rem;
+  cursor: pointer;
+}
+
+.category-pill:hover {
+  color: #ccc;
+  border-color: #444;
+}
+
+.category-pill.active {
+  background: #2563eb;
+  color: #fff;
+  border-color: #2563eb;
+}
+
+/* Bookmark list */
+.bookmark-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.625rem 0;
+  border-bottom: 1px solid #1a1a1a;
+}
+
+.bookmark-info {
+  min-width: 0;
+  flex: 1;
+}
+
+.bookmark-title {
+  color: #60a5fa;
+  text-decoration: none;
+  font-size: 0.875rem;
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.bookmark-title:hover {
+  text-decoration: underline;
+}
+
+.bookmark-meta {
+  font-size: 0.7rem;
+  color: #555;
+  margin-top: 0.125rem;
+}
+
+.bookmark-category {
+  color: #888;
+  background: #1a1a1a;
+  padding: 0.1rem 0.4rem;
+  border-radius: 4px;
+  font-size: 0.65rem;
+}
+
+.empty {
+  color: #555;
+  font-size: 0.875rem;
+  padding: 2rem 0;
+  text-align: center;
+}
+
+.status {
+  font-size: 0.75rem;
+  color: #888;
+  margin-bottom: 0.5rem;
+}
+
+/* Login */
+.login-screen {
+  text-align: center;
+  padding-top: 20vh;
+}
+
+.login-subtitle {
+  color: #666;
+  margin-bottom: 2rem;
+  font-size: 0.875rem;
+}
+
+.btn-google {
+  background: #fff;
+  color: #333;
+  padding: 0.625rem 1.5rem;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border-radius: 6px;
+}
+
+.btn-google:hover {
+  background: #f0f0f0;
+}
+
+/* Header */
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 1.5rem;
+}
+
+.header h1 {
+  margin-bottom: 0;
+}
+
+.user-info {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.user-email {
+  font-size: 0.75rem;
+  color: #666;
+}
+
+.btn-logout {
+  background: none;
+  color: #666;
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border: 1px solid #333;
+}
+
+.btn-logout:hover {
+  color: #fff;
+  border-color: #555;
+}

frontend/vite.config.js

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue()],
+  server: {
+    host: '0.0.0.0',
+    port: 5173,
+    proxy: {
+      '/api': 'http://favs-api:8000'
+    }
+  }
+})