9. JWT Cookies & Dual Auth - A Detailed Guide (Nova Shop)

Explains why Nova has two auth systems (NextAuth + NestJS JWT), how authFetch / refresh work, and compares it against best practice.

Read after: 7. Authentication, 8. NextAuth v5.

Table of Contents

1. What is dual auth?
2. The overall diagram
3. Cookies - names and roles
4. setAuthCookies / clearAuthCookies
5. ensureValidAccessToken & refreshTokens
6. authFetch - the fetch wrapper
7. Middleware + authFetch - two layers of checking
8. The NestJS API contract
9. Comparing other patterns
10. Best practice vs Nova & improvements
11. FAQ & implementing from scratch

1. What Is Dual Auth?

They don't overlap - both exist simultaneously after a successful login.

User login succeeds
  → NextAuth: "the user has signed in" (middleware knows this)
  → Cookies: "API calls carry a Bearer token" (authFetch knows this)

2. The Overall Diagram

3. Cookies - Names and Roles

File: app/lib/auth-constants.ts

4. setAuthCookies / clearAuthCookies

After a successful login

// auth-tokens.ts
await setAuthCookies({
  accessToken: response.accessToken,
  refreshToken: response.refreshToken,
  userId: response.userId,
});

Called from:

• Credentials.authorize
• The Google signIn callback

Security flags

httpOnly: true,
secure: process.env.NODE_ENV === "production",
sameSite: "lax",
maxAge: ACCESS_TOKEN_MAX_AGE,

Logout

events: {
  async signOut() {
    await logout();        // POST /logout + refresh token in the body
    await clearAuthCookies();
  },
}

Clear the cookies even if the backend call fails - to avoid a "zombie logged in" UI state.

5. ensureValidAccessToken & refreshTokens

The Problem

The access token expires midway through a session - the user still has a refresh_token.

Nova's Solution

export async function ensureValidAccessToken(): Promise<boolean> {
  const access = cookies().get(ACCESS_TOKEN_COOKIE)?.value;
  const expiresAt = cookies().get(ACCESS_EXPIRES_COOKIE)?.value;

  if (access && !isAccessTokenExpired(expiresAt)) return true;
  return refreshTokens();
}

export async function refreshTokens(): Promise<boolean> {
  const refresh = cookies().get(REFRESH_TOKEN_COOKIE)?.value;
  if (!refresh) return false;

  const res = await fetch(`${API}/token`, {
    method: "POST",
    body: JSON.stringify({ refreshToken: refresh }),
  });
  if (!res.ok) return false;

  const data = await res.json();
  await setAuthCookies(data);
  return true;
}

6. authFetch - the Fetch Wrapper

File: app/lib/api-client.ts

export async function authFetch(url: string, init?: RequestInit) {
  await ensureValidAccessToken();

  let response = await fetch(url, {
    ...init,
    headers: await getAuthHeaders(extra),
  });

  if (response.status === 401) {
    if (await refreshTokens()) {
      response = await fetch(url, { ...init, headers: await getAuthHeaders(extra) });
    }
  }
  return response;
}

Services (cart.ts, products.ts) always use authFetch for any API that requires login.

7. Middleware + authFetch - Two Layers of Checking

Scenario: middleware passes (refresh token still exists) but the access token has expired → ensureValidAccessToken refreshes before the fetch.

Scenario: the refresh token has also expired → getProducts → 401 → unauthorized().

8. The NestJS API Contract

9. Comparing Other Patterns

10. Best Practice vs Nova & Improvements

11. FAQ & Implementing From Scratch

FAQ

Q: Can I just use the Bearer token and drop NextAuth?
You'd lose useSession and Auth.js's middleware - you'd have to write a lot more yourself.

Q: Can authFetch run on the client?
Only through a Server Action / Server Component - cookies are server-only.

Q: Is dual auth worth it?
Yes, when the NestJS API already has its own JWT; a small greenfield project could simplify this.

Order of Implementation From Scratch

1. Backend: /login, /token, /logout
2. setAuthCookies / clearAuthCookies
3. authFetch + refreshTokens
4. NextAuth Credentials + calling setAuthCookies inside authorize
5. Middleware authorized checking the cookies
6. Google provider + POST /google
7. Test: log in → call the API → delete the access cookie → reload → confirm it auto-refreshes

Next: 10. Nova Shop Example · 5. Data Fetching