How to implement JWT authentication with Next.js 14 App Router and external API?

[codiebyheaart]

Summary

I'm building a Next.js 14 application that needs to authenticate users against an external Spring Boot API. I'm struggling with:

1. Where to store the JWT token (cookies vs localStorage)?
2. How to automatically refresh tokens in App Router?
3. Best way to protect API routes and pages?

I've tried using middleware but facing issues with token refresh logic.

Additional information

**Current Setup:**
- Next.js 14.0.4 with App Router
- Backend: Spring Boot REST API (separate service)
- Authentication: JWT tokens

**What I've tried:**
- Storing token in localStorage - but facing SSR issues
- Using cookies - but unsure about httpOnly configuration
- Middleware for route protection - but token refresh fails

**Questions:**
1. Should I use server actions or API routes for auth?
2. How to handle token refresh seamlessly?
3. Best practice for storing sensitive tokens in Next.js?

Any working examples or patterns would be appreciated!

Example

I can provide a minimal reproduction if needed. Currently testing locally.

[icyJoseph]

Reading your description, I'd say, well, JWT into the cookies is what you have designed for. Do you need to read data from the JWT on the client? I'd say regardless go with httpOnly, if you need to read, do so through a route handler

Middleware for route protection - but token refresh fails

You'd need to set the revalidated token into the request going upstream, and the response going downstream.

Make sure it is fast though, otherwise you'd delay rendering.