How to use @keystone-6 behind a reverse proxy

[migonos0]

I'm trying to set up keystone behind a reverse proxy, I'd say this is a very common pattern but I couldn't find any proper guide on how to do so.

So far I've been able to make it work, except for the index page. It goes on loop once I've logged in.

Here is my auth configuration

import {createAuth} from '@keystone-6/auth';
import {statelessSessions} from '@keystone-6/core/session';
import {randomBytes} from 'crypto';

const {withAuth} = createAuth({
    listKey: 'User',
    identityField: 'email',
    secretField: 'password',
    sessionData: 'isAdmin isSuperAdmin',
    initFirstItem: {
        fields: ['name', 'email', 'password'],
    },
});

// Age in seconds
const sessionMaxAge = 60 * 60 * 24 * 30;
let sessionSecret = process.env.SESSION_SECRET;
if (!sessionSecret && process.env.NODE_ENV !== 'production') {
    sessionSecret = randomBytes(32).toString('hex');
}

const session = statelessSessions({
    maxAge: sessionMaxAge,
    secret: sessionSecret!,
});

export {withAuth, session};

and my config:

import {config} from '@keystone-6/core';
import {Lists} from './src/keystone/lists';
import {withAuth, session} from './src/auth';

export default withAuth(
    config({
        db: {provider: 'sqlite', url: 'file:./keystone.db'},
        session,
        lists: Lists,
        // server: {
        //     port: Number(process.env.PORT) ?? 3000,
        // },
        ui: {
            basePath: '/admin',
            isAccessAllowed: () => true,
        },
        graphql: {
            path: '/admin/api/graphql',
        },
        telemetry: false,
    }),
);

I'd highly appreciate your help.

[ggpwnkthx]

Unless the proxy is stripping headers, it should work out of the box.

Just a note, the way you have your code set up, when in production mode, if you don't have a SESSION_SECRET defined in your environmental variables it will randomly generate a new secret every time the service starts up. So if you are intending to use Keystone in a cluster, you'll need to make sure all of the nodes use the same secret.

[migonos0]

Yikes, I can't get it to work. I've tried with tinyproxy and nginx, both present the same issue.

When I enter the admin ui for the first time everything goes fine, but once I log in and reload the page, it goes on loop. I'm proxying my backend from /admin2/. I'm kind of out of ideas.

Here is my nginx.conf

events {
    worker_connections 1024;
}

http {
    server {
        listen 8888;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;

        location / {
            proxy_pass http://watcher-frontend:4321/;
        }

        location /admin2/ {
            proxy_pass http://watcher-backend:3000/admin2/;
        }
    }
}

Again I'd highly appreciate any feedback.

[borisno2]

The location in your proxy config (currently admin2) should match your ui.basePath in your Keystone config (currently admin)

[migonos0]

Thanks. The error persists :(

[ggpwnkthx]

I haven't tested this and it's been a while since I've done anything with nginx directly, but try something like this for your proxy config:

events {
    worker_connections 1024;
}

http {
    upstream frontend {
        server watcher-frontend:4321;  # Defines the main application server
    }

    upstream keystone {
        server watcher-backend:3000;  # Defines the Keystone 6 microservice
    }

    server {
        listen 8888;
        # server_name your.domain.com;  # Replace with your domain name if you have one

        # Common headers to pass along with requests to both locations
        proxy_set_header Host $host;
        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 $server_name;

        location / {
            proxy_pass http://frontend/;  # Redirect all root URL requests to the main application
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }

        location /admin2/ {
            proxy_pass http://keystone/;  # Redirect all /admin2/ requests to the Keystone service
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";

            # Strips the '/admin2/' prefix before forwarding
            rewrite ^/admin2/(.*)$ /$1 break;
        }
    }
}

If you're using Docker for your microservices, you may want to try Traefik to handle HTTP proxy logistics.

[migonos0]

Hello, thanks for replying. I adapted your configuration and no luck. I attach a gift to further explain the issue.

Also I read that for KS-5 you needed to disable safe cookies, I did the equivalent isAccessAllowed: () => true at keystone.ts:

export default withAuth(
    config({
        db: {provider: 'sqlite', url: 'file:./keystone.db'},
        session,
        lists: Lists,
        // server: {
        //     port: Number(process.env.PORT) ?? 3000,
        // },
        ui: {
            basePath: '/admin',
            isAccessAllowed: () => true,
        },
        graphql: {
            path: '/admin/api/graphql',
        },
        telemetry: false,
    }),
);

I'm convinced the issue has to do with the authentication module of kesytone or the way next js working under the hood.

Thanks again for reading, I'd highly appreciate your feedback.