feat: #6015 add apps content (#6326)

* feat: #6015 adds apps flow content * chore: pre-push fixes
reapit · Mar 8, 2022 · 67d4bad · 67d4bad
1 parent cfb4bb3
commit 67d4bad
Show file tree

Hide file tree

Showing 128 changed files with 3,824 additions and 1,700 deletions.
diff --git a/.yarn/cache/@hapi-accept-npm-5.0.2-cfe21ffd1e-8088cbc245.zip b/.yarn/cache/@hapi-accept-npm-5.0.2-cfe21ffd1e-8088cbc245.zip
diff --git a/.yarn/cache/@hapi-ammo-npm-5.0.1-d291bec44f-94b8e622ad.zip b/.yarn/cache/@hapi-ammo-npm-5.0.1-d291bec44f-94b8e622ad.zip
diff --git a/.yarn/cache/@hapi-b64-npm-5.0.0-eef9cf5e2f-1e166bc9a6.zip b/.yarn/cache/@hapi-b64-npm-5.0.0-eef9cf5e2f-1e166bc9a6.zip
diff --git a/.yarn/cache/@hapi-boom-npm-9.1.4-1a3569656a-b1cdde1e82.zip b/.yarn/cache/@hapi-boom-npm-9.1.4-1a3569656a-b1cdde1e82.zip
diff --git a/.yarn/cache/@hapi-bounce-npm-2.0.0-ec201eb15b-36cb6bacc5.zip b/.yarn/cache/@hapi-bounce-npm-2.0.0-ec201eb15b-36cb6bacc5.zip
diff --git a/.yarn/cache/@hapi-call-npm-8.0.1-b70df75f00-7b8f49368a.zip b/.yarn/cache/@hapi-call-npm-8.0.1-b70df75f00-7b8f49368a.zip
diff --git a/.yarn/cache/@hapi-catbox-memory-npm-5.0.1-8b8f548f6c-135c204d46.zip b/.yarn/cache/@hapi-catbox-memory-npm-5.0.1-8b8f548f6c-135c204d46.zip
diff --git a/.yarn/cache/@hapi-catbox-npm-11.1.1-c524a2a973-15e116bf34.zip b/.yarn/cache/@hapi-catbox-npm-11.1.1-c524a2a973-15e116bf34.zip
diff --git a/.yarn/cache/@hapi-content-npm-5.0.2-fc70c32868-62d944412c.zip b/.yarn/cache/@hapi-content-npm-5.0.2-fc70c32868-62d944412c.zip
diff --git a/.yarn/cache/@hapi-cryptiles-npm-5.1.0-828c4c614b-3109ad8435.zip b/.yarn/cache/@hapi-cryptiles-npm-5.1.0-828c4c614b-3109ad8435.zip
diff --git a/.yarn/cache/@hapi-file-npm-2.0.0-81f769dce5-0d5f7fd5a1.zip b/.yarn/cache/@hapi-file-npm-2.0.0-81f769dce5-0d5f7fd5a1.zip
diff --git a/.yarn/cache/@hapi-h2o2-npm-9.1.0-13d7df439a-88f8cd39c8.zip b/.yarn/cache/@hapi-h2o2-npm-9.1.0-13d7df439a-88f8cd39c8.zip
diff --git a/.yarn/cache/@hapi-hapi-npm-20.2.1-114c657a67-5334b125b5.zip b/.yarn/cache/@hapi-hapi-npm-20.2.1-114c657a67-5334b125b5.zip
diff --git a/.yarn/cache/@hapi-heavy-npm-7.0.1-29a31e6ad5-bca3272ab3.zip b/.yarn/cache/@hapi-heavy-npm-7.0.1-29a31e6ad5-bca3272ab3.zip
diff --git a/.yarn/cache/@hapi-hoek-npm-9.2.1-5e7f2fab98-6a439f672d.zip b/.yarn/cache/@hapi-hoek-npm-9.2.1-5e7f2fab98-6a439f672d.zip
diff --git a/.yarn/cache/@hapi-iron-npm-6.0.0-0249710989-ef07abc8a5.zip b/.yarn/cache/@hapi-iron-npm-6.0.0-0249710989-ef07abc8a5.zip
diff --git a/.yarn/cache/@hapi-mimos-npm-6.0.0-0b69d976ef-99dd850303.zip b/.yarn/cache/@hapi-mimos-npm-6.0.0-0b69d976ef-99dd850303.zip
diff --git a/.yarn/cache/@hapi-nigel-npm-4.0.2-f61c7f21ab-ea89707d5f.zip b/.yarn/cache/@hapi-nigel-npm-4.0.2-f61c7f21ab-ea89707d5f.zip
diff --git a/.yarn/cache/@hapi-pez-npm-5.0.3-c31e9e6e8a-caa91db754.zip b/.yarn/cache/@hapi-pez-npm-5.0.3-c31e9e6e8a-caa91db754.zip
diff --git a/.yarn/cache/@hapi-podium-npm-4.1.3-f827958aad-da7d02af93.zip b/.yarn/cache/@hapi-podium-npm-4.1.3-f827958aad-da7d02af93.zip
diff --git a/.yarn/cache/@hapi-shot-npm-5.0.5-e87e4ffa1f-b56535d4e6.zip b/.yarn/cache/@hapi-shot-npm-5.0.5-e87e4ffa1f-b56535d4e6.zip
diff --git a/.yarn/cache/@hapi-somever-npm-3.0.1-ad5c75fcea-e1b9d0af14.zip b/.yarn/cache/@hapi-somever-npm-3.0.1-ad5c75fcea-e1b9d0af14.zip
diff --git a/.yarn/cache/@hapi-statehood-npm-7.0.3-ebbbd26897-6b8f43104b.zip b/.yarn/cache/@hapi-statehood-npm-7.0.3-ebbbd26897-6b8f43104b.zip
diff --git a/.yarn/cache/@hapi-subtext-npm-7.0.3-3eaadfd0ac-f10702ba7a.zip b/.yarn/cache/@hapi-subtext-npm-7.0.3-3eaadfd0ac-f10702ba7a.zip
diff --git a/.yarn/cache/@hapi-teamwork-npm-5.1.0-6cae7d2247-cd63182f88.zip b/.yarn/cache/@hapi-teamwork-npm-5.1.0-6cae7d2247-cd63182f88.zip
diff --git a/.yarn/cache/@hapi-topo-npm-5.1.0-5e0b776809-604dfd5dde.zip b/.yarn/cache/@hapi-topo-npm-5.1.0-5e0b776809-604dfd5dde.zip
diff --git a/.yarn/cache/@hapi-validate-npm-1.1.3-213070131c-dd6f8d6e33.zip b/.yarn/cache/@hapi-validate-npm-1.1.3-213070131c-dd6f8d6e33.zip
diff --git a/.yarn/cache/@hapi-vise-npm-4.0.0-987b95374e-ddee101b4d.zip b/.yarn/cache/@hapi-vise-npm-4.0.0-987b95374e-ddee101b4d.zip
diff --git a/.yarn/cache/@hapi-wreck-npm-17.1.0-bed654125d-4a9e27b939.zip b/.yarn/cache/@hapi-wreck-npm-17.1.0-bed654125d-4a9e27b939.zip
diff --git a/.yarn/cache/aws-sdk-npm-2.1088.0-439e89bbc2-5abe5b13d5.zip b/.yarn/cache/aws-sdk-npm-2.1088.0-439e89bbc2-5abe5b13d5.zip
diff --git a/.yarn/cache/cron-parser-npm-2.18.0-6de47baf74-c0fcb3922c.zip b/.yarn/cache/cron-parser-npm-2.18.0-6de47baf74-c0fcb3922c.zip
diff --git a/.yarn/cache/cuid-npm-2.1.8-0cc1c6a48a-12b85b3f51.zip b/.yarn/cache/cuid-npm-2.1.8-0cc1c6a48a-12b85b3f51.zip
diff --git a/.yarn/cache/debug-npm-4.3.3-710fd4cc7f-14472d56fe.zip b/.yarn/cache/debug-npm-4.3.3-710fd4cc7f-14472d56fe.zip
diff --git a/.yarn/cache/execa-npm-5.1.1-191347acf5-fba9022c8c.zip b/.yarn/cache/execa-npm-5.1.1-191347acf5-fba9022c8c.zip
diff --git a/.yarn/cache/java-invoke-local-npm-0.0.6-66a0e38326-5b1ff6e678.zip b/.yarn/cache/java-invoke-local-npm-0.0.6-66a0e38326-5b1ff6e678.zip
diff --git a/.yarn/cache/jmespath-npm-0.16.0-d47535c65a-2d602493a1.zip b/.yarn/cache/jmespath-npm-0.16.0-d47535c65a-2d602493a1.zip
diff --git a/.yarn/cache/jsonpath-plus-npm-5.1.0-c9c967db9b-0ebb56b4b0.zip b/.yarn/cache/jsonpath-plus-npm-5.1.0-c9c967db9b-0ebb56b4b0.zip
diff --git a/.yarn/cache/long-timeout-npm-0.1.1-229e1d81ad-48668e5362.zip b/.yarn/cache/long-timeout-npm-0.1.1-229e1d81ad-48668e5362.zip
diff --git a/.yarn/cache/luxon-npm-1.28.0-51c0607a71-5250cb9f13.zip b/.yarn/cache/luxon-npm-1.28.0-51c0607a71-5250cb9f13.zip
diff --git a/.yarn/cache/mime-db-npm-1.52.0-b5371d6fd2-0d99a03585.zip b/.yarn/cache/mime-db-npm-1.52.0-b5371d6fd2-0d99a03585.zip
diff --git a/.yarn/cache/moment-timezone-npm-0.5.34-e4fe2d01f6-12a1d3d52e.zip b/.yarn/cache/moment-timezone-npm-0.5.34-e4fe2d01f6-12a1d3d52e.zip
diff --git a/.yarn/cache/node-schedule-npm-1.3.3-f3045df514-f7c5b4a6de.zip b/.yarn/cache/node-schedule-npm-1.3.3-f3045df514-f7c5b4a6de.zip
diff --git a/.yarn/cache/p-memoize-npm-4.0.4-53a124387c-64bcd13b03.zip b/.yarn/cache/p-memoize-npm-4.0.4-53a124387c-64bcd13b03.zip
diff --git a/.yarn/cache/p-reflect-npm-2.1.0-3e8a379d2e-eed3df781b.zip b/.yarn/cache/p-reflect-npm-2.1.0-3e8a379d2e-eed3df781b.zip
diff --git a/.yarn/cache/p-settle-npm-4.1.1-5a4b6d89f6-83b3dcffef.zip b/.yarn/cache/p-settle-npm-4.1.1-5a4b6d89f6-83b3dcffef.zip
diff --git a/.yarn/cache/please-upgrade-node-npm-3.2.0-3f653350ed-d87c41581a.zip b/.yarn/cache/please-upgrade-node-npm-3.2.0-3f653350ed-d87c41581a.zip
diff --git a/.yarn/cache/serverless-offline-npm-8.5.0-bf698dbaa2-0b69625f5d.zip b/.yarn/cache/serverless-offline-npm-8.5.0-bf698dbaa2-0b69625f5d.zip
diff --git a/.yarn/cache/sorted-array-functions-npm-1.3.0-19f7959640-673fd39ca3.zip b/.yarn/cache/sorted-array-functions-npm-1.3.0-19f7959640-673fd39ca3.zip
diff --git a/.yarn/cache/velocityjs-npm-2.0.6-d43b6433e3-06856fbf79.zip b/.yarn/cache/velocityjs-npm-2.0.6-d43b6433e3-06856fbf79.zip
diff --git a/.yarn/cache/ws-npm-7.5.7-6cc440864a-5c1f669a16.zip b/.yarn/cache/ws-npm-7.5.7-6cc440864a-5c1f669a16.zip
diff --git a/packages/api-key-service/package.json b/packages/api-key-service/package.json
@@ -23,6 +23,7 @@
     "eslint-plugin-prettier": "^4.0.0",
     "jest": "27.4.5",
     "serverless": "^2.69.1",
+    "serverless-offline": "^8.5.0",
     "serverless-plugin-log-retention": "^2.0.0"
   },
   "scripts": {

diff --git a/...loper-portal/src/components/pages/apps/detail/__tests__/__snapshots__/index.test.tsx.snap b/...loper-portal/src/components/pages/apps/detail/__tests__/__snapshots__/index.test.tsx.snap
@@ -9,10 +9,45 @@ Object {
         class="ecbqyq6-el-snack-holder"
       />
       <h1
-        class="e2dm5rh-el-title"
+        class="evblxhy-el-title"
       >
         will-test-dev-co-voracious-person
       </h1>
+      <h2
+        class="e1byern-el-subtitle"
+      >
+        Authenticating Your App
+      </h2>
+      <p
+        class="e11jaxfn-el-has-grey-text e15ggth7-el-body-text"
+      >
+        Client Side Apps use our identity provider
+         
+        <a>
+          Reapit Connect
+        </a>
+         to authenticate against our API. Your application will need to re-direct to Reapit Connect where we will handle user login and in turn, re-direct back to your app with a code in the url that you exchange for access and id JWTs, referred to as
+         
+        <a>
+          Authorization Code flow.
+        </a>
+         You will need the Client Id and Redirect Uris below to configure Reapit Connect.
+      </p>
+      <p
+        class="e11jaxfn-el-has-grey-text etrchfm-el-has-section-margin e15ggth7-el-body-text"
+      >
+        To make this process easier, we provide you with an authentication module for client-side apps,
+         
+        <a>
+          Connect Session
+        </a>
+        , which comes bundled with our
+         
+        <a>
+          Create React App Template
+        </a>
+         for quick start client-side development.
+      </p>
       <div
         class="e20pb60-el-grid"
       >
@@ -48,12 +83,12 @@ Object {
             </span>
             <div>
               <h2
-                class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+                class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
               >
                 Authentication Client Id
               </h2>
               <p
-                class="e11jaxfn-el-has-grey-text e1byern-el-body-text"
+                class="e11jaxfn-el-has-grey-text e15ggth7-el-body-text"
               >
                 MOCK_EXTERNAL_ID
               </p>
@@ -106,12 +141,12 @@ Object {
             </span>
             <div>
               <h2
-                class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+                class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
               >
                 Authentication Client Secret
               </h2>
               <p
-                class="e11jaxfn-el-has-grey-text e1byern-el-body-text"
+                class="e11jaxfn-el-has-grey-text e15ggth7-el-body-text"
               >
                 MOCK_EXTERNAL_ID
               </p>
@@ -224,12 +259,12 @@ Object {
             </span>
             <div>
               <h2
-                class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+                class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
               >
                 App Id
               </h2>
               <p
-                class="e11jaxfn-el-has-grey-text e1byern-el-body-text"
+                class="e11jaxfn-el-has-grey-text e15ggth7-el-body-text"
               >
                 MOCK_APP_ID
               </p>
@@ -245,12 +280,12 @@ Object {
           class="e14pp0yd-el-col"
         >
           <h2
-            class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+            class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
           >
             Redirect Uri(s)
           </h2>
           <p
-            class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e1byern-el-body-text"
+            class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e15ggth7-el-body-text"
           >
             https://foo.bar
           </p>
@@ -259,12 +294,12 @@ Object {
           class="e14pp0yd-el-col"
         >
           <h2
-            class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+            class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
           >
             Sign Out Uri(s)
           </h2>
           <p
-            class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e1byern-el-body-text"
+            class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e15ggth7-el-body-text"
           >
             https://foo.bar
           </p>
@@ -276,12 +311,12 @@ Object {
             class="e14pp0yd-el-col"
           >
             <h2
-              class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+              class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
             >
               Integration Type
             </h2>
             <p
-              class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e1byern-el-body-text"
+              class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e15ggth7-el-body-text"
             >
               You have a client side authenticated integration that will not render within the AgencyCloud desktop CRM
             </p>
@@ -294,12 +329,12 @@ Object {
             class="e14pp0yd-el-col"
           >
             <h2
-              class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+              class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
             >
               App Status
             </h2>
             <p
-              class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e1byern-el-body-text"
+              class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e15ggth7-el-body-text"
             >
               Your app is live and public in the AppMarket with a pending revision under review
             </p>
@@ -309,7 +344,7 @@ Object {
           class="e14pp0yd-el-col"
         >
           <h2
-            class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+            class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
           >
             Permissions
           </h2>
@@ -337,10 +372,45 @@ Object {
       class="ecbqyq6-el-snack-holder"
     />
     <h1
-      class="e2dm5rh-el-title"
+      class="evblxhy-el-title"
     >
       will-test-dev-co-voracious-person
     </h1>
+    <h2
+      class="e1byern-el-subtitle"
+    >
+      Authenticating Your App
+    </h2>
+    <p
+      class="e11jaxfn-el-has-grey-text e15ggth7-el-body-text"
+    >
+      Client Side Apps use our identity provider
+       
+      <a>
+        Reapit Connect
+      </a>
+       to authenticate against our API. Your application will need to re-direct to Reapit Connect where we will handle user login and in turn, re-direct back to your app with a code in the url that you exchange for access and id JWTs, referred to as
+       
+      <a>
+        Authorization Code flow.
+      </a>
+       You will need the Client Id and Redirect Uris below to configure Reapit Connect.
+    </p>
+    <p
+      class="e11jaxfn-el-has-grey-text etrchfm-el-has-section-margin e15ggth7-el-body-text"
+    >
+      To make this process easier, we provide you with an authentication module for client-side apps,
+       
+      <a>
+        Connect Session
+      </a>
+      , which comes bundled with our
+       
+      <a>
+        Create React App Template
+      </a>
+       for quick start client-side development.
+    </p>
     <div
       class="e20pb60-el-grid"
     >
@@ -376,12 +446,12 @@ Object {
           </span>
           <div>
             <h2
-              class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+              class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
             >
               Authentication Client Id
             </h2>
             <p
-              class="e11jaxfn-el-has-grey-text e1byern-el-body-text"
+              class="e11jaxfn-el-has-grey-text e15ggth7-el-body-text"
             >
               MOCK_EXTERNAL_ID
             </p>
@@ -434,12 +504,12 @@ Object {
           </span>
           <div>
             <h2
-              class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+              class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
             >
               Authentication Client Secret
             </h2>
             <p
-              class="e11jaxfn-el-has-grey-text e1byern-el-body-text"
+              class="e11jaxfn-el-has-grey-text e15ggth7-el-body-text"
             >
               MOCK_EXTERNAL_ID
             </p>
@@ -552,12 +622,12 @@ Object {
           </span>
           <div>
             <h2
-              class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+              class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
             >
               App Id
             </h2>
             <p
-              class="e11jaxfn-el-has-grey-text e1byern-el-body-text"
+              class="e11jaxfn-el-has-grey-text e15ggth7-el-body-text"
             >
               MOCK_APP_ID
             </p>
@@ -573,12 +643,12 @@ Object {
         class="e14pp0yd-el-col"
       >
         <h2
-          class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+          class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
         >
           Redirect Uri(s)
         </h2>
         <p
-          class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e1byern-el-body-text"
+          class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e15ggth7-el-body-text"
         >
           https://foo.bar
         </p>
@@ -587,12 +657,12 @@ Object {
         class="e14pp0yd-el-col"
       >
         <h2
-          class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+          class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
         >
           Sign Out Uri(s)
         </h2>
         <p
-          class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e1byern-el-body-text"
+          class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e15ggth7-el-body-text"
         >
           https://foo.bar
         </p>
@@ -604,12 +674,12 @@ Object {
           class="e14pp0yd-el-col"
         >
           <h2
-            class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+            class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
           >
             Integration Type
           </h2>
           <p
-            class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e1byern-el-body-text"
+            class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e15ggth7-el-body-text"
           >
             You have a client side authenticated integration that will not render within the AgencyCloud desktop CRM
           </p>
@@ -622,12 +692,12 @@ Object {
           class="e14pp0yd-el-col"
         >
           <h2
-            class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+            class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
           >
             App Status
           </h2>
           <p
-            class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e1byern-el-body-text"
+            class="e11jaxfn-el-has-grey-text ewfctk4-el-has-no-margin e15ggth7-el-body-text"
           >
             Your app is live and public in the AppMarket with a pending revision under review
           </p>
@@ -637,7 +707,7 @@ Object {
         class="e14pp0yd-el-col"
       >
         <h2
-          class="ewfctk4-el-has-no-margin evblxhy-el-subtitle"
+          class="ewfctk4-el-has-no-margin e1byern-el-subtitle"
         >
           Permissions
         </h2>

diff --git a/packages/developer-portal/src/components/pages/apps/detail/index.tsx b/packages/developer-portal/src/components/pages/apps/detail/index.tsx
@@ -21,6 +21,7 @@ import { useReapitGet } from '@reapit/utils-react'
 import { GetActionNames, getActions } from '@reapit/utils-common'
 import { reapitConnectBrowserSession } from '../../../../core/connect-session'
 import { PermissionChip } from './__styles__'
+import { ExternalPages, openNewPage } from '../../../../utils/navigation'
 
 export interface CopyState {
   externalId: string
@@ -96,6 +97,42 @@ export const AppDetail: FC = () => {
   ) : appDetail ? (
     <>
       <Title>{name}</Title>
+      <Subtitle>Authenticating Your App</Subtitle>
+      {authFlow === 'authorisationCode' && (
+        <>
+          <BodyText hasGreyText>
+            Client Side Apps use our identity provider{' '}
+            <a onClick={openNewPage(ExternalPages.reapitConnectDocs)}>Reapit Connect</a> to authenticate against our
+            API. Your application will need to re-direct to Reapit Connect where we will handle user login and in turn,
+            re-direct back to your app with a code in the url that you exchange for access and id JWTs, referred to as{' '}
+            <a onClick={openNewPage(ExternalPages.authoizationFlowDocs)}>Authorization Code flow.</a> You will need the
+            Client Id and Redirect Uris below to configure Reapit Connect.
+          </BodyText>
+          <BodyText hasGreyText hasSectionMargin>
+            To make this process easier, we provide you with an authentication module for client-side apps,{' '}
+            <a onClick={openNewPage(ExternalPages.connectSessionDocs)}>Connect Session</a>, which comes bundled with our{' '}
+            <a onClick={openNewPage(ExternalPages.craDocs)}>Create React App Template</a> for quick start client-side
+            development.
+          </BodyText>
+        </>
+      )}
+      {authFlow === 'clientCredentials' && (
+        <>
+          <BodyText hasGreyText>
+            Server-side applications authenticate against our API using the{' '}
+            <a onClick={openNewPage(ExternalPages.clientCredentials)}>Client Credentials authentication flow.</a> This
+            process involves the exchange of a Client Id and Client Secret for a JWT access token to authenticate
+            against all requests.
+          </BodyText>
+          <BodyText hasGreyText hasSectionMargin>
+            To make this process easier, we provide you with a NodeJS authentication module for server-side apps,{' '}
+            <a onClick={openNewPage(ExternalPages.connectSessionDocs)}>Connect Session</a>. For developers in other back
+            end languages, you might find the{' '}
+            <a onClick={openNewPage(ExternalPages.connectSessionNodeExample)}>source code</a> helpful as an
+            implementation example.
+          </BodyText>
+        </>
+      )}
       <Grid>
         {externalId && (
           <Col>