Topic

Axios, Nest, and cookies

Definition

Axios must send credentialed requests and Nest must allow credentialed CORS for httpOnly cookie sessions to work across origins.

In simpler words

The browser sends the login cookie; JavaScript does not need to read the JWT.

Axios instances, withCredentials, CORS, and 401 handling.

Open live example →

After this you can

Call protected Nest endpoints without storing tokens in localStorage.
Explain the trade-off to a teammate using a small example.
Name at least one common bug pattern for this topic.

Understand Axios, Nest, and cookies

Axios instances, withCredentials, CORS, and 401 handling.

Start by identifying which value or browser behavior changes. Then describe the UI from that current input instead of editing the DOM as a separate source of truth.

Axios, Nest, and cookies in code

export const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  withCredentials: true,
});

Read the example from data and control flow to the resulting UI. Keep the component boundary small.

Apply Axios, Nest, and cookies

Keep rendering as a calculation. Put user-triggered changes in event handlers, preserve UI memory in state, and reserve external synchronization for Effects or the server-state layer.

Name values by their UI meaning, test the loading and error path when data is remote, and avoid keeping two editable copies of the same value.

Ask before adding code: is this local UI memory, shared client state, or Nest-owned server state?

Where bugs hide

Definition

High-bug areas are places where a small API misuse looks correct but produces stale UI, duplicate work, or silent failures.

In simpler words

Each mistake below shows Wrong vs Right code — compare them side by side.

When something misbehaves, match the symptom to a pattern below before rewriting the feature.

Prefer fixing the ownership or update path over adding another Effect or sync step.

Mistake: Forgot withCredentials

// Wrong
axios.get("/tickets")

// Right
axios.get("/tickets", { withCredentials: true })
// or axios.create({ withCredentials: true })

Cross-origin cookies require credentials.

Mistake: JWT in localStorage

// Wrong
localStorage.setItem("token", jwt)

// Right
// Nest httpOnly cookie; browser sends it automatically

HttpOnly cookies keep tokens away from XSS.

Mistake: CORS * with credentials

// Wrong
origin: "*", credentials: true

// Right
origin: "http://localhost:3000", credentials: true

Browsers reject wildcard origin with credentials.

Live playground

Axios, Nest, and cookies sandbox

Change one input at a time and predict the next render.

withCredentials: true

Browser will send httpOnly cookie to Nest on cross-origin calls.

axios.create({ withCredentials: true })

Keep in mind

Keep the formal definition in mind; it explains which tool belongs where.
Prefer one source of truth over synchronized copies of the same value.
When behavior surprises you, trace: input → update → render → committed UI.
Study the Wrong vs Right examples in “Where bugs hide” before you merge.

Test

Check your understanding

At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥80% (enforced by the API) to save progress.

Checking your session…

15 questions · concept 5 · syntax 3 · practical 4 · logic 3

1. How should the web app call Nest cookie auth APIs?

Concept

Read the httpOnly cookie in JS and set an Authorization headerAxios/fetch with credentials/include so cookies are sentStore the JWT in localStorage and attach it manuallySend the token as a URL query parameter

2. Why credentials matter cross-origin?

Syntax

Cookies are sent cross-origin by default without configOnly the Origin header controls cookie sendingBrowsers won’t send cookies unless you opt in correctly with CORSwithCredentials only affects same-origin requests

3. Where is the access token in this course?

Practical

httpOnly cookie set by Nest — not readable to JSA regular JS-readable cookie the client setsIn localStorage, attached via an Axios interceptorIn sessionStorage, cleared on tab close

4. 401 from /tickets usually means?

Logic

The user is authenticated but lacks the required roleThe tickets route does not exist on the serverThe request body failed validationNot authenticated / missing or invalid cookie

5. Axios instance tip?

Concept

Centralize baseURL and withCredentialsNew Axios setup per click without baseURLHardcode production URLs in every fileSkip JSON headers

6. CSRF considerations with cookies?

Practical

httpOnly cookies are automatically immune to CSRFCSRF only affects token-in-header auth, not cookiesUnderstand same-site and CSRF strategies for cookie APIsSameSite=None fully prevents CSRF on its own

7. Login flow?

Syntax

POST /auth/login → Set-Cookie → subsequent requests carry cookiePOST /auth/login returns a token the client stores in localStorageGET /auth/login sets the cookie via a redirectThe client generates and signs the JWT after login

8. Logout flow?

Logic

Delete the cookie from JS with document.cookieCall logout endpoint that clears the cookieRemove the token from localStorage onlyLet the cookie expire on its own without an endpoint

9. Why not attach Authorization from JS if httpOnly?

Concept

JS can read httpOnly cookies via document.cookieAxios strips Authorization headers automaticallyJS cannot read httpOnly cookies — rely on cookie send or documented bearer fallbackhttpOnly cookies are only sent on same-origin requests

10. Which practice matches the monorepo?

Practical

React owns JWT signingNext Route Handlers replace Nest auth alwaysSkip credentials for simplicity in prodBrowser client includes credentials to Nest; Nest guards read the cookie

11. Why set withCredentials: true?

Conceptintermediate

const api = axios.create({
  baseURL: '/api',
  withCredentials: true,
});

To store the JWT in localStorageTo enable CORS on NestTo hash passwordsSo the browser sends the httpOnly auth cookie with requests

12. With cookie auth, what does a 401 usually indicate?

Syntaxadvanced

GET /tickets -> 401 Unauthorized

A CSS errorA Docker network typo onlyA missing or invalid auth cookie (not authenticated)ValidationPipe rejected extra fields

13. After this, how do later requests stay authenticated?

Practicalintermediate

POST /auth/login -> Set-Cookie: access_token=...; HttpOnly

JS reads the cookie and adds a headerThe browser automatically resends the httpOnly cookieYou must re-login each requestNest stores the session in React

14. Why can’t JS read the access token here?

Logicadvanced

const token = document.cookie; // trying to read access_token

document.cookie is deprecatedThe token is in localStorageAxios deleted ithttpOnly cookies are hidden from JavaScript by design

15. What must the logout endpoint do to end the session?

Conceptintermediate

await api.post('/auth/logout');

Clear the auth cookie on the server (Set-Cookie with an expired value)Delete localStorage onlyClose the browser tabDrop the users table

Checking your session…