Launching Link

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 Junction 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, Junction 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`, `provider=<provider_slug>`, and `isMobile=<true or false>`
Error	See Link Errors.

For successful provider connections, provider is the connected provider’s slug and isMobile indicates whether Junction Link identified the final callback request as mobile. Both parameters are encoded as strings and appear exactly once.Junction preserves existing non-empty query parameters that do not conflict with Link parameters. If the supplied redirect_url already contains state, provider, or isMobile, the Junction-generated value replaces it. Do not rely on query parameter ordering.

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

Launching Junction-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 Junction Link
    </button>
  );
};

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

Bring Your Own OAuth

Junction iOS App

Providers

Connecting Providers

Device Data

Mobile SDKs

Provider Guides