How do you include a JWT in a fetch request?

WHAT THIS TESTS: This question tests whether you know how to configure a fetch request using the optional second argument and whether you understand the standard Authorization header format for bearer tokens. It also surfaces your awareness of security hygiene around JWTs and whether you treat fetch as an explicit, low-level API rather than expecting automatic credential handling.

A GOOD ANSWER COVERS: First, the candidate should show the options object passed as the second argument to fetch, including a headers property that maps to an object or Headers instance. Second, they should specify the Authorization header value using the Bearer scheme followed by a space and the token string. Third, they should note that fetch does not automatically attach authentication tokens, so every protected request must include this header manually or via a wrapper. Fourth, a senior candidate mentions security considerations such as never logging the token, avoiding query string transmission, and storing the token in memory or secure storage rather than localStorage when possible.

COMMON WRONG ANSWERS: A red flag is omitting the Bearer prefix or misspelling Authorization. Another mistake is placing the token in the URL as a query parameter, which leaks it in server logs and browser history. Some candidates suggest modifying the fetch prototype or global defaults, which creates hidden side effects. Others forget that the headers live inside an options object, not as a third argument or a property on the URL string. Hardcoding a real token in the example code is also a subtle signal of poor security awareness.

LIKELY FOLLOW-UPS: The interviewer may ask how you would refresh an expired token transparently, which leads to interceptors or wrapper functions. They might ask about CORS preflight behavior with custom headers like Authorization, which triggers an OPTIONS request. Another follow-up is how you handle token storage securely in a web application, comparing httpOnly cookies versus localStorage versus memory. They may also ask how to handle the case where fetch returns a 401 and whether you retry automatically.

ONE CONCRETE EXAMPLE: A solid code sketch looks like this: define an async function fetchWithAuth that accepts a URL and a token. Inside, call fetch passing the URL as the first argument and an object as the second argument. Set the method if needed, then set headers to an object with Authorization set to the string Bearer concatenated with a space and the token. Await the response, check response.ok, and return the parsed JSON. This pattern keeps auth logic centralized and makes it easy to attach tokens to every outgoing request consistently.

Source: developer.mozilla.org