Setup
2. Authenticate
Autheticate your logged in users with the SDK.
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?
//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>
);
}