How would you design browser authentication storage and request protection for a React or Next.js application?

Protect browser authentication boundaries

Explains token storage, cookies, XSS, CSRF, and why browser UI never replaces server authorization.

1Say itAnswer out loud first

2CompareCompare with Core answer

3RefineRefine with Stronger and Advanced

TL;DR

I prefer an HttpOnly, Secure cookie when the architecture can support a server-managed browser session because JavaScript cannot read that cookie directly. Cookies are sent automatically, so state-changing requests also need CSRF protection through SameSite, an anti-forgery token, and origin checks as appropriate. If a token must be available to browser JavaScript, XSS can steal it, so storage duration and script exposure become critical. The API still authenticates and authorizes every request regardless of which controls the UI hides.

Full answer below

Practice focus

HttpOnly cookies, token storage, XSS, CSRF, SameSite, CORS, server authorization, session expiry, and browser trust boundaries.

Answer first

Answer path

Core answer first, then checkpoints toward a stronger answer.

Start
Core answer
Start here. This is the direct spoken answer to practice first.
Why this question matters
Authentication data crosses a hostile browser environment, network boundaries, and multiple server layers. Convenience choices around storage and cookies change which attacks are easiest, but no frontend choice makes the browser trusted.
I prefer an HttpOnly, Secure cookie when the architecture can support a server-managed browser session because JavaScript cannot read that cookie directly. Cookies are sent automatically, so state-changing requests also need CSRF protection through SameSite, an anti-forgery token, and origin checks as appropriate. If a token must be available to browser JavaScript, XSS can steal it, so storage duration and script exposure become critical. The API still authenticates and authorizes every request regardless of which controls the UI hides.
Checkpoint
Stronger answer

Review signals

Use these to catch weak phrasing, shallow reasoning, and risky claims.

Common mistakesCandidateCommon mistakesMistakes that weaken the answer or signal shallow understanding.Open details

Details

Treating localStorage as a secure vault.
Calling CORS a server authorization mechanism.
Hiding a button and assuming the action is protected.
Logging bearer tokens or complete cookies for debugging.

How would you design browser authentication storage and request protection for a React or Next.js application?

Practice focus

Answer path

Why this question matters

Review signals

Follow-up prompts

Continue the section

Technologies

Tech stacks

Skill areas

Suggest an improvement