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

2) Create a useEffect hook

Create the useEffect hook with client and yourAuthenticatedUser as dependencies.

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

3) 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 } = yourAuthenticatedUser;

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

To enable @mention in the comments, you need to pass the user’s contacts. Learn more about how it works here.

4) Pass the user object to the SDK

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

  await client.identify(user);
The client.identify() method is asynchronous.
//Warning: Make sure this is a child component to VeltProvider 
//and not within the same file where VeltProvider is placed.

// 1) Get the Velt Client
import { useVeltClient } from '@veltdev/react';
import { useEffect } from 'react';


export default function YourAuthComponent() {

  const userService = () => {
    return {
      uid:"123",
      displayName:"Bob",
      email:"bob@gmail.com",
      photoURL:'https://i.pravatar.cc/300'
    }
  }

  let yourAuthenticatedUser = userService()

  const { client } = useVeltClient();

  // 2) Create a useEffect hook
  useEffect(() => {
    const initVelt = async () => {
      if (client && yourAuthenticatedUser) {

        // 3) Fetch the relevant user info from yourAuthenticatedUser
        const { uid, displayName, email, photoURL } = yourAuthenticatedUser;

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

        //4) Pass the user object to the SDK
        await client.identify(user)
      }
    }
    initVelt().catch(console.error)
  }, [client, yourAuthenticatedUser]);

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

Was this page helpful?

1. Install3. Initialize Document