Guidance on implementing tenant field from multi-tenant example

[IAmNatch]

Hi there,

I've been working through implementing multi-tenancy in my payload instance based on the multi-tenant example directory.

One thing I've been stuck on is following this comment regarding the tenant field.

// don't require this field because we need to auto-populate it, see below
// required: true,
// we also don't want to hide this field because super-admins may need to manage it
// to achieve this, create a custom component that conditionally renders the field based on the user's role
// hidden: true,

Based on my understanding of this, I would expect that we could either:

1. Create a new component that wraps the base relationship field, fetch the complete user object, and then return null if the role is incorrect. Two issues I can see with this:

   • Unfortunately, payload does not currently export the reletionship field, and therefore developers would need to recreate it line by line (potentially running into compatibility issues).
   • It does not appear that the useAuth React Hook provides detailed enough user information to evaluate the role.

2. Add a condition the the field itself - This doesn't appear possible based on the limited user param passed to condition fields.

Has anyone else run into this?

[JarrodMFlesch]

@IAmNatch You could import the relationship from payload/dist/admin/components/forms/field-types/Relationship and then thread all of the props provided to your custom component to Relationship field you imported.

As for the useAuth hook, I believe the roles field on the user collection needs saveToJWT: true on it.

Want to give that a shot and let us know how it goes?

[IAmNatch]

Hi @JarrodMFlesch,

Thanks for taking some time to look at this!

I've tried your recommendation, but unfortunately it didn't pan out.

useAuth/JWT - I tried setting the saveToJWT value to true on the tenant field which has a type of relationship, however even after clearing all local site data (in attempt to reset the JWT), I still only recieve the fields: collection email exp iat and id.

Importing the Relationship Field - Unfortunately, when importing from the dist folder, the imported SCSS files are not transpiled, leading to parsing errors. I'll not that I'm using payloads next-payload plugin, which may be the reason the dist folder is not being properly compiled. I haven't tested on a vanilla payload instance yet- if it's a payload-next only issue, I'll move that part of the discussion over to the other repo.

[IAmNatch]

Quick follow up. I tested out the /dist import in a brand new, vanilla payload project. The import did resolve successfully, though it did lead to a very high number of webpack warnings coming up in the console.

There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

With this in mind, is there a possibility the base components might be included in the top level index.ts exports?

[IAmNatch]

Looks like #293 will help with the component side of things. Whether importing from dist is doable or not, I think it makes sense to export these components as part of the payload package.

[MatthewHager]

My tenant field is named 'client,' but otherwise this code is working for me:

import type { Field, Condition } from "payload/types";
import { superAdminFieldAccess } from "../../access/superAdmins";
import { isSuperAdmin } from "../../utilities/isSuperAdmin";
import { clientAdminFieldAccess } from "./access/clientAdmins";
import type { User } from "payload/generated-types";

export const client: Field = {
  name: "client",
  type: "relationship",
  relationTo: "clients",
  index: true,
  admin: {
    position: "sidebar",
    // @ts-ignore - TS can't match the user types :(
    condition: (data, siblingData, { user }) => isSuperAdmin(user),
  },
  access: {
    create: superAdminFieldAccess,
    read: clientAdminFieldAccess,
    update: superAdminFieldAccess,
  },
  hooks: {
    beforeChange: [
      async ({ req, req: { user }, data }) => {
        if ((await isSuperAdmin(user)) && data?.client) {
          return data.client;
        }

        return user?.lastLoggedInClient?.id;
      },
    ],
  },
};

[MatthewHager]

One more suggestion, if you are doing multi-tenancy and you run across this discussion, you can use the Bonjour package to broadcast mdns, and you don't need to mess with your hosts file. I have a Clients collection instead of Tenants, and instead of an array of domains, I have a single "subdomain" field. I loop through those and broadcast each using Bonjour. This results in being able to access each in your browser at http://clientsubdomain.local:3000. If you add a new subdomain, you'll need to restart your server so that it picks up the change.

import express from "express";
import payload from "payload";
import Bonjour from "bonjour-service";
import dotenv from "dotenv";

dotenv.config();

const app = express();
const port = 3000;

// Create a new instance of Bonjour
const bonjour = new Bonjour();

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

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

      // Fetch unique subdomains from the Clients collection
      const clients = await payload.find({
        collection: "clients",
      });

      const subdomains = [];

      clients.docs.forEach((client) => {
        if (client.subdomain) {
          subdomains.push(client.subdomain);
        }
      });

      // Broadcast each unique subdomain using Bonjour
      subdomains.forEach((subdomain) => {
        bonjour.publish({
          name: subdomain, // Use the subdomain as the name
          type: "http",
          port: port,
          host: `${subdomain}.local`, // Append .local to the subdomain
        });

        console.log(`mDNS broadcast started with name "${subdomain}.local"`);
      });
    },
  });

  app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
  });
};

// Handle server shutdown and stop broadcasting
process.on("SIGINT", () => {
  bonjour.unpublishAll(() => {
    bonjour.destroy();
    console.log("mDNS broadcast stopped");
    process.exit(0);
  });
});

start();