Vital Link

Introduction to Link

Once you have your first user you are now ready to use Vital Link. Vital Link is the client-side component your users will interact with. They will use it to connect their wearables accounts to Vital and allow you to access their account data via the Vital API.

Vital Link is easily integrated in your application via our Python and React libraries.

Vital Link Flow

The Vital Link flow is the process that connects your user's wearables accounts to the Vital API.

1. The Link flow starts by creating a temporary link_token. Using the user_id you created previously, you can generate the link_token by calling the /link/token endpoint.

Parameters:

user_id

string

Unique key to lookup Vital user

from vital import Client

client = Client(
  client_id, 
  client_secret, 
  environment="sandbox"
)
 
token = client.Link.create(user_id, "oura")

const { VitalClient } = require("Vital");

const client = new VitalClient({
  client_id: <CLIENT_ID>,
  client_secret:  <CLIENT_SECRET>,
  environment: "sandbox",
});
   
const resp = await client.Link.create(client_user_id, "oura")

{
  "link_token": "dGVzdCB0ZXN0IHRlc3Q=..."
}

2. Use the link_token to open a temporary link for your user. We provide a Vital Link react-hook to launch this link from your frontend. Once your user has launched the link component, we will handle authentication with their chosen provider.

link_token

string

A temporary token used to generate a link for user's to access the Vital Link component.

import 'react-app-polyfill/ie11';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { useCallback } from 'react';

import { useVitalLink } from '@tryvital/vital-link';
import { useState } from 'react';

const API_URL = process.env.API_URL ? process.env.API_URL : "http://localhost:3001"

const getTokenFromBackend = async (userKey: string, env: string) => {
  const resp = await fetch(<backend_url>);
  return await resp.json();
};
  
const App = props => {
  const userId = '560596b9-924b-4af9-a670...'; // user_id
  const [isLoading, setLoading] = useState(false);

  const onSuccess = useCallback(metadata => {
    // Device is now connected.
  }, []);

  const onExit = useCallback(metadata => {
    // User has quit the link flow.
  }, []);

  const onError = useCallback(metadata => {
    // Error encountered in connecting device.
  }, []);

  const config = {
    onSuccess,
    onExit,
    onError,
    env: "sandbox"
  };

  const { open, ready, error } = useVitalLink(config);

  const handleVitalOpen = async () => {
    setLoading(true);
    const token = await getTokenFromBackend(userKey, "sandbox");
    open(token);
    setLoading(false);
  };

  return (
    <button
      type="button"
      className="button"
      onClick={handleVitalOpen}
      disabled={isLoading || !ready}
    >
      Open Vital Link
    </button>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

3. If successful, the onSuccess callback will be triggered and your user's account is will be connected to Vital. The Vital backend will then start to pull data from the connected account and listen to any new readings from the user's device.