Login Sequence Diagram — Authentication Flow

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 Sketmi.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

The diagram tracks credential flow across four participants: browser, auth server, database, and the user triggering it. Worth noting what it makes explicit: the password hash check happens inside the auth server as a self-call, and the token is only issued after that succeeds. That ordering matters — and it's easy to get wrong in code review when there's no diagram.

The pattern works for Node.js, Django, Go, Rails — anything that has an auth endpoint. The participants are stand-ins for whatever your stack calls them.

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 Sketmi.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 Sketmi.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?

Sketmi.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.

Login / Authentication Sequence Diagram