put diagrams in snippets

Author: devalog

fern/products/docs/pages/api-references/autopopulate-api-key.mdx

@@ -89,38 +89,7 @@ The JWT should have a structure similar to:
 
 #### Architecture diagram
 
-```mermaid
-sequenceDiagram
-    participant U as User
-    participant F as Fern Docs
-    participant R as Redirect URL
-    participant A as Auth System
-
-    U->>F: Visit restricted page
-    F->>F: Check fern_token cookie
-    
-    alt Cookie exists
-        F->>F: Decode JWT with secret key
-        F->>F: Extract roles from JWT
-        F->>F: Check if user has required role
-        
-        alt User has required role
-            F->>U: Show restricted content
-        else User lacks required role
-            F->>U: User is shown a 404 page
-        end
-    else No cookie
-        F->>R: Redirect to login page
-        R->>A: Authenticate user
-    end
-    
-    Note over A: User logs in
-    
-    A->>A: Generate JWT with roles
-    A->>F: Set fern_token cookie
-    F->>F: Validate JWT and roles
-    F->>U: Show restricted content
-```
+<Markdown src="/snippets/jwt-auth-diagram.mdx"/>
 
 #### Setting up auto-populated API keys
 
@@ -142,38 +111,9 @@ To enable this feature, you need to configure OAuth authentication so that Fern
 1. After successful authentication, your OAuth provider redirects back to Fern with an authorization code, which Fern exchanges for an access token at your token endpoint.
 1. Fern sets a `fern_token` cookie containing the user's authentication credentials and automatically populates their API key in the API Explorer.
 
-### Architecture diagram
-
-```mermaid
-sequenceDiagram
-    participant U as User
-    participant F as Fern Docs
-    participant A as OAuth2 Provider
-    U->>F: Visit restricted page
-    F->>F: Check fern_token cookie
-    
-    alt Cookie exists
-        F->>F: Decode cookie
-        F->>F: Verify authentication credentials
-        Note over F: Attempt to refresh the token, if expired
-        
-        alt User is properly authenticated
-            F->>U: Show restricted content
-        else User is not properly authenticated
-            F->>U: User is shown a 404 page
-        end
-    else No cookie
-        F->>A: Redirect to `/authenticate` endpoint
-        A->>U: User authenticates
-        U->>F: Authorization code is returned
-        F->>A: Redirect to `/token` endpoint
-        A->>A: Validate token request
-        A->>F: Send authenticated access token
-        F->>F: Set fern_token cookie
-        F->>F: Verify authentication credentials
-        F->>U: Show restricted content
-    end
-```
+#### Architecture diagram
+
+<Markdown src="/snippets/oauth-diagram.mdx"/>
 
 #### Setting up auto-populated API keys
 

fern/products/docs/pages/authentication/rbac.mdx

@@ -51,6 +51,7 @@ Fern expects the user's browser session to have a cookie called `fern_token`. If
 the cookie is not present, the user will be redirected to your company's login
 page.
 
+Below, we walk through each of the steps required to configure RBAC with either JWT or OAuth.
 
 <AccordionGroup>
 <Accordion title="JWT">
@@ -64,19 +65,19 @@ page.
 }
 ```
 
-For more information on this flow, see [Auto-populate API keys](/docs/api-references/autopopulate-api-key#jwt)
+<Markdown src="/snippets/jwt-auth-diagram.mdx"/>
+
 </Accordion>
 <Accordion title="OAuth">
 
 Fern initiates an OAuth flow when the user needs authentication, redirecting them to your authentication endpoint. Fern creates and sets the `fern-token` cookie after completing this flow. 
 You are responsible for configuring your OAuth endpoints to return user role information. 
 
-For more information on this flow, see [Auto-populate API keys](/docs/api-references/autopopulate-api-key#oauth)
+<Markdown src="/snippets/oauth-diagram.mdx"/>
+
 </Accordion>
 </AccordionGroup>
 
-
-
 ### Contact Fern for setup
 
 When you're ready to implement RBAC, **contact [email protected]**.

fern/snippets/jwt-auth-diagram.mdx

@@ -0,0 +1,32 @@
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant F as Fern Docs
+    participant R as Redirect URL
+    participant A as Auth System
+
+    U->>F: Visit restricted page
+    F->>F: Check fern_token cookie
+    
+    alt Cookie exists
+        F->>F: Decode JWT with secret key
+        F->>F: Extract roles from JWT
+        F->>F: Check if user has required role
+        
+        alt User has required role
+            F->>U: Show restricted content
+        else User lacks required role
+            F->>U: User is shown a 404 page
+        end
+    else No cookie
+        F->>R: Redirect to login page
+        R->>A: Authenticate user
+    end
+    
+    Note over A: User logs in
+    
+    A->>A: Generate JWT with roles
+    A->>F: Set fern_token cookie
+    F->>F: Validate JWT and roles
+    F->>U: Show restricted content
+```

fern/snippets/oauth-diagram.mdx

@@ -0,0 +1,30 @@
+```mermaid
+sequenceDiagram
+    participant U as User
+    participant F as Fern Docs
+    participant A as OAuth2 Provider
+    U->>F: Visit restricted page
+    F->>F: Check fern_token cookie
+    
+    alt Cookie exists
+        F->>F: Decode cookie
+        F->>F: Verify authentication credentials
+        Note over F: Attempt to refresh the token, if expired
+        
+        alt User is properly authenticated
+            F->>U: Show restricted content
+        else User is not properly authenticated
+            F->>U: User is shown a 404 page
+        end
+    else No cookie
+        F->>A: Redirect to `/authenticate` endpoint
+        A->>U: User authenticates
+        U->>F: Authorization code is returned
+        F->>A: Redirect to `/token` endpoint
+        A->>A: Validate token request
+        A->>F: Send authenticated access token
+        F->>F: Set fern_token cookie
+        F->>F: Verify authentication credentials
+        F->>U: Show restricted content
+    end
+```