React Login Series - Auth API Layer & Environment Decoupling | Part 4a

Reference Auth API Implementation with Express.js

src/
├─ app/
│  ├─ App.jsx
│  └─ Router.jsx
│
├─ context/
│  └─ AuthContext.jsx
│
├─ features/
│  └─ auth/
│     ├─ api/
│     │  ├─ authApi.ts        ← network boundary
│     │  └─ auth.types.ts     ← contract mirror
│     ├─ hooks/
│     │  └─ useAuth.ts
│     └─ components/

The file structure looks similar to the below by separating auth directory from api using Express.js

src/
├─ app/
│  ├─ App.jsx
│  └─ Router.jsx
│
├─ context/
│  └─ AuthContext.jsx
│
├─ features/
├── api/
│   ├── routes/
│   │   └── auth.routes.ts
│   ├── controllers/
│   │   └── auth.controller.ts
│   ├── services/
│   │   └── auth.service.ts  <-- authApi.ts
│   ├── schemas/
│   │   └── auth.types.ts
│   └── middleware/
│       └── auth.middleware.ts

Using Express

A common question is whether we need Express (or Node) to “connect” to the Java API.

We do not.

Express is a backend framework. If Java already owns authentication, adding Express would only introduce:

• Extra latency
• Duplicate logic
• More infrastructure to maintain

in Express Our architecture would look like this:

//2026-01-06 react-login-04-auth-api-decoupling
src/
├─ app/
│  ├─ App.jsx
│  └─ Router.jsx
│
├─ context/
│  └─ AuthContext.jsx
│
├─ features/
├── api/
│   ├── routes/
│   │   └── auth.routes.ts
│   ├── controllers/
│   │   └── auth.controller.ts
│   ├── services/
│   │   └── auth.service.ts
│   ├── schemas/
│   │   └── auth.types.ts
│   └── middleware/
│       └── auth.middleware.ts

Mental Model Of Express.js setup

UI → useAuth → AuthContext → Storage
                     ↓
                  authApi

See a future post of Express.js, Node stack.

Whats Next

Our next post in the Login Series API Express discusses break down of api endpoints, structuring the api depending on which architectural need and prepare our system for coding the api.