//Warning: Make sure this is a child component to VeltProvider 
//and not within the same file where VeltProvider is placed.

// 1) Import the useIdentify hook
import { useIdentify } from '@veltdev/react';

export default function YourAuthComponent() {

  const userService = () => {
    return {
      uid:"123",
      organizationId: "organizationId123", // this is the organization id the user belongs to. You should always use this.
      displayName:"Bob",
      email:"bob@gmail.com",
      photoURL:'https://i.pravatar.cc/300',
      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.
    }
  }

  let yourAuthenticatedUser = userService()

  // 2) Fetch the relevant User info from yourAuthenticatedUser
  const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser;

  // Create the Velt user object
  const user = {
    userId: uid,
    organizationId: organizationId, // this is the organization id the user belongs to. You should always use this.
    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.
  };

  //3) Pass the user object to the SDK
  useIdentify(user)
      

  return (
    <div>
    // Your auth component template
    </div>
  );
}
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,
    organizationId: organizationId, // this is the organization id the user belongs to. You should always use this.
    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.
  };
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,
  });
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: falseBy 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
});


//Warning: Make sure this is a child component to VeltProvider 
//and not within the same file where VeltProvider is placed.

// 1) Import the useIdentify hook
import { useIdentify } from '@veltdev/react';

export default function YourAuthComponent() {

  const userService = () => {
    return {
      uid:"123",
      organizationId: "organizationId123", // this is the organization id the user belongs to. You should always use this.
      displayName:"Bob",
      email:"bob@gmail.com",
      photoURL:'https://i.pravatar.cc/300',
      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.
    }
  }

  let yourAuthenticatedUser = userService()

  // 2) Fetch the relevant User info from yourAuthenticatedUser
  const { uid, displayName, email, photoURL, organizationId, colorCode } = yourAuthenticatedUser;

  // Create the Velt user object
  const user = {
    userId: uid,
    organizationId: organizationId, // this is the organization id the user belongs to. You should always use this.
    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.
  };

  //3) Pass the user object to the SDK
  useIdentify(user)
      

  return (
    <div>
    // Your auth component template
    </div>
  );
}