Cord LogoDocs
Sign inStart now

Observe logged-in user data

User API /
Ask the Community

Observe data about the logged-in user to customize the experience

Overview #

This method allows you to observe data about the logged-in user, including live updates.
React:
import { user } from '@cord-sdk/react';
const data = user.useViewerData();
return (
  <div>
    {!data && "Loading..."}
    {data && (
      <p>User name: {data.name}</p>
      <p>User short name: {data.shortName}</p>
      <p>User profile picture: <img src={data.profilePictureURL} /></p>
      <p>Group ID: {data.groupID}</p>
    )}
  </div>
);
Vanilla JavaScript:
const ref = window.CordSDK.user.observeViewerData(
  (data) => {
    // Received an update!
    console.log("User name", data.name);
    console.log("User short name", data.shortName);
    console.log("User profile picture URL", data.profilePictureURL);
    console.log("Group ID", data.groupID);
  }
);
import { user } from '@cord-sdk/react';
const data = user.useViewerData();
return (
  <div>
    {!data && "Loading..."}
    {data && (
      <p>User name: {data.name}</p>
      <p>User short name: {data.shortName}</p>
      <p>User profile picture: <img src={data.profilePictureURL} /></p>
      <p>Group ID: {data.groupID}</p>
    )}
  </div>
);
Copy

Available Data #

The API provides an object which has the following fields:

id #

string
The user's ID. This is unique within a project.

name #

string | null
The user's name.

shortName #

string | null
The user's short name. In most cases, Cord components will prefer using this name over name when set.

profilePictureURL #

string | null
A URL to the user's profile picture.

metadata #

EntityMetadata
Any metadata that has been set for the user.

groupID #

string | null
The identifier for the group that the current user is using (i.e., the group specified in the access token). Null if and only if no group was specified in the access token.

notificationPreferences #

object

This is an object with the following fields:

Show property details

isSlackConnected #

boolean
If the user has connected to a Slack user

groupIsSlackConnected #

boolean
If the group is connected to a Slack workspace

groups #

string[]
The group ids the user is currently a member of.

displayName #

string
The primary display name of the user. This is a readonly field that's provided as a convenience. Its value is the user's shortName or name, preferring shortName if both are set, or the string "unknown" if neither is set.

secondaryDisplayName #

string
The secondary display name of the user, in cases where you might want to display a secondary name (such as in a subtitle). This is a readonly field that's provided as a convenience. Its value is the user's name or shortName, preferring name if both are set, or the string "Unknown" if neither is set.

What this function returns #

The hook will initially return undefined while the data loads from our API. Once it has loaded, your component will re-render and the hook will return an object containing the fields described under "Available Data" above. The component will automatically re-render if any of the data changes, i.e., this data is always "live".

Arguments this function takes #

None

Not finding the answer you need? Ask our Developer Community

Ask Cordy