Launching Link
Your Backend
Create a Vital Link Token for a user using the Create Link Token endpoint.
You may want to launch Vital Link for an individual provider. This launches the Vital Link widget straight into the login flow for the specified provider.
To do so, you just pass in the provider name as one of the parameter’s to the link create endpoint.
Your Frontend
Use the Link Token to launch the Link Widget on your frontend.
You can launch the Vital Link Widget by its URL:
-
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.
Environment | URL format |
---|---|
Sandbox US | https://link.tryvital.io/?token={LINK_TOKEN}&env=sandbox®ion=us |
Sandbox EU | https://link.tryvital.io/?token={LINK_TOKEN}&env=sandbox®ion=eu |
Production US | https://link.tryvital.io/?token={LINK_TOKEN}&env=production®ion=us |
Production EU | https://link.tryvital.io/?token={LINK_TOKEN}&env=production®ion=eu |
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. |
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'));