feat: azure cosmosdb example

Author: KotaHusky

.github/workflows/deploy-container-to-azure-web-app.yml

@@ -16,20 +16,23 @@ env:
   AZURE_APPSERVICE_APP_NAME: ${{ vars.AZURE_APPSERVICE_APP_NAME }}
   AZURE_APPSERVICE_SLOT_NAME: ${{ vars.AZURE_APPSERVICE_SLOT_NAME }}
   NEXT_PUBLIC_AZURE_B2C_AUTHORITY: ${{ vars.NEXT_PUBLIC_AZURE_B2C_AUTHORITY }}
+  NEXT_PUBLIC_AZURE_B2C_CLIENT_ID: ${{ vars.NEXT_PUBLIC_AZURE_B2C_CLIENT_ID }}
   NEXT_PUBLIC_AZURE_B2C_FLOW_EDIT_PROFILE: ${{ vars.NEXT_PUBLIC_AZURE_B2C_FLOW_EDIT_PROFILE }}
   NEXT_PUBLIC_AZURE_B2C_FLOW_FORGOT_PASSWORD: ${{ vars.NEXT_PUBLIC_AZURE_B2C_FLOW_FORGOT_PASSWORD }}
   NEXT_PUBLIC_AZURE_B2C_FLOW_SIGN_UP_SIGN_IN: ${{ vars.NEXT_PUBLIC_AZURE_B2C_FLOW_SIGN_UP_SIGN_IN }}
-  NEXT_PUBLIC_AZURE_B2C_CLIENT_ID: ${{ vars.NEXT_PUBLIC_AZURE_B2C_CLIENT_ID }}
   NEXT_PUBLIC_AZURE_B2C_REDIRECT_URI: ${{ vars.NEXT_PUBLIC_AZURE_B2C_REDIRECT_URI }}
   NEXT_PUBLIC_AZURE_B2C_TENANT_ID: ${{ vars.NEXT_PUBLIC_AZURE_B2C_TENANT_ID }}
 
   # Secrets - values won't be shown in the logs
   AZURE_APPSERVICE_PUBLISHPROFILE: ${{ secrets.AZURE_APPSERVICE_PUBLISHPROFILE }}
+  AZURE_COSMOSDB_CONTAINER_ID: ${{ secrets.AZURE_COSMOSDB_CONTAINER_ID }}
+  AZURE_COSMOSDB_DATABASE_ID: ${{ secrets.AZURE_COSMOSDB_DATABASE_ID }}
+  AZURE_COSMOSDB_ENDPOINT: ${{ secrets.AZURE_COSMOSDB_ENDPOINT }}
+  AZURE_COSMOSDB_KEY: ${{ secrets.AZURE_COSMOSDB_KEY }}
   DOCKERHUB_REPO: ${{ secrets.DOCKERHUB_REPO }}
   DOCKERHUB_TOKEN: ${{ secrets.DOCKERHUB_TOKEN }}
   DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
 
-
 jobs:
   check_commit:
     runs-on: ubuntu-latest
@@ -86,6 +89,10 @@ jobs:
         tags: index.docker.io/${{ env.DOCKERHUB_USERNAME }}/${{ env.DOCKERHUB_REPO}}:${{ github.sha }}
         context: .
         build-args: |
+          AZURE_COSMOSDB_CONTAINER_ID: ${{ env.AZURE_COSMOSDB_CONTAINER_ID }}
+          AZURE_COSMOSDB_DATABASE_ID: ${{ env.AZURE_COSMOSDB_DATABASE_ID }}
+          AZURE_COSMOSDB_ENDPOINT: ${{ env.AZURE_COSMOSDB_ENDPOINT }}
+          AZURE_COSMOSDB_KEY: ${{ env.AZURE_COSMOSDB_KEY }}
           NEXT_PUBLIC_AZURE_B2C_AUTHORITY: ${{ env.NEXT_PUBLIC_AZURE_B2C_AUTHORITY }}
           NEXT_PUBLIC_AZURE_B2C_CLIENT_ID: ${{ env.NEXT_PUBLIC_AZURE_B2C_CLIENT_ID }}
           NEXT_PUBLIC_AZURE_B2C_FLOW_EDIT_PROFILE: ${{ env.NEXT_PUBLIC_AZURE_B2C_FLOW_EDIT_PROFILE }}

Dockerfile

@@ -16,6 +16,10 @@ ARG NEXT_PUBLIC_AZURE_B2C_FLOW_FORGOT_PASSWORD
 ARG NEXT_PUBLIC_AZURE_B2C_FLOW_SIGN_UP_SIGN_IN
 ARG NEXT_PUBLIC_AZURE_B2C_REDIRECT_URI
 ARG NEXT_PUBLIC_AZURE_B2C_TENANT_ID
+ARG AZURE_COSMOSDB_ENDPOINT
+ARG AZURE_COSMOSDB_KEY
+ARG AZURE_COSMOSDB_DATABASE_ID
+ARG AZURE_COSMOSDB_CONTAINER_ID
 
 ENV NEXT_PUBLIC_AZURE_B2C_AUTHORITY=$NEXT_PUBLIC_AZURE_B2C_AUTHORITY
 ENV NEXT_PUBLIC_AZURE_B2C_CLIENT_ID=$NEXT_PUBLIC_AZURE_B2C_CLIENT_ID
@@ -24,5 +28,9 @@ ENV NEXT_PUBLIC_AZURE_B2C_FLOW_FORGOT_PASSWORD=$NEXT_PUBLIC_AZURE_B2C_FLOW_FORGO
 ENV NEXT_PUBLIC_AZURE_B2C_FLOW_SIGN_UP_SIGN_IN=$NEXT_PUBLIC_AZURE_B2C_FLOW_SIGN_UP_SIGN_IN
 ENV NEXT_PUBLIC_AZURE_B2C_REDIRECT_URI=$NEXT_PUBLIC_AZURE_B2C_REDIRECT_URI
 ENV NEXT_PUBLIC_AZURE_B2C_TENANT_ID=$NEXT_PUBLIC_AZURE_B2C_TENANT_ID
+ENV AZURE_COSMOSDB_ENDPOINT=$AZURE_COSMOSDB_ENDPOINT
+ENV AZURE_COSMOSDB_KEY=$AZURE_COSMOSDB_KEY
+ENV AZURE_COSMOSDB_DATABASE_ID=$AZURE_COSMOSDB_DATABASE_ID
+ENV AZURE_COSMOSDB_CONTAINER_ID=$AZURE_COSMOSDB_CONTAINER_ID
 
 CMD ["npx", "next", "start"]

apps/msal-react-demo/.env.template

@@ -1,4 +1,8 @@
 # https://nextjs.org/docs/app/building-your-application/configuring/environment-variables#bundling-environment-variables-for-the-browser
+AZURE_COSMOSDB_CONTAINER_ID=
+AZURE_COSMOSDB_DATABASE_ID=
+AZURE_COSMOSDB_ENDPOINT=
+AZURE_COSMOSDB_KEY=
 NEXT_PUBLIC_AZURE_B2C_AUTHORITY=
 NEXT_PUBLIC_AZURE_B2C_CLIENT_ID=
 NEXT_PUBLIC_AZURE_B2C_FLOW_EDIT_PROFILE=

apps/msal-react-demo/.env.template-gha-secret

@@ -1,5 +1,9 @@
 # Template for creating GitHub Actions secrets
 AZURE_APPSERVICE_PUBLISHPROFILE=
+AZURE_COSMOSDB_CONTAINER_ID=
+AZURE_COSMOSDB_DATABASE_ID=
+AZURE_COSMOSDB_ENDPOINT=
+AZURE_COSMOSDB_KEY=
 DOCKERHUB_REPO=
 DOCKERHUB_TOKEN=
 DOCKERHUB_USERNAME=

apps/msal-react-demo/src/app/api/azure-cosmos/route.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { client, database, container } from "@my-workspace/data-access-azure-cosmos";
+import { verifyAzureB2CToken } from "@my-workspace/util-verify-token";
+
+/**
+ * Retrieves resources from Azure Cosmos DB based on the user's ID.
+ * @param request - The request object.
+ * @returns A response object containing the retrieved resources.
+ */
+export const GET = async function (request: Request) {
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const user:any = await verifyAzureB2CToken(request, "ReadUser");
+    const { resources } = await container.items
+      .query({
+        query: "SELECT TOP 3 * from c WHERE c.userId = @userId ORDER BY c.timestamp DESC",
+        parameters: [{ name: "@userId", value: user.oid }],
+      })
+      .fetchAll();
+
+    return new Response(JSON.stringify(resources));
+  } catch (error) {
+    return new Response(
+      (error as Error).message || "Error during token verification",
+      { status: 401 }
+    );
+  }
+};
+
+/**
+ * Handles the POST request to create an item in Azure Cosmos DB.
+ * @param request - The request object containing the HTTP request details.
+ * @returns A Response object with the created item or an error message.
+ */
+export const POST = async function (request: Request) {
+  try {
+    const user: any = await verifyAzureB2CToken(request, "WriteUser");
+    const data = await request.json();
+
+    const item = {
+      userId: user.oid,
+      ...data,
+    };
+
+    await container.items.create(item);
+
+    return new Response(JSON.stringify(item), { status: 201 });
+  } catch (error) {
+    return new Response(
+      (error as Error).message || "Error during token verification",
+      { status: 401 }
+    );
+  }
+}

apps/msal-react-demo/src/app/api/azure-cosmos/todo_route.ts

@@ -7,6 +7,7 @@ import {
   UnauthenticatedTemplate,
 } from '@azure/msal-react';
 import { AccountSummary } from '@my-workspace/ui';
+import { ButtonUserDataGet, ButtonUserDataPost } from '@my-workspace/feature-azure-cosmosdb';
 
 const ButtonLogin = dynamic(() => import('@my-workspace/feature-msal-react').then(mod => mod.ButtonLogin), { ssr: false });
 const ButtonLogout = dynamic(() => import('@my-workspace/feature-msal-react').then(mod => mod.ButtonLogout), { ssr: false });
@@ -31,7 +32,11 @@ export default function Page() {
             </UnauthenticatedTemplate>
           </div>
         </div>
-        <AccountSummary />
+        <AuthenticatedTemplate>
+          <AccountSummary />
+          <ButtonUserDataGet />
+          <ButtonUserDataPost />
+        </AuthenticatedTemplate>
       </div>
     </div>
   );

apps/msal-react-demo/src/app/page.tsx

@@ -1,9 +1,9 @@
 import { CosmosClient } from "@azure/cosmos";
 
-const endpoint = process.env["AZURE_COSMOS_ENDPOINT"] || "";
-const key = process.env["AZURE_COSMOS_KEY"] || "";
-const databaseId = process.env["AZURE_COSMOS_DATABASE_ID"] || "";
-const containerId = process.env["AZURE_COSMOS_CONTAINER_ID"] || "";
+const endpoint = process.env["AZURE_COSMOSDB_ENDPOINT"] || "";
+const key = process.env["AZURE_COSMOSDB_KEY"] || "";
+const databaseId = process.env["AZURE_COSMOSDB_DATABASE_ID"] || "";
+const containerId = process.env["AZURE_COSMOSDB_CONTAINER_ID"] || "";
 
 const client = new CosmosClient({ endpoint: endpoint, key: key });
 const database = client.database(databaseId);

libs/data-access/data-access-azure-cosmos/src/lib/data-access-azure-cosmos.ts

@@ -28,7 +28,10 @@ export const b2cPolicies = {
 };
 
 export const loginConfig = {
-  scopes: [`https://${process.env['NEXT_PUBLIC_AZURE_B2C_AUTHORITY']}.onmicrosoft.com/${process.env['NEXT_PUBLIC_AZURE_B2C_CLIENT_ID']}/ReadUser`]
+  scopes: [
+    `https://${process.env['NEXT_PUBLIC_AZURE_B2C_AUTHORITY']}.onmicrosoft.com/${process.env['NEXT_PUBLIC_AZURE_B2C_CLIENT_ID']}/ReadUser`,
+    `https://${process.env['NEXT_PUBLIC_AZURE_B2C_AUTHORITY']}.onmicrosoft.com/${process.env['NEXT_PUBLIC_AZURE_B2C_CLIENT_ID']}/WriteUser`
+  ]
 };
 
 // MSAL Configurationcc

libs/data-access/data-access-msal-config/src/lib/data-access-msal-config.ts

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

libs/feature/feature-azure-cosmosdb/.babelrc

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

libs/feature/feature-azure-cosmosdb/.eslintrc.json

@@ -0,0 +1,7 @@
+# feature-azure-cosmosdb
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test feature-azure-cosmosdb` to execute the unit tests via [Jest](https://jestjs.io).

libs/feature/feature-azure-cosmosdb/README.md

@@ -0,0 +1,9 @@
+{
+  "name": "feature-azure-cosmosdb",
+  "$schema": "../../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/feature/feature-azure-cosmosdb/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project feature-azure-cosmosdb --web",
+  "targets": {}
+}

libs/feature/feature-azure-cosmosdb/project.json

@@ -0,0 +1,3 @@
+export * from './lib/feature-azure-cosmosdb';
+export * from './lib/user-data-get/user-data-get';
+export * from './lib/user-data-post/user-data-post';

libs/feature/feature-azure-cosmosdb/src/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

libs/feature/feature-azure-cosmosdb/src/lib/feature-azure-cosmosdb.module.css

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import FeatureAzureCosmosdb from './feature-azure-cosmosdb';
+
+describe('FeatureAzureCosmosdb', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<FeatureAzureCosmosdb />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/feature/feature-azure-cosmosdb/src/lib/feature-azure-cosmosdb.spec.tsx

@@ -0,0 +1,14 @@
+import styles from './feature-azure-cosmosdb.module.css';
+
+/* eslint-disable-next-line */
+export interface FeatureAzureCosmosdbProps {}
+
+export function FeatureAzureCosmosdb(props: FeatureAzureCosmosdbProps) {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to FeatureAzureCosmosdb!</h1>
+    </div>
+  );
+}
+
+export default FeatureAzureCosmosdb;

libs/feature/feature-azure-cosmosdb/src/lib/feature-azure-cosmosdb.tsx

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

libs/feature/feature-azure-cosmosdb/src/lib/user-data-get/user-data-get.module.css

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import UserDataGet from './user-data-get';
+
+describe('UserDataGet', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<UserDataGet />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/feature/feature-azure-cosmosdb/src/lib/user-data-get/user-data-get.spec.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { useMsal } from "@azure/msal-react";
+import { PublicClientApplication } from '@azure/msal-browser';
+import { getToken } from '@my-workspace/data-access-auth';
+
+/* eslint-disable-next-line */
+export interface ButtonUserDataGetProps {}
+
+export function ButtonUserDataGet(props: ButtonUserDataGetProps) {
+  const { inProgress, instance, accounts } = useMsal();
+  const [data, setData] = useState(null);
+
+  const handleClick = async () => {
+    if (inProgress === 'none' && accounts.length > 0) {
+      const token = await getToken(instance as PublicClientApplication, accounts[0]);
+      if (token) {
+        try {
+          const res = await fetch('/api/azure-cosmos', {
+            headers: {
+              Authorization: `Bearer ${token}`
+            }
+          });
+          const data = await res.json();
+          setData(data); // set the state
+        } catch (error) {
+          console.error('Error:', error);
+        }
+      }
+    }
+  };
+
+  return (
+    <div className="p-4 bg-gray-100 rounded-md">
+      <h1 className="text-2xl font-bold mb-4">Welcome to ButtonUserDataGet!</h1>
+      <button 
+        onClick={handleClick} 
+        className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-700"
+      >
+        Get Data
+      </button>
+      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
+    </div>
+  );
+}
+
+export default ButtonUserDataGet;

libs/feature/feature-azure-cosmosdb/src/lib/user-data-get/user-data-get.tsx

@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/

libs/feature/feature-azure-cosmosdb/src/lib/user-data-post/user-data-post.module.css

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import UserDataPost from './user-data-post';
+
+describe('UserDataPost', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<UserDataPost />);
+    expect(baseElement).toBeTruthy();
+  });
+});