Launching Link

Vital Link API covers only cloud-based providers.Your mobile app has to manage connections with SDK-based providers — such as Apple HealthKit and Android Health Connect — through the Vital Mobile Health SDK, separately from Vital Link.

Your Backend

Create a Vital Link Token for a user using the Create Link Token endpoint.

Vital Link Token expires 60 minutes after its creation.

import { VitalClient, VitalEnvironment } from '@tryvital/vital-node';
import { LinkTokenExchange } from '@tryvital/vital-node/api';


const client = new VitalClient({
    apiKey: '<my_api_key>',
    environment: VitalEnvironment.Sandbox,
});

const request: LinkTokenExchange = {
    userId: "<user_id>",
    provider: "oura",
}
const data = await client.link.token(request)

Your Frontend

Use the Link Token to launch the Link Widget on your frontend.

Option 1: Opening the Link Widget by URL

You can launch the Vital Link Widget using the Link Web URL (link_web_url) as provided by the Generate a Link Token endpoint:

If you have created the Link Token for a specific OAuth provider, Vital Link will dispatch the user automatically to the provider’s sign-in page.
Otherwise, your user will be presented with a list of providers to connect to. You can customize the list via the filter_on_providers parameter when creating the Link Token.

When the Link flow completes, the flow will redirect to the redirect_url you specified earlier when creating the Link Token. We will also append query parameters to the redirection target based on the Link flow outcome:

Flow state	Query parameters
Success	`state=success`
Error	See Link Errors.

Option 2: Using the `useVitalLink` React hook (`@tryvital/vital-link`)

Launching Vital-Link

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 userKey = '560596b9-924b-4af9-a670-cf21870fdac5';
  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'));

Connecting Providers

Bring Your Own OAuth

Vital iOS App

Providers

Data

Mobile SDKs

Guides