Keystone-next Admin UI refresh loop on nginx reverse proxy

Bug report

When I start Keystone-next example projects, for example “examples-next/todo”, all works well when I open the Admin UI in browser directly (using listening port, http://example.com:3000/). But when I configure reverse proxy via nginx (https://example.com/) - I got the infinite loop of page refresh:

Something went wrong.
Unhandled Runtime Error
Error: An error occurred when loading Admin Metadata
Call Stack
useKeystone
webpack-internal:///../../../../packages-next/admin-ui/context/dist/admin-ui.esm.js (415:11)

And in output of keystone-next console - repeating error:

{"level":50,"time":1613990145346,"pid":23190,"hostname":"example.com","name":"graphql","message":"Access denied","locations":[{"line":3,"column":5}],"path":["keystone","adminMeta"],"uid":"cklgg26gj0000w6xxxug1ajz9","name":"GraphQLError","stack":"node_modules/@keystone-next/admin-ui/system/dist/admin-ui.cjs.dev.js:548:19\nrunMicrotasks (<anonymous>)\n"}

To Reproduce

1. Start the “examples-next/todo” app.
2. Open the Admin UI interface (http://localhost:3000/) directly in browser - all works well, you will see user register form.
3. Configure nginx host with https or even http, and reverse proxy to the app port:

location / {
  proxy_pass http://localhost:3000/;
  # Set additional headers on the upstream request
  proxy_set_header   X-Real-IP           $remote_addr;
  proxy_set_header   X-Forwarded-For     $proxy_add_x_forwarded_for;
  proxy_set_header   X-Forwarded-Proto   $scheme;
  proxy_set_header   X-Forwarded-Host    $host;
  proxy_set_header   X-Forwarded-Port    $server_port;
}

1. Try to open the proxied domain (https://example.com/) and got the infinite loop.
2. Same problem is with development mode (yarn dev).

Full error output:

Unhandled Runtime Error

Error: An error occurred when loading Admin Metadata
Call Stack
useKeystone
webpack-internal:///../../../../packages-next/admin-ui/context/dist/admin-ui.esm.js (415:11)
InitPage
webpack-internal:///../../../../packages-next/auth/pages/InitPage/dist/auth.esm.js (273:90)
renderWithHooks
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (14985:27)
mountIndeterminateComponent
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (17811:13)
beginWork
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (19049:16)
callCallback
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (3945:14)
invokeGuardedCallbackDev
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (3994:16)
invokeGuardedCallback
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (4056:31)
beginWork$1
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (23959:28)
performUnitOfWork
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (22771:12)
workLoopSync
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (22702:22)
renderRootSync
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (22665:7)
performSyncWorkOnRoot
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (22288:18)
flushSyncCallbackQueueImpl/<
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (11327:26)
unstable_runWithPriority
webpack-internal:///../../../../node_modules/react-dom/node_modules/scheduler/cjs/scheduler.development.js (646:12)
runWithPriority$1
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (11276:10)
flushSyncCallbackQueueImpl
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (11322:26)
flushSyncCallbackQueue
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (11309:3)
scheduleUpdateOnFiber
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (21888:9)
dispatchAction
webpack-internal:///../../../../node_modules/react-dom/cjs/react-dom.development.js (16139:26)

[gautamsi]

~new interface is not letting configuration for the express server~

new interface does not have config option to configure express server, I have added a PR to enable config.server.configureServer option for this.

[guopengliang]

I was having this similar issue in my local dev environment and found one three working solutions to solve it for my case.

Solutions:

1. either add { secure: false } to your keystone session config,
2. or set NODE_ENV=development when running keystone,
3. or use https for dev environment.

For my case, it was the secure cookie not being set that caused the infinite refresh loop (when the db is not initialized) or not being able to login (when the db already has the initial admin user). When it happens, the browser console logs the error message “Error: An error occurred when loading Admin Metadata.”

Looking at the login graphql response headers will find this line:

Set-Cookie: keystonejs-session=...; Max-Age=...; Path=/; Expires=...; HttpOnly; Secure; SameSite=Lax

The “Secure;” statement above declares that the cookie can only be accepted if it was via https request. For production environment, it works fine. But for development environment, we need to use the above mentioned solutions to opt-out of using secure session.