Login Flow Diagram — Authentication Example

Q: How do I diagram my own login flow?

List your systems, then connect them: Customer -> Web App -> Auth Service: login. You can chain several hops on one line, which covers most of what a login needs.

Diagram source. Edit it live in the browser

title User Login Flow

type actor Customer
type database "User DB"

Customer -> Web App: enter email & password
Web App -> Auth Service: POST /login
Auth Service -> "User DB": verify credentials
"User DB" -> Auth Service: user record
Auth Service -> Web App: JWT + refresh token
Web App -> Customer: redirect to dashboard

What this diagram shows

There are only four moves in a login: collect the credentials, hand them to something that can check them, look up the user, hand back a token. That's the whole diagram. It looks obvious drawn out, which is exactly why it's worth drawing. The version in your codebase is spread across five files and two repos.

Using Auth0 or Firebase instead of rolling your own? Same boxes, different logos.

Step-by-step flow breakdown

User enters credentialsThe customer types email and password into the web app's login form.

Web app calls the auth serviceA POST /login request carries the credentials to the backend.

Auth service checks the user storeThe service looks up the user record by email and compares the password hash.

User DB returns the recordIf the email exists, the stored password hash comes back for verification.

Token issuedOn a match, the auth service mints a JWT (and usually a refresh token) and returns it.

Redirect to dashboardThe web app stores the token and sends the user to their authenticated home screen.

When to use this flow diagram

Onboarding. New engineers get the login path in one look instead of an hour of reading middleware.
Comparing auth providers before a migration.
Security reviews, where you want every hop a credential makes written down.
Postmortems. When login broke at 2am, this is the picture you wish you'd had.

Common variations

Add MFA

Add a step after the token: Auth Service -> Customer: send OTP code, then Customer -> Auth Service: verify OTP.

Social login

Swap the credential check for a redirect: Customer -> Web App -> OAuth Provider: sign in with Google. The OAuth example has the full round trip.

Session-based instead of JWT

Change the last arrows to set a session cookie instead of returning a JWT, and add a session lookup on later requests.

Related flow diagram examples

Frequently asked questions

What does a login flow diagram show?

The systems a login touches and the order it touches them: form, auth service, database, token, dashboard. Boxes and arrows, nothing fancier.

How do I diagram my own login flow?

List your systems, then connect them: Customer -> Web App -> Auth Service: login. You can chain several hops on one line, which covers most of what a login needs.

Can I use this template for free?

Yes. Open it in the editor, rename the boxes, export a PNG or SVG. No account.

User Login / Authentication Flow