Updated README

EstoesMoises · EstoesMoises · commit 32e828630a07 · 2025-03-18T14:03:53.000Z
diff --git a/plugins/stack-overflow-teams-backend/README.md b/plugins/stack-overflow-teams-backend/README.md
@@ -6,109 +6,56 @@ Backend counterpart of the Stack Overflow for Teams Plugin.
 
 The **Stack Overflow for Teams Backend plugin** is responsible for:
 
-  
-
--  **Indexing all questions** from the private Stack Overflow instance (an enhanced version of the existing community plugins in the Backstage repository).
-
--  **Handling API requests** via ``createStackOverflowApi`` and ``createStackOverflowService`` to the Stack Overflow instance for retrieving:
-
--  `/users`
-
--  `/tags`
-
--  `/questions`
-
-- Posting new questions via `/questions`
-
--  **Managing OAuth authentication flow** to securely access Stack Overflow private instances via ``createStackOverflowAuth``
-
-  
+- **Indexing all questions** from the private Stack Overflow instance (an enhanced version of the existing community plugins in the Backstage repository).
+- **Handling API requests** via ``createStackOverflowApi`` and ``createStackOverflowService`` to the Stack Overflow instance for retrieving:
+  - `/users`
+  - `/tags`
+  - `/questions`
+  - Posting new questions via `/questions`
+- **Managing OAuth authentication flow** to securely access Stack Overflow private instances via ``createStackOverflowAuth``
+- **Encrypts** the Stack Overflow Token before sending it as an http-only cookie to the frontend.
 
 ## OAuth Authentication Flow
 
-  
-
-The backend is the only component that directly utilizes **Stack Overflow access tokens** for requests.
-
-  
+The backend is the only component that directly utilizes the **encrypted Stack Overflow access tokens** for requests.
 
 ### **Authorization Flow Details**
 
-  
-
-![image](https://github.com/user-attachments/assets/1a7df089-c3c6-49a4-8761-38479e89214a)
-
-  
-
 #### **`/auth/start`**
 
 - Generates **PKCE Code Verifier**.
-
 - Hashes Code Verifier to obtain **Code Challenge**.
-
 - Generates a **state** (random string).
-
 - Stores **Code Verifier** and **State** in a **secure, HTTP-only cookie** accessible only to the server.
 
-  
-
 #### **`/callback`**
 
 - Retrieves the stored **Code Verifier** and **State**.
-
 - Validates that the received **state** matches the one from Stack Overflow's query string parameter.
-
 - The backend requests an **Access Token** using the stored **Code Verifier**.
-
-- Stores the **Stack Overflow Access Token** in a **secure, HTTP-only cookie**.
-
-  
-  
+- Backend **encrypts the token**, using the JWT secret stored in memory.
+- Stores the **encrypted Stack Overflow Access Token** in a **secure, HTTP-only cookie**.
 
 ## Installation
 
-  
-
 This plugin is installed via the `backstage-plugin-stack-overflow-teams-backend` package. To install it to your backend package, run the following command:
 
-  
-
 ```bash
-
-# From your root directory
-
-yarn  --cwd  packages/backend  add  backstage-plugin-stack-overflow-teams-backend
-
+yarn --cwd packages/backend add backstage-plugin-stack-overflow-teams-backend
 ```
 
-  
-
 Then add the plugin to your backend in `packages/backend/src/index.ts`:
 
-  
-
 ```ts
-
-const backend =  createBackend();
+const backend = createBackend();
 
 // ...
 
 backend.add(import('backstage-plugin-stack-overflow-teams-backend'));
-
 ```
 
-  
-
 ## Development
 
-  
-
-This plugin backend can be started in a standalone mode from directly in this
-
-package with `yarn start`. It is a limited setup that is most convenient when
-
-developing the plugin backend itself.
-
-  
+This plugin backend can be started in a standalone mode from directly in this package with `yarn start`. It is a limited setup that is most convenient when developing the plugin backend itself.
 
 If you want to run the entire project, including the frontend, run `yarn dev` from the root directory.
diff --git a/plugins/stack-overflow-teams/README.md b/plugins/stack-overflow-teams/README.md
@@ -1,132 +1,91 @@
-
 # Stack Overflow Teams Frontend Plugin
 
 This package is the **frontend component** of the `stack-overflow-teams` plugin for Backstage.
 
 ## Areas of Responsibility
 
- It provides the UI and interacts with the [backend service](https://github.com/EstoesMoises/backstage-stackoverflow/tree/main/plugins/stack-overflow-teams-backend) to fetch data from your Stack Overflow Enterprise instance.
+It provides the UI and interacts with the [backend service](https://github.com/EstoesMoises/backstage-stackoverflow/tree/main/plugins/stack-overflow-teams-backend) to fetch data from your Stack Overflow Enterprise instance.
 
 ### Backend Dependency
 
 To fully utilize this plugin, you must also install and configure the corresponding **backend package** (`backstage-plugin-stack-overflow-teams-backend`) in your Backstage backend. The frontend plugin relies on the backend for API communication and authentication handling.
 
 ## More details
 
-
 ### Enhanced `<StackOverflowSearchResultListItem />`
 
-This component, is a modified version of the [community plugin.](https://github.com/backstage/community-plugins/tree/main/workspaces/stack-overflow/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem) 
-
-It adds a more Stack Overflow like interface, adding more information such as the questions' score, user role, user reputation and timestamp for the questions.
+This component is a modified version of the [community plugin.](https://github.com/backstage/community-plugins/tree/main/workspaces/stack-overflow/plugins/stack-overflow/src/search/StackOverflowSearchResultListItem)
 
+It adds a more Stack Overflow-like interface, including additional information such as the questions' score, user role, user reputation, and timestamp.
 
 ---
 
 ### Individual Frontend Components
 
+- **`<StackOverflowMe />`**
   
+  Displays information about the authenticated user.
 
--  **`<StackOverflowMe />`**
-
-Displays information about the authenticated user.
-
+- **`<StackOverflowPostQuestionModal />`**
   
+  Provides a form for users to create a new Stack Overflow question. Once submitted, an API request is executed to create the question.
+  
+  This form listens to the `'openAskQuestionModal'` event. You can utilize this anywhere in your Backstage UI. To invoke the form, add the component to your UI along with a button that dispatches the event. Example:
 
--  **`<StackOverflowPostQuestionModal />`**
-
-Provides a form for users to create a new Stack Overflow question. Once submitted, an API request is executed to create the question.
-
-This form listens to the `'openAskQuestionModal'` event. You can utilize this anywhere in you Backstage UI, to invoque the form you must add the component to your UI, but also a button that dispatches the event. E.g.:
-
-    <SidebarItem
-    
+  ```tsx
+  <SidebarItem
     icon={StackOverflowIcon}
-    
-    onClick={() =>  window.dispatchEvent(new  Event('openAskQuestionModal'))}
-    
+    onClick={() => window.dispatchEvent(new Event('openAskQuestionModal'))}
     text="Ask a Question"
-    
-    />
-    
-    <StackOverflowPostQuestionModal  />
-
+  />
   
+  <StackOverflowPostQuestionModal />
+  ```
 
--  **`<StackOverflowQuestion />`**
-
-Retrieves questions from the API. Uses standard pagination, displaying only the first 30 API results.
-
+- **`<StackOverflowQuestion />`**
   
+  Retrieves questions from the API. Uses standard pagination, displaying only the first 30 API results.
 
--  **`<StackOverflowTags />`**
-
-Retrieves tags from the API. Uses standard pagination, displaying only the first 30 API results.
-
+- **`<StackOverflowTags />`**
   
+  Retrieves tags from the API. Uses standard pagination, displaying only the first 30 API results.
 
--  **`<StackOverflowUsers />`**
-
-Retrieves users from the API. Uses standard pagination, displaying only the first 30 API results.
-
--  **`<StackOverflowHub />`**
-
-The below various components collectively create this informative hub.
-
+- **`<StackOverflowUsers />`**
   
+  Retrieves users from the API. Uses standard pagination, displaying only the first 30 API results.
 
-## Authentication Components
-
+- **`<StackOverflowHub />`**
   
+  Various components collectively create this informative hub.
 
--  **`<StackAuthStart />`**
-
-Initiates **`/auth/start`** on the backend.
+## Authentication Components
 
+- **`<StackAuthStart />`**
   
+  Initiates **`/auth/start`** on the backend.
 
--  **`<StackAuthLoading />`**
-
-Handles loading state during authentication.
-
+- **`<StackAuthLoading />`**
   
+  Handles the loading state during authentication.
 
--  **`<StackAuthCallback />`**
-
-Receives the code and state from your Stack Overflow Enterprise instance as part of the OAuth process and initiates **`/callback`** in the backend.
-
+- **`<StackAuthCallback />`**
   
+  Receives the code and state from your Stack Overflow Enterprise instance as part of the OAuth process and initiates **`/callback`** in the backend.
 
--  **`<StackAuthSuccess />`**
-
-Displays authentication success state.
-
+- **`<StackAuthSuccess />`**
   
+  Displays authentication success state.
 
--  **`<StackAuthFailed />`**
-
-Displays authentication failure state.
-
+- **`<StackAuthFailed />`**
   
+  Displays authentication failure state.
 
 ### Page
 
+- **`<StackOverflowTeamsPage />`**
   
-
--  **`<StackOverflowTeamsPage />`**
-
-  
-
-This page triggers authentication components, it bundles and orchestrates everything for you so you don't have to use the authentication components separated. If authenticated, it will return the `<StackOverflowHub />`.
-
-  
+  This page triggers authentication components, bundles, and orchestrates everything for you so you don't have to use the authentication components separately. If authenticated, it will return the `<StackOverflowHub />`.
 
 ### API Requests
 
-  
-
-The frontend plugin creates an API Ref for StackOverflow for Teams, which can be found under the `/api` folder. **All API requests from the frontend are directed to Backstage's backend**.
-
-  
-  
-
+The frontend plugin creates an API Ref for Stack Overflow for Teams, which can be found under the `/api` folder. **All API requests from the frontend are directed to Backstage's backend**.
