From ad67af7e89b7fc8db1a718a50b330c37f496097b Mon Sep 17 00:00:00 2001
From: "joel@joellee.org" <joel@joellee.org>
Date: Sun, 9 Apr 2023 01:22:34 +0800
Subject: [PATCH] docs: add accordion with branch for each flow

---
 .../guides/auth/server-side-rendering.mdx     | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/apps/docs/pages/guides/auth/server-side-rendering.mdx b/apps/docs/pages/guides/auth/server-side-rendering.mdx
index 87235781711..236cc747db3 100644
--- a/apps/docs/pages/guides/auth/server-side-rendering.mdx
+++ b/apps/docs/pages/guides/auth/server-side-rendering.mdx
@@ -1,4 +1,6 @@
 import Layout from '~/layouts/DefaultGuideLayout'
+import { Accordion } from 'ui'
+import ReactMarkdown from 'react-markdown'
 
 export const meta = {
   id: 'server-side-rendering',
@@ -55,8 +57,24 @@ like `*` and `**` to allow redirects to different forms of URLs.
 
 </Admonition>
 
-These redirect URLs have the following structure:
+Users can choose between one of two flows:
 
+<Accordion
+  type="default"
+  openBehaviour="multiple"
+  chevronAlign="right"
+  justified
+  size="medium"
+  className="text-scale-900 dark:text-white"
+  >
+    <div className="border-b pb-3">
+
+<Accordion.Item
+                          header={<span className="text-scale-1200">Implicit</span>}
+                          id={`implicit-flow`}
+                        >
+
+These redirect URLs have the following structure:
 ```
 https://yourapp.com/...#access_token=<...>&refresh_token=<...>&...
 ```
@@ -78,9 +96,23 @@ providers), we want to prevent hosting services from getting access to your
 user's authorization credentials by default. Even if the server is under your
 direct control, `GET` requests and their full URLs are often logged. This
 approach also avoids leaking credentials in request or access logs.
-
 </Admonition>
 
+  </Accordion.Item>
+  </div>
+    <div className="border-b pb-3">
+
+<Accordion.Item
+                          header={<span className="text-scale-1200">PKCE</span>}
+                          id={`pkce-flow`}
+                        >
+
+  Test
+  </Accordion.Item>
+    </div>
+
+</Accordion>
+
 ## Bringing it together
 
 As seen from the authentication flow, the initial request after successful