The BFF Pattern: Your API Token Has No Business in the Browser

You've got a Next.js app on one domain and your API on another. The login works, the dashboard fills up, everything looks fine. Then one day you open the Network tab and there it is: your access token, in plain text, in a request header the browser sent all by itself. At that point every line of JavaScript on the page can read it. Not just your code. The analytics snippet you added last week, the twelve transitive dependencies you've never opened, whatever an XSS bug manages to slip in. And you never really decided this. It just happened, because calling the API straight from the component was the path of least resistance, and nothing complained. The browser is not a trusted client The version that gets you here looks completely reasonable: // ❌ a Client Component talking to your API ' use client ' ; export function Profile () { useEffect (() => { fetch ( ' https://api.example.com/me ' , { headers : { authorization : `Bearer ${ token } ` }, }) . then (( r ) => r . json ()) . then ( setProfile ); }, []); } Look at what that actually signed you up for. The token is in JavaScript, so the protection an HttpOnly cookie would have given you is simply gone. The call is cross-origin, so you're now on the hook for CORS: preflight requests, an allowed-origins list to maintain, Access-Control-Allow-Credentials , and the quiet worry that you've opened it wider than you should. And because the request leaves from the browser, anyone with devtools can read your API's base URL, its routes, and how it expects to be authenticated. That's a decent map of your backend, handed out to every visitor. What makes this hard to catch is that none of it breaks. It works in the demo, it works in production, it reviews clean. It just sits there as a liability until the day it stops being quiet. The browser talks to your server. Your server talks to your API. The Backend-for-Frontend pattern draws one line: the browser only ever talks to your Next.js server. The Next.js server talks to your API.