Unable to use access (does not affect localhost)

[Barbacoa08]

Bug Report

On localhost, everything works as expected. But once I host my Payload implementation, I get a 403 on any access point that is not () => true. (hosted on Northflank, tutorial that I followed)

Steps to Reproduce

1. npx create-payload-app
2. copy-paste "roles" from Users.ts and the files src/access/isAdmin.ts+src/access/isLoggedIn.ts from Payload CMS Access Control Demo
3. update any Collection to use () => true for read access, and all other access points to use isAdmin
4. test on localhost (I used Mongo DB Atlas as my DB)
5. see that everything works as expected
6. test on hosted environment (I used Northflank)
7. see that all non-read events give 403 even though checks pass

Other Details

Link to WIP GitHub repo.

Example Access Code:

  access: {
    create: isAdmin,
    read: () => true,
    update: isAdmin,
    delete: isAdmin,
  },

Example Access Code with output logs:

    create: isAdmin,
    read: (args) => {
      console.log(`has args: ${Boolean(args)}`);
      console.log(`is logged in: ${isLoggedIn(args)}`);
      console.log(`is admin: ${isAdmin(args)}`);
      console.log(`is editor or admin: ${isEditorOrAdmin(args)}`);
      console.log(`is admin or self: ${isAdminOrSelf(args)}`);

      return true;
    },
    update: isAdmin,
    delete: isAdmin,

Example image of container logs from Northflank showing that the check are passing when hitting the read access point, but failing with a 403 when any other point is hit:

other-other details

I did try setting all of my access CRUD to just () => true, and that worked in my hosted environment. But then of course anyone can do anything. So I do have a workaround for my editors, but it's pretty inconvenient as I can only allow them to edit for a small time frame.

Finally, this is my first time using PayloadCMS, and I am hoping that I made some very simple mistake somewhere. Thank you in advance for you help!

[JarrodMFlesch]

@Barbacoa08 did you read the common issues at the bottom of that article? It sounds very similar to your issue above, let us know and we can go from there 👍

[Barbacoa08]

@JarrodMFlesch, I did check the common issues and that wasn't it. I triple checked my DB connection string testing on both my localhost and my docker environment and it's the same in both.

[JarrodMFlesch]

You have your serverURL configured in your payload config right?

I am going to turn this into a discussion as I don't think this is an issues with payload. Lets continue this convo there!

[Barbacoa08]

Correct, my server.ts looks like:

import express from "express";
import payload from "payload";

require("dotenv").config();
const app = express();

// Redirect root to Admin panel
app.get("/", (_, res) => {
  res.redirect("/admin");
});

// Initialize Payload
payload.init({
  secret: process.env.PAYLOAD_SECRET,
  mongoURL: process.env.MONGODB_URI,
  express: app,
  onInit: () => {
    payload.logger.info(`Payload Admin URL: ${payload.getAdminURL()}`);
  },
});

// Add your own express routes here

app.listen(3000);

[Barbacoa08]

Alternatively, I am not strongly tied to any particular build system, is there a tutorial for setting up Payload CMS end-to-end? The only reason I went with Northflank was because they had a tutorial for how to fully setup Payload CMS including a DB and file storage. But if there is another, recommended, way, I'm happy to try it out.

I've never setup a CMS before, so this is pretty new territory for me and I'm floundering a bit 😅

[Barbacoa08]

The issue I was having was that I wasn't adding http/https to my URLs in the csrf section. As described by this comment in a different conversation.