API Sequence Diagram

DiagramsIntermediate⭐ Featured
Back to Gallery

Authentication flow sequence diagram showing API interactions and message passing

#mermaid#sequence#api#authentication#diagrams
Created by md2x teamNovember 2, 2025

Get Started with This Example

Download MarkdownDownload StyleDownload PDF

Markdown Source

input.md
# User Authentication Flow

**API Sequence Diagram Documentation**

This document illustrates the complete authentication flow for our web application, showing the interaction between the client, API gateway, authentication service, and database.

---

## Overview

The authentication system uses JWT tokens with a two-step verification process. Users authenticate via email/password, receive a JWT token, and can then access protected resources.

## Authentication Sequence

```mermaid
sequenceDiagram
    participant User
    participant Client
    participant API as API Gateway
    participant Auth as Auth Service
    participant DB as Database
    participant Email as Email Service

    User->>Client: Enter credentials
    Client->>API: POST /api/auth/login
    API->>Auth: Validate credentials

    Auth->>DB: SELECT user WHERE email = ?
    DB-->>Auth: User data

    alt User not found
        Auth-->>API: 404 User not found
        API-->>Client: Error response
        Client-->>User: Show error
    else User found
        Auth->>Auth: Verify password hash

        alt Invalid password
            Auth-->>API: 401 Invalid credentials
            API-->>Client: Error response
            Client-->>User: Show error
        else Valid password
            Auth->>Auth: Generate JWT token
            Auth->>DB: UPDATE last_login
            Auth-->>API: 200 + JWT token
            API-->>Client: Success + token
            Client->>Client: Store token in localStorage
            Client-->>User: Redirect to dashboard
        end
    end
```

## Token Refresh Flow

```mermaid
sequenceDiagram
    participant Client
    participant API as API Gateway
    participant Auth as Auth Service
    participant Cache as Redis Cache

    Client->>API: GET /api/user/profile<br/>(with expired token)
    API->>Auth: Validate token
    Auth->>Auth: Check expiration
    Auth-->>API: 401 Token expired
    API-->>Client: Token expired

    Client->>API: POST /api/auth/refresh<br/>(with refresh token)
    API->>Auth: Validate refresh token
    Auth->>Cache: GET refresh_token
    Cache-->>Auth: Token data

    alt Refresh token valid
        Auth->>Auth: Generate new JWT
        Auth->>Cache: UPDATE token
        Auth-->>API: 200 + new JWT
        API-->>Client: New token
        Client->>API: Retry GET /api/user/profile<br/>(with new token)
        API-->>Client: 200 + profile data
    else Refresh token invalid
        Auth-->>API: 401 Refresh token invalid
        API-->>Client: Unauthorized
        Client->>Client: Clear tokens
        Client->>Client: Redirect to login
    end
```

## Two-Factor Authentication Flow

```mermaid
sequenceDiagram
    participant User
    participant Client
    participant API as API Gateway
    participant Auth as Auth Service
    participant DB as Database
    participant SMS as SMS Service

    User->>Client: Enable 2FA
    Client->>API: POST /api/auth/2fa/enable
    API->>Auth: Generate 2FA secret
    Auth->>Auth: Create QR code
    Auth->>DB: SAVE 2FA secret (encrypted)
    Auth-->>API: QR code + backup codes
    API-->>Client: Display QR code
    Client-->>User: Show QR + backup codes

    Note over User,Client: User scans QR with authenticator app

    User->>User: Enter 6-digit code from app
    User->>Client: Submit verification code
    Client->>API: POST /api/auth/2fa/verify
    API->>Auth: Validate code
    Auth->>Auth: Verify TOTP code

    alt Code valid
        Auth->>DB: UPDATE 2fa_enabled = true
        Auth-->>API: 200 2FA enabled
        API-->>Client: Success
        Client-->>User: 2FA activated
    else Code invalid
        Auth-->>API: 400 Invalid code
        API-->>Client: Error
        Client-->>User: Try again
    end
```

## Login with 2FA

```mermaid
sequenceDiagram
    participant User
    participant Client
    participant API as API Gateway
    participant Auth as Auth Service
    participant DB as Database

    User->>Client: Enter email + password
    Client->>API: POST /api/auth/login
    API->>Auth: Validate credentials
    Auth->>DB: SELECT user
    DB-->>Auth: User data (2fa_enabled = true)

    Auth->>Auth: Verify password
    Auth->>Auth: Generate session ID
    Auth-->>API: 200 + require_2fa: true
    API-->>Client: Need 2FA code

    Client-->>User: Show 2FA input
    User->>User: Open authenticator app
    User->>Client: Enter 6-digit code

    Client->>API: POST /api/auth/2fa/validate<br/>(session_id + code)
    API->>Auth: Verify TOTP code

    alt Code valid
        Auth->>Auth: Generate JWT token
        Auth->>DB: UPDATE last_login
        Auth-->>API: 200 + JWT token
        API-->>Client: Token
        Client-->>User: Redirect to dashboard
    else Code invalid
        Auth-->>API: 401 Invalid 2FA code
        API-->>Client: Error (attempts left)
        Client-->>User: Show error + retry
    end
```

## Password Reset Flow

```mermaid
sequenceDiagram
    participant User
    participant Client
    participant API as API Gateway
    participant Auth as Auth Service
    participant DB as Database
    participant Email as Email Service

    User->>Client: Click "Forgot Password"
    Client-->>User: Show email input
    User->>Client: Enter email
    Client->>API: POST /api/auth/reset-password

    API->>Auth: Request password reset
    Auth->>DB: SELECT user WHERE email = ?

    alt User exists
        DB-->>Auth: User data
        Auth->>Auth: Generate reset token (1hr expiry)
        Auth->>DB: SAVE reset token
        Auth->>Email: Send reset email
        Email-->>User: Email with reset link
        Auth-->>API: 200 Email sent
        API-->>Client: Success
        Client-->>User: Check your email
    else User not found
        Auth-->>API: 200 Email sent (same response for security)
        API-->>Client: Success
        Client-->>User: Check your email
    end

    Note over User,Email: User clicks link in email

    User->>Client: Click reset link
    Client->>API: GET /api/auth/reset/:token
    API->>Auth: Validate reset token
    Auth->>DB: SELECT token

    alt Token valid
        DB-->>Auth: Token data
        Auth-->>API: 200 Token valid
        API-->>Client: Show password form
        Client-->>User: Enter new password

        User->>Client: Submit new password
        Client->>API: POST /api/auth/reset/:token
        API->>Auth: Update password
        Auth->>Auth: Hash new password
        Auth->>DB: UPDATE password + DELETE reset token
        Auth-->>API: 200 Password updated
        API-->>Client: Success
        Client-->>User: Password changed, go to login
    else Token invalid/expired
        Auth-->>API: 400 Invalid token
        API-->>Client: Error
        Client-->>User: Token expired, request new link
    end
```

## OAuth Social Login Flow

```mermaid
sequenceDiagram
    participant User
    participant Client
    participant API as API Gateway
    participant Auth as Auth Service
    participant OAuth as OAuth Provider (Google)
    participant DB as Database

    User->>Client: Click "Sign in with Google"
    Client->>API: GET /api/auth/oauth/google
    API->>Auth: Initialize OAuth flow
    Auth->>Auth: Generate state token (CSRF protection)
    Auth-->>Client: Redirect to Google

    Client->>OAuth: Redirect with client_id + state
    OAuth-->>User: Google login page
    User->>OAuth: Enter Google credentials
    OAuth->>OAuth: Authenticate user
    OAuth-->>Client: Redirect with authorization code

    Client->>API: GET /api/auth/oauth/callback?code=xxx&state=yyy
    API->>Auth: Verify state token
    Auth->>OAuth: POST /token (exchange code for access token)
    OAuth-->>Auth: Access token + ID token

    Auth->>OAuth: GET /userinfo (with access token)
    OAuth-->>Auth: User profile data

    Auth->>DB: SELECT user WHERE oauth_id = ?

    alt User exists
        DB-->>Auth: Existing user
        Auth->>DB: UPDATE last_login
    else New user
        Auth->>DB: INSERT new user
    end

    Auth->>Auth: Generate JWT token
    Auth-->>API: 200 + JWT token
    API-->>Client: Token
    Client->>Client: Store token
    Client-->>User: Redirect to dashboard
```

## Technical Details

### Token Structure

**JWT Payload:**
```json
{
  "sub": "user_id_12345",
  "email": "user@example.com",
  "role": "user",
  "iat": 1699000000,
  "exp": 1699003600
}
```

### Security Measures

1. **Password Hashing:** bcrypt with 12 rounds
2. **JWT Expiry:** 1 hour for access token, 7 days for refresh token
3. **Rate Limiting:** 5 failed attempts → 15-minute lockout
4. **CSRF Protection:** State tokens for OAuth flows
5. **HTTPS Only:** All auth endpoints require TLS
6. **Token Rotation:** Refresh tokens invalidated after use

### Error Codes

| Code | Description |
|------|-------------|
| 400 | Bad Request - Invalid input |
| 401 | Unauthorized - Invalid credentials/token |
| 403 | Forbidden - Insufficient permissions |
| 404 | Not Found - User doesn't exist |
| 429 | Too Many Requests - Rate limit exceeded |
| 500 | Internal Server Error |

### Performance Targets

- **Login:** < 200ms (P95)
- **Token Validation:** < 50ms (P95)
- **OAuth Callback:** < 500ms (P95)
- **Password Reset Email:** < 2 seconds

---

**Version:** 2.1
**Last Updated:** November 2024
**Maintained by:** Authentication Team
325 lines • 9235 characters

PDF Output

output.pdf
PDF preview of API Sequence Diagram
Page 1 of 1 • Click image to zoom in

CSS Styling

style.css
/* Reuse the technical architecture style from example 003 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5pt;
  line-height: 1.7;
  color: #1f2937;
  max-width: 8.5in;
  margin: 0.75in auto;
  padding: 0;
}

h1 {
  font-size: 24pt;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.08in 0;
}

h1 + p {
  font-size: 11pt;
  font-weight: 600;
  color: #6b7280;
  margin: 0 0 0.15in 0;
}

hr {
  border: none;
  border-top: 2px solid #e5e7eb;
  margin: 0.2in 0;
}

h2 {
  font-size: 15pt;
  font-weight: 700;
  color: #1e40af;
  margin: 0.25in 0 0.12in 0;
  border-bottom: 2px solid #dbeafe;
  padding-bottom: 0.05in;
}

h3 {
  font-size: 12pt;
  font-weight: 600;
  color: #374151;
  margin: 0.18in 0 0.08in 0;
}

p {
  margin: 0.08in 0;
}

ul, ol {
  margin: 0.08in 0;
  padding-left: 0.3in;
}

pre {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 0.15in;
  margin: 0.15in 0;
  border-radius: 6px;
}

code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5pt;
  background: #f3f4f6;
  padding: 0.02in 0.05in;
  border-radius: 3px;
  color: #dc2626;
}

pre code {
  background: none;
  padding: 0;
  color: #1f2937;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.15in 0;
  font-size: 9.5pt;
  border: 1px solid #e5e7eb;
}

th {
  background: #f3f4f6;
  padding: 0.08in;
  text-align: left;
  font-weight: 600;
  border-bottom: 2px solid #d1d5db;
}

td {
  padding: 0.08in;
  border-bottom: 1px solid #e5e7eb;
}

.mermaid {
  margin: 0.2in 0;
  padding: 0.15in;
  background: #fafafa;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

Explore More Examples

Check out our full gallery for more inspiration

View All Examples