From 9669d1b39fca71461a3641840632db171f2968ed Mon Sep 17 00:00:00 2001
From: Maciej D <7597086+mdanilowicz@users.noreply.github.com>
Date: Wed, 13 Nov 2024 09:00:06 +0100
Subject: [PATCH] feat: add API headers from config (#1442)

* feat: add API headers from config

* feat: CR changes
---
 .changeset/stale-files-learn.md         |  5 +++++
 packages/nuxt3-module/README.md         | 26 +++++++++++++++++++++++++
 packages/nuxt3-module/plugin.ts         |  6 +++++-
 packages/nuxt3-module/src/index.ts      |  7 +++++++
 templates/vue-demo-store/nuxt.config.ts | 17 ++++++++++++++++
 5 files changed, 60 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/stale-files-learn.md

diff --git a/.changeset/stale-files-learn.md b/.changeset/stale-files-learn.md
new file mode 100644
index 000000000..fb5665b22
--- /dev/null
+++ b/.changeset/stale-files-learn.md
@@ -0,0 +1,5 @@
+---
+"@shopware-pwa/nuxt3-module": minor
+---
+
+Added possibility to use Nuxt config file for setting the API requests headers. Headers are added to each request SSR and CSR.
diff --git a/packages/nuxt3-module/README.md b/packages/nuxt3-module/README.md
index 185a3a3f9..fb948e35e 100644
--- a/packages/nuxt3-module/README.md
+++ b/packages/nuxt3-module/README.md
@@ -88,6 +88,32 @@ All composable functions are fully typed with TypeScript and they are registed g
 
 Internally, the module uses [API Client](https://npmjs.com/package/@shopware/api-client) and [Composables](https://npmjs.com/package/@shopware-pwa/composables-next) packages, configured together to make everything working well. If you need to check how it's working on a different version of one of them, install a package locally in your project (to be installed and available in project's `package.json` file), then the Nuxt module will use yours. Keep in mind that the different configuration may lead to unexpected behavior.
 
+## API Default Headers
+
+You can use Nuxt config to set the default API call headers.
+More about Nuxt configuration can be found [HERE](https://nuxt.com/docs/getting-started/configuration).
+
+> **_NOTE:_** By default, the values in `runtimeConfig` are only available on the server-side. However, keys within `runtimeConfig.public` are also accessible on the client-side. [MORE](https://nuxt.com/docs/getting-started/configuration#environment-variables-and-private-tokens)
+
+```json
+{
+  "runtimeConfig": {
+    "public": {
+      "apiClientConfig": {
+        "headers": {
+          "global-heder-example": "global-header-example-value"
+        }
+      }
+    },
+    "apiClientConfig": {
+      "headers": {
+        "ssr-heder-example": "ssr-header-example-value"
+      }
+    }
+  }
+}
+```
+
 ## Links
 
 - [📘 Documentation](https://frontends.shopware.com)
diff --git a/packages/nuxt3-module/plugin.ts b/packages/nuxt3-module/plugin.ts
index ed39d8910..99a4eca5d 100644
--- a/packages/nuxt3-module/plugin.ts
+++ b/packages/nuxt3-module/plugin.ts
@@ -11,6 +11,7 @@ import { createAPIClient } from "@shopware/api-client";
 import { getCookie } from "h3";
 import { isMaintenanceMode } from "@shopware-pwa/helpers-next";
 import type { ApiClient } from "#shopware";
+import { defu } from "defu";
 
 declare module "#app" {
   interface NuxtApp {
@@ -62,6 +63,10 @@ export default defineNuxtPlugin((NuxtApp) => {
     contextToken: shouldUseSessionContextInServerRender
       ? contextTokenFromCookie
       : "",
+    defaultHeaders: defu(
+      runtimeConfig.apiClientConfig?.headers,
+      runtimeConfig.public?.apiClientConfig?.headers,
+    ),
   });
 
   apiClient.hook("onContextChanged", (newContextToken) => {
@@ -85,7 +90,6 @@ export default defineNuxtPlugin((NuxtApp) => {
   });
 
   NuxtApp.vueApp.provide("apiClient", apiClient);
-
   // Shopware context
   const shopwareContext = createShopwareContext(NuxtApp.vueApp, {
     enableDevtools: true,
diff --git a/packages/nuxt3-module/src/index.ts b/packages/nuxt3-module/src/index.ts
index f08d48aa4..25cb09da9 100644
--- a/packages/nuxt3-module/src/index.ts
+++ b/packages/nuxt3-module/src/index.ts
@@ -95,14 +95,21 @@ declare module "@nuxt/schema" {
   interface NuxtOptions {
     shopware?: ShopwareNuxtOptions;
   }
+  interface ApiClientConfig {
+    headers?: {
+      [key: string]: string;
+    };
+  }
 
   interface RuntimeConfig {
     shopware?: Pick<
       ShopwareNuxtOptions,
       "endpoint" | "shopwareEndpoint" | "useUserContextInSSR"
     >;
+    apiClientConfig?: ApiClientConfig;
   }
   interface PublicRuntimeConfig {
     shopware: ShopwareNuxtOptions;
+    apiClientConfig?: ApiClientConfig;
   }
 }
diff --git a/templates/vue-demo-store/nuxt.config.ts b/templates/vue-demo-store/nuxt.config.ts
index a4fbc5f95..db3cd765e 100644
--- a/templates/vue-demo-store/nuxt.config.ts
+++ b/templates/vue-demo-store/nuxt.config.ts
@@ -16,8 +16,25 @@ export default defineNuxtConfig({
     //   endpoint: "https://demo-frontends.shopware.store/store-api/",
     //   accessToken: "SWSCBHFSNTVMAWNZDNFKSHLAYW",
     //   devStorefrontUrl: "",
+    /**
+     * Example for API Client configuration.
+     */
+    //   apiClientConfig: {
+    //     headers: {
+    //       "global-heder-example": "global-header-example-value",
+    //     },
+    //   },
     // },
+    /**
+     * Example for API Client configuration
+     *
+     */
 
+    // apiClientConfig: {
+    //   headers: {
+    //     "ssr-heder-example": "ssr-header-example-value",
+    //   },
+    // },
     /**
      * More about this feature you can find here: https://frontends.shopware.com/getting-started/features/broadcasting.html
      */