It is critical that you do the following steps within a child component and not within the same root component where you placed the VeltProvider.
Realistically, these steps should be done inside your component that handles authentication.

Import the useIdentify Hook

Import the useIdentify hook.

  import { useIdentify } from '@veltdev/react'

Fetch relevant user info

Create a Velt User object.

  // Fetch the relevant user info from `yourAuthenticatedUser`
  const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser;

  // Create the Velt user object
  const user = {
    userId: uid,
    name: displayName,
    email: email,
    photoUrl: photoURL,
    color: colorCode, // Use valid Hex code value. Used in the background color of the user's avatar.
    textColor: textColor, // Use valid Hex code value. Used in the text color of the user's intial when photoUrl is not present.
    organizationId: organizationId // this is the organization id the user belongs to

To enable @mention in the comments, you need to pass the user’s contacts. Learn more about how it works here.


Pass the User object to the SDK

Call the useIdentify() hook and pass in the Velt User object.

The useIdentify() method is asynchronous.
You must call useIdentify within a child component of the VeltProvider, or else it will not work.

(Optional) - Add JWT Tokens for additional security

The second parameter of the useIdentify() method is an optional configuration object that has a JWT Token as a field.

This can be used to add an additional layer of security to prevent user impersonation.

  useIdentify(user, {
    authToken: authToken,

See JWT Tokens for more information on how to generate a JWT Token with the Velt SDK.


(Optional) - Force re-login user on identify call

Default: false

By default when you identify a User, we maintain the user auth in the browser unless you explicitly sign out the logged in user.

If you are changing a User’s access or any metadata and want those changes to be reflected immediately, then you should re-call the identify method with forceReset option set to true.

useIdentify(user, {
  forceReset: true