Connecting to 3rd party data sources from within Live Preview

[jessecoleman]

Hi,

My team is integrating Payload into our existing NextJS application, and have gotten over most of the major hurdles so far. I'm currently trying to build out a few collection live previews, and running into a hitch with accessing certain user/auth fields from within the live preview context.

We're trying to use payload to edit a subset of fields on an entity that already exists within our own database, and need to merge the object from our BE with the one in Payload. To do this, I am using afterRead to augment the payload document with data fetched from our BE. Additionally, we're bypassing Payload's built in auth to use our existing Auth0 sessions instead. So far so good, we can get data from the database, using the Auth0 session cookie inside Payload on the server to access our external DB securely.

Since live preview runs inside an iframe and uses window.postMessage, the rendering environment doesn't have access to auth cookies. And it seems like the data passed via postMessage doesn't bring along virtual fields set by afterRead. So there's seemingly no way to get our external DB data into the live preview, which we need to do to be able to display the components correctly. Is there some hook or lifecycle event I'm missing that would allow me to get the data into live preview?

Below is our auth strategy, which allows us to read from the request cookies set by our Auth0 tenant, and then access the user from within Payload. This user is attached to the req object for any requests made from the host, but then within the iFrame, req.user is null, as the docs indicate that the req object is mocked out.

const auth0Strategy: AuthStrategyFunction = async (args) => {
  const payload = args.payload;
  const headers = args.headers;
  try {
    const cookies = headers.get('cookie');

    const appSessionCookie = cookies
      .split(';')
      .map((cookie: string) => cookie.trim())
      .find((cookie: string) => cookie.startsWith('appSession='));

    const auth0UserResponse = await fetch(
      `${process.env.NEXT_PUBLIC_HOST_BASE_URL}/api/auth/me`,
      {
        headers: {
          Cookie: appSessionCookie,
        },
      },
    );

    const auth0User = await auth0UserResponse.json();
    const auth0Id = auth0User.sub.split('|')[1];

    let {
      docs: [user],
    } = await payload.find({
      collection: 'users',
      where: {
        auth0Id: { equals: auth0Id },
      },
    });

    if (!user) {
      user = await payload.create({
        collection: 'users',
        data: {
          ...auth0User,
          auth0Id,
        },
      });
    }
    return {
      user,
      message: 'Authenticated',
    };
  } catch {
    return {
      user: null,
      message: 'Error'
    }
  }
}

And here's one of my collection hooks, that adds a title field from our external db.

  hooks: {
    afterRead: [
      async ({ req, doc, context }) => {
        // I added the `client` to context here, this makes a fetch request to our other service which requires auth
        const project = await context.client.projects.getProject(
          doc.projectId, {
            // works for regular requests, undefined for livePreview
            cookie: req.headers.get('cookie')
          }
        );
        doc.title = project.name;
        return doc;
      },
    ],
  },