docs: add MongoDB Authenticated Charts integration guide (#3080)

* docs: add MongoDB Authenticated Charts integration guide

* blur client id

* finalize mongodb charts integration

* fix audience field description

Co-authored-by: mffap <mpa@caos.ch>

Co-authored-by: mffap <mpa@caos.ch>

docs/docs/guides/integrations/authenticated-mongodb-charts.md

@@ -0,0 +1,89 @@
+---
+title: Authenticated MongoDB Charts
+---
+
+This integration guide shows how you can embed authenticated MongoDB Charts in your web application using ZITADEL as authentication provider.
+
+## Setup ZITADEL Application
+
+Before you can embed an authenticated chart in your application, you have to do a few configuration steps in ZITADEL Console.
+You will need to provide some information about your app. We recommend creating a new app to start from scratch.
+
+1. Navigate to your [Project](https://console.zitadel.ch/projects)
+1. Add a new application at the top of the page.
+1. Select Web application type and continue.
+1. Use [Authorization Code](../../apis/openidoauth/grant-types#authorization-code) in combination with [Proof Key for Code Exchange (PKCE)](../../apis/openidoauth/grant-types#proof-key-for-code-exchange).
+1. Skip the redirect settings and confirm the app creation
+1. Copy the client ID, you will need to tell MongoDB Charts about it.
+1. When you created the app, expand its _OIDC Configuration_ section, change the _Auth Token Type_ to _JWT_ and save the change.
+
+Your application configuration should now look similar to this:
+
+![Create app in console](/img/integrations/mongodb-charts-app-create-light.png)
+
+## Setup Custom JWT Provider for MongoDB Charts
+
+Configure ZITADEL as your _Custom JWT Provider_ following the [MongoDB docs](https://docs.mongodb.com/charts/configure-auth-providers/) .
+
+Configure the following values:
+- Signing Algorithm: RS256
+- Signing Key: JWK or JWKS URL
+- JWKS: https://api.zitadel.ch/oauth/v2/keys
+- Audience: Your app's client ID which you copied when you created the ZITADEL app
+
+Your configuration should look similar to this:
+
+![Configure Custom JWT Provider](/img/integrations/mongodb-charts-auth-provider-light.png)
+
+## Embedding your Chart
+
+Embed a chart into your application now, following the corresponding [MongoDB docs](https://docs.mongodb.com/charts/saas/embed-chart-jwt-auth/).
+
+If you've done the [Angular Quickstart](../../quickstarts/login/angular.md), your code could look something like this:
+
+```html
+<!-- chart.component.html -->
+<div id="chart"></div>
+```
+
+```css
+/* chart.component.css */
+div#chart {
+    height: 500px;    
+}
+```
+
+```ts
+// chart.component.ts
+import { Component, OnInit } from '@angular/core';
+import ChartsEmbedSDK from "@mongodb-js/charts-embed-dom";
+import { AuthenticationService } from 'src/app/services/authentication.service';
+
+@Component({
+  selector: 'app-chart',
+  templateUrl: './chart.component.html',
+  styleUrls: ['./chart.component.css']
+})
+export class ChartComponent implements OnInit {
+
+  constructor(private auth: AuthenticationService) { }
+
+  ngOnInit(): void {
+    this.renderChart().catch(e => window.alert(e.message));    
+  }
+
+  async renderChart() {
+    const sdk = new ChartsEmbedSDK({
+      baseUrl: "<YOUR CHARTS BASE URL HERE>",
+      getUserToken: () => {
+        return this.auth.getAccessToken()
+      },
+    });
+  
+    const chart = sdk.createChart({
+      chartId: "<YOUR CHART ID HERE>"
+    });
+    await chart.render(<HTMLElement>document.getElementById("chart"));
+  }  
+}
+```

docs/docs/guides/overview.mdx

@@ -32,6 +32,15 @@ When you are familiar with the ZITADEL usage, you can choose to stay on [zitadel
       description="Understand projects and grants"
     />
   </ListWrapper>
+  <ListWrapper title="Integrations">
+    <ListElement
+      link="./integrations/authenticated-mongodb-charts"
+      iconClasses="lab la-mdb"
+      roundClasses="rounded rounded-service"
+      title="Authenticated MongoDB Charts"
+      description=""
+    />
+  </ListWrapper>
   <ListWrapper title="Authentication">
     <ListElement
       link="/docs/guides/authentication/login-users"

docs/sidebars.js

@@ -46,6 +46,14 @@ module.exports = {
         "guides/basics/projects",
       ],
     },
+    {
+      type: "category",
+      label: "Integrations",
+      collapsed: false,
+      items: [
+        "guides/integrations/authenticated-mongodb-charts",
+      ],
+    },
     {
       type: "category",
       label: "Solution Scenarios",