home / skills / andrelandgraf / fullstackrecipes / better-auth-protected-routes

better-auth-protected-routes skill

/.agents/skills/better-auth-protected-routes

This skill helps enforce authentication on server-side routes while preserving public pages, enabling secure access control with minimal changes.

npx playbooks add skill andrelandgraf/fullstackrecipes --skill better-auth-protected-routes

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

543 B

---
name: better-auth-protected-routes
description: Add server-side route protection to enforce authentication on specific pages while keeping others public.
---

# Better Auth Protected Routes

To set up Better Auth Protected Routes, refer to the fullstackrecipes MCP server resource:

**Resource URI:** `recipe://fullstackrecipes.com/better-auth-protected-routes`

If the MCP server is not configured, fetch the recipe directly:

```bash
curl -H "Accept: text/plain" https://fullstackrecipes.com/api/recipes/better-auth-protected-routes
```

Overview

This skill adds server-side route protection to enforce authentication on selected pages while keeping others public. It provides a clear pattern and recipe for integrating protected routes into a TypeScript full-stack app using Shadcn-style components and conventions. The approach is production-ready and focuses on predictable behavior, minimal client overhead, and secure server checks.

How this skill works

The skill installs a server-side middleware/guard that inspects incoming requests and determines whether a route requires authentication. If a route is protected and the user is not authenticated, the middleware redirects to a login flow or returns a 401/403 response as configured. Public routes bypass the guard, preserving performance and SEO for pages that must remain accessible.

When to use it

Protect pages that display user-specific data, dashboards, or billing information.
Enforce authentication on server-rendered routes for SEO-sensitive content that still requires login gating.
Implement consistent access control across API endpoints and page routes.
Replace fragile client-only guards with robust server-side checks.
When you need simple, maintainable route-level auth in a TypeScript full-stack app.

Best practices

Declare a clear list or pattern of protected routes on the server to avoid accidental exposure.
Return proper HTTP codes (401/403) for API calls and use redirects for browser navigation.
Keep authentication checks fast and cacheable; avoid heavy database work in the middleware.
Use consistent session/token handling across server and client to prevent mismatches.
Test both protected and public routes, including edge cases like expired sessions and token refresh.

Example use cases

Protecting a user account dashboard while leaving marketing pages public for SEO.
Securing server-rendered blog drafts that only editors can view.
Gating billing and subscription management pages behind authentication.
Applying the same protection logic to REST or GraphQL endpoints that serve private data.

FAQ

How do I fetch the implementation recipe?

Use the MCP server resource URI recipe://fullstackrecipes.com/better-auth-protected-routes or fetch it directly with curl from https://fullstackrecipes.com/api/recipes/better-auth-protected-routes.

Will this break SEO for protected content?

No. Public pages remain unchanged for SEO. Protected server-rendered pages should return proper redirects or 401 responses so search engines do not index gated content.