Flowchartio
Sign inTry it freeTry free

API and software flows

Sign-up and login flowcharts

Authentication flows look simple on the happy path and get complicated in the branches: email already used, unverified accounts, wrong passwords, lockouts, multi-factor authentication and password resets. A flowchart per flow makes those branches, and the security decisions behind them, explicit.

By Flowchartio · Updated · 2 min read

Sign-up

  1. Visitor submits the form (email, password).
  2. Decision: is the input valid (format, password rules)? No → show the errors.
  3. Decision: is the email already registered? Decide what to reveal: many products show a neutral message ("Check your inbox") so that sign-up cannot be used to discover who has an account.
  4. System creates the account in an unverified state and sends a verification email.
  5. Delay: wait for the user to click the link. Timeout → send a reminder or let the link expire.
  6. User verifies → account active → end.

Login

  1. User submits email and password.
  2. Decision: credentials correct? No → increment the failure counter.
  3. Decision: too many failures? Yes → lock or slow down further attempts, notify the user.
  4. Decision: is multi-factor authentication enabled? Yes → ask for the code → valid? No → back to the code prompt, with its own attempt limit.
  5. Decision: is the account verified? No → offer to resend the verification email.
  6. Create the session → end.

Password reset

  1. User requests a reset with their email.
  2. System answers with the same neutral message whether or not the account exists.
  3. If it exists, send a single-use link that expires.
  4. User sets a new password → decision: link still valid? → update the password, end other sessions if that is your policy → end.

Signing in with another provider

"Sign in with Google" and similar buttons usually rely on OAuth 2.0 and OpenID Connect. For browser and mobile apps, the authorization code flow with PKCE is the recommended pattern. In a flowchart, show it as a hand-off to the provider's lane and back, with branches for "user cancels" and "email already linked to another account".

Tips for these charts

  • Use lanes for user, frontend, backend and email or identity provider: see swimlane diagrams.
  • Put limits and timeouts on the chart (5 attempts, 24-hour link); every loop needs an exit, as in decisions and loops.
  • Name the endpoints on automated steps, as in an API integration workflow.
  • Keep the chart next to the code and update it when the policy changes.

Describe your flow in a few sentences and generate the flowchart, then add the branches above that are missing.

Turn your process into a flowchart

Describe it in a few sentences. Flowchartio draws the flowchart, then you refine it in conversation.

Generate a flowchart