From 8568d4f9149329c3c512b9199b70fbbf86ccfbde Mon Sep 17 00:00:00 2001
From: Vincent <git@vincenttunru.com>
Date: Thu, 8 Feb 2024 16:44:23 +0100
Subject: [PATCH] Allow passing a nonce to two third-party libraries

Specifically, <GoogleAnalytics> and <GoogleTagManager>. I did not
know how to add it to the YouTube and Google Maps embeds, since
they do not use the <Script> tag.
---
 .../06-optimizing/12-third-party-libraries.mdx   | 16 +++++++++-------
 packages/third-parties/src/google/ga.tsx         |  4 +++-
 packages/third-parties/src/google/gtm.tsx        | 11 ++++++++++-
 packages/third-parties/src/types/google.ts       |  4 ++++
 4 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx b/docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
index 93224009cad61..6558fa6c36cc9 100644
--- a/docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
+++ b/docs/02-app/01-building-your-application/06-optimizing/12-third-party-libraries.mdx
@@ -174,13 +174,14 @@ different variables and events that can be passed into the function.
 Options to pass to the Google Tag Manager. For a full list of options, read the [Google Tag Manager
 docs](https://developers.google.com/tag-platform/tag-manager/datalayer).
 
-| Name            | Type     | Description                                                                     |
-| --------------- | -------- | ------------------------------------------------------------------------------- |
-| `gtmId`         | Required | Your GTM container ID. Usually starts with `GTM-`.                              |
-| `dataLayer`     | Optional | Data layer array to instantiate the container with. Defaults to an empty array. |
-| `dataLayerName` | Optional | Name of the data layer. Defaults to `dataLayer`.                                |
-| `auth`          | Optional | Value of authentication parameter (`gtm_auth`) for environment snippets.        |
-| `preview`       | Optional | Value of preview parameter (`gtm_preview`) for environment snippets.            |
+| Name            | Type     | Description                                                                                |
+| --------------- | -------- | ------------------------------------------------------------------------------------------ |
+| `gtmId`         | Required | Your GTM container ID. Usually starts with `GTM-`.                                         |
+| `dataLayer`     | Optional | Data layer array to instantiate the container with. Defaults to an empty array.            |
+| `dataLayerName` | Optional | Name of the data layer. Defaults to `dataLayer`.                                           |
+| `auth`          | Optional | Value of authentication parameter (`gtm_auth`) for environment snippets.                   |
+| `preview`       | Optional | Value of preview parameter (`gtm_preview`) for environment snippets.                       |
+| `nonce`         | Optional | A [nonce](/docs/app/building-your-application/configuring/content-security-policy#nonces). |
 
 ### Google Analytics
 
@@ -352,6 +353,7 @@ Options to pass to the `<GoogleAnalytics>` component.
 | --------------- | -------- | ------------------------------------------------------------------------------------------------------ |
 | `gaId`          | Required | Your [measurement ID](https://support.google.com/analytics/answer/12270356). Usually starts with `G-`. |
 | `dataLayerName` | Optional | Name of the data layer. Defaults to `dataLayer`.                                                       |
+| `nonce`         | Optional | A [nonce](/docs/app/building-your-application/configuring/content-security-policy#nonces).             |
 
 ### Google Maps Embed
 
diff --git a/packages/third-parties/src/google/ga.tsx b/packages/third-parties/src/google/ga.tsx
index 448325a4aeb59..00e5d2c4805d4 100644
--- a/packages/third-parties/src/google/ga.tsx
+++ b/packages/third-parties/src/google/ga.tsx
@@ -14,7 +14,7 @@ declare global {
 let currDataLayerName: string | undefined = undefined
 
 export function GoogleAnalytics(props: GAParams) {
-  const { gaId, dataLayerName = 'dataLayer' } = props
+  const { gaId, dataLayerName = 'dataLayer', nonce } = props
 
   if (currDataLayerName === undefined) {
     currDataLayerName = dataLayerName
@@ -45,10 +45,12 @@ export function GoogleAnalytics(props: GAParams) {
 
           gtag('config', '${gaId}');`,
         }}
+        nonce={nonce}
       />
       <Script
         id="_next-ga"
         src={`https://www.googletagmanager.com/gtag/js?id=${gaId}`}
+        nonce={nonce}
       />
     </>
   )
diff --git a/packages/third-parties/src/google/gtm.tsx b/packages/third-parties/src/google/gtm.tsx
index 0dc9e70a6f04c..34745f6e3657f 100644
--- a/packages/third-parties/src/google/gtm.tsx
+++ b/packages/third-parties/src/google/gtm.tsx
@@ -8,7 +8,14 @@ import type { GTMParams } from '../types/google'
 let currDataLayerName: string | undefined = undefined
 
 export function GoogleTagManager(props: GTMParams) {
-  const { gtmId, dataLayerName = 'dataLayer', auth, preview, dataLayer } = props
+  const {
+    gtmId,
+    dataLayerName = 'dataLayer',
+    auth,
+    preview,
+    dataLayer,
+    nonce,
+  } = props
 
   if (currDataLayerName === undefined) {
     currDataLayerName = dataLayerName
@@ -43,11 +50,13 @@ export function GoogleTagManager(props: GTMParams) {
         ${dataLayer ? `w[l].push(${JSON.stringify(dataLayer)})` : ''}
       })(window,'${dataLayerName}');`,
         }}
+        nonce={nonce}
       />
       <Script
         id="_next-gtm"
         data-ntpc="GTM"
         src={`https://www.googletagmanager.com/gtm.js?id=${gtmId}${gtmLayer}${gtmAuth}${gtmPreview}`}
+        nonce={nonce}
       />
     </>
   )
diff --git a/packages/third-parties/src/types/google.ts b/packages/third-parties/src/types/google.ts
index 30a4e9f28a464..c68dc0e9301fd 100644
--- a/packages/third-parties/src/types/google.ts
+++ b/packages/third-parties/src/types/google.ts
@@ -1,3 +1,5 @@
+import type { ScriptProps } from 'next/script'
+
 declare global {
   interface Window {
     dataLayer?: Object[]
@@ -11,11 +13,13 @@ export type GTMParams = {
   dataLayerName?: string
   auth?: string
   preview?: string
+  nonce?: ScriptProps['nonce']
 }
 
 export type GAParams = {
   gaId: string
   dataLayerName?: string
+  nonce?: ScriptProps['nonce']
 }
 
 export type GoogleMapsEmbed = {