Login / Authentication Sequence Diagram

Q: How does a login sequence diagram work?

A login sequence diagram shows the order of messages exchanged between a user, browser, authentication server, and database during a login attempt. It covers credential submission, password hash verification, and JWT token issuance.

Q: What is JWT in an authentication flow?

JWT (JSON Web Token) is a compact, self-contained token issued by the auth server after successful login. It encodes user identity and permissions, allowing subsequent API calls to be authenticated without a database lookup each time.

Q: Can I edit this authentication sequence diagram?

Yes. Click 'Open in Editor' to load this diagram into the free online editor at SeqDiagram.com. You can modify participants, messages, and flow instantly with no sign-up required.

Diagram Source — edit it live in the browser

title User Login Flow

actor User
participant Browser
participant "Auth Server" as Auth
participant Database

User->Browser: Enter credentials
Browser->Auth: POST /api/login
Auth->Database: SELECT * FROM users
Database-->Auth: User record
Auth->Auth: Verify password hash
Auth-->Browser: JWT token + refresh token
Browser-->User: Redirect to dashboard

What this diagram shows

This sequence diagram models the most common authentication pattern for web applications — a username/password login that issues a JWT (JSON Web Token) on success. It captures the exact message order between four participants: the user, the browser, the auth server, and the database.

The flow is applicable to any server-side auth implementation, whether you're using Node.js, Django, Rails, Go, or any other backend. The pattern — validate credentials, check the hash, issue a token — is universal.

Step-by-step flow breakdown

User enters credentialsThe user types their email and password into a login form in the browser.

Browser POSTs to the Auth ServerThe form submits a POST /api/login request with the credentials (over HTTPS).

Auth Server queries the DatabaseSELECT * FROM users WHERE email = ? — retrieves the stored user record including the hashed password.

Password hash verifiedThe server compares the submitted password against the stored bcrypt/argon2 hash using a secure compare function. Never stored as plaintext.

JWT + refresh token issuedOn success, the auth server signs and returns a short-lived access token and a longer-lived refresh token.

User redirected to dashboardThe browser stores the tokens (typically in memory or httpOnly cookies) and navigates to the protected area.

When to use a login sequence diagram

API documentation — show frontend and mobile teams exactly what endpoints to call and in what order
Security review — trace the credential handling path to identify where plaintext passwords might be logged or exposed
Onboarding new engineers — a diagram is faster to read than a 200-line auth controller
Architecture decision records (ADRs) — document the chosen auth pattern alongside the code
Tech spec writing — include diagrams in RFC or design docs before implementation begins

Common variations

Add multi-factor authentication (MFA)

After the password hash check, add a step where the Auth Server sends an OTP to the user's phone, the user submits the OTP, and the server validates it before issuing the JWT.

Session-based auth instead of JWT

Replace the JWT issuance step with INSERT INTO sessions and return a session cookie. The browser sends the cookie on every request rather than a Bearer token.

Failed login handling

Add an alt fragment with two branches: [success] issuing the JWT and [failure] returning a 401 Unauthorized with rate-limiting logic.

Social / OAuth login

Replace the credential + database steps with a redirect to an OAuth provider. See the OAuth 2.0 diagram for the full flow.

Sequence diagram syntax used

This example uses the plain-text syntax supported by SeqDiagram.com. Key elements:

actor User — renders as a stick figure (human participant)
participant "Auth Server" as Auth — aliases a long name
Browser->Auth: POST /api/login — synchronous call with a solid arrowhead
Database-->Auth: User record — return/response message with a dashed line
Auth->Auth: Verify password hash — self-call (loop-back arrow)

Need the full reference? See the complete syntax guide →

Related sequence diagram examples

Frequently asked questions

How does a login sequence diagram work?

It shows the time-ordered messages between participants — user, browser, server, and database — during a login attempt. Each arrow is a message; solid arrows are calls, dashed arrows are responses.

What is JWT in an authentication flow?

JWT (JSON Web Token) is a signed, compact token the auth server issues after a successful login. It encodes user identity and is sent on every subsequent API request as a Bearer token, avoiding repeated database lookups.

Can I edit this authentication sequence diagram?

Yes — click Open in Editor above to load this diagram into SeqDiagram.com. You can modify it instantly, add MFA steps, change participants, and export as PNG or SVG. No account needed.

Is this diagram compatible with Mermaid or PlantUML?

SeqDiagram.com can export any diagram to Mermaid syntax with one click — compatible with GitHub, GitLab, Notion, and Obsidian. You can also import existing Mermaid diagrams to edit them here.