# How to add users to Liveblocks presence components

After following the get started guide for presence components, 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 Liveblocks where to find your users’ information.

## What we’re learning

In this guide we’ll be modifying [`LiveblocksProvider`](/content/docs/api-reference/liveblocks-react#LiveblocksProvider/index.html), learning how to:

- Authenticate your application with [`authEndpoint`](/content/docs/api-reference/liveblocks-react#LiveblocksProviderAuthEndpoint/index.html) and [`identifyUser`](/content/docs/api-reference/liveblocks-node#id-tokens/index.html).
- Add names and avatars to threads and comments with [`resolveUsers`](/content/docs/api-reference/liveblocks-react#resolveUsers/index.html).

## Authenticate your application

The first step is to find an [authentication guide for your framework](/content/docs/authentication/index.html) and authenticate your app, as this is necessary for adding users. Here’s an example using ID token authentication, our recommended method, with an email address as a user’s ID.

Metadata in ID tokens

```ts
const { status, body } = await liveblocks.identifyUser({
    userId: "marc@example.com",
    // Optional
    // organizationId: "org-id",
    // groupIds: ["group-id-1", "group-id-2"],
}, {
    userInfo: {
        // Optional, custom metadata
        // ...
    },
});
```

## Resolving users

To show each user’s name and avatar in the ready-made [`AvatarStack`](/content/docs/api-reference/liveblocks-react-ui#AvatarStack/index.html) and [`Cursors`](/content/docs/api-reference/liveblocks-react-ui#Cursors/index.html) components, we need to use [`resolveUsers`](/content/docs/api-reference/liveblocks-client#resolveUsers/index.html).

1. ### Add the function to your LiveblocksProvider

The [`resolveUsers`](/content/docs/api-reference/liveblocks-react#LiveblocksProviderResolveUsers/index.html) function is passed as an option to [`LiveblocksProvider`](/content/docs/api-reference/liveblocks-react#LiveblocksProvider/index.html)—let’s add it. This function provides you with `userIds`, an array of user IDs that have interacted with Comments. These `userIds` match the IDs set when authenticating users in your app.

```tsx
<LiveblocksProvider  resolveUsers={async ({ userIds }) => {
    // ["marc@example.com", ...]
    console.log(userIds);
    // Return a list of users
    // ...
  }}
  // .../>
```

2. ### Return your users

`resolveUsers` requires you to return a list of users in the `UserMeta["info"]` format we set earlier. Remember that _name_ and _avatar_ are required for the default components, but you can also use any other metadata in your app.

```tsx
<LiveblocksProvider  resolveUsers={async ({ userIds }) => {
    // ["marc@example.com", ...]
    console.log(userIds);
    // Return a list of users
    return [
      {
        name: "Marc",
        avatar: "https://example.com/marc.png",
        // Your custom metadata
        // ...
      },
      // ...
    ];
  }}
  // .../>
```

We’re only returning one user here, but make sure to return an array containing each user, in the same order you received the IDs.

3. ### Real-world example

In your real application you’ll probably be getting users from your API endpoint and database via `fetch`. This is how we’d recommend building out this function.

```tsx
<LiveblocksProvider  resolveUsers={async ({ userIds }) => {
    // Get users from your back end
    const users = await __fetchUsers__(userIds);
    // Return a list of users
    return users;
  }}
  // .../>
```

4. ### Render the presence components

Import the presence components in your app to see them. `Cursors` wraps around the component where the cursors will appear.

```tsx
import { AvatarStack, Cursors } from "@liveblocks/react-ui";
function App() {
  return (
    <Cursors style={{ width: "100vw", height: "100vh" }}>
      <AvatarStack />
      {/* Rest of your app here */}
    </Cursors>
  );
}
```

5. ### Users are now visible

After adding this, you should now be able to see your users in presence components!

## Next steps

You’re now ready to start building your multiplayer Liveblocks application! Here’s where you can learn more:

- [Overview](/content/docs/ready-made-features/multiplayer/index.html)
- [API reference](/content/docs/api-reference/liveblocks-react/index.html)
- [Examples](/content/examples/browse/comments/index.html)