OAuth social sign-in template: free, editable diagram

Redirect, consent, token exchange, account linking. This starter has 10 steps and 2 decision points. Open it as a real canvas with shapes and arrows you can restyle, extend and share, then turn the action steps into tasks.

Sign up free

Free. No account needed. Saved in this browser until you sign up.

noyesnoyesContinue with providerRedirect to provider consentUser approves?Return with an error messageExchange code for tokensFetch verified profileAccount exists?Create accountLink identity and sign inSigned in

What is in this template

10 steps, 2 of them decisions, in diagram order. Rename, remove or add branches once it is on your canvas.

  1. 1Continue with provider
  2. 2Redirect to provider consent
  3. 3User approves?
  4. 4Return with an error message
  5. 5Exchange code for tokens
  6. 6Fetch verified profile
  7. 7Account exists?
  8. 8Create account
  9. 9Link identity and sign in
  10. 10Signed in
Get the Mermaid source

Mermaid source

flowchart TD
  begin([icon:brand-google Continue with provider]) ==> redirect[icon:external-link Redirect to provider consent]
  redirect ==> consent{User approves?}
  consent -->|no| denied([icon:hand-stop Return with an error message])
  consent ==>|yes| exchange[icon:arrows-exchange Exchange code for tokens]
  exchange ==> profile[icon:id-badge Fetch verified profile]
  profile ==> exists{Account exists?}
  exists ==>|no| create[icon:user-circle Create account]
  exists -->|yes| link[icon:link Link identity and sign in]
  create ==> done([icon:login Signed in])
  link --> done
  classDef tone-accent fill:#fae8ff
  class begin tone-accent
  classDef tone-info fill:#dbeafe
  class redirect,exchange,profile,create,link tone-info
  classDef tone-warning fill:#fef3c7
  class consent,exists tone-warning
  classDef tone-danger fill:#fee2e2
  class denied tone-danger
  classDef tone-success fill:#dcfce7
  class done tone-success

Paste it into the free Mermaid editor or your own docs.

Questions

What is the oAuth social sign-in template?
Redirect, consent, token exchange, account linking. It is a starting diagram you adapt to your own process.
Can I edit it?
Yes. It opens as normal shapes and bound arrows: rename steps, add branches, restyle, and collaborate live once you have an account.
Do I need an account?
No. You can open it in a guest canvas saved in your browser. Create an account to keep it and share it.