tweak

Implement tiers end to end

.gitea/workflows/check.yml

@@ -1,9 +0,0 @@
-name: check
-on: [push]
-jobs:
-    check:
-        runs-on: ubuntu-latest
-        steps:
-            # actions/checkout v4.2.2, 2026-02-22
-            - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683
-            - run: docker build .

.gitignore

@@ -22,6 +22,8 @@ node_modules/
 
 # Go build artifacts
 backend/bin/
+backend/api
+backend/poller
 *.exe
 *.exe~
 *.dll

LICENSE

@@ -2,8 +2,7 @@ MIT License
 
 Copyright (c) 2026 Steven Jannette
 
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is

REPO_POLICIES.md

@@ -1,188 +0,0 @@
----
-title: Repository Policies
-last_modified: 2026-02-22
----
-
-This document covers repository structure, tooling, and workflow standards. Code
-style conventions are in separate documents:
-
-- [Code Styleguide](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE.md)
-  (general, bash, Docker)
-- [Go](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_GO.md)
-- [JavaScript](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_JS.md)
-- [Python](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/CODE_STYLEGUIDE_PYTHON.md)
-- [Go HTTP Server Conventions](https://git.eeqj.de/sneak/prompts/raw/branch/main/prompts/GO_HTTP_SERVER_CONVENTIONS.md)
-
----
-
-- Cross-project documentation (such as this file) must include
-  `last_modified: YYYY-MM-DD` in the YAML front matter so it can be kept in sync
-  with the authoritative source as policies evolve.
-
-- **ALL external references must be pinned by cryptographic hash.** This
-  includes Docker base images, Go modules, npm packages, GitHub Actions, and
-  anything else fetched from a remote source. Version tags (`@v4`, `@latest`,
-  `:3.21`, etc.) are server-mutable and therefore remote code execution
-  vulnerabilities. The ONLY acceptable way to reference an external dependency
-  is by its content hash (Docker `@sha256:...`, Go module hash in `go.sum`, npm
-  integrity hash in lockfile, GitHub Actions `@<commit-sha>`). No exceptions.
-  This also means never `curl | bash` to install tools like pyenv, nvm, rustup,
-  etc. Instead, download a specific release archive from GitHub, verify its hash
-  (hardcoded in the Dockerfile or script), and only then install. Unverified
-  install scripts are arbitrary remote code execution. This is the single most
-  important rule in this document. Double-check every external reference in
-  every file before committing. There are zero exceptions to this rule.
-
-- Every repo with software must have a root `Makefile` with these targets:
-  `make test`, `make lint`, `make fmt` (writes), `make fmt-check` (read-only),
-  `make check` (prereqs: `test`, `lint`, `fmt-check`), `make docker`, and
-  `make hooks` (installs pre-commit hook). A model Makefile is at
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/Makefile`.
-
-- Always use Makefile targets (`make fmt`, `make test`, `make lint`, etc.)
-  instead of invoking the underlying tools directly. The Makefile is the single
-  source of truth for how these operations are run.
-
-- The Makefile is authoritative documentation for how the repo is used. Beyond
-  the required targets above, it should have targets for every common operation:
-  running a local development server (`make run`, `make dev`), re-initializing
-  or migrating the database (`make db-reset`, `make migrate`), building
-  artifacts (`make build`), generating code, seeding data, or anything else a
-  developer would do regularly. If someone checks out the repo and types
-  `make<tab>`, they should see every meaningful operation available. A new
-  contributor should be able to understand the entire development workflow by
-  reading the Makefile.
-
-- Every repo should have a `Dockerfile`. All Dockerfiles must run `make check`
-  as a build step so the build fails if the branch is not green. For non-server
-  repos, the Dockerfile should bring up a development environment and run
-  `make check`. For server repos, `make check` should run as an early build
-  stage before the final image is assembled.
-
-- Every repo should have a Gitea Actions workflow (`.gitea/workflows/`) that
-  runs `docker build .` on push. Since the Dockerfile already runs `make check`,
-  a successful build implies all checks pass.
-
-- Use platform-standard formatters: `black` for Python, `prettier` for
-  JS/CSS/Markdown/HTML, `go fmt` for Go. Always use default configuration with
-  two exceptions: four-space indents (except Go), and `proseWrap: always` for
-  Markdown (hard-wrap at 80 columns). Documentation and writing repos (Markdown,
-  HTML, CSS) should also have `.prettierrc` and `.prettierignore`.
-
-- Pre-commit hook: `make check` if local testing is possible, otherwise
-  `make lint && make fmt-check`. The Makefile should provide a `make hooks`
-  target to install the pre-commit hook.
-
-- All repos with software must have tests that run via the platform-standard
-  test framework (`go test`, `pytest`, `jest`/`vitest`, etc.). If no meaningful
-  tests exist yet, add the most minimal test possible — e.g. importing the
-  module under test to verify it compiles/parses. There is no excuse for
-  `make test` to be a no-op.
-
-- `make test` must complete in under 20 seconds. Add a 30-second timeout in the
-  Makefile.
-
-- Docker builds must complete in under 5 minutes.
-
-- `make check` must not modify any files in the repo. Tests may use temporary
-  directories.
-
-- `main` must always pass `make check`, no exceptions.
-
-- Never commit secrets. `.env` files, credentials, API keys, and private keys
-  must be in `.gitignore`. No exceptions.
-
-- `.gitignore` should be comprehensive from the start: OS files (`.DS_Store`),
-  editor files (`.swp`, `*~`), language build artifacts, and `node_modules/`.
-  Fetch the standard `.gitignore` from
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/.gitignore` when setting up
-  a new repo.
-
-- Never use `git add -A` or `git add .`. Always stage files explicitly by name.
-
-- Never force-push to `main`.
-
-- Make all changes on a feature branch. You can do whatever you want on a
-  feature branch.
-
-- `.golangci.yml` is standardized and must _NEVER_ be modified by an agent, only
-  manually by the user. Fetch from
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/.golangci.yml`.
-
-- When pinning images or packages by hash, add a comment above the reference
-  with the version and date (YYYY-MM-DD).
-
-- Use `yarn`, not `npm`.
-
-- Write all dates as YYYY-MM-DD (ISO 8601).
-
-- Simple projects should be configured with environment variables.
-
-- Dockerized web services listen on port 8080 by default, overridable with
-  `PORT`.
-
-- `README.md` is the primary documentation. Required sections:
-    - **Description**: First line must include the project name, purpose,
-      category (web server, SPA, CLI tool, etc.), license, and author. Example:
-      "µPaaS is an MIT-licensed Go web application by @sneak that receives
-      git-frontend webhooks and deploys applications via Docker in realtime."
-    - **Getting Started**: Copy-pasteable install/usage code block.
-    - **Rationale**: Why does this exist?
-    - **Design**: How is the program structured?
-    - **TODO**: Update meticulously, even between commits. When planning, put
-      the todo list in the README so a new agent can pick up where the last one
-      left off.
-    - **License**: MIT, GPL, or WTFPL. Ask the user for new projects. Include a
-      `LICENSE` file in the repo root and a License section in the README.
-    - **Author**: [@sneak](https://sneak.berlin).
-
-- First commit of a new repo should contain only `README.md`.
-
-- Go module root: `sneak.berlin/go/<name>`. Always run `go mod tidy` before
-  committing.
-
-- Use SemVer.
-
-- Database migrations live in `internal/db/migrations/` and must be embedded in
-  the binary.
-    - `000_migration.sql` — contains ONLY the creation of the migrations
-      tracking table itself. Nothing else.
-    - `001_schema.sql` — the full application schema.
-    - **Pre-1.0.0:** never add additional migration files (002, 003, etc.).
-      There is no installed base to migrate. Edit `001_schema.sql` directly.
-    - **Post-1.0.0:** add new numbered migration files for each schema change.
-      Never edit existing migrations after release.
-
-- All repos should have an `.editorconfig` enforcing the project's indentation
-  settings.
-
-- Avoid putting files in the repo root unless necessary. Root should contain
-  only project-level config files (`README.md`, `Makefile`, `Dockerfile`,
-  `LICENSE`, `.gitignore`, `.editorconfig`, `REPO_POLICIES.md`, and
-  language-specific config). Everything else goes in a subdirectory. Canonical
-  subdirectory names:
-    - `bin/` — executable scripts and tools
-    - `cmd/` — Go command entrypoints
-    - `configs/` — configuration templates and examples
-    - `deploy/` — deployment manifests (k8s, compose, terraform)
-    - `docs/` — documentation and markdown (README.md stays in root)
-    - `internal/` — Go internal packages
-    - `internal/db/migrations/` — database migrations
-    - `pkg/` — Go library packages
-    - `share/` — systemd units, data files
-    - `static/` — static assets (images, fonts, etc.)
-    - `web/` — web frontend source
-
-- When setting up a new repo, files from the `prompts` repo may be used as
-  templates. Fetch them from
-  `https://git.eeqj.de/sneak/prompts/raw/branch/main/<path>`.
-
-- New repos must contain at minimum:
-    - `README.md`, `.git`, `.gitignore`, `.editorconfig`
-    - `LICENSE`, `REPO_POLICIES.md` (copy from the `prompts` repo)
-    - `Makefile`
-    - `Dockerfile`, `.dockerignore`
-    - `.gitea/workflows/check.yml`
-    - Go: `go.mod`, `go.sum`, `.golangci.yml`
-    - JS: `package.json`, `yarn.lock`, `.prettierrc`, `.prettierignore`
-    - Python: `pyproject.toml`

backend/Makefile

@@ -37,7 +37,7 @@ tidy:
 
 # Database setup
 db-setup:
-	psql -d koin_ping_dev -f infra/schema.sql
+	psql -d koin_ping -f infra/schema.sql
 
 vet:
 	go vet ./...

backend/README.md

@@ -1,20 +1,33 @@
-Start DB:
+Backend startup quickstart:
 
-brew services start postgresql@15
+----------------------------->  BEST
+## 1. brew services start postgresql@15
 
-From the backend directory, you have a few options:
+          OR 
 
-Option 1: Single command (both API + poller)
-cd /Users/kjannette/workspace/koin_ping_0.2.0/backendmake dev-all
+      /opt/homebrew/opt/postgresql@15/bin/pg_ctl -D /opt/homebrew/var/postgresql@15 start
 
-Option 2: Two separate terminals
-Terminal 1 (API server):
-cd /Users/kjannette/workspace/koin_ping_0.2.0/backend go run ./cmd/api
-Terminal 2 (Poller):
-cd /Users/kjannette/workspace/koin_ping_0.2.0/backend go run ./cmd/poller
+## 2.   ALLIN ONE: 
+        Make dev-all — Runs both the API and poller concurrently.
+----------------------------->  BEST
+
+          - OR - 
+          
+           
+## 3.  Option 1: Single command (both API + poller)
+       cd /Users/kjannette/workspace/koin_ping_0.2.0/backendmake dev-all
+
+## 4.   Option 2: Two separate terminals
+        Terminal 1 (API server):
+        cd /Users/kjannette/workspace/koin_ping_0.2.0/backend go run ./cmd/api
+        
+        make run — Builds and runs the API server.
+        make dev — Runs the API server with auto-reload via air (falls back to go run if air isn't installed).
+
+## 5.   Terminal 2 (Poller):
+        cd /Users/kjannette/workspace/koin_ping_0.2.0/backend 
+        go run ./cmd/poller
+
+        make poller — Builds and runs the poller.
+        make poller-dev — Runs the poller with auto-reload.
 
-make run — Builds and runs the API server.
-make dev — Runs the API server with auto-reload via air (falls back to go run if air isn't installed).
-make poller — Builds and runs the poller.
-make poller-dev — Runs the poller with auto-reload.
-make dev-all — Runs both the API and poller concurrently.

backend/cmd/api/main.go

@@ -10,7 +10,6 @@ import (
 	"github.com/joho/godotenv"
 	"github.com/kjannette/koin-ping/backend/internal/config"
 	"github.com/kjannette/koin-ping/backend/internal/database"
-	"github.com/kjannette/koin-ping/backend/internal/firebase"
 	"github.com/kjannette/koin-ping/backend/internal/handlers"
 	"github.com/kjannette/koin-ping/backend/internal/middleware"
 	"github.com/kjannette/koin-ping/backend/internal/models"
@@ -38,10 +37,6 @@ func main() {
 		log.Fatalf("Failed to connect to database: %v", err)
 	}
 
-	if err := firebase.Init(cfg.FirebaseProjectID); err != nil {
-		log.Fatalf("Failed to initialize Firebase: %v", err)
-	}
-
 	defer database.Close()
 
 	userModel := models.NewUserModel(pool)
@@ -55,15 +50,17 @@ func main() {
 		cfg.ResendAPIKey, cfg.EmailFrom, alertEventModel, notifConfigModel,
 	)
 
-	addressHandler := handlers.NewAddressHandler(addressModel)
-	alertRuleHandler := handlers.NewAlertRuleHandler(alertRuleModel, addressModel)
+	addressHandler := handlers.NewAddressHandler(addressModel, userModel)
+	alertRuleHandler := handlers.NewAlertRuleHandler(alertRuleModel, addressModel, userModel)
 	alertEventHandler := handlers.NewAlertEventHandler(alertEventModel)
-	notifConfigHandler := handlers.NewNotificationConfigHandler(notifConfigModel, cfg)
+	notifConfigHandler := handlers.NewNotificationConfigHandler(notifConfigModel, userModel, cfg)
 	emailDigestHandler := handlers.NewEmailDigestHandler(emailDigestSvc, notifConfigModel)
 	statusHandler := handlers.NewStatusHandler(checkpointModel)
 	stripeHandler := handlers.NewStripeHandler(userModel, cfg)
+	accountHandler := handlers.NewAccountHandler(userModel, addressModel, cfg)
+	authHandler := handlers.NewAuthHandler(userModel, cfg)
 
-	authenticate := middleware.Authenticate(userModel)
+	authenticate := middleware.Authenticate(userModel, cfg.JWTSecret)
 	requireSub := middleware.RequireSubscription(userModel)
 
 	// authAndSub chains authentication + subscription check for protected routes.
@@ -78,9 +75,16 @@ func main() {
 	mux.HandleFunc("GET "+b+"/health", handlers.HealthCheck)
 	mux.HandleFunc("GET "+b+"/status", statusHandler.GetStatus)
 
+	// Auth routes (public — no token required)
+	mux.HandleFunc("POST "+b+"/auth/login", authHandler.Login)
+	mux.HandleFunc("POST "+b+"/auth/register", authHandler.RegisterAfterCheckout)
+
 	// Stripe webhook (public — called by Stripe, not authenticated)
 	mux.HandleFunc("POST "+b+"/stripe/webhook", stripeHandler.HandleWebhook)
 
+	// Onboarding checkout (public — account doesn't exist yet)
+	mux.HandleFunc("POST "+b+"/stripe/create-onboarding-checkout", stripeHandler.CreateOnboardingCheckout)
+
 	// Stripe routes (auth required, NO subscription required)
 	mux.Handle("POST "+b+"/stripe/create-checkout-session",
 		authenticate(http.HandlerFunc(stripeHandler.CreateCheckoutSession)))
@@ -88,6 +92,14 @@ func main() {
 		authenticate(http.HandlerFunc(stripeHandler.GetSubscriptionStatus)))
 	mux.Handle("POST "+b+"/stripe/verify-checkout",
 		authenticate(http.HandlerFunc(stripeHandler.VerifyCheckoutSession)))
+	mux.Handle("POST "+b+"/stripe/create-portal-session",
+		authenticate(http.HandlerFunc(stripeHandler.CreatePortalSession)))
+	mux.Handle("POST "+b+"/stripe/activate-free",
+		authenticate(http.HandlerFunc(stripeHandler.ActivateFreeTier)))
+
+	// Account route (auth required, NO subscription required)
+	mux.Handle("GET "+b+"/user/account",
+		authenticate(http.HandlerFunc(accountHandler.GetAccount)))
 
 	// Authenticated + subscribed routes — addresses
 	mux.Handle("POST "+b+"/addresses",

backend/cmd/poller/main.go

@@ -51,6 +51,7 @@ func main() {
 
 	defer database.Close()
 
+	userModel := models.NewUserModel(pool)
 	addressModel := models.NewAddressModel(pool)
 	alertRuleModel := models.NewAlertRuleModel(pool)
 	alertEventModel := models.NewAlertEventModel(pool)
@@ -59,8 +60,7 @@ func main() {
 
 	observer := services.NewObserverService(eth, addressModel, checkpointModel)
 	evaluator := services.NewEvaluatorService(
-		eth, alertRuleModel, alertEventModel, addressModel, notifConfigModel,
-		cfg.ResendAPIKey, cfg.EmailFrom,
+		eth, alertRuleModel, alertEventModel, addressModel, userModel, notifConfigModel,
 	)
 	digestSvc := services.NewEmailDigestService(cfg.ResendAPIKey, cfg.EmailFrom, alertEventModel, notifConfigModel)
 

backend/go.mod

@@ -32,6 +32,7 @@ require (
 	github.com/go-logr/logr v1.4.3 // indirect
 	github.com/go-logr/stdr v1.2.2 // indirect
 	github.com/golang-jwt/jwt/v4 v4.5.2 // indirect
+	github.com/golang-jwt/jwt/v5 v5.3.1 // indirect
 	github.com/golang/protobuf v1.5.4 // indirect
 	github.com/google/s2a-go v0.1.9 // indirect
 	github.com/google/uuid v1.6.0 // indirect
@@ -54,12 +55,12 @@ require (
 	go.opentelemetry.io/otel/sdk v1.39.0 // indirect
 	go.opentelemetry.io/otel/sdk/metric v1.39.0 // indirect
 	go.opentelemetry.io/otel/trace v1.39.0 // indirect
-	golang.org/x/crypto v0.48.0 // indirect
-	golang.org/x/net v0.50.0 // indirect
+	golang.org/x/crypto v0.49.0 // indirect
+	golang.org/x/net v0.51.0 // indirect
 	golang.org/x/oauth2 v0.35.0 // indirect
-	golang.org/x/sync v0.19.0 // indirect
-	golang.org/x/sys v0.41.0 // indirect
-	golang.org/x/text v0.34.0 // indirect
+	golang.org/x/sync v0.20.0 // indirect
+	golang.org/x/sys v0.42.0 // indirect
+	golang.org/x/text v0.35.0 // indirect
 	golang.org/x/time v0.14.0 // indirect
 	google.golang.org/appengine/v2 v2.0.6 // indirect
 	google.golang.org/genproto v0.0.0-20260128011058-8636f8732409 // indirect

backend/go.sum

@@ -61,6 +61,8 @@ github.com/go-logr/stdr v1.2.2/go.mod h1:mMo/vtBO5dYbehREoey6XUKy/eSumjCCveDpRre
 github.com/golang-jwt/jwt/v4 v4.4.2/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
 github.com/golang-jwt/jwt/v4 v4.5.2 h1:YtQM7lnr8iZ+j5q71MGKkNw9Mn7AjHM68uc9g5fXeUI=
 github.com/golang-jwt/jwt/v4 v4.5.2/go.mod h1:m21LjoU+eqJr34lmDMbreY2eSTRJ1cv77w39/MY0Ch0=
+github.com/golang-jwt/jwt/v5 v5.3.1 h1:kYf81DTWFe7t+1VvL7eS+jKFVWaUnK9cB1qbwn63YCY=
+github.com/golang-jwt/jwt/v5 v5.3.1/go.mod h1:fxCRLWMO43lRc8nhHWY6LGqRcf+1gQWArsqaEUEa5bE=
 github.com/golang/protobuf v1.5.0/go.mod h1:FsONVRAS9T7sI+LIUmWTfcYkHO4aIWwzhcaSAoJOfIk=
 github.com/golang/protobuf v1.5.4 h1:i7eJL8qZTpSEXOPTxNKhASYpMn+8e5Q6AdndVa1dWek=
 github.com/golang/protobuf v1.5.4/go.mod h1:lnTiLA8Wa4RWRcIUkrtSVa5nRhsEGBg48fD6rSs7xps=
@@ -128,18 +130,24 @@ golang.org/x/crypto v0.0.0-20190308221718-c2843e01d9a2/go.mod h1:djNgcEr1/C05ACk
 golang.org/x/crypto v0.0.0-20210921155107-089bfa567519/go.mod h1:GvvjBRRGRdwPK5ydBHafDWAxML/pGHZbMvKqRZ5+Abc=
 golang.org/x/crypto v0.48.0 h1:/VRzVqiRSggnhY7gNRxPauEQ5Drw9haKdM0jqfcCFts=
 golang.org/x/crypto v0.48.0/go.mod h1:r0kV5h3qnFPlQnBSrULhlsRfryS2pmewsg+XfMgkVos=
+golang.org/x/crypto v0.49.0 h1:+Ng2ULVvLHnJ/ZFEq4KdcDd/cfjrrjjNSXNzxg0Y4U4=
+golang.org/x/crypto v0.49.0/go.mod h1:ErX4dUh2UM+CFYiXZRTcMpEcN8b/1gxEuv3nODoYtCA=
 golang.org/x/mod v0.6.0-dev.0.20220419223038-86c51ed26bb4/go.mod h1:jJ57K6gSWd91VN4djpZkiMVwK6gcyfeH4XE8wZrZaV4=
 golang.org/x/net v0.0.0-20190620200207-3b0461eec859/go.mod h1:z5CRVTTTmAJ677TzLLGU+0bjPO0LkuOLi4/5GtJWs/s=
 golang.org/x/net v0.0.0-20210226172049-e18ecbb05110/go.mod h1:m0MpNAwzfU5UDzcl9v0D8zg8gWTRqZa9RBIspLL5mdg=
 golang.org/x/net v0.0.0-20220722155237-a158d28d115b/go.mod h1:XRhObCWvk6IyKnWLug+ECip1KBveYUHfp+8e9klMJ9c=
 golang.org/x/net v0.50.0 h1:ucWh9eiCGyDR3vtzso0WMQinm2Dnt8cFMuQa9K33J60=
 golang.org/x/net v0.50.0/go.mod h1:UgoSli3F/pBgdJBHCTc+tp3gmrU4XswgGRgtnwWTfyM=
+golang.org/x/net v0.51.0 h1:94R/GTO7mt3/4wIKpcR5gkGmRLOuE/2hNGeWq/GBIFo=
+golang.org/x/net v0.51.0/go.mod h1:aamm+2QF5ogm02fjy5Bb7CQ0WMt1/WVM7FtyaTLlA9Y=
 golang.org/x/oauth2 v0.35.0 h1:Mv2mzuHuZuY2+bkyWXIHMfhNdJAdwW3FuWeCPYN5GVQ=
 golang.org/x/oauth2 v0.35.0/go.mod h1:lzm5WQJQwKZ3nwavOZ3IS5Aulzxi68dUSgRHujetwEA=
 golang.org/x/sync v0.0.0-20190423024810-112230192c58/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.0.0-20220722155255-886fb9371eb4/go.mod h1:RxMgew5VJxzue5/jJTE5uejpjVlOe/izrB70Jof72aM=
 golang.org/x/sync v0.19.0 h1:vV+1eWNmZ5geRlYjzm2adRgW2/mcpevXNg50YZtPCE4=
 golang.org/x/sync v0.19.0/go.mod h1:9KTHXmSnoGruLpwFjVSX0lNNA75CykiMECbovNTZqGI=
+golang.org/x/sync v0.20.0 h1:e0PTpb7pjO8GAtTs2dQ6jYa5BWYlMuX047Dco/pItO4=
+golang.org/x/sync v0.20.0/go.mod h1:9xrNwdLfx4jkKbNva9FpL6vEN7evnE43NNNJQ2LF3+0=
 golang.org/x/sys v0.0.0-20190215142949-d0b11bdaac8a/go.mod h1:STP8DvDyc/dI5b8T5hshtkjS+E42TnysNCUPdjciGhY=
 golang.org/x/sys v0.0.0-20201119102817-f84b799fce68/go.mod h1:h1NjWce9XRLGQEsW7wpKNCjG9DtNlClVuFLEZdDNbEs=
 golang.org/x/sys v0.0.0-20210615035016-665e8c7367d1/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
@@ -147,6 +155,8 @@ golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220722155257-8c9f86f7a55f/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.41.0 h1:Ivj+2Cp/ylzLiEU89QhWblYnOE9zerudt9Ftecq2C6k=
 golang.org/x/sys v0.41.0/go.mod h1:OgkHotnGiDImocRcuBABYBEXf8A9a87e/uXjp9XT3ks=
+golang.org/x/sys v0.42.0 h1:omrd2nAlyT5ESRdCLYdm3+fMfNFE/+Rf4bDIQImRJeo=
+golang.org/x/sys v0.42.0/go.mod h1:4GL1E5IUh+htKOUEOaiffhrAeqysfVGipDYzABqnCmw=
 golang.org/x/term v0.0.0-20201126162022-7de9c90e9dd1/go.mod h1:bj7SfCRtBDWHUb9snDiAeCFNEtKQo2Wmx5Cou7ajbmo=
 golang.org/x/term v0.0.0-20210927222741-03fcf44c2211/go.mod h1:jbD1KX2456YbFQfuXm/mYQcufACuNUgVhRMnK/tPxf8=
 golang.org/x/text v0.3.0/go.mod h1:NqM8EUOU14njkJ3fqMW+pc6Ldnwhi/IjpwHt7yyuwOQ=
@@ -155,6 +165,8 @@ golang.org/x/text v0.3.7/go.mod h1:u+2+/6zg+i71rQMx5EYifcz6MCKuco9NR6JIITiCfzQ=
 golang.org/x/text v0.3.8/go.mod h1:E6s5w1FMmriuDzIBO73fBruAKo1PCIq6d2Q6DHfQ8WQ=
 golang.org/x/text v0.34.0 h1:oL/Qq0Kdaqxa1KbNeMKwQq0reLCCaFtqu2eNuSeNHbk=
 golang.org/x/text v0.34.0/go.mod h1:homfLqTYRFyVYemLBFl5GgL/DWEiH5wcsQ5gSh1yziA=
+golang.org/x/text v0.35.0 h1:JOVx6vVDFokkpaq1AEptVzLTpDe9KGpj5tR4/X+ybL8=
+golang.org/x/text v0.35.0/go.mod h1:khi/HExzZJ2pGnjenulevKNX1W67CUy0AsXcNubPGCA=
 golang.org/x/time v0.14.0 h1:MRx4UaLrDotUKUdCIqzPC48t1Y9hANFKIRpNx+Te8PI=
 golang.org/x/time v0.14.0/go.mod h1:eL/Oa2bBBK0TkX57Fyni+NgnyQQN4LitPmob2Hjnqw4=
 golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ=

backend/infra/migrations/008_add_min_max_to_alert_rules.sql

@@ -0,0 +1,6 @@
+ALTER TABLE alert_rules ADD COLUMN minimum DECIMAL(20, 6);
+ALTER TABLE alert_rules ADD COLUMN maximum DECIMAL(20, 6);
+
+ALTER TABLE alert_rules ADD CONSTRAINT non_negative_minimum CHECK (minimum IS NULL OR minimum >= 0);
+ALTER TABLE alert_rules ADD CONSTRAINT non_negative_maximum CHECK (maximum IS NULL OR maximum >= 0);
+ALTER TABLE alert_rules ADD CONSTRAINT min_lte_max CHECK (minimum IS NULL OR maximum IS NULL OR minimum <= maximum);

backend/infra/migrations/009_add_subscription_tier.sql

@@ -0,0 +1,8 @@
+ALTER TABLE users ADD COLUMN IF NOT EXISTS subscription_tier VARCHAR(20) DEFAULT 'free';
+
+-- Existing active/trialing subscribers were on the single paid plan,
+-- which is now the "premium" tier. Backfill them so they aren't downgraded.
+UPDATE users
+SET subscription_tier = 'premium'
+WHERE subscription_status IN ('active', 'trialing')
+  AND stripe_subscription_id IS NOT NULL;

backend/infra/migrations/010_add_password_auth.sql

@@ -0,0 +1,11 @@
+-- Migration 010: Add password-based authentication
+-- Adds password_hash column, makes firebase_uid optional, ensures email uniqueness.
+
+ALTER TABLE users ADD COLUMN IF NOT EXISTS password_hash VARCHAR(255);
+
+ALTER TABLE users ALTER COLUMN firebase_uid DROP NOT NULL;
+
+-- Ensure email is unique so it can serve as the login identifier.
+-- Drop the old index first if it exists, then create a unique one.
+DROP INDEX IF EXISTS idx_users_email_unique;
+CREATE UNIQUE INDEX idx_users_email_unique ON users (email);

backend/infra/schema.sql

@@ -14,6 +14,7 @@ CREATE TABLE users (
   stripe_customer_id VARCHAR(255),
   stripe_subscription_id VARCHAR(255),
   subscription_status VARCHAR(50) DEFAULT 'none',
+  subscription_tier VARCHAR(20) DEFAULT 'free',
   subscription_created_at TIMESTAMP,
   created_at TIMESTAMP DEFAULT NOW(),
   updated_at TIMESTAMP DEFAULT NOW()
@@ -35,6 +36,8 @@ CREATE TABLE alert_rules (
   address_id INTEGER NOT NULL REFERENCES addresses(id) ON DELETE CASCADE,
   type VARCHAR(50) NOT NULL,           -- 'incoming_tx', 'outgoing_tx', 'large_transfer', 'balance_below'
   threshold DECIMAL(20, 6),            -- ETH amount threshold (nullable for tx types that don't need it)
+  minimum DECIMAL(20, 6),              -- Optional min amount filter for incoming/outgoing alerts
+  maximum DECIMAL(20, 6),              -- Optional max amount filter for incoming/outgoing alerts
   enabled BOOLEAN DEFAULT TRUE,
   created_at TIMESTAMP DEFAULT NOW(),
 
@@ -44,7 +47,11 @@ CREATE TABLE alert_rules (
 
   CONSTRAINT positive_threshold CHECK (
     threshold IS NULL OR threshold > 0
-  )
+  ),
+
+  CONSTRAINT non_negative_minimum CHECK (minimum IS NULL OR minimum >= 0),
+  CONSTRAINT non_negative_maximum CHECK (maximum IS NULL OR maximum >= 0),
+  CONSTRAINT min_lte_max CHECK (minimum IS NULL OR maximum IS NULL OR minimum <= maximum)
 );
 
 

backend/internal/config/config.go

@@ -32,11 +32,13 @@ type Config struct {
 	ResendAPIKey         string
 	EmailFrom            string
 	DigestIntervalHours  int
-	StripeSecretKey      string
-	StripeWebhookSecret  string
-	StripePriceID        string
-	StripePublishableKey string
-	FrontendURL          string
+	StripeSecretKey        string
+	StripeWebhookSecret    string
+	StripePriceIDPremium   string
+	StripePriceIDPro       string
+	StripePublishableKey   string
+	FrontendURL            string
+	JWTSecret              string
 }
 
 // Load reads configuration from environment variables and returns a Config.
@@ -57,11 +59,13 @@ func Load() (*Config, error) {
 		ResendAPIKey:        os.Getenv("RESEND_API_KEY"),
 		EmailFrom:           getEnv("EMAIL_FROM", "Koin Ping <alerts@koinping.com>"),
 		DigestIntervalHours:  getEnvInt("DIGEST_INTERVAL_HOURS", defaultDigestIntervalHours),
-		StripeSecretKey:      os.Getenv("STRIPE_SECRET_KEY"),
-		StripeWebhookSecret:  os.Getenv("STRIPE_WEBHOOK_SECRET"),
-		StripePriceID:        os.Getenv("STRIPE_PRICE_ID"),
-		StripePublishableKey: os.Getenv("STRIPE_PUBLISHABLE_KEY"),
+		StripeSecretKey:        os.Getenv("STRIPE_SECRET_KEY"),
+		StripeWebhookSecret:    os.Getenv("STRIPE_WEBHOOK_SECRET"),
+		StripePriceIDPremium:   os.Getenv("STRIPE_PRICE_ID_PREMIUM"),
+		StripePriceIDPro:       os.Getenv("STRIPE_PRICE_ID_PRO"),
+		StripePublishableKey:   os.Getenv("STRIPE_PUBLISHABLE_KEY"),
 		FrontendURL:          getEnv("FRONTEND_URL", "http://localhost:3000"),
+		JWTSecret:            getEnv("JWT_SECRET", "change-me-in-production"),
 	}
 
 	if cfg.PollIntervalMS < minPollIntervalMS {
@@ -92,6 +96,19 @@ func (c *Config) DSN() string {
 	)
 }
 
+// TierForPriceID maps a Stripe price ID back to the corresponding
+// subscription tier. Returns empty string if the price is unrecognised.
+func (c *Config) TierForPriceID(priceID string) string {
+	switch priceID {
+	case c.StripePriceIDPremium:
+		return "premium"
+	case c.StripePriceIDPro:
+		return "pro"
+	default:
+		return ""
+	}
+}
+
 func getEnv(key, fallback string) string {
 	if v := os.Getenv(key); v != "" {
 		return v

backend/internal/config/config_test.go

@@ -0,0 +1,28 @@
+package config
+
+import "testing"
+
+func TestTierForPriceID(t *testing.T) {
+	t.Parallel()
+
+	cfg := &Config{
+		StripePriceIDPremium: "price_premium_123",
+		StripePriceIDPro:     "price_pro_456",
+	}
+
+	tests := []struct {
+		priceID string
+		want    string
+	}{
+		{"price_premium_123", "premium"},
+		{"price_pro_456", "pro"},
+		{"price_unknown", ""},
+		{"", ""},
+	}
+
+	for _, tt := range tests {
+		if got := cfg.TierForPriceID(tt.priceID); got != tt.want {
+			t.Errorf("TierForPriceID(%q) = %q, want %q", tt.priceID, got, tt.want)
+		}
+	}
+}

backend/internal/domain/types.go

@@ -2,17 +2,78 @@ package domain
 
 import "time"
 
+type SubscriptionTier string
+
+const (
+	TierFree    SubscriptionTier = "free"
+	TierPremium SubscriptionTier = "premium"
+	TierPro     SubscriptionTier = "pro"
+)
+
+func IsValidTier(t string) bool {
+	switch SubscriptionTier(t) {
+	case TierFree, TierPremium, TierPro:
+		return true
+	}
+	return false
+}
+
+const unlimitedLimit = -1
+
+type TierLimits struct {
+	MaxAddresses    int      `json:"max_addresses"`
+	MaxAlertTypes   int      `json:"max_alert_types"`
+	AllowedChannels []string `json:"allowed_channels"`
+}
+
+func GetTierLimits(tier SubscriptionTier) TierLimits {
+	switch tier {
+	case TierPremium:
+		return TierLimits{
+			MaxAddresses:    3,
+			MaxAlertTypes:   2,
+			AllowedChannels: []string{"email", "discord", "telegram"},
+		}
+	case TierPro:
+		return TierLimits{
+			MaxAddresses:    unlimitedLimit,
+			MaxAlertTypes:   unlimitedLimit,
+			AllowedChannels: []string{"email", "discord", "telegram", "slack"},
+		}
+	default:
+		return TierLimits{
+			MaxAddresses:    1,
+			MaxAlertTypes:   1,
+			AllowedChannels: []string{"email"},
+		}
+	}
+}
+
+func (l TierLimits) IsUnlimitedAddresses() bool  { return l.MaxAddresses == unlimitedLimit }
+func (l TierLimits) IsUnlimitedAlertTypes() bool  { return l.MaxAlertTypes == unlimitedLimit }
+
+func (l TierLimits) ChannelAllowed(channel string) bool {
+	for _, c := range l.AllowedChannels {
+		if c == channel {
+			return true
+		}
+	}
+	return false
+}
+
 type User struct {
-	ID                    string     `json:"id"`
-	FirebaseUID           string     `json:"-"`
-	Email                 string     `json:"email"`
-	DisplayName           *string    `json:"display_name"`           //nolint:tagliatelle
-	StripeCustomerID      *string    `json:"-"`
-	StripeSubscriptionID  *string    `json:"-"`
-	SubscriptionStatus    string     `json:"subscription_status"`    //nolint:tagliatelle
-	SubscriptionCreatedAt *time.Time `json:"subscription_created_at,omitempty"` //nolint:tagliatelle
-	CreatedAt             time.Time  `json:"created_at"`             //nolint:tagliatelle
-	UpdatedAt             time.Time  `json:"updated_at"`             //nolint:tagliatelle
+	ID                    string           `json:"id"`
+	FirebaseUID           *string          `json:"-"`
+	Email                 string           `json:"email"`
+	DisplayName           *string          `json:"display_name"`           //nolint:tagliatelle
+	PasswordHash          *string          `json:"-"`
+	StripeCustomerID      *string          `json:"-"`
+	StripeSubscriptionID  *string          `json:"-"`
+	SubscriptionStatus    string           `json:"subscription_status"`    //nolint:tagliatelle
+	SubscriptionTier      SubscriptionTier `json:"subscription_tier"`      //nolint:tagliatelle
+	SubscriptionCreatedAt *time.Time       `json:"subscription_created_at,omitempty"` //nolint:tagliatelle
+	CreatedAt             time.Time        `json:"created_at"`             //nolint:tagliatelle
+	UpdatedAt             time.Time        `json:"updated_at"`             //nolint:tagliatelle
 }
 
 type Address struct {
@@ -73,6 +134,8 @@ type AlertRule struct {
 	AddressID int       `json:"address_id"` //nolint:tagliatelle
 	Type      AlertType `json:"type"`
 	Threshold *float64  `json:"threshold"`
+	Minimum   *float64  `json:"minimum"`
+	Maximum   *float64  `json:"maximum"`
 	Enabled   bool      `json:"enabled"`
 	CreatedAt time.Time `json:"created_at"` //nolint:tagliatelle
 }

backend/internal/domain/types_test.go

@@ -0,0 +1,104 @@
+package domain
+
+import "testing"
+
+func TestIsValidTier(t *testing.T) {
+	t.Parallel()
+
+	valid := []string{"free", "premium", "pro"}
+	for _, tier := range valid {
+		if !IsValidTier(tier) {
+			t.Errorf("expected %q to be valid", tier)
+		}
+	}
+
+	invalid := []string{"", "basic", "enterprise", "FREE", "Pro"}
+	for _, tier := range invalid {
+		if IsValidTier(tier) {
+			t.Errorf("expected %q to be invalid", tier)
+		}
+	}
+}
+
+func TestGetTierLimits_Free(t *testing.T) {
+	t.Parallel()
+
+	limits := GetTierLimits(TierFree)
+	if limits.MaxAddresses != 1 {
+		t.Errorf("free MaxAddresses = %d, want 1", limits.MaxAddresses)
+	}
+	if limits.MaxAlertTypes != 1 {
+		t.Errorf("free MaxAlertTypes = %d, want 1", limits.MaxAlertTypes)
+	}
+	if len(limits.AllowedChannels) != 1 || limits.AllowedChannels[0] != "email" {
+		t.Errorf("free AllowedChannels = %v, want [email]", limits.AllowedChannels)
+	}
+	if limits.IsUnlimitedAddresses() {
+		t.Error("free should not have unlimited addresses")
+	}
+	if limits.IsUnlimitedAlertTypes() {
+		t.Error("free should not have unlimited alert types")
+	}
+}
+
+func TestGetTierLimits_Premium(t *testing.T) {
+	t.Parallel()
+
+	limits := GetTierLimits(TierPremium)
+	if limits.MaxAddresses != 3 {
+		t.Errorf("premium MaxAddresses = %d, want 3", limits.MaxAddresses)
+	}
+	if limits.MaxAlertTypes != 2 {
+		t.Errorf("premium MaxAlertTypes = %d, want 2", limits.MaxAlertTypes)
+	}
+	if !limits.ChannelAllowed("email") {
+		t.Error("premium should allow email")
+	}
+	if !limits.ChannelAllowed("discord") {
+		t.Error("premium should allow discord")
+	}
+	if !limits.ChannelAllowed("telegram") {
+		t.Error("premium should allow telegram")
+	}
+	if limits.ChannelAllowed("slack") {
+		t.Error("premium should NOT allow slack")
+	}
+}
+
+func TestGetTierLimits_Pro(t *testing.T) {
+	t.Parallel()
+
+	limits := GetTierLimits(TierPro)
+	if !limits.IsUnlimitedAddresses() {
+		t.Error("pro should have unlimited addresses")
+	}
+	if !limits.IsUnlimitedAlertTypes() {
+		t.Error("pro should have unlimited alert types")
+	}
+	for _, ch := range []string{"email", "discord", "telegram", "slack"} {
+		if !limits.ChannelAllowed(ch) {
+			t.Errorf("pro should allow %s", ch)
+		}
+	}
+}
+
+func TestGetTierLimits_Unknown(t *testing.T) {
+	t.Parallel()
+
+	limits := GetTierLimits(SubscriptionTier("unknown"))
+	if limits.MaxAddresses != 1 {
+		t.Errorf("unknown tier should default to free limits, got MaxAddresses=%d", limits.MaxAddresses)
+	}
+}
+
+func TestChannelAllowed_NotInList(t *testing.T) {
+	t.Parallel()
+
+	limits := GetTierLimits(TierFree)
+	if limits.ChannelAllowed("discord") {
+		t.Error("free should not allow discord")
+	}
+	if limits.ChannelAllowed("nonexistent") {
+		t.Error("nonexistent channel should not be allowed")
+	}
+}

backend/internal/handlers/account.go

@@ -0,0 +1,88 @@
+package handlers
+
+import (
+	"log"
+	"net/http"
+	"time"
+
+	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/middleware"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+)
+
+type AccountHandler struct {
+	users     *models.UserModel
+	addresses *models.AddressModel
+	cfg       *config.Config
+}
+
+func NewAccountHandler(users *models.UserModel, addresses *models.AddressModel, cfg *config.Config) *AccountHandler {
+	return &AccountHandler{users: users, addresses: addresses, cfg: cfg}
+}
+
+type accountResponse struct {
+	UserID             string            `json:"user_id"`
+	Email              string            `json:"email"`
+	UserName           string            `json:"user_name"`
+	SubscriptionStatus string            `json:"subscription_status"`
+	SubscriptionTier   string            `json:"subscription_tier"`
+	SubscriptionPlan   string            `json:"subscription_plan"`
+	TierLimits         domain.TierLimits `json:"tier_limits"`
+	AddressCount       int               `json:"address_count"`
+	MemberSince        *string           `json:"member_since,omitempty"`
+	NextBillingDate    *string           `json:"next_billing_date,omitempty"`
+	CancelAtPeriodEnd  bool              `json:"cancel_at_period_end"`
+	PeriodEndDate      *string           `json:"period_end_date,omitempty"`
+}
+
+var tierPlanLabels = map[domain.SubscriptionTier]string{ //nolint:gochecknoglobals
+	domain.TierFree:    "Free Trial",
+	domain.TierPremium: "Premium / $1.99 mo",
+	domain.TierPro:     "Pro / $11.99 mo",
+}
+
+func (h *AccountHandler) GetAccount(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+	email := middleware.GetUserEmail(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Account: failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	addrCount, err := h.addresses.CountByUser(r.Context(), userID)
+	if err != nil {
+		log.Printf("Account: failed to count addresses for %s: %v", userID, err)
+		addrCount = 0
+	}
+
+	planLabel := tierPlanLabels[user.SubscriptionTier]
+	if planLabel == "" {
+		planLabel = "Free Trial"
+	}
+
+	resp := accountResponse{
+		UserID:             user.ID,
+		Email:              email,
+		UserName:           email,
+		SubscriptionStatus: user.SubscriptionStatus,
+		SubscriptionTier:   string(user.SubscriptionTier),
+		SubscriptionPlan:   planLabel,
+		TierLimits:         domain.GetTierLimits(user.SubscriptionTier),
+		AddressCount:       addrCount,
+	}
+
+	if user.SubscriptionCreatedAt != nil {
+		t := user.SubscriptionCreatedAt.Format(time.DateOnly)
+		resp.MemberSince = &t
+	}
+
+	resp.NextBillingDate = nil
+	resp.CancelAtPeriodEnd = false
+	resp.PeriodEndDate = nil
+
+	writeJSON(w, http.StatusOK, resp)
+}

backend/internal/handlers/address.go

@@ -3,6 +3,7 @@ package handlers
 
 import (
 	"encoding/json"
+	"fmt"
 	"log"
 	"net/http"
 	"regexp"
@@ -17,10 +18,11 @@ var ethAddressRe = regexp.MustCompile(`^0x[a-fA-F0-9]{40}$`)
 
 type AddressHandler struct {
 	addresses *models.AddressModel
+	users     *models.UserModel
 }
 
-func NewAddressHandler(addresses *models.AddressModel) *AddressHandler {
-	return &AddressHandler{addresses: addresses}
+func NewAddressHandler(addresses *models.AddressModel, users *models.UserModel) *AddressHandler {
+	return &AddressHandler{addresses: addresses, users: users}
 }
 
 func (h *AddressHandler) Create(w http.ResponseWriter, r *http.Request) {
@@ -49,6 +51,28 @@ func (h *AddressHandler) Create(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Failed to get user %s for tier check: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to verify account")
+		return
+	}
+
+	limits := domain.GetTierLimits(user.SubscriptionTier)
+	if !limits.IsUnlimitedAddresses() {
+		count, err := h.addresses.CountByUser(r.Context(), userID)
+		if err != nil {
+			log.Printf("Failed to count addresses for user %s: %v", userID, err)
+			writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to create address")
+			return
+		}
+		if count >= limits.MaxAddresses {
+			writeError(w, http.StatusForbidden, "TIER_LIMIT_REACHED",
+				fmt.Sprintf("Your %s plan allows %d address(es). Upgrade to track more.", user.SubscriptionTier, limits.MaxAddresses))
+			return
+		}
+	}
+
 	log.Printf("User %s creating address: %s", userID, body.Address)
 
 	addr, err := h.addresses.Create(r.Context(), userID, body.Address, body.Label)

backend/internal/handlers/alert_rule.go

@@ -19,10 +19,11 @@ var errThresholdFormat = errors.New("unsupported threshold format")
 type AlertRuleHandler struct {
 	alertRules *models.AlertRuleModel
 	addresses  *models.AddressModel
+	users      *models.UserModel
 }
 
-func NewAlertRuleHandler(alertRules *models.AlertRuleModel, addresses *models.AddressModel) *AlertRuleHandler {
-	return &AlertRuleHandler{alertRules: alertRules, addresses: addresses}
+func NewAlertRuleHandler(alertRules *models.AlertRuleModel, addresses *models.AddressModel, users *models.UserModel) *AlertRuleHandler {
+	return &AlertRuleHandler{alertRules: alertRules, addresses: addresses, users: users}
 }
 
 func (h *AlertRuleHandler) Create(w http.ResponseWriter, r *http.Request) {
@@ -37,6 +38,8 @@ func (h *AlertRuleHandler) Create(w http.ResponseWriter, r *http.Request) {
 	var body struct {
 		Type      string          `json:"type"`
 		Threshold json.RawMessage `json:"threshold"`
+		Minimum   json.RawMessage `json:"minimum"`
+		Maximum   json.RawMessage `json:"maximum"`
 	}
 	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
 		log.Printf("Failed to decode alert request body: %v", err)
@@ -53,6 +56,40 @@ func (h *AlertRuleHandler) Create(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
+	minimum, err := parseThreshold(body.Minimum)
+	if err != nil {
+		log.Printf("Failed to parse minimum: %v", err)
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must be a valid number")
+
+		return
+	}
+
+	maximum, err := parseThreshold(body.Maximum)
+	if err != nil {
+		log.Printf("Failed to parse maximum: %v", err)
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "maximum must be a valid number")
+
+		return
+	}
+
+	if minimum != nil && *minimum < 0 {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must be non-negative")
+
+		return
+	}
+
+	if maximum != nil && *maximum < 0 {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "maximum must be non-negative")
+
+		return
+	}
+
+	if minimum != nil && maximum != nil && *minimum > *maximum {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must not exceed maximum")
+
+		return
+	}
+
 	log.Printf("User %s creating alert: type=%s, addressID=%d", userID, body.Type, addressID)
 
 	if body.Type == "" {
@@ -96,7 +133,29 @@ func (h *AlertRuleHandler) Create(w http.ResponseWriter, r *http.Request) {
 		return
 	}
 
-	newAlert, err := h.alertRules.Create(r.Context(), addressID, alertType, threshold)
+	user, userErr := h.users.GetByID(r.Context(), userID)
+	if userErr != nil || user == nil {
+		log.Printf("Failed to get user %s for tier check: %v", userID, userErr)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to verify account")
+		return
+	}
+
+	limits := domain.GetTierLimits(user.SubscriptionTier)
+	if !limits.IsUnlimitedAlertTypes() {
+		typeCount, countErr := h.alertRules.CountDistinctTypesByAddress(r.Context(), addressID)
+		if countErr != nil {
+			log.Printf("Failed to count alert types for address %d: %v", addressID, countErr)
+			writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to create alert rule")
+			return
+		}
+		if typeCount >= limits.MaxAlertTypes {
+			writeError(w, http.StatusForbidden, "TIER_LIMIT_REACHED",
+				fmt.Sprintf("Your %s plan allows %d alert type(s) per address. Upgrade for more.", user.SubscriptionTier, limits.MaxAlertTypes))
+			return
+		}
+	}
+
+	newAlert, err := h.alertRules.Create(r.Context(), addressID, alertType, threshold, minimum, maximum)
 	if err != nil {
 		log.Printf("Error creating alert rule: %v", err)
 		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to create alert rule")
@@ -182,7 +241,7 @@ func (h *AlertRuleHandler) ListByAddress(w http.ResponseWriter, r *http.Request)
 	writeJSON(w, http.StatusOK, alerts)
 }
 
-// UpdateStatus handles PATCH requests to enable or disable an alert rule.
+// UpdateStatus handles PATCH requests to enable/disable an alert rule and/or update min/max thresholds.
 func (h *AlertRuleHandler) UpdateStatus(w http.ResponseWriter, r *http.Request) {
 	userID := middleware.GetUserID(r.Context())
 	alertID, ok := parseIntParam(r.PathValue("alertId"))
@@ -193,7 +252,10 @@ func (h *AlertRuleHandler) UpdateStatus(w http.ResponseWriter, r *http.Request)
 	}
 
 	var body struct {
-		Enabled *bool `json:"enabled"`
+		Enabled        *bool           `json:"enabled"`
+		Minimum        json.RawMessage `json:"minimum"`
+		Maximum        json.RawMessage `json:"maximum"`
+		UpdateMinMax   bool            `json:"update_min_max"`   //nolint:tagliatelle
 	}
 	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
 		log.Printf("Failed to decode update request body: %v", err)
@@ -204,8 +266,8 @@ func (h *AlertRuleHandler) UpdateStatus(w http.ResponseWriter, r *http.Request)
 
 	log.Printf("User %s updating alert ID: %d", userID, alertID)
 
-	if body.Enabled == nil {
-		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "enabled must be a boolean value")
+	if body.Enabled == nil && !body.UpdateMinMax {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "must provide enabled (boolean) or update_min_max with minimum/maximum values")
 
 		return
 	}
@@ -224,15 +286,64 @@ func (h *AlertRuleHandler) UpdateStatus(w http.ResponseWriter, r *http.Request)
 		return
 	}
 
-	updated, err := h.alertRules.UpdateEnabled(r.Context(), alertID, *body.Enabled)
-	if err != nil {
-		log.Printf("Error updating alert: %v", err)
-		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to update alert")
+	var updated *domain.AlertRule
 
-		return
+	if body.UpdateMinMax {
+		minimum, parseErr := parseThreshold(body.Minimum)
+		if parseErr != nil {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must be a valid number")
+
+			return
+		}
+
+		maximum, parseErr := parseThreshold(body.Maximum)
+		if parseErr != nil {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "maximum must be a valid number")
+
+			return
+		}
+
+		if minimum != nil && *minimum < 0 {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must be non-negative")
+
+			return
+		}
+
+		if maximum != nil && *maximum < 0 {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "maximum must be non-negative")
+
+			return
+		}
+
+		if minimum != nil && maximum != nil && *minimum > *maximum {
+			writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "minimum must not exceed maximum")
+
+			return
+		}
+
+		updated, err = h.alertRules.UpdateThresholds(r.Context(), alertID, minimum, maximum)
+		if err != nil {
+			log.Printf("Error updating alert thresholds: %v", err)
+			writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to update alert")
+
+			return
+		}
+
+		log.Printf("Alert %d thresholds updated: min=%v, max=%v", alertID, minimum, maximum)
+	}
+
+	if body.Enabled != nil {
+		updated, err = h.alertRules.UpdateEnabled(r.Context(), alertID, *body.Enabled)
+		if err != nil {
+			log.Printf("Error updating alert: %v", err)
+			writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to update alert")
+
+			return
+		}
+
+		log.Printf("Alert %d updated: enabled=%v", alertID, *body.Enabled)
 	}
 
-	log.Printf("Alert %d updated: enabled=%v", alertID, *body.Enabled)
 	writeJSON(w, http.StatusOK, updated)
 }
 

backend/internal/handlers/auth.go

@@ -0,0 +1,230 @@
+package handlers
+
+import (
+	"encoding/json"
+	"log"
+	"net/http"
+	"time"
+
+	"github.com/golang-jwt/jwt/v5"
+	checkoutsession "github.com/stripe/stripe-go/v82/checkout/session"
+	"golang.org/x/crypto/bcrypt"
+
+	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
+	"github.com/kjannette/koin-ping/backend/internal/models"
+)
+
+const (
+	bcryptCost     = 12
+	jwtTTLHours    = 72
+	minPasswordLen = 6
+)
+
+type AuthHandler struct {
+	users *models.UserModel
+	cfg   *config.Config
+}
+
+func NewAuthHandler(users *models.UserModel, cfg *config.Config) *AuthHandler {
+	return &AuthHandler{users: users, cfg: cfg}
+}
+
+type authResponse struct {
+	Token              string `json:"token"`
+	UserID             string `json:"user_id"`    //nolint:tagliatelle
+	Email              string `json:"email"`
+	SubscriptionStatus string `json:"subscription_status"` //nolint:tagliatelle
+	SubscriptionTier   string `json:"subscription_tier"`   //nolint:tagliatelle
+}
+
+func (h *AuthHandler) issueJWT(userID, email string) (string, error) {
+	claims := jwt.MapClaims{
+		"sub":   userID,
+		"email": email,
+		"iat":   time.Now().Unix(),
+		"exp":   time.Now().Add(jwtTTLHours * time.Hour).Unix(),
+	}
+	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
+	return token.SignedString([]byte(h.cfg.JWTSecret))
+}
+
+// Login authenticates an existing user by email + password.
+func (h *AuthHandler) Login(w http.ResponseWriter, r *http.Request) {
+	var body struct {
+		Email    string `json:"email"`
+		Password string `json:"password"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		writeError(w, http.StatusBadRequest, "BAD_REQUEST", "Invalid request body")
+		return
+	}
+
+	if body.Email == "" || body.Password == "" {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "Email and password are required")
+		return
+	}
+
+	user, err := h.users.FindByEmail(r.Context(), body.Email)
+	if err != nil {
+		log.Printf("Login: DB error looking up %s: %v", body.Email, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Login failed")
+		return
+	}
+	if user == nil {
+		writeError(w, http.StatusUnauthorized, "INVALID_CREDENTIALS", "Invalid email or password")
+		return
+	}
+
+	if user.PasswordHash == nil || *user.PasswordHash == "" {
+		writeError(w, http.StatusUnauthorized, "INVALID_CREDENTIALS", "Invalid email or password")
+		return
+	}
+
+	if err := bcrypt.CompareHashAndPassword([]byte(*user.PasswordHash), []byte(body.Password)); err != nil {
+		writeError(w, http.StatusUnauthorized, "INVALID_CREDENTIALS", "Invalid email or password")
+		return
+	}
+
+	token, err := h.issueJWT(user.ID, user.Email)
+	if err != nil {
+		log.Printf("Login: failed to issue JWT for %s: %v", user.ID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Login failed")
+		return
+	}
+
+	log.Printf("Login successful for user %s (%s)", user.ID, user.Email)
+	writeJSON(w, http.StatusOK, authResponse{
+		Token:              token,
+		UserID:             user.ID,
+		Email:              user.Email,
+		SubscriptionStatus: user.SubscriptionStatus,
+		SubscriptionTier:   string(user.SubscriptionTier),
+	})
+}
+
+// RegisterAfterCheckout creates a new user account after a successful Stripe
+// checkout. It verifies the Stripe session was paid, hashes the password,
+// inserts the user into Postgres, links the Stripe customer/subscription,
+// and returns a JWT so the frontend is immediately authenticated.
+func (h *AuthHandler) RegisterAfterCheckout(w http.ResponseWriter, r *http.Request) {
+	var body struct {
+		Email     string `json:"email"`
+		Password  string `json:"password"`
+		SessionID string `json:"session_id"` //nolint:tagliatelle
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		writeError(w, http.StatusBadRequest, "BAD_REQUEST", "Invalid request body")
+		return
+	}
+
+	if body.Email == "" || body.Password == "" {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "Email and password are required")
+		return
+	}
+	if len(body.Password) < minPasswordLen {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "Password must be at least 6 characters")
+		return
+	}
+
+	existing, err := h.users.FindByEmail(r.Context(), body.Email)
+	if err != nil {
+		log.Printf("Register: DB error looking up %s: %v", body.Email, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Registration failed")
+		return
+	}
+	if existing != nil {
+		writeError(w, http.StatusConflict, "EMAIL_IN_USE", "An account with this email already exists")
+		return
+	}
+
+	hash, err := bcrypt.GenerateFromPassword([]byte(body.Password), bcryptCost)
+	if err != nil {
+		log.Printf("Register: bcrypt error: %v", err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Registration failed")
+		return
+	}
+
+	user, err := h.users.CreateWithPassword(r.Context(), body.Email, string(hash))
+	if err != nil {
+		log.Printf("Register: failed to create user %s: %v", body.Email, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Registration failed")
+		return
+	}
+
+	// If a Stripe session_id was provided (paid tier checkout), link the
+	// Stripe customer and activate the subscription immediately.
+	if body.SessionID != "" {
+		h.linkStripeSession(r, user.ID, body.SessionID)
+	}
+
+	// Re-fetch to pick up updated subscription fields after Stripe link.
+	user, err = h.users.GetByID(r.Context(), user.ID)
+	if err != nil || user == nil {
+		log.Printf("Register: failed to re-fetch user %s: %v", body.Email, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Registration failed")
+		return
+	}
+
+	token, err := h.issueJWT(user.ID, user.Email)
+	if err != nil {
+		log.Printf("Register: failed to issue JWT for %s: %v", user.ID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Registration failed")
+		return
+	}
+
+	log.Printf("Registration successful for user %s (%s)", user.ID, user.Email)
+	writeJSON(w, http.StatusOK, authResponse{
+		Token:              token,
+		UserID:             user.ID,
+		Email:              user.Email,
+		SubscriptionStatus: user.SubscriptionStatus,
+		SubscriptionTier:   string(user.SubscriptionTier),
+	})
+}
+
+// linkStripeSession retrieves the Stripe checkout session by ID, verifies
+// payment, and writes the Stripe customer + subscription to the user record.
+func (h *AuthHandler) linkStripeSession(r *http.Request, userID, sessionID string) {
+	s, err := checkoutsession.Get(sessionID, nil)
+	if err != nil {
+		log.Printf("linkStripeSession: failed to retrieve session %s: %v", sessionID, err)
+		return
+	}
+
+	fullJSON, _ := json.MarshalIndent(s, "", "  ")
+	log.Printf("STRIPE REGISTER LINK — FULL SESSION:\n%s", string(fullJSON))
+
+	if s.PaymentStatus != "paid" {
+		log.Printf("linkStripeSession: session %s not paid (status=%s)", sessionID, s.PaymentStatus)
+		return
+	}
+
+	tier := domain.TierPremium
+	if t, ok := s.Metadata["tier"]; ok && domain.IsValidTier(t) {
+		tier = domain.SubscriptionTier(t)
+	}
+
+	customerID := ""
+	if s.Customer != nil {
+		customerID = s.Customer.ID
+	}
+	subscriptionID := ""
+	if s.Subscription != nil {
+		subscriptionID = s.Subscription.ID
+	}
+
+	if customerID != "" {
+		if err := h.users.UpdateStripeCustomer(r.Context(), userID, customerID); err != nil {
+			log.Printf("linkStripeSession: failed to save customer ID: %v", err)
+		}
+	}
+	if subscriptionID != "" && customerID != "" {
+		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active", tier); err != nil {
+			log.Printf("linkStripeSession: failed to activate subscription: %v", err)
+		}
+	}
+
+	log.Printf("linkStripeSession: linked user %s → customer %s, subscription %s, tier %s",
+		userID, customerID, subscriptionID, tier)
+}

backend/internal/handlers/notification_config.go

@@ -18,11 +18,12 @@ var emailRe = regexp.MustCompile(`^[^\s@]+@[^\s@]+\.[^\s@]+$`)
 
 type NotificationConfigHandler struct {
 	configs *models.NotificationConfigModel
+	users   *models.UserModel
 	cfg     *config.Config
 }
 
-func NewNotificationConfigHandler(configs *models.NotificationConfigModel, cfg *config.Config) *NotificationConfigHandler {
-	return &NotificationConfigHandler{configs: configs, cfg: cfg}
+func NewNotificationConfigHandler(configs *models.NotificationConfigModel, users *models.UserModel, cfg *config.Config) *NotificationConfigHandler {
+	return &NotificationConfigHandler{configs: configs, users: users, cfg: cfg}
 }
 
 func (h *NotificationConfigHandler) GetConfig(w http.ResponseWriter, r *http.Request) {
@@ -95,6 +96,26 @@ func (h *NotificationConfigHandler) UpdateConfig(w http.ResponseWriter, r *http.
 		return
 	}
 
+	user, userErr := h.users.GetByID(r.Context(), userID)
+	if userErr != nil || user == nil {
+		log.Printf("Failed to get user %s for tier check: %v", userID, userErr)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to verify account")
+		return
+	}
+
+	limits := domain.GetTierLimits(user.SubscriptionTier)
+
+	if !limits.ChannelAllowed("discord") {
+		body.DiscordWebhookURL = nil
+	}
+	if !limits.ChannelAllowed("telegram") {
+		body.TelegramBotToken = nil
+		body.TelegramChatID = nil
+	}
+	if !limits.ChannelAllowed("slack") {
+		body.SlackWebhookURL = nil
+	}
+
 	enabled := true
 	if body.NotificationEnabled != nil {
 		enabled = *body.NotificationEnabled

backend/internal/handlers/stripe.go

@@ -2,15 +2,18 @@ package handlers
 
 import (
 	"encoding/json"
+	"fmt"
 	"io"
 	"log"
 	"net/http"
 
 	"github.com/stripe/stripe-go/v82"
+	portalsession "github.com/stripe/stripe-go/v82/billingportal/session"
 	checkoutsession "github.com/stripe/stripe-go/v82/checkout/session"
 	"github.com/stripe/stripe-go/v82/webhook"
 
 	"github.com/kjannette/koin-ping/backend/internal/config"
+	"github.com/kjannette/koin-ping/backend/internal/domain"
 	"github.com/kjannette/koin-ping/backend/internal/middleware"
 	"github.com/kjannette/koin-ping/backend/internal/models"
 )
@@ -27,10 +30,45 @@ func NewStripeHandler(users *models.UserModel, cfg *config.Config) *StripeHandle
 	return &StripeHandler{users: users, cfg: cfg}
 }
 
-// CreateCheckoutSession creates a Stripe Checkout session for the monthly subscription.
+func (h *StripeHandler) priceIDForTier(tier domain.SubscriptionTier) (string, error) {
+	switch tier {
+	case domain.TierPremium:
+		return h.cfg.StripePriceIDPremium, nil
+	case domain.TierPro:
+		return h.cfg.StripePriceIDPro, nil
+	default:
+		return "", fmt.Errorf("no Stripe price for tier %q", tier) //nolint:err113
+	}
+}
+
+// CreateCheckoutSession creates a Stripe Checkout session for the selected tier.
 func (h *StripeHandler) CreateCheckoutSession(w http.ResponseWriter, r *http.Request) {
 	userID := middleware.GetUserID(r.Context())
 
+	var body struct {
+		Tier string `json:"tier"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		writeError(w, http.StatusBadRequest, "BAD_REQUEST", "Invalid request body")
+		return
+	}
+
+	if body.Tier == "" {
+		body.Tier = "premium"
+	}
+
+	tier := domain.SubscriptionTier(body.Tier)
+	if tier != domain.TierPremium && tier != domain.TierPro {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "Tier must be 'premium' or 'pro'")
+		return
+	}
+
+	priceID, err := h.priceIDForTier(tier)
+	if err != nil {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", err.Error())
+		return
+	}
+
 	user, err := h.users.GetByID(r.Context(), userID)
 	if err != nil || user == nil {
 		log.Printf("Failed to get user %s: %v", userID, err)
@@ -42,7 +80,7 @@ func (h *StripeHandler) CreateCheckoutSession(w http.ResponseWriter, r *http.Req
 		Mode: stripe.String(string(stripe.CheckoutSessionModeSubscription)),
 		LineItems: []*stripe.CheckoutSessionLineItemParams{
 			{
-				Price:    stripe.String(h.cfg.StripePriceID),
+				Price:    stripe.String(priceID),
 				Quantity: stripe.Int64(1),
 			},
 		},
@@ -52,6 +90,8 @@ func (h *StripeHandler) CreateCheckoutSession(w http.ResponseWriter, r *http.Req
 		CustomerEmail:     stripe.String(user.Email),
 	}
 
+	params.AddMetadata("tier", string(tier))
+
 	if user.StripeCustomerID != nil && *user.StripeCustomerID != "" {
 		params.Customer = user.StripeCustomerID
 		params.CustomerEmail = nil
@@ -79,14 +119,14 @@ func (h *StripeHandler) GetSubscriptionStatus(w http.ResponseWriter, r *http.Req
 	}
 
 	writeJSON(w, http.StatusOK, map[string]any{
-		"subscription_status":     user.SubscriptionStatus,
+		"subscription_status": user.SubscriptionStatus,
+		"subscription_tier":   user.SubscriptionTier,
 		"subscription_created_at": user.SubscriptionCreatedAt,
 	})
 }
 
 // VerifyCheckoutSession retrieves a completed checkout session from Stripe,
 // confirms payment, and activates the user's subscription in the database.
-// This is the primary activation path; webhooks serve as a backup.
 func (h *StripeHandler) VerifyCheckoutSession(w http.ResponseWriter, r *http.Request) {
 	userID := middleware.GetUserID(r.Context())
 
@@ -105,7 +145,11 @@ func (h *StripeHandler) VerifyCheckoutSession(w http.ResponseWriter, r *http.Req
 		return
 	}
 
-	if s.ClientReferenceID != userID {
+	if fullJSON, marshalErr := json.MarshalIndent(s, "", "  "); marshalErr == nil {
+		log.Printf("STRIPE VERIFY CHECKOUT — FULL SESSION:\n%s", string(fullJSON))
+	}
+
+	if s.ClientReferenceID != "" && s.ClientReferenceID != userID {
 		writeError(w, http.StatusForbidden, "FORBIDDEN", "Session does not belong to this user")
 		return
 	}
@@ -115,6 +159,11 @@ func (h *StripeHandler) VerifyCheckoutSession(w http.ResponseWriter, r *http.Req
 		return
 	}
 
+	tier := domain.TierPremium
+	if t, ok := s.Metadata["tier"]; ok && domain.IsValidTier(t) {
+		tier = domain.SubscriptionTier(t)
+	}
+
 	customerID := ""
 	if s.Customer != nil {
 		customerID = s.Customer.ID
@@ -130,17 +179,131 @@ func (h *StripeHandler) VerifyCheckoutSession(w http.ResponseWriter, r *http.Req
 		}
 	}
 	if subscriptionID != "" && customerID != "" {
-		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active"); err != nil {
+		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active", tier); err != nil {
 			log.Printf("VerifyCheckout: failed to activate subscription: %v", err)
 		}
 	}
 
-	log.Printf("Checkout verified for user %s, customer %s, subscription %s", userID, customerID, subscriptionID)
-	writeJSON(w, http.StatusOK, map[string]string{"subscription_status": "active"})
+	log.Printf("Checkout verified for user %s, customer %s, subscription %s, tier %s", userID, customerID, subscriptionID, tier)
+	writeJSON(w, http.StatusOK, map[string]string{
+		"subscription_status": "active",
+		"subscription_tier":   string(tier),
+	})
+}
+
+// ActivateFreeTier sets the user to the free tier without Stripe involvement.
+func (h *StripeHandler) ActivateFreeTier(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+
+	if err := h.users.ActivateFreeTier(r.Context(), userID); err != nil {
+		log.Printf("ActivateFreeTier: failed for user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to activate free tier")
+		return
+	}
+
+	log.Printf("Free tier activated for user %s", userID)
+	writeJSON(w, http.StatusOK, map[string]string{
+		"subscription_status": "active",
+		"subscription_tier":   "free",
+	})
+}
+
+// CreateOnboardingCheckout creates a Stripe Checkout session for a user who
+// has not yet created an account. This is a public endpoint (no auth required).
+// The Firebase account is created on the frontend only after payment succeeds.
+func (h *StripeHandler) CreateOnboardingCheckout(w http.ResponseWriter, r *http.Request) {
+	var body struct {
+		Email string `json:"email"`
+		Tier  string `json:"tier"`
+	}
+	if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
+		writeError(w, http.StatusBadRequest, "BAD_REQUEST", "Invalid request body")
+		return
+	}
+
+	if body.Email == "" {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "Email is required")
+		return
+	}
+
+	if body.Tier == "" {
+		body.Tier = "premium"
+	}
+
+	tier := domain.SubscriptionTier(body.Tier)
+	if tier != domain.TierPremium && tier != domain.TierPro {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", "Tier must be 'premium' or 'pro'")
+		return
+	}
+
+	priceID, err := h.priceIDForTier(tier)
+	if err != nil {
+		writeError(w, http.StatusBadRequest, "VALIDATION_ERROR", err.Error())
+		return
+	}
+
+	params := &stripe.CheckoutSessionParams{
+		Mode: stripe.String(string(stripe.CheckoutSessionModeSubscription)),
+		LineItems: []*stripe.CheckoutSessionLineItemParams{
+			{
+				Price:    stripe.String(priceID),
+				Quantity: stripe.Int64(1),
+			},
+		},
+		SuccessURL:    stripe.String(h.cfg.FrontendURL + "/subscribe?payment=success&session_id={CHECKOUT_SESSION_ID}"),
+		CancelURL:     stripe.String(h.cfg.FrontendURL + "/subscribe?payment=cancelled"),
+		CustomerEmail: stripe.String(body.Email),
+	}
+	params.AddMetadata("tier", string(tier))
+	params.AddMetadata("onboarding", "true")
+
+	s, err := checkoutsession.New(params)
+	if err != nil {
+		log.Printf("Failed to create onboarding checkout session: %v", err)
+		writeError(w, http.StatusInternalServerError, "STRIPE_ERROR", "Failed to create checkout session")
+		return
+	}
+
+	if fullJSON, marshalErr := json.MarshalIndent(s, "", "  "); marshalErr == nil {
+		log.Printf("STRIPE ONBOARDING CHECKOUT CREATED — FULL SESSION:\n%s", string(fullJSON))
+	}
+
+	writeJSON(w, http.StatusOK, map[string]string{"url": s.URL})
+}
+
+// CreatePortalSession creates a Stripe Billing Portal session so the user can
+// manage their subscription (cancel, update payment method, view invoices).
+func (h *StripeHandler) CreatePortalSession(w http.ResponseWriter, r *http.Request) {
+	userID := middleware.GetUserID(r.Context())
+
+	user, err := h.users.GetByID(r.Context(), userID)
+	if err != nil || user == nil {
+		log.Printf("Portal: failed to get user %s: %v", userID, err)
+		writeError(w, http.StatusInternalServerError, "INTERNAL_ERROR", "Failed to load user")
+		return
+	}
+
+	if user.StripeCustomerID == nil || *user.StripeCustomerID == "" {
+		writeError(w, http.StatusBadRequest, "NO_CUSTOMER", "No Stripe customer on file")
+		return
+	}
+
+	params := &stripe.BillingPortalSessionParams{
+		Customer:  user.StripeCustomerID,
+		ReturnURL: stripe.String(h.cfg.FrontendURL + "/account"),
+	}
+
+	s, err := portalsession.New(params)
+	if err != nil {
+		log.Printf("Portal: failed to create portal session: %v", err)
+		writeError(w, http.StatusInternalServerError, "STRIPE_ERROR", "Failed to create portal session")
+		return
+	}
+
+	writeJSON(w, http.StatusOK, map[string]string{"url": s.URL})
 }
 
 // HandleWebhook processes incoming Stripe webhook events.
-// This endpoint must NOT require authentication (Stripe calls it directly).
 func (h *StripeHandler) HandleWebhook(w http.ResponseWriter, r *http.Request) {
 	payload, err := io.ReadAll(io.LimitReader(r.Body, webhookMaxBodyBytes))
 	if err != nil {
@@ -172,6 +335,8 @@ func (h *StripeHandler) HandleWebhook(w http.ResponseWriter, r *http.Request) {
 }
 
 func (h *StripeHandler) handleCheckoutCompleted(r *http.Request, event stripe.Event) {
+	log.Printf("STRIPE CHECKOUT COMPLETED — FULL RAW PAYLOAD:\n%s", string(event.Data.Raw))
+
 	var session stripe.CheckoutSession
 	if err := json.Unmarshal(event.Data.Raw, &session); err != nil {
 		log.Printf("Error parsing checkout session: %v", err)
@@ -184,6 +349,11 @@ func (h *StripeHandler) handleCheckoutCompleted(r *http.Request, event stripe.Ev
 		return
 	}
 
+	tier := domain.TierPremium
+	if t, ok := session.Metadata["tier"]; ok && domain.IsValidTier(t) {
+		tier = domain.SubscriptionTier(t)
+	}
+
 	customerID := ""
 	if session.Customer != nil {
 		customerID = session.Customer.ID
@@ -200,12 +370,12 @@ func (h *StripeHandler) handleCheckoutCompleted(r *http.Request, event stripe.Ev
 	}
 
 	if subscriptionID != "" && customerID != "" {
-		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active"); err != nil {
+		if err := h.users.ActivateSubscription(r.Context(), customerID, subscriptionID, "active", tier); err != nil {
 			log.Printf("Failed to activate subscription: %v", err)
 		}
 	}
 
-	log.Printf("Checkout completed for user %s, customer %s, subscription %s", userID, customerID, subscriptionID)
+	log.Printf("Checkout completed for user %s, customer %s, subscription %s, tier %s", userID, customerID, subscriptionID, tier)
 }
 
 func (h *StripeHandler) handleSubscriptionUpdated(r *http.Request, event stripe.Event) {
@@ -224,11 +394,26 @@ func (h *StripeHandler) handleSubscriptionUpdated(r *http.Request, event stripe.
 	}
 
 	status := string(sub.Status)
-	if err := h.users.ActivateSubscription(r.Context(), customerID, sub.ID, status); err != nil {
-		log.Printf("Failed to update subscription status: %v", err)
+
+	// Detect tier from the subscription's current price so that
+	// upgrades/downgrades via the Stripe portal are reflected.
+	tier := domain.TierPremium
+	if sub.Items != nil {
+		for _, item := range sub.Items.Data {
+			if item.Price != nil {
+				if t := h.cfg.TierForPriceID(item.Price.ID); t != "" {
+					tier = domain.SubscriptionTier(t)
+					break
+				}
+			}
+		}
 	}
 
-	log.Printf("Subscription %s updated to %s for customer %s", sub.ID, status, customerID)
+	if err := h.users.ActivateSubscription(r.Context(), customerID, sub.ID, status, tier); err != nil {
+		log.Printf("Failed to update subscription: %v", err)
+	}
+
+	log.Printf("Subscription %s updated to %s (tier %s) for customer %s", sub.ID, status, tier, customerID)
 }
 
 func (h *StripeHandler) handleSubscriptionDeleted(r *http.Request, event stripe.Event) {

backend/internal/middleware/auth.go

@@ -8,7 +8,8 @@ import (
 	"net/http"
 	"strings"
 
-	fbauth "github.com/kjannette/koin-ping/backend/internal/firebase"
+	"github.com/golang-jwt/jwt/v5"
+
 	"github.com/kjannette/koin-ping/backend/internal/models"
 )
 
@@ -17,6 +18,7 @@ type contextKey string
 const (
 	UserIDKey    contextKey = "user_id"
 	UserEmailKey contextKey = "user_email"
+	UserTierKey  contextKey = "user_tier"
 )
 
 type errorResponse struct {
@@ -30,10 +32,9 @@ func writeJSON(w http.ResponseWriter, status int, v interface{}) {
 	json.NewEncoder(w).Encode(v) //nolint:errcheck
 }
 
-// Authenticate verifies the Firebase ID token and auto-provisions a local user
-// record. The local user UUID (not the Firebase UID) is placed into context so
-// all downstream handlers use it as the canonical user identifier.
-func Authenticate(userModel *models.UserModel) func(http.Handler) http.Handler {
+// Authenticate verifies the JWT from the Authorization header, loads the local
+// user from Postgres, and injects the user UUID + email + tier into context.
+func Authenticate(userModel *models.UserModel, jwtSecret string) func(http.Handler) http.Handler {
 	return func(next http.Handler) http.Handler {
 		return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
 			authHeader := r.Header.Get("Authorization")
@@ -46,9 +47,8 @@ func Authenticate(userModel *models.UserModel) func(http.Handler) http.Handler {
 				return
 			}
 
-			token := strings.TrimPrefix(authHeader, "Bearer ")
-			if token == "" {
-				log.Println("Empty token")
+			rawToken := strings.TrimPrefix(authHeader, "Bearer ")
+			if rawToken == "" {
 				writeJSON(w, http.StatusUnauthorized, errorResponse{
 					Error:   "UNAUTHORIZED",
 					Message: "Invalid token format",
@@ -56,12 +56,19 @@ func Authenticate(userModel *models.UserModel) func(http.Handler) http.Handler {
 				return
 			}
 
-			log.Println("Verifying Firebase token...")
-			decoded, err := fbauth.Auth().VerifyIDToken(r.Context(), token)
-			if err != nil {
-				log.Printf("Token verification failed: %v", err)
+			parsed, err := jwt.Parse(rawToken, func(t *jwt.Token) (interface{}, error) {
+				if _, ok := t.Method.(*jwt.SigningMethodHMAC); !ok {
+					return nil, jwt.ErrSignatureInvalid
+				}
+				return []byte(jwtSecret), nil
+			})
+			if err != nil || !parsed.Valid {
+				log.Printf("JWT verification failed: %v", err)
 
-				errMsg := err.Error()
+				errMsg := ""
+				if err != nil {
+					errMsg = err.Error()
+				}
 				if strings.Contains(errMsg, "expired") {
 					writeJSON(w, http.StatusUnauthorized, errorResponse{
 						Error:   "TOKEN_EXPIRED",
@@ -77,23 +84,41 @@ func Authenticate(userModel *models.UserModel) func(http.Handler) http.Handler {
 				return
 			}
 
-			firebaseUID := decoded.UID
-			email, _ := decoded.Claims["email"].(string)
-
-			user, err := userModel.FindOrCreateByFirebaseUID(r.Context(), firebaseUID, email)
-			if err != nil {
-				log.Printf("Failed to provision local user for Firebase UID %s: %v", firebaseUID, err)
-				writeJSON(w, http.StatusInternalServerError, errorResponse{
-					Error:   "INTERNAL_ERROR",
-					Message: "Failed to initialize user account",
+			claims, ok := parsed.Claims.(jwt.MapClaims)
+			if !ok {
+				writeJSON(w, http.StatusUnauthorized, errorResponse{
+					Error:   "UNAUTHORIZED",
+					Message: "Invalid token claims",
 				})
 				return
 			}
 
-			log.Printf("Token verified! User UUID: %s, Email: %s", user.ID, email)
+			userID, _ := claims["sub"].(string)
+			email, _ := claims["email"].(string)
+
+			if userID == "" {
+				writeJSON(w, http.StatusUnauthorized, errorResponse{
+					Error:   "UNAUTHORIZED",
+					Message: "Invalid token: missing user ID",
+				})
+				return
+			}
+
+			user, err := userModel.GetByID(r.Context(), userID)
+			if err != nil || user == nil {
+				log.Printf("JWT auth: user %s not found in DB: %v", userID, err)
+				writeJSON(w, http.StatusUnauthorized, errorResponse{
+					Error:   "UNAUTHORIZED",
+					Message: "User account not found",
+				})
+				return
+			}
+
+			log.Printf("JWT verified — User UUID: %s, Email: %s", user.ID, email)
 
 			ctx := context.WithValue(r.Context(), UserIDKey, user.ID)
 			ctx = context.WithValue(ctx, UserEmailKey, email)
+			ctx = context.WithValue(ctx, UserTierKey, string(user.SubscriptionTier))
 
 			next.ServeHTTP(w, r.WithContext(ctx))
 		})
@@ -150,3 +175,10 @@ func GetUserEmail(ctx context.Context) string {
 	}
 	return ""
 }
+
+func GetUserTier(ctx context.Context) string {
+	if v, ok := ctx.Value(UserTierKey).(string); ok {
+		return v
+	}
+	return "free"
+}

backend/internal/middleware/auth_test.go

@@ -0,0 +1,60 @@
+package middleware
+
+import (
+	"context"
+	"testing"
+)
+
+func TestGetUserID_Empty(t *testing.T) {
+	t.Parallel()
+
+	ctx := context.Background()
+	if id := GetUserID(ctx); id != "" {
+		t.Errorf("expected empty user ID, got %q", id)
+	}
+}
+
+func TestGetUserID_Set(t *testing.T) {
+	t.Parallel()
+
+	ctx := context.WithValue(context.Background(), UserIDKey, "abc-123")
+	if id := GetUserID(ctx); id != "abc-123" {
+		t.Errorf("expected abc-123, got %q", id)
+	}
+}
+
+func TestGetUserEmail_Empty(t *testing.T) {
+	t.Parallel()
+
+	ctx := context.Background()
+	if email := GetUserEmail(ctx); email != "" {
+		t.Errorf("expected empty email, got %q", email)
+	}
+}
+
+func TestGetUserEmail_Set(t *testing.T) {
+	t.Parallel()
+
+	ctx := context.WithValue(context.Background(), UserEmailKey, "test@example.com")
+	if email := GetUserEmail(ctx); email != "test@example.com" {
+		t.Errorf("expected test@example.com, got %q", email)
+	}
+}
+
+func TestGetUserTier_Default(t *testing.T) {
+	t.Parallel()
+
+	ctx := context.Background()
+	if tier := GetUserTier(ctx); tier != "free" {
+		t.Errorf("expected default tier 'free', got %q", tier)
+	}
+}
+
+func TestGetUserTier_Set(t *testing.T) {
+	t.Parallel()
+
+	ctx := context.WithValue(context.Background(), UserTierKey, "pro")
+	if tier := GetUserTier(ctx); tier != "pro" {
+		t.Errorf("expected 'pro', got %q", tier)
+	}
+}

backend/internal/models/address.go

@@ -55,12 +55,14 @@ func (m *AddressModel) ListByUser(ctx context.Context, userID string) ([]domain.
 	return addresses, rows.Err()
 }
 
-// ListAll returns all addresses system-wide (used by the poller).
+// ListAll returns addresses for users with an active subscription (used by the poller).
 func (m *AddressModel) ListAll(ctx context.Context) ([]domain.Address, error) {
 	rows, err := m.pool.Query(ctx,
-		`SELECT id, user_id, address, label, created_at
-		 FROM addresses
-		 ORDER BY created_at DESC`,
+		`SELECT a.id, a.user_id, a.address, a.label, a.created_at
+		 FROM addresses a
+		 JOIN users u ON u.id = a.user_id
+		 WHERE u.subscription_status IN ('active', 'trialing')
+		 ORDER BY a.created_at DESC`,
 	)
 	if err != nil {
 		return nil, err
@@ -125,6 +127,15 @@ func (m *AddressModel) UpdateLabel(ctx context.Context, id int, userID string, l
 	return &a, nil
 }
 
+func (m *AddressModel) CountByUser(ctx context.Context, userID string) (int, error) {
+	var count int
+	err := m.pool.QueryRow(ctx,
+		`SELECT COUNT(*) FROM addresses WHERE user_id = $1`,
+		userID,
+	).Scan(&count)
+	return count, err
+}
+
 func (m *AddressModel) Remove(ctx context.Context, id int, userID string) (bool, error) {
 	tag, err := m.pool.Exec(ctx,
 		`DELETE FROM addresses WHERE id = $1 AND user_id = $2`,

backend/internal/models/alert_rule.go

@@ -17,14 +17,14 @@ func NewAlertRuleModel(pool *pgxpool.Pool) *AlertRuleModel {
 	return &AlertRuleModel{pool: pool}
 }
 
-func (m *AlertRuleModel) Create(ctx context.Context, addressID int, alertType domain.AlertType, threshold *float64) (*domain.AlertRule, error) {
+func (m *AlertRuleModel) Create(ctx context.Context, addressID int, alertType domain.AlertType, threshold, minimum, maximum *float64) (*domain.AlertRule, error) {
 	var r domain.AlertRule
 	err := m.pool.QueryRow(ctx,
-		`INSERT INTO alert_rules (address_id, type, threshold, enabled)
-		 VALUES ($1, $2, $3, TRUE)
-		 RETURNING id, address_id, type, threshold, enabled, created_at`,
-		addressID, alertType.String(), threshold,
-	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt)
+		`INSERT INTO alert_rules (address_id, type, threshold, minimum, maximum, enabled)
+		 VALUES ($1, $2, $3, $4, $5, TRUE)
+		 RETURNING id, address_id, type, threshold, minimum, maximum, enabled, created_at`,
+		addressID, alertType.String(), threshold, minimum, maximum,
+	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
 	if err != nil {
 		return nil, err
 	}
@@ -33,7 +33,7 @@ func (m *AlertRuleModel) Create(ctx context.Context, addressID int, alertType do
 
 func (m *AlertRuleModel) ListByAddress(ctx context.Context, addressID int) ([]domain.AlertRule, error) {
 	rows, err := m.pool.Query(ctx,
-		`SELECT id, address_id, type, threshold, enabled, created_at
+		`SELECT id, address_id, type, threshold, minimum, maximum, enabled, created_at
 		 FROM alert_rules
 		 WHERE address_id = $1
 		 ORDER BY created_at DESC`,
@@ -47,7 +47,7 @@ func (m *AlertRuleModel) ListByAddress(ctx context.Context, addressID int) ([]do
 	var rules []domain.AlertRule
 	for rows.Next() {
 		var r domain.AlertRule
-		if err := rows.Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt); err != nil {
+		if err := rows.Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt); err != nil {
 			return nil, err
 		}
 		rules = append(rules, r)
@@ -61,19 +61,19 @@ func (m *AlertRuleModel) FindByID(ctx context.Context, id int, userID *string) (
 
 	if userID != nil {
 		err = m.pool.QueryRow(ctx,
-			`SELECT ar.id, ar.address_id, ar.type, ar.threshold, ar.enabled, ar.created_at
+			`SELECT ar.id, ar.address_id, ar.type, ar.threshold, ar.minimum, ar.maximum, ar.enabled, ar.created_at
 			 FROM alert_rules ar
 			 JOIN addresses a ON a.id = ar.address_id
 			 WHERE ar.id = $1 AND a.user_id = $2`,
 			id, *userID,
-		).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt)
+		).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
 	} else {
 		err = m.pool.QueryRow(ctx,
-			`SELECT id, address_id, type, threshold, enabled, created_at
+			`SELECT id, address_id, type, threshold, minimum, maximum, enabled, created_at
 			 FROM alert_rules
 			 WHERE id = $1`,
 			id,
-		).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt)
+		).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
 	}
 
 	if err != nil {
@@ -91,9 +91,9 @@ func (m *AlertRuleModel) UpdateEnabled(ctx context.Context, id int, enabled bool
 		`UPDATE alert_rules
 		 SET enabled = $2
 		 WHERE id = $1
-		 RETURNING id, address_id, type, threshold, enabled, created_at`,
+		 RETURNING id, address_id, type, threshold, minimum, maximum, enabled, created_at`,
 		id, enabled,
-	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Enabled, &r.CreatedAt)
+	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
 	if err != nil {
 		if errors.Is(err, pgx.ErrNoRows) {
 			return nil, nil
@@ -103,6 +103,33 @@ func (m *AlertRuleModel) UpdateEnabled(ctx context.Context, id int, enabled bool
 	return &r, nil
 }
 
+func (m *AlertRuleModel) UpdateThresholds(ctx context.Context, id int, minimum, maximum *float64) (*domain.AlertRule, error) {
+	var r domain.AlertRule
+	err := m.pool.QueryRow(ctx,
+		`UPDATE alert_rules
+		 SET minimum = $2, maximum = $3
+		 WHERE id = $1
+		 RETURNING id, address_id, type, threshold, minimum, maximum, enabled, created_at`,
+		id, minimum, maximum,
+	).Scan(&r.ID, &r.AddressID, &r.Type, &r.Threshold, &r.Minimum, &r.Maximum, &r.Enabled, &r.CreatedAt)
+	if err != nil {
+		if errors.Is(err, pgx.ErrNoRows) {
+			return nil, nil
+		}
+		return nil, err
+	}
+	return &r, nil
+}
+
+func (m *AlertRuleModel) CountDistinctTypesByAddress(ctx context.Context, addressID int) (int, error) {
+	var count int
+	err := m.pool.QueryRow(ctx,
+		`SELECT COUNT(DISTINCT type) FROM alert_rules WHERE address_id = $1`,
+		addressID,
+	).Scan(&count)
+	return count, err
+}
+
 func (m *AlertRuleModel) Remove(ctx context.Context, id int) (bool, error) {
 	tag, err := m.pool.Exec(ctx,
 		`DELETE FROM alert_rules WHERE id = $1`,

backend/internal/models/notification_config.go

@@ -77,10 +77,12 @@ func (m *NotificationConfigModel) Remove(ctx context.Context, userID string) (bo
 
 func (m *NotificationConfigModel) ListEnabled(ctx context.Context) ([]domain.NotificationConfig, error) {
 	rows, err := m.pool.Query(ctx,
-		`SELECT user_id, discord_webhook_url, telegram_chat_id, telegram_bot_token,
-		        email, slack_webhook_url
-		 FROM user_notification_configs
-		 WHERE notification_enabled = TRUE`,
+		`SELECT nc.user_id, nc.discord_webhook_url, nc.telegram_chat_id, nc.telegram_bot_token,
+		        nc.email, nc.slack_webhook_url
+		 FROM user_notification_configs nc
+		 JOIN users u ON u.id = nc.user_id
+		 WHERE nc.notification_enabled = TRUE
+		   AND u.subscription_status IN ('active', 'trialing')`,
 	)
 	if err != nil {
 		return nil, err

backend/internal/models/user.go

@@ -17,16 +17,16 @@ func NewUserModel(pool *pgxpool.Pool) *UserModel {
 	return &UserModel{pool: pool}
 }
 
-const userColumns = `id, firebase_uid, email, display_name,
+const userColumns = `id, firebase_uid, email, display_name, password_hash,
 	stripe_customer_id, stripe_subscription_id, subscription_status,
-	subscription_created_at, created_at, updated_at`
+	subscription_tier, subscription_created_at, created_at, updated_at`
 
 func scanUser(row pgx.Row) (*domain.User, error) {
 	var u domain.User
 	err := row.Scan(
-		&u.ID, &u.FirebaseUID, &u.Email, &u.DisplayName,
+		&u.ID, &u.FirebaseUID, &u.Email, &u.DisplayName, &u.PasswordHash,
 		&u.StripeCustomerID, &u.StripeSubscriptionID, &u.SubscriptionStatus,
-		&u.SubscriptionCreatedAt, &u.CreatedAt, &u.UpdatedAt,
+		&u.SubscriptionTier, &u.SubscriptionCreatedAt, &u.CreatedAt, &u.UpdatedAt,
 	)
 	if err != nil {
 		if errors.Is(err, pgx.ErrNoRows) {
@@ -51,6 +51,23 @@ func (m *UserModel) FindOrCreateByFirebaseUID(ctx context.Context, firebaseUID,
 	return scanUser(row)
 }
 
+func (m *UserModel) FindByEmail(ctx context.Context, email string) (*domain.User, error) {
+	row := m.pool.QueryRow(ctx,
+		`SELECT `+userColumns+` FROM users WHERE email = $1`, email,
+	)
+	return scanUser(row)
+}
+
+func (m *UserModel) CreateWithPassword(ctx context.Context, email, passwordHash string) (*domain.User, error) {
+	row := m.pool.QueryRow(ctx,
+		`INSERT INTO users (email, password_hash)
+		 VALUES ($1, $2)
+		 RETURNING `+userColumns,
+		email, passwordHash,
+	)
+	return scanUser(row)
+}
+
 func (m *UserModel) GetByID(ctx context.Context, id string) (*domain.User, error) {
 	row := m.pool.QueryRow(ctx,
 		`SELECT `+userColumns+` FROM users WHERE id = $1`, id,
@@ -66,15 +83,37 @@ func (m *UserModel) UpdateStripeCustomer(ctx context.Context, userID, stripeCust
 	return err
 }
 
-func (m *UserModel) ActivateSubscription(ctx context.Context, stripeCustomerID, subscriptionID, status string) error {
+func (m *UserModel) ActivateSubscription(ctx context.Context, stripeCustomerID, subscriptionID, status string, tier domain.SubscriptionTier) error {
 	_, err := m.pool.Exec(ctx,
 		`UPDATE users
 		 SET stripe_subscription_id = $2,
 		     subscription_status = $3,
+		     subscription_tier = $4,
 		     subscription_created_at = COALESCE(subscription_created_at, NOW()),
 		     updated_at = NOW()
 		 WHERE stripe_customer_id = $1`,
-		stripeCustomerID, subscriptionID, status,
+		stripeCustomerID, subscriptionID, status, string(tier),
+	)
+	return err
+}
+
+func (m *UserModel) UpdateSubscriptionTier(ctx context.Context, userID string, tier domain.SubscriptionTier) error {
+	_, err := m.pool.Exec(ctx,
+		`UPDATE users SET subscription_tier = $2, updated_at = NOW() WHERE id = $1`,
+		userID, string(tier),
+	)
+	return err
+}
+
+func (m *UserModel) ActivateFreeTier(ctx context.Context, userID string) error {
+	_, err := m.pool.Exec(ctx,
+		`UPDATE users
+		 SET subscription_status = 'active',
+		     subscription_tier = 'free',
+		     subscription_created_at = COALESCE(subscription_created_at, NOW()),
+		     updated_at = NOW()
+		 WHERE id = $1`,
+		userID,
 	)
 	return err
 }

backend/internal/services/evaluator.go

@@ -28,9 +28,8 @@ type EvaluatorService struct {
 	alertRules   *models.AlertRuleModel
 	alertEvents  *models.AlertEventModel
 	addresses    *models.AddressModel
+	users        *models.UserModel
 	notifConfigs *models.NotificationConfigModel
-	resendAPIKey string
-	emailFrom    string
 	notifSem     *semaphore.Weighted
 	notifWg      sync.WaitGroup
 }
@@ -40,18 +39,16 @@ func NewEvaluatorService(
 	alertRules *models.AlertRuleModel,
 	alertEvents *models.AlertEventModel,
 	addresses *models.AddressModel,
+	users *models.UserModel,
 	notifConfigs *models.NotificationConfigModel,
-	resendAPIKey string,
-	emailFrom string,
 ) *EvaluatorService {
 	return &EvaluatorService{
 		eth:          eth,
 		alertRules:   alertRules,
 		alertEvents:  alertEvents,
 		addresses:    addresses,
+		users:        users,
 		notifConfigs: notifConfigs,
-		resendAPIKey: resendAPIKey,
-		emailFrom:    emailFrom,
 		notifSem:     semaphore.NewWeighted(maxConcurrentNotifications),
 	}
 }
@@ -104,9 +101,9 @@ func (s *EvaluatorService) evaluateObservation(ctx context.Context, obs domain.O
 func (s *EvaluatorService) ruleMatches(ctx context.Context, rule domain.AlertRule, obs domain.ObservedTx) (bool, error) {
 	switch rule.Type {
 	case domain.AlertIncomingTx:
-		return obs.Direction == domain.DirectionIncoming, nil
+		return s.matchesDirectionalTx(rule, obs, domain.DirectionIncoming)
 	case domain.AlertOutgoingTx:
-		return obs.Direction == domain.DirectionOutgoing, nil
+		return s.matchesDirectionalTx(rule, obs, domain.DirectionOutgoing)
 	case domain.AlertLargeTransfer:
 		return s.matchesLargeTransfer(rule, obs)
 	case domain.AlertBalanceBelow:
@@ -117,6 +114,42 @@ func (s *EvaluatorService) ruleMatches(ctx context.Context, rule domain.AlertRul
 	}
 }
 
+func (s *EvaluatorService) matchesDirectionalTx(rule domain.AlertRule, obs domain.ObservedTx, expected domain.Direction) (bool, error) {
+	if obs.Direction != expected {
+		return false, nil
+	}
+
+	if rule.Minimum != nil {
+		minWei, err := wei.FromEth(*rule.Minimum)
+		if err != nil {
+			return false, err
+		}
+		aboveMin, err := wei.GreaterThanOrEqual(obs.Value, minWei)
+		if err != nil {
+			return false, err
+		}
+		if !aboveMin {
+			return false, nil
+		}
+	}
+
+	if rule.Maximum != nil {
+		maxWei, err := wei.FromEth(*rule.Maximum)
+		if err != nil {
+			return false, err
+		}
+		belowMax, err := wei.LessThanOrEqual(obs.Value, maxWei)
+		if err != nil {
+			return false, err
+		}
+		if !belowMax {
+			return false, nil
+		}
+	}
+
+	return true, nil
+}
+
 func (s *EvaluatorService) matchesLargeTransfer(rule domain.AlertRule, obs domain.ObservedTx) (bool, error) {
 	if rule.Threshold == nil {
 		return false, nil
@@ -218,14 +251,16 @@ func (s *EvaluatorService) WaitForNotifications() {
 	s.notifWg.Wait()
 }
 
-func (s *EvaluatorService) buildNotifiers(cfg *domain.NotificationConfig) []notifications.Notifier {
+func (s *EvaluatorService) buildNotifiers(cfg *domain.NotificationConfig, limits domain.TierLimits) []notifications.Notifier {
 	var notifiers []notifications.Notifier
 
-	if cfg.DiscordWebhookURL != nil && *cfg.DiscordWebhookURL != "" {
+	if limits.ChannelAllowed("discord") &&
+		cfg.DiscordWebhookURL != nil && *cfg.DiscordWebhookURL != "" {
 		notifiers = append(notifiers, &notifications.DiscordNotifier{WebhookURL: *cfg.DiscordWebhookURL})
 	}
 
-	if cfg.TelegramBotToken != nil && *cfg.TelegramBotToken != "" &&
+	if limits.ChannelAllowed("telegram") &&
+		cfg.TelegramBotToken != nil && *cfg.TelegramBotToken != "" &&
 		cfg.TelegramChatID != nil && *cfg.TelegramChatID != "" {
 		notifiers = append(notifiers, &notifications.TelegramNotifier{
 			BotToken: *cfg.TelegramBotToken,
@@ -233,17 +268,12 @@ func (s *EvaluatorService) buildNotifiers(cfg *domain.NotificationConfig) []noti
 		})
 	}
 
-	if cfg.SlackWebhookURL != nil && *cfg.SlackWebhookURL != "" {
+	if limits.ChannelAllowed("slack") &&
+		cfg.SlackWebhookURL != nil && *cfg.SlackWebhookURL != "" {
 		notifiers = append(notifiers, &notifications.SlackNotifier{WebhookURL: *cfg.SlackWebhookURL})
 	}
 
-	if cfg.Email != nil && *cfg.Email != "" {
-		notifiers = append(notifiers, &notifications.EmailNotifier{
-			APIKey: s.resendAPIKey,
-			From:   s.emailFrom,
-			To:     *cfg.Email,
-		})
-	}
+	// Email is delivered exclusively via the daily digest service, never real-time.
 
 	return notifiers
 }
@@ -289,6 +319,13 @@ func (s *EvaluatorService) sendNotification(ctx context.Context, userID, message
 		return
 	}
 
+	user, err := s.users.GetByID(ctx, userID)
+	if err != nil || user == nil {
+		log.Printf("Failed to load user %s for tier check in notification: %v", userID, err)
+		return
+	}
+	limits := domain.GetTierLimits(user.SubscriptionTier)
+
 	meta := notifications.AlertMetadata{
 		TxHash:       obs.Hash,
 		AddressLabel: addressLabel,
@@ -296,7 +333,7 @@ func (s *EvaluatorService) sendNotification(ctx context.Context, userID, message
 		Address:      address,
 	}
 
-	for _, n := range s.buildNotifiers(notifConfig) {
+	for _, n := range s.buildNotifiers(notifConfig, limits) {
 		if err := sendWithRetry(ctx, n, message, meta); err != nil {
 			log.Printf("Notification channel failed for user %s after retries: %v", userID, err)
 		} else {

backend/internal/wei/converter.go

@@ -90,6 +90,14 @@ func LessThan(weiA, weiB string) (bool, error) {
 	return cmp < 0, nil
 }
 
+func LessThanOrEqual(weiA, weiB string) (bool, error) {
+	cmp, err := Compare(weiA, weiB)
+	if err != nil {
+		return false, err
+	}
+	return cmp <= 0, nil
+}
+
 // FormatAsEth formats a Wei string as "X.XXXX ETH".
 func FormatAsEth(weiString string, decimals int) (string, error) {
 	eth, err := ToEth(weiString)

frontend/src/App.jsx

@@ -2,26 +2,38 @@ import { Routes, Route, Navigate } from "react-router-dom";
 import { useAuth } from "./contexts/AuthContext";
 import Navbar from "./components/Navbar";
 import Login from "./pages/login/Login";
-import Signup from "./pages/Signup";
-import Subscribe from "./pages/subscribe/subscribe";
+import Subscribe from "./pages/subscribe/Subscribe";
 import Addresses from "./pages/addresses/Addresses";
 import Alerts from "./pages/alerts/Alerts";
 import AlertHistory from "./pages/alertHistory/AlertHistory";
+import Account from "./pages/user_account/Account";
 
 export default function App() {
-  const { currentUser } = useAuth();
+  const { isAuthenticated, isSubscribed, user } = useAuth();
 
-  if (!currentUser) {
+  // Unauthenticated: show login + onboarding routes only
+  if (!isAuthenticated) {
     return (
       <Routes>
         <Route path="/login" element={<Login />} />
-        <Route path="/signup" element={<Signup />} />
         <Route path="/subscribe" element={<Subscribe />} />
         <Route path="*" element={<Navigate to="/login" />} />
       </Routes>
     );
   }
 
+  // Authenticated but no active subscription: force through subscribe flow
+  if (!isSubscribed) {
+    return (
+      <Routes>
+        <Route path="/subscribe" element={<Subscribe />} />
+        <Route path="/account" element={<><Navbar /><Account /></>} />
+        <Route path="*" element={<Navigate to="/subscribe" />} />
+      </Routes>
+    );
+  }
+
+  // Fully authenticated + subscribed: main app
   return (
     <div>
       <Navbar />
@@ -30,6 +42,7 @@ export default function App() {
         <Route path="/addresses" element={<Addresses />} />
         <Route path="/alerts" element={<Alerts />} />
         <Route path="/alertevents" element={<AlertHistory />} />
+        <Route path="/account" element={<Account />} />
         <Route path="/subscribe" element={<Subscribe />} />
         <Route path="*" element={<Navigate to="/addresses" />} />
       </Routes>

frontend/src/api/account.js

@@ -0,0 +1,25 @@
+import { getAuthHeaders } from "./authHeaders";
+import { API_BASE } from "./config";
+
+export async function getAccount() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/user/account`, { headers });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to load account");
+    }
+    return res.json();
+}
+
+export async function createPortalSession() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/create-portal-session`, {
+        method: "POST",
+        headers,
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create portal session");
+    }
+    return res.json();
+}

frontend/src/api/alerts.jsx

@@ -129,6 +129,48 @@ export async function updateAlertStatus(alertId, enabled) {
     }
 }
 
+/**
+ * Update the min/max thresholds on an alert rule
+ * @param {number} alertId - Alert rule ID
+ * @param {number|null} minimum - Minimum amount (null to clear)
+ * @param {number|null} maximum - Maximum amount (null to clear)
+ * @returns {Promise<Object>} Updated alert rule
+ */
+export async function updateAlertThresholds(alertId, minimum, maximum) {
+    try {
+        const headers = await getAuthHeaders();
+        const response = await fetch(`${API_BASE}/alerts/${alertId}`, {
+            method: "PATCH",
+            headers: headers,
+            body: JSON.stringify({
+                update_min_max: true,
+                minimum: minimum ?? null,
+                maximum: maximum ?? null,
+            }),
+        });
+
+        if (!response.ok) {
+            let errorMessage = "Failed to update alert thresholds";
+            try {
+                const error = await response.json();
+                errorMessage = error.message || errorMessage;
+            } catch {
+                errorMessage = `Server error: ${response.status} ${response.statusText}`;
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.json();
+    } catch (error) {
+        if (error.message.includes("fetch")) {
+            throw new Error(
+                "Cannot connect to server. Is the backend running?",
+            );
+        }
+        throw error;
+    }
+}
+
 /**
  * Delete an alert rule
  * @param {number} alertId - Alert rule ID

frontend/src/api/auth.js

@@ -0,0 +1,27 @@
+import { API_BASE } from "./config";
+
+export async function loginUser(email, password) {
+  const res = await fetch(`${API_BASE}/auth/login`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, password }),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    throw new Error(data.message || "Login failed");
+  }
+  return data;
+}
+
+export async function registerAfterCheckout(email, password, sessionId) {
+  const res = await fetch(`${API_BASE}/auth/register`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ email, password, session_id: sessionId || "" }),
+  });
+  const data = await res.json();
+  if (!res.ok) {
+    throw new Error(data.message || "Registration failed");
+  }
+  return data;
+}

frontend/src/api/authHeaders.js

@@ -1,46 +1,31 @@
 /**
  * Auth Headers Helper
  *
- * Provides authentication headers for API calls
- * Includes Firebase ID token in Authorization header
+ * Provides authentication headers for API calls.
+ * Reads the JWT from localStorage (set by AuthContext on login).
  */
 
-import { auth } from "../firebase/config";
+export function getAuthHeaders() {
+  const token = localStorage.getItem("kp_token");
 
-/**
- * Get headers with authentication token
- * @returns {Promise<Object>} Headers object with Authorization
- */
-export async function getAuthHeaders() {
-    const currentUser = auth.currentUser;
+  if (!token) {
+    throw new Error("No authenticated user");
+  }
 
-    if (!currentUser) {
-        throw new Error("No authenticated user");
-    }
-
-    // Get Firebase ID token
-    const token = await currentUser.getIdToken();
-
-    return {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`,
-    };
+  return {
+    "Content-Type": "application/json",
+    Authorization: `Bearer ${token}`,
+  };
 }
 
-/**
- * Get headers for non-JSON requests (e.g., DELETE with no body)
- * @returns {Promise<Object>} Headers object with Authorization
- */
-export async function getAuthHeadersSimple() {
-    const currentUser = auth.currentUser;
+export function getAuthHeadersSimple() {
+  const token = localStorage.getItem("kp_token");
 
-    if (!currentUser) {
-        throw new Error("No authenticated user");
-    }
+  if (!token) {
+    throw new Error("No authenticated user");
+  }
 
-    const token = await currentUser.getIdToken();
-
-    return {
-        Authorization: `Bearer ${token}`,
-    };
+  return {
+    Authorization: `Bearer ${token}`,
+  };
 }

frontend/src/api/stripe.jsx

@@ -1,15 +1,42 @@
 import { getAuthHeaders } from "./authHeaders";
 import { API_BASE } from "./config";
 
-export async function createCheckoutSession() {
+export async function createCheckoutSession(tier = "premium") {
     const headers = await getAuthHeaders();
     const res = await fetch(`${API_BASE}/stripe/create-checkout-session`, {
+        method: "POST",
+        headers: { ...headers, "Content-Type": "application/json" },
+        body: JSON.stringify({ tier }),
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create checkout session");
+    }
+    return res.json();
+}
+
+export async function createOnboardingCheckout(email, tier = "premium") {
+    const res = await fetch(`${API_BASE}/stripe/create-onboarding-checkout`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ email, tier }),
+    });
+    if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.message || "Failed to create checkout session");
+    }
+    return res.json();
+}
+
+export async function activateFreeTier() {
+    const headers = await getAuthHeaders();
+    const res = await fetch(`${API_BASE}/stripe/activate-free`, {
         method: "POST",
         headers,
     });
     if (!res.ok) {
         const data = await res.json();
-        throw new Error(data.message || "Failed to create checkout session");
+        throw new Error(data.message || "Failed to activate free tier");
     }
     return res.json();
 }

frontend/src/components/Navbar.css

@@ -8,6 +8,19 @@
   border-bottom: 1px solid var(--color-border-light);
 }
 
+/* ── Left Group: Brand + Links ───────────────────────────── */
+
+.navbar__left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.navbar__brand-group {
+  display: flex;
+  align-items: center;
+}
+
 .navbar__brand {
   font-weight: 700;
   font-size: 1.4rem;
@@ -38,11 +51,33 @@
   background-color: var(--color-bg-card);
 }
 
+/* ── Right Group: Email + Logout + Hamburger ─────────────── */
+
+.navbar__right {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
 .navbar__user {
   font-size: 1.275rem;
   color: #777;
 }
 
+.navbar__user-link {
+  color: var(--color-primary);
+  text-decoration: none;
+  transition: color 0.15s ease;
+}
+
+.navbar__user-link:hover {
+  color: var(--color-primary-hover);
+}
+
+.navbar__user-link--mobile {
+  display: none;
+}
+
 .navbar__logout {
   padding: 0.4rem 1rem;
   font-size: 1.275rem;
@@ -54,3 +89,79 @@
   cursor: pointer;
   transition: all 0.15s ease;
 }
+
+/* ── Hamburger Icon (hidden on desktop) ──────────────────── */
+
+.navbar__hamburger {
+  display: none;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+}
+
+.navbar__hamburger-bar {
+  display: block;
+  width: 28px;
+  height: 3px;
+  background-color: var(--color-brand);
+  border-radius: 2px;
+}
+
+/* ── Responsive: Tablet & below (≤ 768px) ────────────────── */
+
+@media (max-width: 768px) {
+  .navbar {
+    padding: 0.75rem 1rem;
+  }
+
+  .navbar__brand-group {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .navbar__brand {
+    margin-right: 0;
+    font-size: 1.25rem;
+  }
+
+  .navbar__links {
+    display: none;
+  }
+
+  .navbar__user-link--mobile {
+    display: block;
+    font-size: 0.95rem;
+  }
+
+  .navbar__user-link--desktop {
+    display: none;
+  }
+
+  .navbar__logout {
+    display: none;
+  }
+
+  .navbar__hamburger {
+    display: flex;
+  }
+}
+
+/* ── Responsive: Mobile (≤ 480px) ────────────────────────── */
+
+@media (max-width: 480px) {
+  .navbar {
+    padding: 0.75rem;
+  }
+
+  .navbar__brand {
+    font-size: 1.15rem;
+  }
+
+  .navbar__user-link--mobile {
+    font-size: 0.85rem;
+  }
+}

frontend/src/components/Navbar.jsx

@@ -1,5 +1,7 @@
+import { useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 import { useAuth } from "../contexts/AuthContext";
+import NavPanel from "./navPanel/NavPanel";
 import "./Navbar.css";
 
 const navLinks = [
@@ -9,37 +11,61 @@ const navLinks = [
 ];
 
 export default function Navbar() {
-  const { currentUser, logout } = useAuth();
+  const { user, logout } = useAuth();
   const location = useLocation();
+  const [isNavPanelOpen, setIsNavPanelOpen] = useState(false);
 
-  if (!currentUser) return null;
+  if (!user) return null;
 
   return (
-    <nav className="navbar">
-      <div className="flex flex--center gap-sm">
-        <span className="navbar__brand">Koin Ping</span>
-        <div className="navbar__links">
-          {navLinks.map(({ to, label }) => {
-            const isActive = location.pathname === to;
-            return (
-              <Link
-                key={to}
-                to={to}
-                className={`navbar__link ${isActive ? "navbar__link--active" : ""}`}
-              >
-                {label}
-              </Link>
-            );
-          })}
+    <>
+      <nav className="navbar">
+        <div className="navbar__left">
+          <div className="navbar__brand-group">
+            <span className="navbar__brand">Koin Ping</span>
+            <Link to="/account" className="navbar__user-link navbar__user-link--mobile">
+              {user.email}
+            </Link>
+          </div>
+          <div className="navbar__links">
+            {navLinks.map(({ to, label }) => {
+              const isActive = location.pathname === to;
+              return (
+                <Link
+                  key={to}
+                  to={to}
+                  className={`navbar__link ${isActive ? "navbar__link--active" : ""}`}
+                >
+                  {label}
+                </Link>
+              );
+            })}
+          </div>
         </div>
-      </div>
 
-      <div className="flex flex--center gap-lg">
-        <span className="navbar__user">{currentUser.email}</span>
-        <button onClick={logout} className="navbar__logout">
-          Logout
-        </button>
-      </div>
-    </nav>
+        <div className="navbar__right">
+          <Link to="/account" className="navbar__user navbar__user-link navbar__user-link--desktop">
+            {user.email}
+          </Link>
+          <button onClick={logout} className="navbar__logout">
+            Logout
+          </button>
+          <button
+            className="navbar__hamburger"
+            onClick={() => setIsNavPanelOpen(true)}
+            aria-label="Open navigation menu"
+          >
+            <span className="navbar__hamburger-bar" />
+            <span className="navbar__hamburger-bar" />
+            <span className="navbar__hamburger-bar" />
+          </button>
+        </div>
+      </nav>
+
+      <NavPanel
+        isOpen={isNavPanelOpen}
+        onClose={() => setIsNavPanelOpen(false)}
+      />
+    </>
   );
 }

frontend/src/components/TierPicker.css

@@ -0,0 +1,120 @@
+.tier-picker {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 1rem;
+}
+
+.tier-picker__card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 1.25rem;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-xl);
+  text-align: center;
+}
+
+.tier-picker__card--highlighted {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 1px var(--color-primary);
+}
+
+.tier-picker__card--selected {
+  border-color: var(--color-success);
+  box-shadow: 0 0 0 1px var(--color-success);
+}
+
+.tier-picker__badge {
+  position: absolute;
+  top: -10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: var(--color-primary);
+  color: white;
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 2px 12px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+
+.tier-picker__name {
+  margin-bottom: 0.5rem;
+  font-size: 1.05rem;
+  color: var(--color-text);
+}
+
+.tier-picker__price {
+  margin-bottom: 1.25rem;
+}
+
+.tier-picker__amount {
+  font-size: 2rem;
+  font-weight: 700;
+  color: white;
+}
+
+.tier-picker__period {
+  font-size: 0.85rem;
+  color: var(--color-text-dimmed);
+}
+
+.tier-picker__features {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 1.25rem;
+  text-align: left;
+  flex-grow: 1;
+}
+
+.tier-picker__feature {
+  padding: 0.3rem 0;
+  font-size: 0.82rem;
+  color: var(--color-text-label);
+}
+
+.tier-picker__feature--disabled {
+  color: var(--color-text-dimmed);
+  opacity: 0.55;
+}
+
+.tier-picker__check {
+  color: var(--color-primary);
+  font-weight: bold;
+  margin-right: 0.4rem;
+}
+
+.tier-picker__dash {
+  margin-right: 0.4rem;
+}
+
+.tier-picker__btn {
+  width: 100%;
+  padding: 0.6rem;
+  background-color: var(--color-bg-card);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+  cursor: pointer;
+  border-radius: var(--radius-md);
+  font-weight: 600;
+}
+
+.tier-picker__btn:hover {
+  background-color: var(--color-primary);
+  border-color: var(--color-primary);
+}
+
+.tier-picker__btn--selected {
+  background-color: var(--color-success);
+  border-color: var(--color-success);
+  color: white;
+}
+
+@media (max-width: 768px) {
+  .tier-picker {
+    grid-template-columns: 1fr;
+    max-width: 400px;
+    margin: 0 auto;
+  }
+}

frontend/src/components/TierPicker.jsx

@@ -0,0 +1,89 @@
+import "./TierPicker.css";
+
+const TIERS = [
+  {
+    id: "free",
+    name: "Trial Monitoring",
+    price: "$0",
+    period: "",
+    features: [
+      "Monitor 1 blockchain address 24/7",
+      "Configure alerts to fire on trigger events",
+      "1 transaction alert type per trigger (email digest)",
+    ],
+    disabledFeatures: [],
+  },
+  {
+    id: "premium",
+    name: "Premium Monitoring",
+    price: "$1.99",
+    period: "/month",
+    features: [
+      "Monitor 3 blockchain addresses",
+      "Configure two types of rule-based alerts to fire on trigger events for each of the three addresses",
+      "Daily email digest alert",
+      "Real-time Discord alerts",
+      "Real-time Telegram alerts",
+    ],
+    disabledFeatures: [],
+    highlighted: true,
+  },
+  {
+    id: "pro",
+    name: "Professional Monitoring",
+    price: "$11.99",
+    period: "/month",
+    features: [
+      "Monitor unlimited blockchain addresses",
+      "Configure unlimited alert rules to fire on unlimited events on any address",
+      "Daily email digest alert",
+      "Real-time Discord alerts",
+      "Real-time Telegram alerts",
+      "Real-time Slack alerts configurable for multiple Slack groups or channels",
+      "Unlimited transaction alert types per monitored address",
+    ],
+    disabledFeatures: [],
+  },
+];
+
+export default function TierPicker({ onSelect, selectedTier }) {
+  return (
+    <div className="tier-picker">
+      {TIERS.map((tier) => (
+        <div
+          key={tier.id}
+          className={`tier-picker__card${tier.highlighted ? " tier-picker__card--highlighted" : ""}${selectedTier === tier.id ? " tier-picker__card--selected" : ""}`}
+        >
+          {tier.highlighted && (
+            <div className="tier-picker__badge">Most Popular</div>
+          )}
+          <h3 className="tier-picker__name">{tier.name}</h3>
+          <div className="tier-picker__price">
+            <span className="tier-picker__amount">{tier.price}</span>
+            {tier.period && (
+              <span className="tier-picker__period">{tier.period}</span>
+            )}
+          </div>
+          <ul className="tier-picker__features">
+            {tier.features.map((f) => (
+              <li key={f} className="tier-picker__feature">
+                <span className="tier-picker__check">&#10003;</span> {f}
+              </li>
+            ))}
+            {tier.disabledFeatures.map((f) => (
+              <li key={f} className="tier-picker__feature tier-picker__feature--disabled">
+                <span className="tier-picker__dash">&mdash;</span> {f}
+              </li>
+            ))}
+          </ul>
+          <button
+            className={`btn tier-picker__btn${selectedTier === tier.id ? " tier-picker__btn--selected" : ""}`}
+            onClick={() => onSelect(tier.id)}
+          >
+            {selectedTier === tier.id ? "Selected" : "Select"}
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}

frontend/src/components/UpgradeBanner.css

@@ -0,0 +1,32 @@
+.upgrade-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 0.75rem 1rem;
+  margin-bottom: 1rem;
+  border-radius: var(--radius-md);
+  background-color: #3a2e00;
+  border: 1px solid #aa7700;
+  color: #ffcc44;
+}
+
+.upgrade-banner__message {
+  font-size: 0.88rem;
+}
+
+.upgrade-banner__link {
+  background: none;
+  border: 1px solid #aa7700;
+  color: #ffcc44;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  font-size: 0.82rem;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.upgrade-banner__link:hover {
+  background-color: #4a3800;
+}

frontend/src/components/UpgradeBanner.jsx

@@ -0,0 +1,18 @@
+import { useNavigate } from "react-router-dom";
+import "./UpgradeBanner.css";
+
+export default function UpgradeBanner({ message, linkTo = "/subscribe?upgrade=true" }) {
+  const navigate = useNavigate();
+
+  return (
+    <div className="upgrade-banner">
+      <span className="upgrade-banner__message">{message}</span>
+      <button
+        className="upgrade-banner__link"
+        onClick={() => navigate(linkTo)}
+      >
+        Upgrade
+      </button>
+    </div>
+  );
+}

frontend/src/components/navPanel/NavPanel.css

@@ -0,0 +1,78 @@
+/* ── Overlay Backdrop ─────────────────────────────────────── */
+
+.nav-panel__overlay {
+  position: fixed;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.45);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: 900;
+}
+
+.nav-panel__overlay--visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+/* ── Slide-out Panel ─────────────────────────────────────── */
+
+.nav-panel {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 260px;
+  height: 100%;
+  background-color: var(--color-bg-elevated);
+  border-right: 1px solid var(--color-border);
+  transform: translateX(-100%);
+  transition: transform 0.3s ease;
+  z-index: 950;
+  display: flex;
+  flex-direction: column;
+  padding: 1.5rem 0;
+}
+
+.nav-panel--open {
+  transform: translateX(0);
+}
+
+/* ── Nav Links ───────────────────────────────────────────── */
+
+.nav-panel__nav {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.nav-panel__link {
+  padding: 0.9rem 1.5rem;
+  text-decoration: none;
+  font-size: 1.3rem;
+  font-weight: 200;
+  color: var(--color-text-subtle);
+  border-left: 3px solid transparent;
+  transition: background-color 0.15s ease, color 0.15s ease;
+}
+
+.nav-panel__link--active {
+  font-weight: 600;
+  color: var(--color-text);
+  background-color: var(--color-bg-card);
+  border-left-color: var(--color-brand);
+}
+
+/* ── Logout Button ───────────────────────────────────────── */
+
+.nav-panel__logout {
+  margin: 1rem 1.5rem;
+  padding: 0.5rem 1rem;
+  font-size: 1.15rem;
+  font-weight: 400;
+  background-color: transparent;
+  color: var(--color-text-subtle);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}

frontend/src/components/navPanel/NavPanel.jsx

@@ -0,0 +1,52 @@
+import { Link, useLocation } from "react-router-dom";
+import { useAuth } from "../../contexts/AuthContext";
+import "./NavPanel.css";
+
+const navLinks = [
+  { to: "/addresses", label: "Addresses" },
+  { to: "/alerts", label: "Configure Alerts" },
+  { to: "/alertevents", label: "Alert Event History" },
+];
+
+export default function NavPanel({ isOpen, onClose }) {
+  const { logout } = useAuth();
+  const location = useLocation();
+
+  const handleNavClick = () => {
+    onClose();
+  };
+
+  const handleLogout = () => {
+    onClose();
+    logout();
+  };
+
+  return (
+    <>
+      <div
+        className={`nav-panel__overlay${isOpen ? " nav-panel__overlay--visible" : ""}`}
+        onClick={onClose}
+      />
+      <aside className={`nav-panel${isOpen ? " nav-panel--open" : ""}`}>
+        <nav className="nav-panel__nav">
+          {navLinks.map(({ to, label }) => {
+            const isActive = location.pathname === to;
+            return (
+              <Link
+                key={to}
+                to={to}
+                className={`nav-panel__link${isActive ? " nav-panel__link--active" : ""}`}
+                onClick={handleNavClick}
+              >
+                {label}
+              </Link>
+            );
+          })}
+        </nav>
+        <button onClick={handleLogout} className="nav-panel__logout">
+          Logout
+        </button>
+      </aside>
+    </>
+  );
+}

frontend/src/contexts/AuthContext.jsx

@@ -1,114 +1,98 @@
-/**
- * AuthContext - Firebase Authentication State Management
- *
- * Provides authentication state and methods throughout the app
- */
+import { createContext, useReducer, useContext, useEffect, useCallback, useRef } from "react";
+import authReducer, { initialState, ACTION_TYPES } from "../reducers/authReducer";
+import { loginUser, registerAfterCheckout } from "../api/auth";
+import { getAccount } from "../api/account";
 
-import { createContext, useContext, useEffect, useState } from "react";
-import {
-    createUserWithEmailAndPassword,
-    signInWithEmailAndPassword,
-    signOut,
-    onAuthStateChanged,
-} from "firebase/auth";
-import { auth } from "../firebase/config";
+const AuthContext = createContext(null);
 
-const AuthContext = createContext();
-
-/**
- * Hook to access auth context
- * @returns {Object} Auth context value
- */
-export function useAuth() {
-    const context = useContext(AuthContext);
-    if (!context) {
-        throw new Error("useAuth must be used within AuthProvider");
-    }
-    return context;
-}
-
-/**
- * AuthProvider - Wraps app and provides auth state
- */
 export function AuthProvider({ children }) {
-    const [currentUser, setCurrentUser] = useState(null);
-    const [loading, setLoading] = useState(true);
-    const [error, setError] = useState(null);
+  const [state, dispatch] = useReducer(authReducer, initialState);
+  const fetchedRef = useRef(false);
 
-    /**
-     * Sign up with email and password
-     */
-    async function signup(email, password) {
-        try {
-            setError(null);
-            const result = await createUserWithEmailAndPassword(
-                auth,
-                email,
-                password,
-            );
-            return result.user;
-        } catch (err) {
-            setError(err.message);
-            throw err;
-        }
+  const fetchAccount = useCallback(async () => {
+    try {
+      const account = await getAccount();
+      dispatch({
+        type: ACTION_TYPES.SET_USER,
+        payload: {
+          id: account.user_id,
+          email: account.email,
+          subscriptionStatus: account.subscription_status,
+          subscriptionTier: account.subscription_tier,
+          tierLimits: account.tier_limits,
+          addressCount: account.address_count,
+        },
+      });
+    } catch {
+      dispatch({ type: ACTION_TYPES.LOGOUT });
     }
+  }, []);
 
-    /**
-     * Log in with email and password
-     */
-    async function login(email, password) {
-        try {
-            setError(null);
-            const result = await signInWithEmailAndPassword(
-                auth,
-                email,
-                password,
-            );
-            return result.user;
-        } catch (err) {
-            setError(err.message);
-            throw err;
-        }
-    }
+  // On mount, if we have a token in localStorage, hydrate user from backend.
+  useEffect(() => {
+    if (!state.token || fetchedRef.current) return;
+    fetchedRef.current = true;
+    fetchAccount();
+  }, [state.token, fetchAccount]);
 
-    /**
-     * Log out current user
-     */
-    async function logout() {
-        try {
-            setError(null);
-            await signOut(auth);
-        } catch (err) {
-            setError(err.message);
-            throw err;
-        }
-    }
+  async function login(email, password) {
+    const data = await loginUser(email, password);
+    dispatch({ type: ACTION_TYPES.LOGIN_SUCCESS, payload: data });
+    fetchedRef.current = false;
+    return data;
+  }
 
-    /**
-     * Listen for auth state changes
-     */
-    useEffect(() => {
-        const unsubscribe = onAuthStateChanged(auth, (user) => {
-            setCurrentUser(user);
-            setLoading(false);
-        });
+  async function register(email, password, sessionId) {
+    const data = await registerAfterCheckout(email, password, sessionId);
+    dispatch({ type: ACTION_TYPES.LOGIN_SUCCESS, payload: data });
+    fetchedRef.current = false;
+    return data;
+  }
 
-        // Cleanup subscription
-        return unsubscribe;
-    }, []);
+  function logout() {
+    fetchedRef.current = false;
+    dispatch({ type: ACTION_TYPES.LOGOUT });
+  }
 
-    const value = {
-        currentUser,
-        signup,
-        login,
-        logout,
-        error,
-        loading,
-    };
+  function refreshAccount() {
+    fetchAccount();
+  }
 
-    return (
-        <AuthContext.Provider value={value}>
-            {!loading && children}
-        </AuthContext.Provider>
-    );
+  const isAuthenticated = state.isAuthenticated && !!state.token;
+  const isSubscribed =
+    state.user?.subscriptionStatus === "active" ||
+    state.user?.subscriptionStatus === "trialing";
+
+  const tierLimits = state.user?.tierLimits || {
+    max_addresses: 1,
+    max_alert_types: 1,
+    allowed_channels: ["email"],
+  };
+
+  const value = {
+    user: state.user,
+    token: state.token,
+    isAuthenticated,
+    isSubscribed,
+    tierLimits,
+    userTier: state.user?.subscriptionTier || "free",
+    login,
+    register,
+    logout,
+    refreshAccount,
+    dispatch,
+    ACTION_TYPES,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
+
+export function useAuth() {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error("useAuth must be used within an AuthProvider");
+  }
+  return context;
+}
+
+export default useAuth;

frontend/src/index.css

@@ -356,3 +356,81 @@ button {
   color: white;
   font-size: 0.85rem;
 }
+
+/* ── Responsive Breakpoints ──────────────────────────────── */
+/* Mobile:  <= 480px                                          */
+/* Tablet:  481px – 768px                                     */
+/* Laptop:  769px – 1024px                                    */
+/* Desktop: >= 1025px (default styles above)                  */
+
+/* Laptop & below */
+@media (max-width: 1024px) {
+  .page--wide {
+    max-width: 100%;
+  }
+}
+
+/* Tablet & below */
+@media (max-width: 768px) {
+  html {
+    font-size: 13px;
+  }
+
+  .page {
+    padding: 1.25rem;
+  }
+
+  .btn--lg {
+    padding: 0.6rem 1.2rem;
+  }
+
+  h1 {
+    font-size: 1.75rem;
+  }
+
+  h2 {
+    font-size: 1.4rem;
+  }
+
+  h3 {
+    font-size: 1.15rem;
+  }
+}
+
+/* Tier-locked: greyed out, non-interactive overlay for features above the user's plan */
+.tier-locked {
+  opacity: 0.45;
+  pointer-events: none;
+  filter: grayscale(40%);
+  user-select: none;
+}
+
+/* Mobile */
+@media (max-width: 480px) {
+  html {
+    font-size: 12px;
+  }
+
+  .page {
+    padding: 1rem 0.75rem;
+  }
+
+  .form-control,
+  .form-select {
+    font-size: 0.95rem;
+  }
+
+  .btn {
+    padding: 0.45rem 0.85rem;
+    font-size: 0.95rem;
+  }
+
+  .btn--lg {
+    padding: 0.55rem 1rem;
+    font-size: 1rem;
+  }
+
+  .section {
+    padding: 0.75rem;
+  }
+}

frontend/src/pages/addresses/Addresses.css

@@ -28,3 +28,13 @@
   margin-left: 1rem;
   flex-shrink: 0;
 }
+
+/* ── Addresses Responsive ────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .address__remove {
+    margin-left: 0.5rem;
+    padding: 0.25rem 0.5rem;
+    font-size: 0.8rem;
+  }
+}

frontend/src/pages/addresses/Addresses.jsx

@@ -1,15 +1,22 @@
 import { useState, useEffect } from "react";
+import { useAuth } from "../../contexts/AuthContext";
 import AddressForm from "../../components/AddressForm";
+import UpgradeBanner from "../../components/UpgradeBanner";
 import { getAddresses, createAddress, deleteAddress, updateAddress } from "../../api/addresses";
 import "./Addresses.css";
 
 export default function Addresses() {
+  const { tierLimits, refreshAccount } = useAuth();
   const [addresses, setAddresses] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [editingId, setEditingId] = useState(null);
   const [editLabel, setEditLabel] = useState("");
 
+  const maxAddresses = tierLimits.max_addresses;
+  const isUnlimited = maxAddresses === -1;
+  const atLimit = !isUnlimited && addresses.length >= maxAddresses;
+
   useEffect(() => {
     async function fetchAddresses() {
       try {
@@ -32,6 +39,7 @@ export default function Addresses() {
       const newAddress = await createAddress(data);
       setAddresses((prev) => [...prev, newAddress]);
       setError(null);
+      refreshAccount();
     } catch (err) {
       setError(err.message);
       console.error("Failed to create address:", err);
@@ -47,6 +55,7 @@ export default function Addresses() {
       await deleteAddress(id);
       setAddresses((prev) => prev.filter((a) => a.id !== id));
       setError(null);
+      refreshAccount();
     } catch (err) {
       setError(err.message);
       console.error("Failed to delete address:", err);
@@ -80,7 +89,13 @@ export default function Addresses() {
     <div className="page">
       <h1>Add Addresses to Track</h1>
 
-      <div className="mb-xl">
+      {atLimit && (
+        <UpgradeBanner
+          message={`Your plan allows ${maxAddresses} address${maxAddresses !== 1 ? "es" : ""}. Upgrade to track more.`}
+        />
+      )}
+
+      <div className={`mb-xl${atLimit ? " tier-locked" : ""}`}>
         <AddressForm onSubmit={handleAddressSubmit} />
       </div>
 

frontend/src/pages/alerts/Alerts.css

@@ -51,6 +51,69 @@
   opacity: 0.6;
 }
 
+.alerts__accordion-toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-top: 0.75rem;
+  padding: 0.5rem 0 0;
+  border-top: 1px solid var(--color-border);
+  cursor: pointer;
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  background: none;
+  border-left: none;
+  border-right: none;
+  border-bottom: none;
+  width: 100%;
+  text-align: left;
+}
+
+.alerts__accordion-toggle:hover {
+  color: var(--color-text);
+}
+
+.alerts__accordion-chevron {
+  display: inline-block;
+  transition: transform 0.2s ease;
+  font-size: 0.7rem;
+}
+
+.alerts__accordion-chevron--open {
+  transform: rotate(90deg);
+}
+
+.alerts__accordion-panel {
+  overflow: hidden;
+  max-height: 0;
+  opacity: 0;
+  transition: max-height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
+  padding: 0 0.25rem;
+}
+
+.alerts__accordion-panel--open {
+  max-height: 200px;
+  opacity: 1;
+  padding: 0.75rem 0.25rem 0.25rem;
+}
+
+.alerts__threshold-inputs {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-end;
+}
+
+.alerts__threshold-inputs .form-field {
+  flex: 1;
+  margin-bottom: 0;
+}
+
+.alerts__threshold-actions {
+  display: flex;
+  gap: 0.5rem;
+  margin-top: 0.5rem;
+}
+
 .alerts__email-buttons {
   display: flex;
   gap: 0.5rem;
@@ -61,3 +124,68 @@
   gap: 0.75rem;
   margin-top: 1rem;
 }
+
+/* Locked / disabled notification channel */
+.alerts__channel-locked {
+  opacity: 0.55;
+  position: relative;
+}
+
+.alerts__channel-locked .upgrade-banner {
+  opacity: 1;
+}
+
+.alerts__channel-locked input {
+  pointer-events: none;
+}
+
+/* ── Alerts Page Responsive ──────────────────────────────── */
+
+/* Laptop: tighten the gap */
+@media (max-width: 1024px) {
+  .alerts-grid {
+    gap: 1.5rem;
+  }
+}
+
+/* Tablet & below: collapse to single column */
+@media (max-width: 768px) {
+  .alerts-grid {
+    grid-template-columns: 1fr;
+    gap: 2.5rem;
+  }
+}
+
+/* Mobile: compact spacing */
+@media (max-width: 480px) {
+  .alerts-grid {
+    gap: 2rem;
+  }
+
+  .alerts__address-info {
+    padding: 0.75rem;
+    margin-bottom: 1.25rem;
+  }
+
+  .alerts__rule {
+    padding: 0.75rem;
+  }
+
+  .alerts__rule .flex--between {
+    flex-direction: column;
+    gap: 0.75rem;
+  }
+
+  .alerts__save-test {
+    flex-direction: column;
+  }
+
+  .alerts__save-test .btn--lg {
+    width: 100%;
+    text-align: center;
+  }
+
+  .alerts__email-buttons {
+    flex-direction: column;
+  }
+}

frontend/src/pages/alerts/Alerts.jsx

@@ -1,12 +1,15 @@
 import { useState, useEffect } from "react";
+import { useAuth } from "../../contexts/AuthContext";
 import AlertForm from "../../components/AlertForm";
 import Button from "../../components/Button";
 import Input from "../../components/Input";
+import UpgradeBanner from "../../components/UpgradeBanner";
 import { getAddresses } from "../../api/addresses";
 import {
   getAlerts,
   createAlert,
   updateAlertStatus,
+  updateAlertThresholds,
   deleteAlert,
 } from "../../api/alerts";
 import {
@@ -19,6 +22,8 @@ import {
 import "./Alerts.css";
 
 export default function Alerts() {
+  const { tierLimits, userTier } = useAuth();
+
   const [addresses, setAddresses] = useState([]);
   const [selectedAddressId, setSelectedAddressId] = useState(null);
   const [alerts, setAlerts] = useState([]);
@@ -39,6 +44,79 @@ export default function Alerts() {
   const [sendingDigest, setSendingDigest] = useState(false);
   const [hasExistingConfig, setHasExistingConfig] = useState(false);
 
+  const [openAccordions, setOpenAccordions] = useState({});
+  const [thresholdEdits, setThresholdEdits] = useState({});
+
+  const allowedChannels = tierLimits.allowed_channels || ["email"];
+  const canTelegram = allowedChannels.includes("telegram");
+  const canDiscord = allowedChannels.includes("discord");
+  const canSlack = allowedChannels.includes("slack");
+
+  const maxAlertTypes = tierLimits.max_alert_types;
+  const isUnlimitedAlerts = maxAlertTypes === -1;
+
+  function distinctAlertTypeCount() {
+    const types = new Set(alerts.map((a) => a.type));
+    return types.size;
+  }
+
+  const atAlertLimit = !isUnlimitedAlerts && distinctAlertTypeCount() >= maxAlertTypes;
+
+  function toggleAccordion(alertId) {
+    setOpenAccordions((prev) => ({ ...prev, [alertId]: !prev[alertId] }));
+  }
+
+  function getThresholdEdit(alert) {
+    if (thresholdEdits[alert.id]) return thresholdEdits[alert.id];
+    return {
+      minimum: alert.minimum != null ? String(alert.minimum) : "",
+      maximum: alert.maximum != null ? String(alert.maximum) : "",
+    };
+  }
+
+  function setThresholdEdit(alertId, field, value) {
+    setThresholdEdits((prev) => {
+      const current = prev[alertId] || getThresholdEditForAlert(alertId);
+      return { ...prev, [alertId]: { ...current, [field]: value } };
+    });
+  }
+
+  function getThresholdEditForAlert(alertId) {
+    const alert = alerts.find((a) => a.id === alertId);
+    return {
+      minimum: alert?.minimum != null ? String(alert.minimum) : "",
+      maximum: alert?.maximum != null ? String(alert.maximum) : "",
+    };
+  }
+
+  async function handleSaveThresholds(alertId) {
+    const edit = thresholdEdits[alertId];
+    if (!edit) return;
+
+    const min = edit.minimum.trim() === "" ? null : Number(edit.minimum);
+    const max = edit.maximum.trim() === "" ? null : Number(edit.maximum);
+
+    if (min !== null && isNaN(min)) return;
+    if (max !== null && isNaN(max)) return;
+    if (min !== null && max !== null && min > max) return;
+
+    try {
+      const updated = await updateAlertThresholds(alertId, min, max);
+      setAlerts((prev) =>
+        prev.map((a) => (a.id === alertId ? updated : a)),
+      );
+      setThresholdEdits((prev) => {
+        const next = { ...prev };
+        delete next[alertId];
+        return next;
+      });
+      setError(null);
+    } catch (err) {
+      setError(err.message);
+      console.error("Failed to update thresholds:", err);
+    }
+  }
+
   useEffect(() => {
     async function fetchData() {
       try {
@@ -150,11 +228,11 @@ export default function Alerts() {
 
       const config = {
         notification_enabled: notificationEnabled,
-        discord_webhook_url: discordWebhookUrl || null,
-        telegram_bot_token: telegramBotToken || null,
-        telegram_chat_id: telegramChatId || null,
+        discord_webhook_url: canDiscord ? (discordWebhookUrl || null) : null,
+        telegram_bot_token: canTelegram ? (telegramBotToken || null) : null,
+        telegram_chat_id: canTelegram ? (telegramChatId || null) : null,
         email: email || null,
-        slack_webhook_url: slackWebhookUrl || null,
+        slack_webhook_url: canSlack ? (slackWebhookUrl || null) : null,
       };
 
       await updateNotificationConfig(config);
@@ -298,7 +376,13 @@ export default function Alerts() {
                 </div>
               </div>
 
-              <div className="mb-xl">
+              {atAlertLimit && userTier !== "pro" && (
+                <UpgradeBanner
+                  message={`Your ${userTier} plan allows ${maxAlertTypes} alert type${maxAlertTypes !== 1 ? "s" : ""} per address. Upgrade for more.`}
+                />
+              )}
+
+              <div className={`mb-xl${atAlertLimit ? " tier-locked" : ""}`}>
                 <h3>Create New Alert</h3>
                 <AlertForm onSubmit={handleAlertSubmit} />
               </div>
@@ -314,42 +398,132 @@ export default function Alerts() {
                   </p>
                 ) : (
                   <ul className="list-unstyled">
-                    {alerts.map((alert) => (
-                      <li
-                        key={alert.id}
-                        className={`alerts__rule ${!alert.enabled ? "alerts__rule--disabled" : ""}`}
-                      >
-                        <div className="flex flex--between">
-                          <div>
-                            <div className="text-bold mb-sm">
-                              {formatAlertType(alert.type)}
-                            </div>
-                            {alert.threshold && (
-                              <div className="text-sm text-muted">
-                                Threshold: {alert.threshold} ETH
+                    {alerts.map((alert) => {
+                      const hasAccordion =
+                        alert.type === "incoming_tx" ||
+                        alert.type === "outgoing_tx";
+                      const isOpen = !!openAccordions[alert.id];
+                      const edit = getThresholdEdit(alert);
+
+                      return (
+                        <li
+                          key={alert.id}
+                          className={`alerts__rule ${!alert.enabled ? "alerts__rule--disabled" : ""}`}
+                        >
+                          <div className="flex flex--between">
+                            <div>
+                              <div className="text-bold mb-sm">
+                                {formatAlertType(alert.type)}
                               </div>
-                            )}
-                            <div className="text-xs text-dimmed">
-                              Status: {alert.enabled ? "Enabled" : "Disabled"}
+                              {alert.threshold && (
+                                <div className="text-sm text-muted">
+                                  Threshold: {alert.threshold} ETH
+                                </div>
+                              )}
+                              {alert.minimum != null && (
+                                <div className="text-sm text-muted">
+                                  Min: {alert.minimum} ETH
+                                </div>
+                              )}
+                              {alert.maximum != null && (
+                                <div className="text-sm text-muted">
+                                  Max: {alert.maximum} ETH
+                                </div>
+                              )}
+                              <div className="text-xs text-dimmed">
+                                Status:{" "}
+                                {alert.enabled ? "Enabled" : "Disabled"}
+                              </div>
+                            </div>
+                            <div className="flex flex--center gap-sm">
+                              <Button
+                                onClick={() =>
+                                  handleToggleAlert(
+                                    alert.id,
+                                    alert.enabled,
+                                  )
+                                }
+                              >
+                                {alert.enabled ? "Disable" : "Enable"}
+                              </Button>
+                              <Button
+                                onClick={() =>
+                                  handleDeleteAlert(alert.id)
+                                }
+                              >
+                                Delete
+                              </Button>
                             </div>
                           </div>
-                          <div className="flex flex--center gap-sm">
-                            <Button
-                              onClick={() =>
-                                handleToggleAlert(alert.id, alert.enabled)
-                              }
-                            >
-                              {alert.enabled ? "Disable" : "Enable"}
-                            </Button>
-                            <Button
-                              onClick={() => handleDeleteAlert(alert.id)}
-                            >
-                              Delete
-                            </Button>
-                          </div>
-                        </div>
-                      </li>
-                    ))}
+
+                          {hasAccordion && (
+                            <>
+                              <button
+                                type="button"
+                                className="alerts__accordion-toggle"
+                                onClick={() =>
+                                  toggleAccordion(alert.id)
+                                }
+                              >
+                                <span
+                                  className={`alerts__accordion-chevron ${isOpen ? "alerts__accordion-chevron--open" : ""}`}
+                                >
+                                  &#9654;
+                                </span>
+                                Add optional minimum and maximum
+                                threshold values
+                              </button>
+                              <div
+                                className={`alerts__accordion-panel ${isOpen ? "alerts__accordion-panel--open" : ""}`}
+                              >
+                                <div className="alerts__threshold-inputs">
+                                  <Input
+                                    label="Minimum"
+                                    type="number"
+                                    step="0.000001"
+                                    min="0"
+                                    value={edit.minimum}
+                                    onChange={(v) =>
+                                      setThresholdEdit(
+                                        alert.id,
+                                        "minimum",
+                                        v,
+                                      )
+                                    }
+                                    placeholder="No minimum"
+                                  />
+                                  <Input
+                                    label="Maximum"
+                                    type="number"
+                                    step="0.000001"
+                                    min="0"
+                                    value={edit.maximum}
+                                    onChange={(v) =>
+                                      setThresholdEdit(
+                                        alert.id,
+                                        "maximum",
+                                        v,
+                                      )
+                                    }
+                                    placeholder="No maximum"
+                                  />
+                                </div>
+                                <div className="alerts__threshold-actions">
+                                  <Button
+                                    onClick={() =>
+                                      handleSaveThresholds(alert.id)
+                                    }
+                                    className="btn--sm"
+                                  >
+                                    Save
+                                  </Button>
+                                </div>
+                              </div>
+                            </>
+                          )}
+                        </li>
+                      );
+                    })}
                   </ul>
                 )}
               </div>
@@ -391,19 +565,24 @@ export default function Alerts() {
           {notificationEnabled && (
             <>
               {/* Telegram */}
-              <div className="section">
+              <div className={`section${!canTelegram ? " alerts__channel-locked" : ""}`}>
                 <h3 className="mt-0 mb-md">Telegram</h3>
+                {!canTelegram && (
+                  <UpgradeBanner message="Upgrade to Premium to enable Telegram alerts" />
+                )}
                 <Input
                   label="Bot Token"
                   value={telegramBotToken}
                   onChange={setTelegramBotToken}
                   placeholder="123456789:ABCdefGHIjklMNOpqrSTUvwxYZ"
+                  disabled={!canTelegram}
                 />
                 <Input
                   label="Chat ID"
                   value={telegramChatId}
                   onChange={setTelegramChatId}
                   placeholder="-1001234567890"
+                  disabled={!canTelegram}
                 />
                 <a
                   href="https://core.telegram.org/bots#how-do-i-create-a-bot"
@@ -448,13 +627,17 @@ export default function Alerts() {
               </div>
 
               {/* Discord */}
-              <div className="section">
+              <div className={`section${!canDiscord ? " alerts__channel-locked" : ""}`}>
                 <h3 className="mt-0 mb-md">Discord</h3>
+                {!canDiscord && (
+                  <UpgradeBanner message="Upgrade to Premium to enable Discord alerts" />
+                )}
                 <Input
                   label="Discord Webhook URL"
                   value={discordWebhookUrl}
                   onChange={setDiscordWebhookUrl}
                   placeholder="https://discord.com/api/webhooks/..."
+                  disabled={!canDiscord}
                 />
                 <a
                   href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"
@@ -467,13 +650,17 @@ export default function Alerts() {
               </div>
 
               {/* Slack */}
-              <div className="section">
+              <div className={`section${!canSlack ? " alerts__channel-locked" : ""}`}>
                 <h3 className="mt-0 mb-md">Slack</h3>
+                {!canSlack && (
+                  <UpgradeBanner message="Upgrade to Pro to enable Slack alerts" />
+                )}
                 <Input
                   label="Slack Webhook URL"
                   value={slackWebhookUrl}
                   onChange={setSlackWebhookUrl}
                   placeholder="https://hooks.slack.com/services/..."
+                  disabled={!canSlack}
                 />
                 <a
                   href="https://api.slack.com/messaging/webhooks"

frontend/src/pages/login/Login.css

@@ -89,6 +89,7 @@
   color: #FFFFFF;
   font-size: 1.5rem;
   line-height: 1.5;
+  text-align: center;
 }
 
 .login-interactive-fadein {
@@ -96,3 +97,21 @@
   animation: fadeIn 2s ease-in-out forwards;
   animation-delay: 6s;
 }
+
+/* ── Login Responsive ────────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .login-card {
+    max-width: 100%;
+    margin: 0 0.75rem;
+    padding: 1.5rem;
+    padding-top: 6rem;
+  }
+
+  .login-tagline {
+    margin-top: 3rem;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    font-size: 1.25rem;
+  }
+}

frontend/src/pages/login/Login.jsx

@@ -27,7 +27,11 @@ export default function Login() {
       await login(email, password);
       navigate("/addresses");
     } catch (err) {
-      setError("Failed to log in: " + err.message);
+      if (err.message.includes("Invalid email or password")) {
+        setError("Invalid email or password. Check your credentials or create a new account.");
+      } else {
+        setError("Failed to log in: " + err.message);
+      }
     } finally {
       setLoading(false);
     }
@@ -42,7 +46,7 @@ export default function Login() {
         playsInline
         className="login-bg-video"
       >
-        <source src="/koin_spin.mp4" type="video/mp4" />
+        <source src="/koin_exp_2.mp4" type="video/mp4" />
       </video>
 
       <div className="login-card login-card-fadein">
@@ -80,7 +84,7 @@ export default function Login() {
           <div className="login-footer">
             <p className="text-muted">
               Don't have an account?{" "}
-              <Link to="/signup" className="login-signup-link">
+              <Link to="/subscribe" className="login-signup-link">
                 Sign up here
               </Link>
             </p>

frontend/src/pages/subscribe/Subscribe.css

@@ -15,6 +15,10 @@
   padding: 0 1rem;
 }
 
+.subscribe__container--wide {
+  max-width: 920px;
+}
+
 .subscribe__title {
   text-align: center;
   margin-bottom: 2rem;
@@ -107,52 +111,6 @@
   color: #888;
 }
 
-/* Step 5 summary */
-.subscribe__summary {
-  background-color: #1e2e1e;
-  border: 1px solid #2d5a2d;
-  border-radius: var(--radius-lg);
-  padding: 1rem 1.25rem;
-  margin-bottom: 1.5rem;
-}
-
-.subscribe__summary-title {
-  margin: 0 0 0.5rem;
-  color: #90ee90;
-  font-weight: bold;
-}
-
-.subscribe__summary-list {
-  margin: 0;
-  padding-left: 1.25rem;
-  color: var(--color-text-label);
-  line-height: 1.8;
-}
-
-/* Checkbox rows */
-.checkbox-row {
-  margin-bottom: 1rem;
-}
-
-.checkbox-row__label {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  cursor: pointer;
-  color: #ddd;
-}
-
-.checkbox-row__input {
-  width: 16px;
-  height: 16px;
-  accent-color: var(--color-primary);
-}
-
-.checkbox-row__nested {
-  margin-top: 0.5rem;
-  margin-left: 1.75rem;
-}
-
 /* Footer navigation */
 .subscribe__footer {
   display: flex;
@@ -163,20 +121,6 @@
   border-top: 1px solid var(--color-border-light);
 }
 
-/* Test results */
-.test-result {
-  font-size: 0.9rem;
-  margin-bottom: 0.25rem;
-}
-
-.test-result--success {
-  color: #90ee90;
-}
-
-.test-result--failure {
-  color: var(--color-error);
-}
-
 /* Step subtitle */
 .subscribe__subtitle {
   color: #aaa;
@@ -184,7 +128,7 @@
   font-size: 0.9rem;
 }
 
-/* Subscribe card (Step 2) */
+/* Subscribe card (Step 2 tier cards) */
 .subscribe-card {
   background-color: var(--color-bg-card, #1a1a2e);
   border: 1px solid var(--color-border-light);
@@ -236,3 +180,25 @@
   margin: 0;
   font-style: italic;
 }
+
+/* ── Subscribe Responsive ────────────────────────────────── */
+
+@media (max-width: 480px) {
+  .subscribe {
+    padding-top: 1.5rem;
+  }
+
+  .subscribe__card {
+    padding: 1.25rem;
+  }
+
+  .progress-bar__connector {
+    width: 24px;
+  }
+
+  .progress-bar__dot {
+    width: 26px;
+    height: 26px;
+    font-size: 0.75rem;
+  }
+}

frontend/src/pages/subscribe/Subscribe.jsx

@@ -0,0 +1,310 @@
+import { useState, useEffect, useRef } from "react";
+import { useNavigate, useSearchParams } from "react-router-dom";
+import { useAuth } from "../../contexts/AuthContext";
+import { createOnboardingCheckout, activateFreeTier } from "../../api/stripe";
+import Input from "../../components/Input";
+import Button from "../../components/Button";
+import TierPicker from "../../components/TierPicker";
+import "./Subscribe.css";
+
+const STEPS = ["Create Account", "Choose Plan"];
+
+export default function Subscribe() {
+  const { isAuthenticated, register } = useAuth();
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const hasPaymentReturn = searchParams.get("payment") === "success";
+  const [step, setStep] = useState(hasPaymentReturn || isAuthenticated ? 2 : 1);
+  const [loading, setLoading] = useState(hasPaymentReturn);
+  const [error, setError] = useState("");
+
+  const [data, setData] = useState({
+    selectedTier: "",
+    email: "",
+    password: "",
+    confirmPassword: "",
+  });
+
+  const registerCalledRef = useRef(false);
+
+  function set(field, value) {
+    setData((prev) => ({ ...prev, [field]: value }));
+  }
+
+  // Handle return from Stripe checkout redirect.
+  // The ref guard prevents React StrictMode from double-firing this.
+  useEffect(() => {
+    if (registerCalledRef.current) return;
+
+    const payment = searchParams.get("payment");
+    const sessionId = searchParams.get("session_id");
+
+    if (payment === "cancelled") {
+      setSearchParams({}, { replace: true });
+      setStep(2);
+      setError("Payment was cancelled. Please try again.");
+      return;
+    }
+
+    if (payment !== "success" || !sessionId) return;
+
+    const savedEmail = sessionStorage.getItem("kp_onboard_email");
+    const savedPassword = sessionStorage.getItem("kp_onboard_password");
+
+    if (!savedEmail || !savedPassword) {
+      setSearchParams({}, { replace: true });
+      setError("Session expired. Please start the signup process again.");
+      setStep(1);
+      setLoading(false);
+      return;
+    }
+
+    registerCalledRef.current = true;
+    setSearchParams({}, { replace: true });
+    setLoading(true);
+
+    register(savedEmail, savedPassword, sessionId)
+      .then(() => {
+        sessionStorage.removeItem("kp_onboard_email");
+        sessionStorage.removeItem("kp_onboard_password");
+        navigate("/addresses", { replace: true });
+      })
+      .catch((err) => {
+        registerCalledRef.current = false;
+        setError("Registration failed: " + err.message);
+        setStep(1);
+      })
+      .finally(() => setLoading(false));
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // ── Step handlers ─────────────────────────────────────────────────────────
+
+  function handleStep1() {
+    setError("");
+    if (!data.email || !data.password || !data.confirmPassword) {
+      setError("Please fill in all fields");
+      return;
+    }
+    if (data.password !== data.confirmPassword) {
+      setError("Passwords do not match");
+      return;
+    }
+    if (data.password.length < 6) {
+      setError("Password must be at least 6 characters");
+      return;
+    }
+    setStep(2);
+  }
+
+  async function handleStep2() {
+    setError("");
+    if (!data.selectedTier) {
+      setError("Please select a plan to continue");
+      return;
+    }
+    try {
+      setLoading(true);
+
+      // Free tier: register immediately, then activate free tier
+      if (data.selectedTier === "free") {
+        if (!isAuthenticated) {
+          await register(data.email, data.password, "");
+        }
+        await activateFreeTier();
+        navigate("/addresses", { replace: true });
+        return;
+      }
+
+      // Paid tier: stash credentials in sessionStorage, then redirect to Stripe
+      sessionStorage.setItem("kp_onboard_email", data.email);
+      sessionStorage.setItem("kp_onboard_password", data.password);
+
+      const { url } = await createOnboardingCheckout(
+        data.email,
+        data.selectedTier,
+      );
+      window.location.href = url;
+    } catch (err) {
+      if (err.message.includes("already exists")) {
+        setError("An account with this email already exists. Try logging in instead.");
+      } else {
+        setError("Failed to process plan selection: " + err.message);
+      }
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // ── Progress bar ──────────────────────────────────────────────────────────
+
+  function ProgressBar() {
+    return (
+      <div className="progress-bar">
+        {STEPS.map((label, i) => {
+          const stepNum = i + 1;
+          const done = step > stepNum;
+          const active = step === stepNum;
+          const dotClass = done
+            ? "progress-bar__dot--done"
+            : active
+              ? "progress-bar__dot--active"
+              : "progress-bar__dot--pending";
+
+          return (
+            <div key={label} className="progress-bar__step">
+              {i > 0 && (
+                <div
+                  className={`progress-bar__connector ${
+                    done || active
+                      ? "progress-bar__connector--active"
+                      : "progress-bar__connector--inactive"
+                  }`}
+                />
+              )}
+              <div>
+                <div className={`progress-bar__dot ${dotClass}`}>
+                  {done ? "\u2713" : stepNum}
+                </div>
+                <div
+                  className={`progress-bar__label ${
+                    active
+                      ? "progress-bar__label--active"
+                      : "progress-bar__label--inactive"
+                  }`}
+                >
+                  {label}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  // ── Step content ──────────────────────────────────────────────────────────
+
+  function StepCreateAccount() {
+    return (
+      <>
+        <h2 className="mb-lg">Create your account</h2>
+        <Input
+          label="Email"
+          type="email"
+          value={data.email}
+          onChange={(v) => set("email", v)}
+          disabled={loading}
+          placeholder="you@example.com"
+        />
+        <Input
+          label="Password"
+          type="password"
+          value={data.password}
+          onChange={(v) => set("password", v)}
+          disabled={loading}
+          placeholder="At least 6 characters"
+        />
+        <Input
+          label="Confirm Password"
+          type="password"
+          value={data.confirmPassword}
+          onChange={(v) => set("confirmPassword", v)}
+          disabled={loading}
+          placeholder="Repeat your password"
+          className="form-field--last"
+        />
+      </>
+    );
+  }
+
+  function StepChoosePlan() {
+    return (
+      <>
+        <h2 className="mb-sm">Choose your monitoring plan</h2>
+        <p className="subscribe__subtitle">
+          Select the plan that works best for you. You can upgrade anytime.
+        </p>
+        <TierPicker
+          onSelect={(tier) => set("selectedTier", tier)}
+          selectedTier={data.selectedTier}
+        />
+      </>
+    );
+  }
+
+  // ── Footer navigation ─────────────────────────────────────────────────────
+
+  function Footer() {
+    async function handleNext() {
+      if (step === 1) handleStep1();
+      else if (step === 2) await handleStep2();
+    }
+
+    function handleBack() {
+      setError("");
+      setStep((s) => s - 1);
+    }
+
+    const nextLabel =
+      step === 1
+        ? "Create Account"
+        : !data.selectedTier
+          ? "Continue"
+          : data.selectedTier === "free"
+            ? "Start Free Trial"
+            : "Subscribe & Continue";
+
+    return (
+      <div className="subscribe__footer">
+        <div>
+          {step === 2 && !isAuthenticated && (
+            <Button onClick={handleBack} disabled={loading} variant="ghost">
+              ← Back
+            </Button>
+          )}
+        </div>
+
+        <Button
+          onClick={handleNext}
+          disabled={loading || (step === 2 && !data.selectedTier)}
+          className="text-bold"
+        >
+          {loading ? "Please wait..." : nextLabel}
+        </Button>
+      </div>
+    );
+  }
+
+  // ── Render ────────────────────────────────────────────────────────────────
+
+  const stepContent = {
+    1: StepCreateAccount(),
+    2: StepChoosePlan(),
+  };
+
+  return (
+    <div className="subscribe">
+      <div
+        className={`subscribe__container${step === 2 ? " subscribe__container--wide" : ""}`}
+      >
+        <h1 className="subscribe__title">Koin Ping</h1>
+
+        {ProgressBar()}
+
+        {error && <div className="alert alert--error">{error}</div>}
+
+        <div className="subscribe__card">
+          {stepContent[step]}
+          {Footer()}
+        </div>
+
+        {step === 1 && (
+          <p className="subscribe__login-link">
+            Already have an account? <a href="/login">Log in here</a>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+}

frontend/src/pages/subscribe/subscribe.jsx

@@ -1,679 +0,0 @@
-/**
- * Subscribe / Subscribe Wizard
- *
- * 5-step guided flow: Create Account -> Add Wallet -> Alert Rules -> Notifications -> Done
- * After account creation, user is redirected to Stripe Checkout for payment.
- * On successful payment, they return here at step 2 (Add Wallet).
- */
-
-import { useState, useEffect } from "react";
-import { useNavigate, useSearchParams } from "react-router-dom";
-import { useAuth } from "../../contexts/AuthContext";
-import { createAddress, getAddresses } from "../../api/addresses";
-import { createAlert } from "../../api/alerts";
-import {
-  updateNotificationConfig,
-  testNotificationChannels,
-} from "../../api/notificationConfig";
-import { createCheckoutSession, getSubscriptionStatus, verifyCheckoutSession } from "../../api/stripe";
-import Input from "../../components/Input";
-import Button from "../../components/Button";
-import "./Subscribe.css";
-
-const STEPS = [
-  "Create Account",
-  "Add Wallet",
-  "Alert Rules",
-  "Notifications",
-  "Done",
-];
-
-export default function Subscribe() {
-  const { currentUser, signup } = useAuth();
-  const navigate = useNavigate();
-  const [searchParams, setSearchParams] = useSearchParams();
-
-  const [step, setStep] = useState(1);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState("");
-  const [skipWarning, setSkipWarning] = useState("");
-  const [testResults, setTestResults] = useState(null);
-  const [testLoading, setTestLoading] = useState(false);
-
-  const [data, setData] = useState({
-    email: "",
-    password: "",
-    confirmPassword: "",
-    walletAddress: "",
-    walletLabel: "",
-    createdAddressId: null,
-    alertIncomingTx: false,
-    alertOutgoingTx: false,
-    alertLargeTransfer: false,
-    largeTransferThreshold: "",
-    alertBalanceBelow: false,
-    balanceBelowThreshold: "",
-    discordWebhookUrl: "",
-    slackWebhookUrl: "",
-    notificationEmail: "",
-    alertsCreated: [],
-    notificationConfigured: false,
-  });
-
-  function set(field, value) {
-    setData((prev) => ({ ...prev, [field]: value }));
-  }
-
-  useEffect(() => {
-    if (!currentUser) return;
-    getAddresses()
-      .then((addresses) => {
-        if (addresses.length > 0) {
-          navigate("/addresses", { replace: true });
-        }
-      })
-      .catch(() => { });
-  }, [currentUser, navigate]);
-
-  // Handle Stripe redirect back from checkout
-  useEffect(() => {
-    if (!currentUser) return;
-    const payment = searchParams.get("payment");
-    const sessionId = searchParams.get("session_id");
-    if (payment === "success" && sessionId) {
-      setSearchParams({}, { replace: true });
-      setLoading(true);
-      verifyCheckoutSession(sessionId)
-        .then(() => {
-          setStep(2);
-        })
-        .catch((err) => {
-          setError("Payment verification failed: " + err.message);
-          setStep(1);
-        })
-        .finally(() => setLoading(false));
-    } else if (payment === "cancelled") {
-      setSearchParams({}, { replace: true });
-      setStep(1);
-      setError("Payment was cancelled. Please try again.");
-    }
-  }, [currentUser, searchParams, setSearchParams]);
-
-  // ── Step handlers ─────────────────────────────────────────────────────────
-
-  async function handleStep1() {
-    setError("");
-    if (!data.email || !data.password || !data.confirmPassword) {
-      setError("Please fill in all fields");
-      return;
-    }
-    if (data.password !== data.confirmPassword) {
-      setError("Passwords do not match");
-      return;
-    }
-    if (data.password.length < 6) {
-      setError("Password must be at least 6 characters");
-      return;
-    }
-    try {
-      setLoading(true);
-      if (!currentUser) {
-        await signup(data.email, data.password);
-      }
-      const status = await getSubscriptionStatus();
-      if (status.subscription_status === "active" || status.subscription_status === "trialing") {
-        setStep(2);
-        return;
-      }
-      const { url } = await createCheckoutSession();
-      window.location.href = url;
-    } catch (err) {
-      if (err.code === "auth/email-already-in-use") {
-        setError("Email already in use. Try logging in instead.");
-      } else if (err.code === "auth/invalid-email") {
-        setError("Invalid email address");
-      } else if (err.code === "auth/weak-password") {
-        setError("Password is too weak");
-      } else {
-        setError("Failed to create account: " + err.message);
-      }
-      setLoading(false);
-    }
-  }
-
-  async function handleStep2() {
-    setError("");
-    if (!data.walletAddress) {
-      setError("Please enter a wallet address");
-      return;
-    }
-    if (!/^0x[0-9a-fA-F]{40}$/.test(data.walletAddress)) {
-      setError("Invalid ETH address (must be 0x followed by 40 hex characters)");
-      return;
-    }
-    try {
-      setLoading(true);
-      const created = await createAddress({
-        address: data.walletAddress,
-        label: data.walletLabel || undefined,
-      });
-      set("createdAddressId", created.id);
-      setStep(3);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleStep3() {
-    setError("");
-    const rules = [];
-    if (data.alertIncomingTx) rules.push({ type: "incoming_tx" });
-    if (data.alertOutgoingTx) rules.push({ type: "outgoing_tx" });
-    if (data.alertLargeTransfer) {
-      if (!data.largeTransferThreshold) {
-        setError("Please enter a threshold for large transfers");
-        return;
-      }
-      rules.push({ type: "large_transfer", threshold: data.largeTransferThreshold });
-    }
-    if (data.alertBalanceBelow) {
-      if (!data.balanceBelowThreshold) {
-        setError("Please enter a threshold for balance below");
-        return;
-      }
-      rules.push({ type: "balance_below", threshold: data.balanceBelowThreshold });
-    }
-
-    if (rules.length === 0) {
-      setStep(4);
-      return;
-    }
-
-    try {
-      setLoading(true);
-      const created = [];
-      for (const rule of rules) {
-        const result = await createAlert(data.createdAddressId, rule);
-        created.push(result);
-      }
-      set("alertsCreated", created);
-      setStep(4);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleStep4() {
-    setError("");
-    const hasAny =
-      data.discordWebhookUrl || data.slackWebhookUrl || data.notificationEmail;
-    if (!hasAny) {
-      setStep(5);
-      return;
-    }
-    try {
-      setLoading(true);
-      await updateNotificationConfig({
-        notification_enabled: true,
-        discord_webhook_url: data.discordWebhookUrl || undefined,
-        slack_webhook_url: data.slackWebhookUrl || undefined,
-        email: data.notificationEmail || undefined,
-      });
-      set("notificationConfigured", true);
-      setStep(5);
-    } catch (err) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  }
-
-  async function handleTestChannels() {
-    setTestLoading(true);
-    setTestResults(null);
-    try {
-      const results = await testNotificationChannels();
-      setTestResults(results);
-    } catch (err) {
-      setTestResults({ error: err.message });
-    } finally {
-      setTestLoading(false);
-    }
-  }
-
-  // ── Progress bar ──────────────────────────────────────────────────────────
-
-  function ProgressBar() {
-    return (
-      <div className="progress-bar">
-        {STEPS.map((label, i) => {
-          const stepNum = i + 1;
-          const done = step > stepNum;
-          const active = step === stepNum;
-          const dotClass = done
-            ? "progress-bar__dot--done"
-            : active
-              ? "progress-bar__dot--active"
-              : "progress-bar__dot--pending";
-
-          return (
-            <div key={label} className="progress-bar__step">
-              {i > 0 && (
-                <div
-                  className={`progress-bar__connector ${done || active
-                    ? "progress-bar__connector--active"
-                    : "progress-bar__connector--inactive"
-                    }`}
-                />
-              )}
-              <div>
-                <div className={`progress-bar__dot ${dotClass}`}>
-                  {done ? "\u2713" : stepNum}
-                </div>
-                <div
-                  className={`progress-bar__label ${active
-                    ? "progress-bar__label--active"
-                    : "progress-bar__label--inactive"
-                    }`}
-                >
-                  {label}
-                </div>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-
-  // ── Step content ──────────────────────────────────────────────────────────
-
-  function Step1() {
-    return (
-      <>
-        <h2 className="mb-lg">Create your account</h2>
-        <Input
-          label="Email"
-          type="email"
-          value={data.email}
-          onChange={(v) => set("email", v)}
-          disabled={loading}
-          placeholder="you@example.com"
-        />
-        <Input
-          label="Password"
-          type="password"
-          value={data.password}
-          onChange={(v) => set("password", v)}
-          disabled={loading}
-          placeholder="At least 6 characters"
-        />
-        <Input
-          label="Confirm Password"
-          type="password"
-          value={data.confirmPassword}
-          onChange={(v) => set("confirmPassword", v)}
-          disabled={loading}
-          placeholder="Repeat your password"
-          className="form-field--last"
-        />
-      </>
-    );
-  }
-
-  function Step2() {
-    return (
-      <>
-        <h2 className="mb-sm">Add a wallet address</h2>
-        <p className="subscribe__subtitle">
-          Enter the Ethereum address you want to monitor.
-        </p>
-        <Input
-          label="ETH Address"
-          value={data.walletAddress}
-          onChange={(v) => set("walletAddress", v)}
-          disabled={loading}
-          placeholder="0x..."
-        />
-        <Input
-          label="Label (optional)"
-          value={data.walletLabel}
-          onChange={(v) => set("walletLabel", v)}
-          disabled={loading}
-          placeholder="e.g. My main wallet"
-          className="form-field--last"
-        />
-      </>
-    );
-  }
-
-  function Step3() {
-    return (
-      <>
-        <h2 className="mb-sm">Configure alert rules</h2>
-        <p className="subscribe__subtitle">
-          Choose which events trigger notifications. You can change these later.
-        </p>
-
-        <CheckboxRow
-          checked={data.alertIncomingTx}
-          onChange={(v) => set("alertIncomingTx", v)}
-          label="Incoming transaction"
-        />
-        <CheckboxRow
-          checked={data.alertOutgoingTx}
-          onChange={(v) => set("alertOutgoingTx", v)}
-          label="Outgoing transaction"
-        />
-        <CheckboxRow
-          checked={data.alertLargeTransfer}
-          onChange={(v) => set("alertLargeTransfer", v)}
-          label="Large transfer"
-        >
-          {data.alertLargeTransfer && (
-            <div className="checkbox-row__nested">
-              <Input
-                type="number"
-                label=""
-                value={data.largeTransferThreshold}
-                onChange={(v) => set("largeTransferThreshold", v)}
-                placeholder="Threshold (ETH)"
-                min="0"
-                step="0.01"
-              />
-            </div>
-          )}
-        </CheckboxRow>
-        <CheckboxRow
-          checked={data.alertBalanceBelow}
-          onChange={(v) => set("alertBalanceBelow", v)}
-          label="Balance below"
-        >
-          {data.alertBalanceBelow && (
-            <div className="checkbox-row__nested">
-              <Input
-                type="number"
-                label=""
-                value={data.balanceBelowThreshold}
-                onChange={(v) => set("balanceBelowThreshold", v)}
-                placeholder="Threshold (ETH)"
-                min="0"
-                step="0.01"
-              />
-            </div>
-          )}
-        </CheckboxRow>
-      </>
-    );
-  }
-
-  function Step4() {
-    return (
-      <>
-        <h2 className="mb-sm">Set up notifications</h2>
-        <p className="subscribe__subtitle">
-          Add at least one channel so you receive alerts. All fields are optional.
-        </p>
-
-        <div className="mb-md">
-          <label className="form-label">
-            Discord Webhook URL{" "}
-            <a
-              href="https://support.discord.com/hc/en-us/articles/228383668"
-              target="_blank"
-              rel="noreferrer"
-              className="help-link"
-            >
-              (how to get one)
-            </a>
-          </label>
-          <Input
-            label=""
-            type="url"
-            value={data.discordWebhookUrl}
-            onChange={(v) => set("discordWebhookUrl", v)}
-            disabled={loading}
-            placeholder="https://discord.com/api/webhooks/..."
-          />
-        </div>
-
-        <div className="mb-md">
-          <label className="form-label">
-            Slack Webhook URL{" "}
-            <a
-              href="https://api.slack.com/messaging/webhooks"
-              target="_blank"
-              rel="noreferrer"
-              className="help-link"
-            >
-              (how to get one)
-            </a>
-          </label>
-          <Input
-            label=""
-            type="url"
-            value={data.slackWebhookUrl}
-            onChange={(v) => set("slackWebhookUrl", v)}
-            disabled={loading}
-            placeholder="https://hooks.slack.com/services/..."
-          />
-        </div>
-
-        <Input
-          label="Email address for alerts"
-          type="email"
-          value={data.notificationEmail}
-          onChange={(v) => set("notificationEmail", v)}
-          disabled={loading}
-          placeholder="you@example.com"
-          className="form-field--last"
-        />
-      </>
-    );
-  }
-
-  function Step5() {
-    const alertCount = data.alertsCreated.length;
-    const hasNotif = data.notificationConfigured;
-
-    return (
-      <>
-        <h2 className="mb-md">You're all set!</h2>
-
-        <div className="subscribe__summary">
-          <p className="subscribe__summary-title">Summary</p>
-          <ul className="subscribe__summary-list">
-            <li>
-              Wallet address added:{" "}
-              <span className="text-mono text-white-sm">
-                {data.walletAddress}
-              </span>
-              {data.walletLabel && ` (${data.walletLabel})`}
-            </li>
-            <li>
-              Alert rules configured:{" "}
-              <span className="text-white">
-                {alertCount > 0 ? `${alertCount} rule${alertCount !== 1 ? "s" : ""}` : "None (skipped)"}
-              </span>
-            </li>
-            <li>
-              Notification channels:{" "}
-              <span className="text-white">
-                {hasNotif ? "Configured" : "Not set up (skipped)"}
-              </span>
-            </li>
-          </ul>
-        </div>
-
-        {hasNotif && (
-          <div className="mb-lg">
-            <Button
-              onClick={handleTestChannels}
-              disabled={testLoading}
-              variant="ghost"
-            >
-              {testLoading ? "Testing..." : "Test All Channels"}
-            </Button>
-
-            {testResults && (
-              <div className="mt-md">
-                {testResults.error ? (
-                  <p className="text-error">{testResults.error}</p>
-                ) : (
-                  <ul className="list-unstyled">
-                    {Object.entries(testResults).map(([channel, result]) => (
-                      <li
-                        key={channel}
-                        className={`test-result ${result.success ? "test-result--success" : "test-result--failure"}`}
-                      >
-                        {result.success ? "\u2713" : "\u2717"} {channel}:{" "}
-                        {result.message || (result.success ? "OK" : "Failed")}
-                      </li>
-                    ))}
-                  </ul>
-                )}
-              </div>
-            )}
-          </div>
-        )}
-
-        <Button onClick={() => navigate("/addresses")} className="btn--lg text-bold">
-          Go to Dashboard →
-        </Button>
-      </>
-    );
-  }
-
-  // ── Shared helpers ────────────────────────────────────────────────────────
-
-  function CheckboxRow({ checked, onChange, label, children }) {
-    return (
-      <div className="checkbox-row">
-        <label className="checkbox-row__label">
-          <input
-            type="checkbox"
-            checked={checked}
-            onChange={(e) => onChange(e.target.checked)}
-            className="checkbox-row__input"
-          />
-          {label}
-        </label>
-        {children}
-      </div>
-    );
-  }
-
-  // ── Footer navigation ─────────────────────────────────────────────────────
-
-  function Footer() {
-    if (step === 5) return null;
-
-    const canSkip = step === 3 || step === 4;
-    const canBack = step > 2;
-
-    async function handleNext() {
-      setSkipWarning("");
-      if (step === 1) await handleStep1();
-      else if (step === 2) await handleStep2();
-      else if (step === 3) await handleStep3();
-      else if (step === 4) await handleStep4();
-    }
-
-    function handleSkip() {
-      setError("");
-      setSkipWarning("");
-      setStep((s) => s + 1);
-    }
-
-    function handleBack() {
-      setError("");
-      setSkipWarning("");
-      setStep((s) => s - 1);
-    }
-
-    const nextLabel = step === 1
-      ? "Create Account & Subscribe"
-      : step === 4
-        ? "Finish"
-        : "Next →";
-
-    return (
-      <div className="subscribe__footer">
-        <div>
-          {canBack && (
-            <Button
-              onClick={handleBack}
-              disabled={loading}
-              variant="ghost"
-            >
-              ← Back
-            </Button>
-          )}
-        </div>
-
-        <div className="flex gap-md">
-          {canSkip && (
-            <Button
-              onClick={handleSkip}
-              disabled={loading}
-              variant="ghost"
-            >
-              Skip for now
-            </Button>
-          )}
-          <Button
-            onClick={handleNext}
-            disabled={loading}
-            className="text-bold"
-          >
-            {loading ? "Please wait..." : nextLabel}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-
-  // ── Render ────────────────────────────────────────────────────────────────
-
-  const stepContent = {
-    1: Step1(),
-    2: Step2(),
-    3: Step3(),
-    4: Step4(),
-    5: Step5(),
-  };
-
-  return (
-    <div className="subscribe">
-      <div className="subscribe__container">
-        <h1 className="subscribe__title">Koin Ping</h1>
-
-        {ProgressBar()}
-
-        {error && (
-          <div className="alert alert--error">{error}</div>
-        )}
-
-        {skipWarning && (
-          <div className="alert alert--warning">{skipWarning}</div>
-        )}
-
-        <div className="subscribe__card">
-          {stepContent[step]}
-          {Footer()}
-        </div>
-
-        {step === 1 && (
-          <p className="subscribe__login-link">
-            Already have an account?{" "}
-            <a href="/login">Log in here</a>
-          </p>
-        )}
-      </div>
-    </div>
-  );
-}

frontend/src/pages/user_account/Account.css

@@ -0,0 +1,77 @@
+.account-page h1 {
+  font-size: 2rem;
+  font-weight: 200;
+}
+
+.account__section-title {
+  font-size: 1.4rem;
+  font-weight: 400;
+  margin-bottom: 1.25rem;
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-border-light);
+  padding-bottom: 0.5rem;
+}
+
+.account__row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.6rem 0;
+  border-bottom: 1px solid var(--color-border-light);
+}
+
+.account__row--last {
+  border-bottom: none;
+}
+
+.account__label {
+  color: var(--color-text-muted);
+  font-size: 1.1rem;
+}
+
+.account__value {
+  color: var(--color-text);
+  font-size: 1.1rem;
+  text-align: right;
+}
+
+.account__uuid {
+  font-size: 0.85rem;
+  color: var(--color-text-dimmed);
+  word-break: break-all;
+  max-width: 60%;
+}
+
+.account__status {
+  font-weight: 600;
+}
+
+.account__status--active {
+  color: var(--color-success-text);
+}
+
+.account__status--canceled {
+  color: var(--color-danger);
+}
+
+.account__status--canceling {
+  color: var(--color-warning);
+}
+
+.account__status--past_due {
+  color: var(--color-error);
+}
+
+.account__portal-section {
+  margin-top: 1.25rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--color-border-light);
+}
+
+.account__portal-hint {
+  margin-top: 0.5rem;
+}
+
+.account__password-form {
+  max-width: 400px;
+}

frontend/src/pages/user_account/Account.jsx

@@ -0,0 +1,225 @@
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { getAccount, createPortalSession } from "../../api/account";
+import "./Account.css";
+
+const TIER_LABELS = {
+  free: "Free Trial",
+  premium: "Premium",
+  pro: "Pro",
+};
+
+export default function Account() {
+  const navigate = useNavigate();
+  const [account, setAccount] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [passwordMsg, setPasswordMsg] = useState(null);
+  const [passwordErr, setPasswordErr] = useState(null);
+  const [changingPassword, setChangingPassword] = useState(false);
+
+  const [portalLoading, setPortalLoading] = useState(false);
+
+  useEffect(() => {
+    async function fetchAccount() {
+      try {
+        const data = await getAccount();
+        setAccount(data);
+      } catch (err) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchAccount();
+  }, []);
+
+  async function handlePasswordChange(e) {
+    e.preventDefault();
+    setPasswordMsg(null);
+    setPasswordErr(null);
+
+    if (newPassword.length < 6) {
+      setPasswordErr("Password must be at least 6 characters");
+      return;
+    }
+    if (newPassword !== confirmPassword) {
+      setPasswordErr("Passwords do not match");
+      return;
+    }
+
+    try {
+      setChangingPassword(true);
+      // TODO: implement password change endpoint on backend
+      throw new Error("Password change not yet implemented");
+      setPasswordMsg("Password updated successfully");
+      setNewPassword("");
+      setConfirmPassword("");
+    } catch (err) {
+      setPasswordErr(err.message);
+    } finally {
+      setChangingPassword(false);
+    }
+  }
+
+  async function handleManageSubscription() {
+    try {
+      setPortalLoading(true);
+      const { url } = await createPortalSession();
+      window.location.href = url;
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setPortalLoading(false);
+    }
+  }
+
+  if (loading) {
+    return <div className="page">Loading...</div>;
+  }
+
+  if (error && !account) {
+    return <div className="page text-error">Error: {error}</div>;
+  }
+
+  const tier = account.subscription_tier || "free";
+  const isCanceling = account.cancel_at_period_end;
+  const statusLabel = isCanceling
+    ? "Canceling"
+    : account.subscription_status === "active"
+      ? "Active"
+      : account.subscription_status.charAt(0).toUpperCase() +
+        account.subscription_status.slice(1);
+
+  const canUpgrade = tier === "free" || tier === "premium";
+  const hasPaidSub = tier !== "free";
+
+  return (
+    <div className="page account-page">
+      <h1 className="mb-lg">Account</h1>
+
+      {error && <div className="alert alert--error mb-lg">{error}</div>}
+
+      {/* ── Profile Section ──────────────────────── */}
+      <div className="section mb-lg">
+        <h2 className="account__section-title">Profile</h2>
+        <div className="account__row">
+          <span className="account__label">Email</span>
+          <span className="account__value">{account.email}</span>
+        </div>
+        <div className="account__row">
+          <span className="account__label">User Name</span>
+          <span className="account__value">{account.user_name}</span>
+        </div>
+        <div className="account__row account__row--last">
+          <span className="account__label">User ID</span>
+          <span className="account__value text-mono account__uuid">{account.user_id}</span>
+        </div>
+      </div>
+
+      {/* ── Subscription Section ─────────────────── */}
+      <div className="section mb-lg">
+        <h2 className="account__section-title">Subscription</h2>
+        <div className="account__row">
+          <span className="account__label">Plan</span>
+          <span className="account__value">{TIER_LABELS[tier] || account.subscription_plan}</span>
+        </div>
+        <div className="account__row">
+          <span className="account__label">Status</span>
+          <span className={`account__value account__status account__status--${isCanceling ? "canceling" : account.subscription_status}`}>
+            {statusLabel}
+          </span>
+        </div>
+        {account.member_since && (
+          <div className="account__row">
+            <span className="account__label">Member Since</span>
+            <span className="account__value">{account.member_since}</span>
+          </div>
+        )}
+        {account.next_billing_date && !isCanceling && (
+          <div className="account__row">
+            <span className="account__label">Next Billing Date</span>
+            <span className="account__value">{account.next_billing_date}</span>
+          </div>
+        )}
+        {isCanceling && account.period_end_date && (
+          <div className="account__row">
+            <span className="account__label">Access Until</span>
+            <span className="account__value">{account.period_end_date}</span>
+          </div>
+        )}
+
+        {isCanceling && (
+          <div className="alert alert--warning mt-md">
+            Your subscription has been canceled and will not renew.
+            You have full access until {account.period_end_date}.
+          </div>
+        )}
+
+        <div className="account__portal-section">
+          {canUpgrade && (
+            <button
+              onClick={() => navigate("/subscribe")}
+              className="btn btn--primary"
+            >
+              Upgrade Plan
+            </button>
+          )}
+          {hasPaidSub && (
+            <button
+              onClick={handleManageSubscription}
+              disabled={portalLoading}
+              className="btn btn--ghost"
+            >
+              {portalLoading ? "Redirecting..." : "Manage Subscription"}
+            </button>
+          )}
+          <p className="text-dimmed text-sm account__portal-hint">
+            {hasPaidSub
+              ? "Cancel subscription, update payment method, or view invoices via Stripe."
+              : "Upgrade to unlock more addresses, alert types, and notification channels."}
+          </p>
+        </div>
+      </div>
+
+      {/* ── Change Password Section ──────────────── */}
+      <div className="section">
+        <h2 className="account__section-title">Change Password</h2>
+
+        {passwordMsg && <div className="alert alert--success mb-md">{passwordMsg}</div>}
+        {passwordErr && <div className="alert alert--error mb-md">{passwordErr}</div>}
+
+        <form onSubmit={handlePasswordChange} className="account__password-form">
+          <div className="form-field">
+            <label className="form-label">New Password</label>
+            <input
+              type="password"
+              className="form-control"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+              disabled={changingPassword}
+              required
+            />
+          </div>
+          <div className="form-field form-field--last">
+            <label className="form-label">Confirm Password</label>
+            <input
+              type="password"
+              className="form-control"
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              disabled={changingPassword}
+              required
+            />
+          </div>
+          <button type="submit" disabled={changingPassword} className="btn btn--primary">
+            {changingPassword ? "Updating..." : "Update Password"}
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}

frontend/src/reducers/authReducer.jsx

@@ -0,0 +1,56 @@
+export const ACTION_TYPES = {
+  LOGIN_SUCCESS: "LOGIN_SUCCESS",
+  SET_USER: "SET_USER",
+  LOGOUT: "LOGOUT",
+  AUTH_ERROR: "AUTH_ERROR",
+};
+
+export const initialState = {
+  user: null,
+  token: localStorage.getItem("kp_token") || null,
+  isAuthenticated: !!localStorage.getItem("kp_token"),
+  error: null,
+};
+
+export default function authReducer(state, action) {
+  switch (action.type) {
+    case ACTION_TYPES.LOGIN_SUCCESS:
+      localStorage.setItem("kp_token", action.payload.token);
+      return {
+        ...state,
+        user: {
+          id: action.payload.user_id,
+          email: action.payload.email,
+          subscriptionStatus: action.payload.subscription_status,
+          subscriptionTier: action.payload.subscription_tier,
+        },
+        token: action.payload.token,
+        isAuthenticated: true,
+        error: null,
+      };
+
+    case ACTION_TYPES.SET_USER:
+      return {
+        ...state,
+        user: action.payload,
+        error: null,
+      };
+
+    case ACTION_TYPES.LOGOUT:
+      localStorage.removeItem("kp_token");
+      return {
+        ...initialState,
+        token: null,
+        isAuthenticated: false,
+      };
+
+    case ACTION_TYPES.AUTH_ERROR:
+      return {
+        ...state,
+        error: action.payload,
+      };
+
+    default:
+      return state;
+  }
+}