--- name: better-auth-implementation-for-nextjs-fastapi description: This skill provides guidance for implementing secure authentication using Better Auth for Next.js frontend and JWT verification for FastAPI backend. --- # Better Authentication Implementation for Next.js + FastAPI ## Overview This skill provides guidance for implementing secure authentication using Better Auth for Next.js frontend and JWT verification for FastAPI backend. The implementation follows industry best practices for securing full-stack applications. ## Authentication Architecture ### Components - **Better Auth**: JavaScript\/TypeScript authentication library for Next.js frontend - **JWT Tokens**: JSON Web Tokens for stateless authentication between frontend and backend - **FastAPI Middleware**: JWT verification middleware for backend authentication - **Shared Secret**: Common secret key for JWT signing and verification ### How It Works 1. User logs in on Next.js frontend → Better Auth creates a session and issues a JWT token 2. Frontend makes API calls → Includes JWT token in `Authorization: Bearer ` header 3. FastAPI backend receives request → Extracts token from header, verifies signature using shared secret 4. Backend identifies user → Decodes token to get user ID, email, etc. 5. Backend filters data → Returns only data belonging to the authenticated user ## Implementation Steps ### 1. Better Auth Configuration (Next.js Frontend) #### Installation ```bash npm install better-auth ``` #### Configuration Create `lib\/auth\/server.ts`: ```typescript import { betterAuth } from "better-auth"; import { jwt } from "better-auth\/plugins"; export const auth = betterAuth({ secret: process.env.BETTER_AUTH_SECRET || "your-secret-key-here", database: { \/\/ Your database configuration }, plugins: [ jwt({ secret: process.env.BETTER_AUTH_SECRET || "your-secret-key-here", }) ], \/\/ Additional auth configuration socialProviders: { \/\/ Configure social login providers if needed } }); ``` #### API Route Setup Create `app\/api\/auth\/[...auth]\/route.ts`: ```typescript import { auth } from "@\/lib\/auth"; export const { GET, POST } = auth; ``` #### Client Component Usage ```typescript "use client"; import { useSession } from "better-auth\/react"; export function UserComponent() { const { session, signIn, signOut } = useSession(); if (!session) { return