Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

How to pass nonce to ThemeProvider in _app.tsx? #218

Open
rikusen0335 opened this issue Sep 14, 2023 · 2 comments
Open

How to pass nonce to ThemeProvider in _app.tsx? #218

rikusen0335 opened this issue Sep 14, 2023 · 2 comments

Comments

@rikusen0335
Copy link

rikusen0335 commented Sep 14, 2023 •
edited

Due to Next.js's regular csp setting, we are generating nonce in _document.tsx and need to pass it to _app.tsx

Below code is just example I am using tho doesn't work, getting two of errors:
Warning: Extra attributes from the server: nonce script when passing nonce through nonce to App like nonce={nonce}
Warning: Prop 'nonce' did not match. Server: "" Client: "sOmEtHiNgHaShGeNeRaTeD==" when passing nonce through pageProps.nonce

// _document.tsx code
const MyDocument = () => {
  const csp = `...`

  return (
    <Html lang="ja">
      <Head nonce={nonce}>
        <meta httpEquiv="Content-Security-Policy" content={csp} />
      </Head>
      <body>
        <Main />
        <NextScript nonce={nonce} />
      </body>
    </Html>
  )
}

MyDocument.getInitialProps = async (ctx: DocumentContext) => {
  const nonce = generateNonce()

  const originalRenderPage = ctx.renderPage
  ctx.renderPage = () =>
    originalRenderPage({
      enhanceApp: (App: React.ComponentType<React.ComponentProps<AppType> & { nonce: string }>) =>
        function EnhancedApp(props) {
          props.pageProps.nonce = nonce // pageProps.nonce or nonce only either one is needed
          return <App nonce={nonce} {...props} />
        }
    })

  const initialProps = await Document.getInitialProps(ctx)

  return {
    ...initialProps,
    nonce
  }
}

export default MyDocument
// end of _document.tsx


// _app.tsx code
export const MyApp = ({
  Component,
  pageProps,
  nonce
}: NextAppProps) => {
  <ThemeProvider nonce={nonce}>
    <Component {...pageProps} />
  </ThemeProvider>
}

export default MyApp
// end of _app.tsx
@rikusen0335
Copy link
Author

rikusen0335 commented Sep 21, 2023 •
edited

Additional info: As a workaround, I put hash of all the scripts inside the <head> tag including next-themes's, so that we can add hash to nonce like sha256-abcdefghijk... to permit scripts.

@Enalmada Enalmada mentioned this issue Oct 10, 2023
Closed
@r34son
Copy link

r34son commented Apr 6, 2024

Everything works with 0.3.0, but the error still persists in console. Maybe it's related to this comment vercel/next.js#54907 (reply in thread).

@pacocoursey NextJs Script implementation also doesn't apply nonce on client, due to this comment https://github.com/vercel/next.js/blob/v14.2.0-canary.48/packages/next/src/client/script.tsx#L228.

Related facebook/react#26028

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix Prop nonce did not match error Enalmada/next-themes
2 participants
@rikusen0335 @r34son