docs(usage): add documentation for Prowler App usage (#5885)

Co-authored-by: Rubén De la Torre Vico <rubendltv22@gmail.com>

docs/index.md

@@ -231,6 +231,42 @@ We have deprecated some of our outputs formats:
 - To send only FAILS to AWS Security Hub, now use either `--send-sh-only-fails` or `--security-hub --status FAIL`.
 
 ## Basic Usage
+### Prowler App
+
+#### **Access the App**
+Go to [http://localhost:3000](http://localhost:3000) after installing the app (see [Quick Start](#prowler-app-installation)). Sign up with your email and password.
+
+<img src="img/sign-up-button.png" alt="Sign Up Button" width="320"/>
+<img src="img/sign-up.png" alt="Sign Up" width="285"/>
+
+#### **Log In**
+Log in with your email and password to start using the Prowler App.
+
+<img src="img/log-in.png" alt="Log In" width="285"/>
+
+#### **Add a Provider**
+- Go to `Settings > Providers` and click `Add Account`.
+- Select the provider you want to scan (AWS, GCP, Azure, Kubernetes).
+- Enter the provider's ID (AWS Account ID, GCP Project ID, Azure Subscription ID, Kubernetes Cluster) and optional alias.
+- Follow the instructions to add your credentials.
+
+#### **Start a Scan**
+Once your credentials are added and tested, click `Start Now` to run your first scan.
+
+#### **View Results**
+Monitor your scan's progress in the `Scans` section and analyze the findings in:
+
+- **Overview**: High-level summary of the scan.
+- **Findings**: Detailed list of issues detected. <img src="img/findings.png" alt="Findings" width="700"/>
+- **Compliance**: Insights into compliance status. <img src="img/compliance.png" alt="Compliance" width="700"/>
+- **Services**: Breakdown of services scanned. <img src="img/services.png" alt="Services" width="700"/>
+
+> See more details about the Prowler App usage in the [Prowler App](tutorials/prowler-app.md) section.
+
+???+ note
+    Prowler will automatically scan all configured providers every **24 hours**, ensuring your cloud environment stays continuously monitored.
+
+### Prowler CLI
 
 To run Prowler, you will need to specify the provider (e.g `aws`, `gcp`, `azure` or `kubernetes`):
 
@@ -289,7 +325,7 @@ You can always use `-h`/`--help` to access to the usage information and all the
 prowler --help
 ```
 
-### AWS
+#### AWS
 
 Use a custom AWS profile with `-p`/`--profile` and/or AWS regions which you want to audit with `-f`/`--filter-region`:
 
@@ -302,7 +338,7 @@ prowler aws --profile custom-profile -f us-east-1 eu-south-2
 
 See more details about AWS Authentication in [Requirements](getting-started/requirements.md#aws)
 
-### Azure
+#### Azure
 
 With Azure you need to specify which auth method is going to be used:
 
@@ -327,7 +363,7 @@ Prowler by default scans all the subscriptions that is allowed to scan, if you w
 prowler azure --az-cli-auth --subscription-ids <subscription ID 1> <subscription ID 2> ... <subscription ID N>
 ```
 
-### Google Cloud
+#### Google Cloud
 
 Prowler will use by default your User Account credentials, you can configure it using:
 
@@ -349,7 +385,7 @@ prowler gcp --project-ids <Project ID 1> <Project ID 2> ... <Project ID N>
 
 See more details about GCP Authentication in [Requirements](getting-started/requirements.md#google-cloud)
 
-### Kubernetes
+#### Kubernetes
 
 Prowler allows you to scan your Kubernetes Cluster either from within the cluster or from outside the cluster.
 

docs/tutorials/azure/create-prowler-service-principal.md

@@ -11,7 +11,7 @@ To allow Prowler assume an identity to start the scan with the required privileg
 7. Fill the "Description" and "Expires" fields and click on "Add"
 8. Copy the value of the secret, it is going to be used as `AZURE_CLIENT_SECRET` environment variable.
 
-![Register an Application page](../../img/create-sp.gif)
+![Register an Application page](../img/create-sp.gif)
 
 ## Assigning the proper permissions
 

docs/tutorials/prowler-app.md

@@ -0,0 +1,125 @@
+# Prowler App
+
+The **Prowler App** is a user-friendly interface for the Prowler CLI, providing a visual dashboard to monitor your cloud security posture. This tutorial will guide you through setting up and using the Prowler App.
+
+After installing the **Prowler App**, access it at [http://localhost:3000](http://localhost:3000).
+You can also access to the auto-generated **Prowler API** documentation at [http://localhost:8080/api/v1/docs](http://localhost:8080/api/v1/docs) to see all the available endpoints, parameters and responses.
+
+## **Step 1: Sign Up**
+To get started, sign up using your email and password:
+
+<img src="../../img/sign-up-button.png" alt="Sign Up Button" width="320"/>
+<img src="../../img/sign-up.png" alt="Sign Up" width="285"/>
+
+---
+
+## **Step 2: Log In**
+Once you’ve signed up, log in with your email and password to start using the Prowler App.
+
+<img src="../../img/log-in.png" alt="Log In" width="350"/>
+
+---
+
+## **Step 3: Add a Provider**
+To run your first scan:
+
+1. Navigate to `Settings > Providers`.
+2. Click `Add Account` to set up a new provider and provide your credentials:
+
+<img src="../../img/add-provider.png" alt="Add Provider" width="700"/>
+
+---
+
+## **Step 4: Configure the Provider**
+Choose the provider you want to scan from the following options:
+
+- **AWS**: Enter your AWS Account ID.
+- **GCP**: Enter your GCP Project ID.
+- **Azure**: Enter your Azure Subscription ID.
+- **Kubernetes**: Enter your Kubernetes Cluster name.
+
+Optionally, provide a **Provider Alias** for easier identification. Follow the instructions provided to add your credentials:
+
+<img src="../../img/add-account.png" alt="Add Account" width="700"/>
+
+---
+### **Step 4.1: AWS Credentials**
+For AWS, Prowler App can use either IAM Access Keys or assume an IAM Role. Here’s how to set up each:
+
+#### **Step 4.1.1: IAM Access Keys**
+1. Select `Connect via Credentials`.
+
+    <img src="../../img/connect-aws-credentials.png" alt="AWS Credentials" width="350"/>
+
+2. Enter your `Access Key ID`, `Secret Access Key` and optionally a `Session Token`:
+
+    <img src="../../img/aws-credentials.png" alt="AWS Credentials" width="350"/>
+
+#### **Step 4.1.2: IAM Role**
+1. Select `Connect assuming IAM Role`.
+
+    <img src="../../img/connect-aws-role.png" alt="AWS Role" width="350"/>
+
+2. Enter the `Role ARN` and any optional field like the AWS Access Keys to assume the role, the `External ID`, the `Role Session Name` or the `Session Duration`:
+
+    <img src="../../img/aws-role.png" alt="AWS Role" width="700"/>
+
+---
+
+### **Step 4.2: Azure Credentials**
+For Azure, Prowler App uses a Service Principal to authenticate. See the steps in https://docs.prowler.com/projects/prowler-open-source/en/latest/tutorials/azure/create-prowler-service-principal/ to create a Service Principal. Then, enter the `Tenant ID`, `Client ID` and `Client Secret` of the Service Principal.
+
+<img src="../../img/azure-credentials.png" alt="Azure Credentials" width="700"/>
+
+---
+### **Step 4.3: GCP Credentials**
+To connect your GCP Project, you need to use the Application Default Credentials (ADC) returned by the `gcloud` CLI. Here’s how to set up:
+
+1. Run the following command in your terminal to authenticate with GCP:
+```bash
+gcloud auth application-default login
+```
+2. Once authenticated, get the `Client ID`, `Client Secret` and `Refresh Token` from `~/.config/gcloud/application_default_credentials`.
+3. Paste the `Client ID`, `Client Secret` and `Refresh Token` into the Prowler App.
+
+<img src="../../img/gcp-credentials.png" alt="GCP Credentials" width="700"/>
+
+---
+### **Step 4.4: Kubernetes Credentials**
+For Kubernetes, Prowler App uses a `kubeconfig` file to authenticate, paste the contents of your `kubeconfig` file into the `Kubeconfig content` field.
+
+By default, the `kubeconfig` file is located at `~/.kube/config`.
+
+<img src="../../img/kubernetes-credentials.png" alt="Kubernetes Credentials" width="700"/>
+
+---
+
+## **Step 5: Test Connection**
+After adding your credentials of your cloud account, click the `Test Connection` button to verify that the Prowler App can successfully connect to your provider:
+
+<img src="../../img/test-connection-button.png" alt="Test Connection" width="700"/>
+
+
+## **Step 6: Start Your First Scan**
+After successfully adding and testing your credentials, click the `Start Now` button to initiate your first scan:
+
+<img src="../../img/start-now.png" alt="Start Now" width="700"/>
+
+???+ note
+    Prowler will automatically scan all configured providers every **24 hours**, ensuring your cloud environment stays continuously monitored.
+---
+
+## **Step 7: Monitor Scan Progress**
+Track the progress of your scan in the `Scans` section:
+
+<img src="../../img/scan-progress.png" alt="Scan Progress" width="700"/>
+
+---
+
+## **Step 8: Analyze the Findings**
+While the scan is running, start exploring the findings in these sections:
+
+- **Overview**: High-level summary of the scan.
+- **Findings**: Detailed list of issues detected. <img src="../../img/findings.png" alt="Findings" width="700"/>
+- **Compliance**: Insights into compliance status. <img src="../../img/compliance.png" alt="Compliance" width="700"/>
+- **Services**: Breakdown of services scanned. <img src="../../img/services.png" alt="Services" width="700"/>

mkdocs.yml

@@ -49,6 +49,7 @@ nav:
       - Overview: index.md
       - Requirements: getting-started/requirements.md
   - Tutorials:
+      - Prowler App: tutorials/prowler-app.md
       - Miscellaneous: tutorials/misc.md
       - Reporting: tutorials/reporting.md
       - Compliance: tutorials/compliance.md