blog: architecture driven auth part 2 (TMB)

astro/src/diagrams/blog/auth-architecture-part2-TMB/browser-active-session.astro

@@ -0,0 +1,28 @@
+---
+import Diagram from "../../../components/mermaid/SequenceDiagram.astro";
+const { alt } = Astro.props;
+
+//language=Mermaid
+const diagram = `
+sequenceDiagram
+
+    %%{init:{"themeVariables": { "noteBkgColor":"transparent", "noteTextColor":"transparent", "noteBorderColor":"transparent" }}}%%
+    actor U as User
+    participant B as Browser
+    participant F as Static file host
+    participant T as TMB
+    participant R as Resource server
+
+    U->>B: Visit website
+    B->>F: Request website
+    F->>B: Send HTML, CSS, JS
+
+    B->>T: Is there an active session (include session cookie)?
+    T->>B: Yes, here is your access token
+
+    U->>B: Make a purchase
+    B->>R: Make a purchase (include access token)
+`;
+---
+<Diagram code={diagram} alt={alt}/>
+

astro/src/diagrams/blog/auth-architecture-part2-TMB/browser-no-session.astro

@@ -0,0 +1,31 @@
+---
+import Diagram from "../../../components/mermaid/SequenceDiagram.astro";
+const { alt } = Astro.props;
+
+//language=Mermaid
+const diagram = `
+sequenceDiagram
+
+	%%{init:{"themeVariables": { "noteBkgColor":"transparent", "noteTextColor":"transparent", "noteBorderColor":"transparent" }}}%%
+	participant B as Browser
+	participant T as TMB
+	participant A as Authorization Endpoint <br/>(FusionAuth)
+	participant O as Token Endpoint <br/>(FusionAuth)
+	participant R as Resource server
+
+	B->>T: Is there an active session?
+	T->>B: No
+
+	B->>T: Start Authorization Code flow with PKCE extension
+	B->>A: Redirected to log in on this web page
+	A->>B: Returns authorization code
+	B->>T: Send code
+	T->>O: Send PKCE verifier and code
+	O->>T: Return refresh token and access token
+	T->>B: Return access token and session cookie
+
+	B->>R: Make a purchase (include access token)
+`;
+---
+<Diagram code={diagram} alt={alt}/>
+