Access control with query accessing linked collection

[thebergamo]

Hi!

I'm loving the control I can have with Payload, it is really amazing CMS like no other.

Today I stumbled in a use case that might be useful to others as well.

I've a collection of pages, and in this I have a field to mark if user has a access to this page (simple checkbox)

With that in mind, I also have a global footer where I link to this pages, but if I would like to have a way to have a "filter condition" to only return in the API for public access the links with pages that are marked as not for specific users.

Only solution that comes to my mind to overcome this is to add this checkbox also to the global footer, but it would be great to filter linked pages properties also.

Would like to know your thoughts on that, thanks in advance:)

[DanRibbens]

You can use the filterOptions property on your relationship field in the footer to do this.

https://payloadcms.com/docs/fields/relationship#filtering-relationship-options

Assuming the name of your checkbox is public, you would add this to your relationship field:
filterOptions: { public: { equals: true } }

Does that make sense?

[thebergamo]

Thank you for your reply @DanRibbens, but seems that it still doesn't make it. Let me provide a real example:
I have the following collection for Pages

export const Page: CollectionConfig = {
  slug: "pages",
  admin: {
    useAsTitle: "title",
  },
  access: {
    read: ({ req: { user } }): AccessResult => {
      console.log("page", { user });
      if (user) {
        return true;
      }
      return {
        "membersOnly.membersOnly": {
          equals: false,
        },
      };
    },
  },
  fields: [
    {
      name: "title",
      label: "Page Title",
      type: "text",
      required: true,
    },
    {
      name: "layout",
      label: "Page Layout",
      type: "blocks",
      minRows: 1,
      blocks: [Media, Announcer],
    },
    membersOnly,
  ],
};

export default Page;

And membersOnly field

import { Field } from "payload/types";

const membersOnly: Field = {
  name: "membersOnly",
  label: "Members Only",
  type: "group",
  admin: {
    position: "sidebar",
  },
  fields: [
    {
      name: "membersOnly",
      type: "checkbox",
      defaultValue: false,
    },
    {
      name: "level",
      label: "Level",
      type: "radio",
      options: [
        { value: "newbie", label: "Newbie" },
        { value: "hacker", label: "Hacker" },
      ],
      defaultValue: "newbie",
      admin: {
        condition: (_, siblingData) => Boolean(siblingData.membersOnly),
      },
    },
  ],
};

export default membersOnly;

Next is my Header (as global)

import { GlobalConfig } from "payload/types";

const Header: GlobalConfig = {
  slug: "header",
  label: "Header",
  access: {
    read: () => true,
  },
  fields: [
    {
      name: "nav",
      label: "Navigation",
      type: "array",
      labels: {
        singular: "Link",
        plural: "Links",
      },
      fields: [link],
    },
  ],
};

export default Header;

and last link field

import { Field } from "payload/types";

const link: Field = {
  name: "link",
  type: "group",
  fields: [
    {
      name: "type",
      type: "radio",
      options: [
        {
          label: "Page",
          value: "page",
        },
        {
          label: "Custom URL",
          value: "custom",
        },
      ],
      defaultValue: "page",
      admin: {
        layout: "horizontal",
      },
    },
    {
      type: "row",
      fields: [
        {
          name: "label",
          label: "Label",
          type: "text",
          required: true,
          admin: {
            width: "50%",
          },
        },
        {
          name: "page",
          label: "Page to link to",
          type: "relationship",
          relationTo: "pages",
          required: true,
          admin: {
            condition: (_, siblingData) => siblingData?.type === "page",
            width: "50%",
          },
          filterOptions: ({ user }) => {
            console.log("filter", { user });
            return {
              "membersOnly.membersOnly": { equals: true },
            };
          },
        },
        {
          name: "url",
          label: "Custom URL",
          type: "text",
          required: true,
          admin: {
            condition: (_, siblingData) => siblingData?.type === "custom",
            width: "50%",
          },
        },
      ],
    },
  ],
};

export default link;

So, with this setup, I've added few pages to my Header and one with "membersOnly" set to true.

But when I request http://localhost:3000/api/globals/header I get a response with the item inside "nav" with the "membersOnly" set to true (not whole object, but only "id" for the page.
I believe ideally it should be hidden.

Is there anything I'm doing wrong?

Thank you in advance guys!

[DanRibbens]

The example really helps, filterOptions is for something different. You are right to use access control and the result you get is the expected behavior.

The way relationship access works is that it does still allow the related collection IDs through. Normally for this I'd recommend field level access control, but that doesn't work for your use either you need it to be conditional.

What you should do is keep the access control just how you have it and filter out the non-object entries in a field level afterRead hook. That will be the only way to hide those IDs of member only pages.

Sound good?

[thebergamo]

Let me try and I will keep you posted.
I found a different way to do it, once I do it again I let you know