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.
1

Import the useIdentify Hook

Import the useIdentify hook.

  import { useIdentify } from '@veltdev/react'
2

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.

3

Pass the User object to the SDK

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

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

(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.

5

(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
});

Was this page helpful?

1. Install3. Initialize Document