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.
Provide an initial within the user object. If the initial is not provided in the identify call, then we will automatically create it using the name.
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,
  });
We will use the email address and organizationId passed in the identify call to validate the user later to prevent unauthorized access.

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