Improve and Update Server, React Client, Angular Client (#6)

* update react dependencies to address vulns

* update dependencies

* Ensure react app and server are working properly together

* Angular application works with token fetching

* remove values from env

* Clarify user key

Author: cwbuecheler

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "semi": true,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "bracketSpacing": true,
+    "tabWidth": 2
+  }

client-angular/src/app/app.config.ts

@@ -6,11 +6,13 @@ import {
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
-    provideZoneChangeDetection({ eventCoalescing: true }),
+    provideHttpClient(),
     provideRouter(routes),
+    provideZoneChangeDetection({ eventCoalescing: true }),
   ],
 };

client-angular/src/app/app.html

@@ -115,12 +115,18 @@
         <option value="default">Default Theme</option>
         <option value="example">Example Theme</option>
       </select>
-
     </div>
-<em-beddable
-  token="eyJhbGciOiJIUzI1NiJ9.eyJzZWN1cml0eVRva2VuSWQiOiIyY2M0ZDg3Ni00ZmJhLTRmZWYtODg2NS00ZDYxYjgwNjdlOGEiLCJpYXQiOjE3NTYxMjYzNTEsImV4cCI6MTc1NjczMTE1MX0.6ZIRGvEgfH-e-GW3Eejf-O0sURTfNDTatdeUM0JHxKM"
-  [attr.client-context]="clientContext()"
-  style="width: 100%">
-</em-beddable>
-
+      @if(token) {
+        <em-beddable
+          [token]="token"
+          [attr.client-context]="clientContext()"
+          style="width: 100%"
+        >
+        </em-beddable>
+      }
+      @else {
+        <div>Loading ...</div>
+      }
+  </div>
+</main>
 <router-outlet />

client-angular/src/app/app.ts

@@ -1,5 +1,19 @@
+/*
+ *
+ * NOTE: This demo does not use the server in `/server` - that's for the react client
+ *
+ */
 import { Component, CUSTOM_ELEMENTS_SCHEMA, signal } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
+import { HttpClient } from '@angular/common/http';
+
+// Uncomment the correct region
+const BASE_URL = 'https://api.eu.embeddable.com'; // EU region
+// const BASE_URL = 'https://api.us.embeddable.com'; // US region
+
+const API_KEY = ''; // Your API Key
+const EMBEDDABLE_ID = ''; // Your Embeddable ID
+const USER_KEY = 'example@yourdomain.com'; // unique key (usually email address) representing current user
 
 @Component({
   imports: [RouterOutlet],
@@ -9,9 +23,18 @@ import { RouterOutlet } from '@angular/router';
 })
 export class App {
   /* Variables */
+  token: string | null = null;
   protected theme = 'default';
   protected readonly title = signal('angular-example');
 
+  /* Constructor */
+  constructor(private http: HttpClient) {}
+
+  /* On Init */
+  ngOnInit() {
+    this.fetchToken();
+  }
+
   /* Methods */
   protected readonly clientContext = signal(
     JSON.stringify({ theme: this.theme })
@@ -20,4 +43,27 @@ export class App {
     this.theme = (event.target as HTMLSelectElement).value;
     this.clientContext.set(JSON.stringify({ theme: this.theme }));
   }
+
+  private fetchToken() {
+    this.http
+      .post<{ token: string }>(
+        `${BASE_URL}/api/v1/security-token`,
+        {
+          embeddableId: EMBEDDABLE_ID,
+          expiryInSeconds: 60 * 60 * 24 * 7,
+          securityContext: {}, // Add your security context here
+          user: USER_KEY,
+        },
+        {
+          headers: {
+            'Content-Type': 'application/json',
+            Accept: 'application/json',
+            Authorization: `Bearer ${API_KEY}`, // Add your API key here
+          },
+        }
+      )
+      .subscribe((json) => {
+        this.token = json.token;
+      });
+  }
 }