DEV Community

Diego Liascovich
Diego Liascovich

Posted on

🔐 Secure Web Application Flow with JWT: From Frontend to Backend

#security #jwt #node #angular

By Diego Liascovich

Full-Stack Developer | Microservices | Angular | Node.js

Modern web applications rely heavily on JSON Web Tokens (JWT) for stateless authentication and secure communication between the frontend and backend.

In this article, we’ll explore the step-by-step security flow using JWT, from the moment a user logs in to the backend verifying their access, including refresh token strategies and best practices.

🔑 1. User Login Request

The user enters their credentials on the frontend (e.g., Angular, React).

The frontend sends a POST /login request to the backend:

POST /login
{
  "email": "user@example.com",
  "password": "123456"
}
Enter fullscreen mode Exit fullscreen mode

🧠 2. Backend Authenticates and Issues JWT

  • Backend validates credentials.
  • If valid, it generates a signed JWT (e.g. using HMAC SHA-256).
  • Optional: also returns a refresh token. 
{
  "accessToken": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
  "refreshToken": "..." (optional)
}
Enter fullscreen mode Exit fullscreen mode

JWT contains non-sensitive info like userId, role, exp.

📦 3. Frontend Stores the Token

Options:

  • localStorage or sessionStorage (easier, but vulnerable to XSS)
  • HttpOnly Secure Cookie (safer against XSS)

✅ Recommended: Use cookies with HttpOnly, Secure, and SameSite=Strict when possible.

🔐 4. Accessing Protected Resources

The frontend includes the accessToken in the Authorization header:

GET /orders
Authorization: Bearer <access_token>
Enter fullscreen mode Exit fullscreen mode

🔎 5. Backend Verifies JWT

Steps the backend performs:

  1. Extracts token from Authorization header.
  2. Verifies the signature using the secret.
  3. Checks exp and optional claims like role.

If valid → user is authorized.

If invalid/expired → responds with 401 Unauthorized.

🔁 6. Refreshing the Token (Optional)

If the accessToken is expired, the frontend can request a new one using the refreshToken:

POST /refresh-token
Authorization: Bearer <refresh_token>
Enter fullscreen mode Exit fullscreen mode

The backend verifies the refresh token and responds with a new accessToken.

🚪 7. Logout Flow

Frontend clears the token from storage.

If using cookies: optionally hit a /logout endpoint to invalidate the refresh token on the server.

📦 Example JWT Payload 

{
  "sub": "user_123",
  "email": "user@example.com",
  "role": "admin",
  "iat": 1721234567,
  "exp": 1721242167
}
Enter fullscreen mode Exit fullscreen mode

✅ Best Practices

  • ✅ Use HTTPS always.
  • ✅ Use short accessToken lifespan (5–15 mins).
  • ✅ Sign tokens securely (HS256, RS256).
  • ✅ Store tokens safely (prefer HttpOnly cookies).
  • ✅ Validate tokens on every request.

🧭 Summary

JWT enables secure, stateless authentication — but only if implemented correctly.

From login to logout, your frontend and backend should follow a strict protocol for storing, sending, and validating tokens. When done right, JWTs make modern apps both user-friendly and secure. 🔐

Let me know if you'd like to see full implementation examples in Angular and Node.js!

Top comments (0)