How to add users to Liveblocks Comments
After following the get started guide for Comments, you’ll notice that each user is currently “Anonymous”, and that there’s no way to mention or tag other users. To enable these features, we need to tell Comments where to find your users’ information.
In this guide we’ll be modifying
our config file, learning how to:
- Add names and avatars to threads and comments with
- Create user mention suggestions in the composer using
The first step is to find an authentication guide for your framework and authenticate your app, as this is necessary for Comments.
Make sure to follow the metadata step in the guide, and attach the name of your user, along with the URL of their avatar, as these properties will both be used in the default components. Here’s an example using access token authentication, with an email address as a user’s ID.
If you’re using ID token authentication, it’ll look a little different.
Don’t forget to modify your
UserMeta type in
liveblocks.config.ts to match
the metadata format, adding type hints to your editor.
To show each user’s name and avatar in threads and comments, we need to use
Users are now visible
After adding this, you should now be able to see your users in threads!
We can see the users that have commented, but we don’t have a way to search for
users to mention, for example after typing the
@ character. We can create a
simple search that resolves this data with
Mention suggestions now appear
Now we’ve found and returned the correct users, Comments can display a list of mention suggestions!
You’re now ready to start building your Comments application! Here’s where you can learn more: