Auth Flow Diagrams

Auth and login flows can start simple and quickly get complicated. They can involve cookies, tokens, 3rd party services and integrations, analytics systems, and user role provisioning. Using Eraser's powerful diagraming features, you can easily visualize how users log in to your app and authenticate with any 3rd party integrations you offer.

Eraser's built-in examples are an excellent way to get started documenting your auth flows or design a new implementation.

Visualize auth flows

Sequence diagrams are perfect for visualizing auth flows, password reset flows, and other login related user flows. With Eraser's diagram-as-code feature, you can create beautiful sequence diagrams in minutes. Use our built-in example as a starting point, and add particulars such as databases, client-side storage and more.

Open In Eraser
SAML flow

Struggling to explain SAML or design your implementation? Eraser's built-in SAML template is a perfect place to get started with a clear sequence diagraming. From here, you can add flows for new user provisioning and user role syncing.
Open in Eraser:

Open In Eraser
3rd party OAuth

Integrating with 3rd party services using OAuth 2.0? Eraser's sequence diagrams are perfect for visualizing the authorization and API request flow, including token and authorization code exchange. With Eraser's diagram-as-code feature, it's easy to make beautiful OAuth 2.0 flows in minutes, so you can easily create diagrams for every flow, including token refreshes and permission mismatches.

Open In Eraser
Discover other use cases
View all use cases
Whiteboard Interview
Eraser is the easiest way to conduct a remote whiteboarding interview. Just send a link to your counterpart and immediately get started.
Documentation
Eraser makes documentation enjoyable to create and consume
Use Cases
Auth Flow Diagrams
Diagrams

Auth Flow Diagrams

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Use Eraser to document your login flows, integrations, and analytics identification.

Open in Eraser
Use Cases
Use Eraser for your
Diagrams
Use Cases
Visualize auth flows

Sequence diagrams are perfect for visualizing auth flows, password reset flows, and other login related user flows. With Eraser's diagram-as-code feature, you can create beautiful sequence diagrams in minutes. Use our built-in example as a starting point, and add particulars such as databases, client-side storage and more.

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Use Cases
SAML flow

Struggling to explain SAML or design your implementation? Eraser's built-in SAML template is a perfect place to get started with a clear sequence diagraming. From here, you can add flows for new user provisioning and user role syncing.
Open in Eraser:

Use Cases
3rd party OAuth

Integrating with 3rd party services using OAuth 2.0? Eraser's sequence diagrams are perfect for visualizing the authorization and API request flow, including token and authorization code exchange. With Eraser's diagram-as-code feature, it's easy to make beautiful OAuth 2.0 flows in minutes, so you can easily create diagrams for every flow, including token refreshes and permission mismatches.

Why Eraser is the best tool for
Auth Flow Diagrams

Diagram-as-code

Diagram-as-code is the perfect tool for moving at the speed of thought and visualizing your ideas instantly. Our syntax is optimized for easy learning.

AI diagrams

AI diagrams are perfect for quickly bootstrapping ideas into diagrams. Copy paste existing descriptions or code snippets to generate a diagram instantly.

Source of truth

Use diagrams created in Eraser as source of truth for answering security questionnaires and documentation.

Security

Trusted by Fortune 100 companies with their system design. SOC II Type 2 audit in progress.

Version History

Automatically saved and snapshots generated for our safety of mind.

Export

Flexible exports to PDF, PNG, SVG, markdown.

GitHub sync

Create a PR to GitHub directly from Eraser docs and diagrams.

Trusted by leading architecture teams globally

Dennis Dao
Distinguished Software Architect, MISSION+

What I love most is its Markdown note-taking feature, which allows you to include snapshots of diagrams directly in the canvas. Clicking on these snapshots takes you straight to the relevant diagram section.

Alex Kenley
Technical Director, Mott Mac

As a proof of concept, using Eraser I manually built out a VMWare validated design which is a fairly complex conceptual design for NSX-T Network Virtualization in an enterprise environment. ... I put this whole thing together in under an hour. Pretty wild.

What does larger scale software development look like?

Web Dev Cody
@WebDevCody

See you in the canvas

Unlock your team’s collaborative super powers.