2. Authenticate

Get Started

Key Concepts

Overview
Organizations
Documents
Locations
Users
Access Control

Async Collaboration

Comments
In-app Notifications
Inline Reactions
Recorder
View Analytics
Arrows

Realtime Collaboration

Presence
Cursors
Follow Me Mode
Huddle
Live Selection
Live State Sync
Single Editor Mode
Video Player Sync

Self-Host Data

Email Notifications

Overview

Webhooks

Security

Miscellaneous

Migrate From Cord
Common Integration Questions

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

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

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.

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

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

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.

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

We recommend following the setup guide that uses React / Next.js with Hooks for a cleaner experience.

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.

Get the Velt client

Import the useVeltClient React hook. You can use this hook within your component to fetch the Velt client.

import { useVeltClient } from '@veltdev/react';

const { client } = useVeltClient();

Create a useEffect hook

The code in the following steps will go inside this useEffect hook.

  useEffect(() => {
    if (client && yourAuthenticatedUser) {
      // Fetch the relevant user info from your authenticated user object.
    }
  }, [client, yourAuthenticatedUser]);

Fetch relevant user info

Create a Velt User object by taking the relevant fields from yourAuthenticatedUser.

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

Pass the User object to the SDK

Call the identify() method and pass in the Velt User object.

  await client.identify(user);

The client.identify() method is asynchronous.

You must call client.identify 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.

(Optional) - Add JWT Tokens for additional security

The second parameter of the client.identify() 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.

  await client.identify(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.

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

await client.identify(user, {
  forceReset: true
});

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.

Identify the Logged In User

Call this function in the component where you authenticate your Users once your Velt client and your User object is available.

If your .js files are all in one file, you will need to include the .js file on every html page you want the features to be enabled on.

Make sure you pass the User with the fields defined in the User object or refer to the example below.

await Velt.identify(yourLoggedInUser)

The Velt.identify() method is asynchronous

You must call client.identify 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.

(Optional) - Add JWT Tokens for additional security

The second parameter of the client.identify() 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.

await Velt.identify(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.

await Velt.identify(user, {
  forceReset: true
});

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.

Get 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.
  };

Identify your user

this.client.identify(user);

The this.client.identify() method is asynchronous.

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.

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

this.client.identify(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.

this.client.identify(user, {
  forceReset: true
});

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.

Get 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.
  };

Identify your user

client.identify(user);

The client.identify() method is asynchronous.

You must call client.identify() 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.

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

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

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

Was this page helpful?

1. Install 3. Initialize Document

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