Passing variables to createClient constructor in Next.js

[azivkovi]

Hello, it would be helpful to me having a more specific example on how to fetch users data in liveblocks.config.js.

From the docs currently:

// ...

export const {
  /* ... */
} = createRoomContext(client, {
  resolveUsers: async ({ userIds }) => {
    const usersData = await __getUsersFromDB__(userIds);

    return usersData.map((userData) => ({
      name: userData.name,
      avatar: userData.avatar.src,
    }));
  },
});

The config file is in the root of the project and I can't read session or context in order to get userIds using hooks. The only way I got it to work is setting a cookie specially for this purpose containing userId and then reading it on the authEndpoint.

This is the docs page:

Ex. https://liveblocks.io/docs/api-reference/liveblocks-react

Thank you.

[CTNicholas]

Hey @azivkovi, thanks for the message! We're working on more docs that will be complete on, or shortly after, our Comments launch (it's still in private beta) 🙂

Setting a cookie, right! We'd recommend using a fetch function inside resolveUsers, to get the users from your back end. Is this possible in your app? Would setting a cookie, or something like sessionStorage still be required? Any info about your auth set up would be appreciated!

[azivkovi]

Thank you for the info @CTNicholas. The docs are really well done and we did get the app running in a couple of days. It was just this one thing I was wondering if there is a better way than what we do.

This is our auth setup in liveblocks.config.js, which is pretty standard:

const client = createClient({
  authEndpoint: async (room) => {
    const response = await fetch('/api/v1/liveblocks/auth', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', Authorization: process.env.API_KEY },
      body: JSON.stringify({ room }),
    });
    return await response.json();
  },
});

The auth endpoint reads the cookie containing userId and gets the user from db. This is just for single user auth. We set the cookie just for this purpose, but I was wondering if it was possible for authEndpoint to get the userId right here in liveblocks.config.js as a prop alongside room. Using sessionStorage isnt possible because it requires window object which isn't defined at that point.

[CTNicholas]

Thank you for the kind words @azivkovi!

---

Okay, thanks for the info on your setup!

but I was wondering if it was possible for authEndpoint to get the userId right here in liveblocks.config.js as a prop alongside room

Do you mean like this?

authEndpoint: async (room, userId) => {
//                         ^^^^^^

This actually isn't possible! userId isn't set until after this function has been returned, therefore we can't provide its value. authEndpoint is only called when you connect to the app, and we use it to set the userId.

Did you mean you'd like userId provided to resolveUsers?

[azivkovi]

I was thinking of having the userId loaded in the liveblocks.config.js before setting the liveblocks client and then just passing it in the body of the post request to the auth endpoint.

If that isn't possible I guess the only way for the auth endpoint to get the userId is reading if from cookies on the backend. Is that right, or perhaps there is another way that you guys prefer or recommend doing it?