I’m using Next.js (App Router) where authentication is handled by the backend.

The backend sets access and refresh tokens in HttpOnly + Secure cookies, so the frontend cannot read token values (which is expected). Cookies are automatically sent with API requests.

My confusion is around auth guards and middleware. Since the frontend has no access to the tokens:

• How can Next.js middleware determine whether a user is authenticated?

• How can I prevent users from accessing protected routes when the token is expired or invalid?

• What is the recommended pattern in this case?

What is the correct and recommended way to handle route protection in Next.js when auth tokens are stored only in HttpOnly cookies?