Login, logout, and middleware

Code

The middleware and the nav header

Four files as tabs, in dependency order: middleware.go → nav.go → layout.templ → home.templ (the request plumbing, the header's data model, then the two templates that use it). The last two are modifications.

1. internal/handlers/middleware.go (new) — the three pieces:

func (h *Handlers) LoadUser(next http.Handler) http.Handler { /* cookie → context, never blocks */ }
func (h *Handlers) RequireAuth(next http.Handler) http.Handler { /* no user → redirect /login */ }
func UserFrom(ctx context.Context) (db.User, bool) { /* read the user back out */ }

The user rides the request in a typed context key (userCtxKey), a private ctxKey type so nothing else can collide with it. LoadUser logs a real DB error but still serves the request as anonymous — one flaky query shouldn't 500 the whole site.

2. internal/web/nav.go (new) — a tiny model the header needs:

type Nav struct {
	LoggedIn bool
	Email    string
}

(A CSRFToken field joins it in lesson 6.)

3. internal/web/layout.templ (modify) — the header's static tagline becomes a real nav that branches on nav.LoggedIn:

if nav.LoggedIn {
	<a href="/dashboard">Dashboard</a>
	<span class="who">{ nav.Email }</span>
	<form method="post" action="/logout"><button>Log out</button></form>
} else {
	<a href="/login">Log in</a>
	<a href="/register">Register</a>
}

Layout now takes a second parameter, nav Nav — so every page threads it through.

4. internal/web/home.templ (modify) — the one consequence of the layout change: Home(userCount int64) becomes Home(nav Nav, userCount int64) and passes nav to @Layout("Home", nav). The page body is untouched.

Nothing new renders yet — no handler builds a nav or calls LoadUser. That's the next step, where login and logout arrive and the header comes alive.

middleware.go CREATE

Create this file in internal/handlers/

package handlers

import (
	"context"
	"errors"
	"net/http"

	"github.com/programuoki/signflow/internal/db"
	"github.com/programuoki/signflow/internal/session"
)

type ctxKey int

const userCtxKey ctxKey = iota

// LoadUser resolves the session cookie into the current user and stashes it in
// the request context. It never blocks anonymous requests — it just annotates
// them — so it can wrap every route.
func (h *Handlers) LoadUser(next http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		user, err := h.Sessions.User(r.Context(), r)
		if err == nil {
			r = r.WithContext(context.WithValue(r.Context(), userCtxKey, user))
		} else if !errors.Is(err, session.ErrNoSession) {
			// A real DB error is worth logging, but we still serve the request
			// as anonymous rather than 500 the whole site.
			h.Log.Error("load user from session", "err", err)
		}
		next.ServeHTTP(w, r)
	})
}

// RequireAuth blocks routes that need a signed-in user, redirecting to login.
func (h *Handlers) RequireAuth(next http.Handler) http.Handler {
	return http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
		if _, ok := UserFrom(r.Context()); !ok {
			http.Redirect(w, r, "/login", http.StatusSeeOther)
			return
		}
		next.ServeHTTP(w, r)
	})
}

// UserFrom returns the current user from the context, if any.
func UserFrom(ctx context.Context) (db.User, bool) {
	u, ok := ctx.Value(userCtxKey).(db.User)
	return u, ok
}

nav.go CREATE

Create this file in internal/web/

package web

// Nav carries the per-request bits the layout header needs: whether someone is
// signed in, and their email. A CSRF token joins it in lesson 6, once forms are
// protected.
type Nav struct {
	LoggedIn bool
	Email    string
}

layout.templ MODIFY 13 lines changed

Edit this file in internal/web/

package web

// Layout is the shared HTML shell. Page templates call it and pass their body
// as children. htmx is vendored under /static/js so the app has no runtime CDN
// dependency.
templ Layout(title string, nav Nav) {
	<!DOCTYPE html>
	<html lang="en">
		<head>
			<meta charset="utf-8"/>
			<meta name="viewport" content="width=device-width, initial-scale=1"/>
			<title>{ title } · SignFlow</title>
			<link rel="stylesheet" href="/static/css/style.css"/>
			<script src="/static/js/htmx.min.js"></script>
		</head>
		<body>
			<header class="topbar">
				<a href="/" class="brand">✍️ SignFlow</a>
				<nav class="topnav">
					if nav.LoggedIn {
						<a href="/dashboard">Dashboard</a>
						<span class="who">{ nav.Email }</span>
						<form method="post" action="/logout" class="inline-form">
							<button type="submit" class="btn btn-ghost btn-sm">Log out</button>
						</form>
					} else {
						<a href="/login">Log in</a>
						<a href="/register" class="btn btn-primary btn-sm">Register</a>
					}
				</nav>
			</header>
			<main class="container">
				{ children... }
			</main>
			<footer class="footer">
				<p>SignFlow — reference app for the Programuoki server-side web track.</p>
			</footer>
		</body>
	</html>
}

home.templ MODIFY 2 lines changed

Edit this file in internal/web/

package web

import "strconv"

// Home is the public landing page. It also proves the full stack is wired: the
// user count comes from Postgres via sqlc.
templ Home(nav Nav, userCount int64) {
	@Layout("Home", nav) {
		<section class="hero">
			<h1>Sign documents. Keep the receipts.</h1>
			<p class="lead">
				Upload a document, invite signers by email, and collect typed
				signatures. Every action lands in an append-only audit trail.
			</p>
			<div class="cta-row">
				<a class="btn btn-primary" href="/register">Get started</a>
				<a class="btn btn-ghost" href="/login">Log in</a>
			</div>
		</section>
		<section class="status-card">
			<h2>Skeleton status</h2>
			<ul class="checklist">
				<li>✅ Chi router + middleware</li>
				<li>✅ Templ rendering this page</li>
				<li>✅ Postgres connected via pgx</li>
				<li>✅ goose migrations applied</li>
			</ul>
			<p class="muted">
				Registered users in the database: <strong>{ strconv.FormatInt(userCount, 10) }</strong>
			</p>
		</section>
	}
}