//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",
      displayName:"Bob",
      email:"bob@gmail.com",
      photoURL:'https://i.pravatar.cc/300',
      groupId: groupId
    }
  }

  let yourAuthenticatedUser = userService()

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

  // Create the Velt user object
  const user = {
    userId: uid,
    name: displayName,
    email: email,
    photoUrl: photoURL,
    groupId: groupId
  };

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

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

  • React / Next.js with Hooks

  • React / Next.js

  • HTML

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, groupId } = yourAuthenticatedUser;

  // Create the Velt user object
  const user = {
    userId: uid,
    name: displayName,
    email: email,
    photoUrl: photoURL,
    groupId: groupId // 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.