-
Book Overview & Buying
-
Table Of Contents
Full-Stack React, TypeScript, and Node - Second Edition
By :
This chapter connected the backend from the previous chapters to a working React frontend. We started with CORS, the error you hit the first time a React app on one port calls an API on another and solved it with the cors middleware for production and Vite's proxy for local development.
From there we built a type-safe API client on top of fetch, with an interceptor that attaches the access token and handles 401 responses by refreshing in the background. Authentication state lives in Redux Toolkit rather than React Context, because the interceptor runs outside the component tree and needs synchronous access to the token. The access token stays in a module-scoped variable instead of localStorage, while the refresh token lives in an httpOnly cookie the browser manages on its own.
React Router in declarative mode gave us the routing structure, with ProtectedRoute and AdminRoute checking authentication and role before rendering their children. The forms used useActionState with...