antiCSRF cookie gets set to "undefined" when using $setPublicData inside of getServerSidePorps

[lksnmnn]

What is the problem?

When updating a user's session data inside of getServerSideProps using session.$setPublicData somehow the antiCSRF cookie value is being set to "undefined" resulting in a CSRF error which can only be resolved by deleting the session cookie and log in again.

Reproduction repository: https://github.com/lksnmnn/blitz-gssp-csrf/commit/39ccd2a379eb2893e5362e9e0fb52ecdac421689

export const getServerSideProps = async ({ req, res }) => {
  const session = await getSession(req, res)
  session.$setPublicData({ role: "ADMIN" })

  return {
    props: {},
  }
}

Paste all your error logs here:

[Fast Refresh] rebuilding hot-dev-client.js:196:6
CSRFTokenMismatchError: 
query.js:321:19
    onError query.js:321
    reject retryer.js:62
    run retryer.js:126
Uncaught CSRFTokenMismatchError: 
constants-d9c5e473.esm.js:115
    construct self-hosted:2716
    _construct constants-d9c5e473.esm.js:115
    Wrapper constants-d9c5e473.esm.js:135
    CSRFTokenMismatchError constants-d9c5e473.esm.js:201
    promise blitzjs-core.esm.js:862
The above error occurred in the <UserInfo> component:

UserInfo@webpack-internal:///./pages/index.tsx:42:105
Suspense
div
main
div
Home
WithSuperJSON@webpack-internal:///../../node_modules/babel-plugin-superjson-next/dist/tools.js:110:26
BlitzInnerRoot@webpack-internal:///../../node_modules/@blitzjs/core/dist/blitzjs-core.esm.js:697:19
Layout@webpack-internal:///./app/core/layouts/Layout.tsx:13:15
ErrorBoundary@webpack-internal:///../../node_modules/react-error-boundary/dist/react-error-boundary.umd.js:71:37
Suspense
App@webpack-internal:///./pages/_app.tsx:25:19
Hydrate@webpack-internal:///../../node_modules/react-query/es/hydration/react.js:26:18
QueryClientProvider@webpack-internal:///../../node_modules/react-query/es/react/QueryClientProvider.js:37:16
BlitzProvider@webpack-internal:///../../node_modules/@blitzjs/core/dist/blitzjs-core.esm.js:476:16
BlitzOuterRoot@webpack-internal:///../../node_modules/@blitzjs/core/dist/blitzjs-core.esm.js:728:28
ErrorBoundary@webpack-internal:///../../node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47
ReactDevOverlay@webpack-internal:///../../node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:20
Container@webpack-internal:///../../node_modules/next/dist/client/index.js:154:20
AppContainer@webpack-internal:///../../node_modules/next/dist/client/index.js:643:18
Root@webpack-internal:///../../node_modules/next/dist/client/index.js:779:19

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. react-dom.development.js:21953
The above error occurred in the <UserInfo> component:

UserInfo@webpack-internal:///./pages/index.tsx:42:105
Suspense
div
main
div
Home
WithSuperJSON@webpack-internal:///../../node_modules/babel-plugin-superjson-next/dist/tools.js:110:26
BlitzInnerRoot@webpack-internal:///../../node_modules/@blitzjs/core/dist/blitzjs-core.esm.js:697:19
Layout@webpack-internal:///./app/core/layouts/Layout.tsx:13:15
ErrorBoundary@webpack-internal:///../../node_modules/react-error-boundary/dist/react-error-boundary.umd.js:71:37
Suspense
App@webpack-internal:///./pages/_app.tsx:25:19
Hydrate@webpack-internal:///../../node_modules/react-query/es/hydration/react.js:26:18
QueryClientProvider@webpack-internal:///../../node_modules/react-query/es/react/QueryClientProvider.js:37:16
BlitzProvider@webpack-internal:///../../node_modules/@blitzjs/core/dist/blitzjs-core.esm.js:476:16
BlitzOuterRoot@webpack-internal:///../../node_modules/@blitzjs/core/dist/blitzjs-core.esm.js:728:28
ErrorBoundary@webpack-internal:///../../node_modules/@next/react-dev-overlay/lib/internal/ErrorBoundary.js:26:47
ReactDevOverlay@webpack-internal:///../../node_modules/@next/react-dev-overlay/lib/internal/ReactDevOverlay.js:86:20
Container@webpack-internal:///../../node_modules/next/dist/client/index.js:154:20
AppContainer@webpack-internal:///../../node_modules/next/dist/client/index.js:643:18
Root@webpack-internal:///../../node_modules/next/dist/client/index.js:779:19

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. react-dom.development.js:21953
Uncaught CSRFTokenMismatchError: 
constants-d9c5e473.esm.js:115

Paste all relevant code snippets here:

export const getServerSideProps = async ({ req, res }) => {
  const session = await getSession(req, res)
  session.$setPublicData({ role: "ADMIN" })

  return {
    props: {},
  }
}

What are detailed steps to reproduce this?

1. use setPublicData inside of gSSP
2. visit page

Run blitz -v and paste the output here:

macOS Catalina | darwin-x64 | Node: v14.17.0

blitz: 0.36.4 (global)
blitz: 0.36.4 (local)

  Package manager: npm 
  System:
    OS: macOS 10.15.7
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Memory: 30.28 GB / 64.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: Not Found
    npm: 7.16.0 - ~/.nvm/versions/node/v14.17.0/bin/npm
    Watchman: Not Found
  npmPackages:
    @prisma/client: ~2.20 => 2.20.1 
    blitz: 0.36.4 => 0.36.4 
    prisma: ~2.20 => 2.20.1 
    react: 0.0.0-experimental-6a589ad71 => 0.0.0-experimental-6a589ad71 
    react-dom: 0.0.0-experimental-6a589ad71 => 0.0.0-experimental-6a589ad71 
    typescript: ~4.2 => 4.2.4 

Please include below any other applicable logs and screenshots that show your problem:

No response

[flybayer]

Thanks for the report!

For whoever want's investigate, all the relevant code is in this file: https://github.com/blitz-js/blitz/blob/canary/packages/core/src/server/auth/sessions.ts

[lksnmnn]

Hey @mabadir any progress on this? I'd be happy to help looking in to this, if you haven't had time so far.

[mabadir]

Hey @lksnmnn. I am planning to look into it today. Go for it if you have the time.