Passing a nonce generated in _document.js to _app.js within Next.js

Question

I'm trying to implement a content security policy on my website. I am using Next.js and MUI as my component library.

Right now I'm generating a nonce within _document and my server side emotion cache has the nonce passed into it so that server side inline styles will render. However, I am also using a client side emotion cache in _app and I need to pass it the same nonce. Can anyone point me in the right direction on how to pass that nonce that is generated on the server on _document to _app on the client?

_app.js

import PropTypes from 'prop-types'
import { ThemeProvider } from '@mui/material/styles'
import { breakPoints } from '../helpers/theme'
import { SessionProvider } from 'next-auth/react'
import { useRouter } from 'next/router'
import Script from 'next/script'
import Auth from 'components/auth'
import { IntlProvider } from 'react-intl'
import localeMap from '../helpers/locale-map'
import { lightTheme } from 'helpers/theme'
import React, { useEffect, useRef, useState } from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
import { Hydrate } from 'react-query/hydration'
import getConfig from 'next/config'
import { Settings as luxonSettings } from 'luxon'
import { datadogLogs } from '@datadog/browser-logs'
import { datadogRum } from '@datadog/browser-rum'
import StoreProvider from '../store'
import { ReactQueryDevtools } from 'react-query/devtools'
import NextJSApp from 'next/app'
import { GLOBAL } from '../helpers/constants'
import { CacheProvider } from '@emotion/react'
import createEmotionCache from '../helpers/emotion-cache'
import { DefaultSeo } from 'next-seo'
import {
  generateCanonicalUrl,
  generateLanguageAlternatesConfig,
} from 'helpers/seo'
import CCPABanner from 'components/home/ccpa-banner'
import { userCountryFromHeaders } from 'helpers/localization'
import Head from 'next/head'
import { nanoid } from 'nanoid'

const { publicRuntimeConfig } = getConfig()

if (
  process.env.NODE_ENV === 'development' &&
  publicRuntimeConfig.mockApi.enabled &&
  typeof window !== 'undefined'
) {
  const { default: makeServer } = require('../queries/mock-api/server')
  makeServer()
}

if (process.env.NODE_ENV === 'production') {
  // initialize browser-logs for DataDog only for production
  datadogLogs.init(publicRuntimeConfig.datadogLogs)
  datadogRum.init(publicRuntimeConfig.datadogRum)
  datadogRum.startSessionReplayRecording()
}

export function reportWebVitals({ name, value }) {
  switch (name) {
    case 'FCP': // https://web.dev/fcp/
      datadogRum.addTiming('first-contentful-paint', value)
      break
    case 'LCP': // https://web.dev/lcp/
      datadogRum.addTiming('largest-contentful-paint', value)
      break
    case 'CLS': //https://web.dev/cls/
      datadogRum.addTiming('cumulative-layout-shift', value)
      break
    case 'FID': // https://web.dev/fid/
      datadogRum.addTiming('first-input-delay', value)
      break
    case 'TTFB': // https://web.dev/ttfb/
      datadogRum.addTiming('time-to-first-byte', value)
      break
    case 'Next.js-hydration':
      datadogRum.addTiming('hydration', value)
      break
    case 'Next.js-route-change-to-render':
      datadogRum.addTiming('route-changed', value)
      break
    case 'Next.js-render':
      datadogRum.addTiming('render-finished', value)
      break
    default:
      break
  }
}

// Client-side cache, shared for the whole session of the user in the browser.

// Use the  to improve performance and allow components that call
// `useSession()` anywhere in your application to access the `session` object.
function App({
  Component,
  pageProps,
  globalData,
  localizedMessages,
  ccpaCookiePresent,
  nonce,
}) {
  const queryClientRef = useRef()
  const storeRef = useRef({
    [GLOBAL]: globalData,
  })
  const router = useRouter()
  const { locale, defaultLocale } = router
  const [showCCPABanner, setShowCCPABanner] = useState(!ccpaCookiePresent)
  const isUSUser = globalData?.userCountry === 'US'

  luxonSettings.defaultLocale = locale

  if (!queryClientRef.current) {
    queryClientRef.current = new QueryClient(publicRuntimeConfig.queryClient)
  }
  const emotionCache = createEmotionCache(nonce)
  const Layout = Component.Layout ? Component.Layout : React.Fragment
  const AuthWrapper = Component.auth ? Auth : React.Fragment

  const setCCPACookie = () => {
    const currentDate = new Date()
    const expirationDate = new Date(
      currentDate.setMonth(currentDate.getMonth() + 6),
    )
    document.cookie = `CCPABannerShown=1; expires=${expirationDate}`
    setShowCCPABanner(false)
  }

  useEffect(() => {
    router.events.on('routeChangeComplete', (url) => {
      global.analytics.page(url)
    })
  }, [router.events])

  // useEffect(() => {
  //   TagManager.initialize({ gtmId: publicRuntimeConfig.gtm.id })
  // }, [])

  const languageAlternatesConfig = generateLanguageAlternatesConfig(router)
  const canonicalUrl = generateCanonicalUrl(router)

  //scaling for tablet and mobile views less than medium breakpoint width
  const screenWidth = typeof window !== 'undefined' && window.outerWidth
  const mediumBreakPoint = breakPoints.values.md
  const screenScaling =
    Component.NeedsMobileScaling &&
    screenWidth &&
    screenWidth < mediumBreakPoint
      ? screenWidth / mediumBreakPoint
      : 1

  return (
    <>
      
        
      
       */}
          {this.props.shouldLoadAdScript && (
            <>

Passing a nonce generated in _document.js to _app.js within Next.js

0 Answers