A practical authentication flow for a web app

A common beginner authentication flow is: log in, save something, hide protected pages, and call it done. But hiding a frontend page is not security. The server must verify authentication and authorization for protected operations.

1. Login

The user submits credentials to the server over HTTPS.

httpPOST /api/login
Content-Type: application/json

{
  "email": "user@example.com",
  "password": "..."
}

The server verifies the credentials and creates an authenticated session or returns the authentication mechanism used by the application.

2. Store authentication safely

For browser applications using cookie-based sessions, authentication cookies are commonly configured with HttpOnly, Secure, and SameSite protections. HttpOnly prevents normal frontend JavaScript from directly reading the cookie. The exact approach should match the application's architecture and threat model.

3. Protected frontend routes

The frontend can stop unauthenticated users from casually opening private screens, but that is primarily a user-experience feature. A determined user can still send requests directly to the API.

4. Protect the API

The server must verify authentication for every protected operation. If GET /api/account receives no valid session, it should respond with 401 Unauthorized.

5. Authorization

Authentication answers "Who are you?" Authorization answers "What are you allowed to do?" A normal user should not be able to call DELETE /api/admin/users/123 just because they manually discovered the endpoint. The server must check permissions.

6. Expiration

Sessions and tokens eventually expire. The frontend should handle this intentionally instead of leaving the application stuck in a broken state.

• Detect authentication expiration.
• Optionally attempt supported session renewal.
• Otherwise return the user to login.
• Preserve useful context when appropriate.

7. Logout

Logout should invalidate or remove the authentication state according to the system being used. Do not only redirect to /login while leaving a valid server session untouched.

Frontend route protection improves the experience. Server-side authorization provides the security.