You can provision a new token by making a POST request to the Create Connection Invite Token API with the following payload:

{
    "vendor": "CROWDSTRIKE"
}

A connection invite token will be returned for a specific vendor - this token can be used to only create one new connection for the vendor specified in the payload.

• you can optionally pass in any connection options, like you would when creating a new connection via our API. These options will not be visible to the user, but will directly be applied to the connection when it is created.

  Copy

  {
      "vendor": "SNYK",
      "options": {
          "oauth2_redirect_urls": {
              "success": "https://echo.free.beeceptor.com/?status=success",
              "error": "https://echo.free.beeceptor.com/?status=error"
          }
      }
  }
  

Leen’s OnRamp component has been published to npm library and can be installed using npm, yarn, bun, or any other package manager.

npm install @leendev/onramp

Once installed, you can import the component into your React application and initialize it with the connection invite token. Here is an example of how you can use the OnRamp component in your React application:

import React, { useState } from "react";
import { LeenOnRamp, LeenOnRampResponse } from "@leendev/onramp";

interface LeenOnRampDemoProps {
connectionInviteToken: string;
}

const LeenOnRampDemo: React.FC<LeenOnRampDemoProps> = ({ connectionInviteToken }) => {
    // connection creation/ update response
    const [onRampResponse, setLeenOnRampResponse] = useState<LeenOnRampResponse | undefined>(undefined);

    // control opening and closing of modal
    const [isModalOpen, setIsModalOpen] = useState(false);

    return (
        <div>
            <button onClick={() => setIsModalOpen(true)}>
            Open Leen OnRamp
            </button>
            {isModalOpen && (
                <LeenOnRamp
                    token={connectionInviteToken}
                    setLeenOnRampResponse={setLeenOnRampResponse}
                    setShowLeenOnRamp={setIsModalOpen}
                />
            )}
        </div>
    );
}

export default LeenOnRampDemo;

Use the useEffect hook with onRampResponse to handle the response from the OnRamp component and perform any necessary actions in your application. Whenever onRampResponse changes, the effect will run, allowing you to process the response data.

useEffect(() => {
    if (onRampResponse) {
        // perform your desired actions here 
        console.log(onRampResponse);
    }
}, [onRampResponse]);

onRampResponse will be an object of type LeenOnRampResponse, which can be imported in your application as seen in the snippet above. For reference, here is what the response object would look like:

{   
    "data": {
        "id": "59851f06-9867-4b9c-81d2-c9a3b1d44177",
        "vendor": "SENTINELONE",
        "is_active": true,
        "refresh_interval_secs": 14400,
        "timeout_secs": 3600,
        "organization_id": "12345678-1234-1234-1234-1234567890",
        "oauth2_authorize_url": null,
        "identifier": null
    },
    "httpStatus": 200,
    "message": ""
}

    useEffect(() => {
        window.addEventListener('leenConnectionError', (event) => {
            // handle error tracking here
            console.log('leenConnectionError', event);
        });
    }, []);

You can optionally override some settings for the OnRamp component. Specifically, you can change:

1. Primary color (defualts to Leen’s brand colors)

2. Logo (defaults to Leen’s logo)

3. Docs URLs for specficic vendors (defaults to Leen’s docs)

4. Font Family (defaults to Inter). To override the font family, you will have to provide both:

   • fontFamily: the name of the font family
   • fontUrl: the url to the font stylesheet (what you would normally add to the head of your html document)

5. Font Size. You can override the font size for specific text elements in the OnRamp component.

   • headerSize: the size of the heading font (defaults to 1.25rem)
   • bodySize: the size of the body font (defaults to 1rem)
   • buttonSize: the size of the button font (defaults to 0.875rem)
   The font size can be in any standard css unit, like px, rem, em, etc.

6. Dark Mode. By default, OnRamp will use a light theme. You can override this by setting darkMode to true to switch to a dark theme.

7. Dark Mode Colors. If the dark mode theme does not match your application’s colors, you can override the primary and secondary colors used in the component by passing in darkModeColors with the following keys:

   • primary: hex code for the primary color
   • secondary: hex code for the secondary color
   Dark mode colors are only used when darkMode is set to true.

    // ...

    vendorToDocsMappings = {
        "SNYK": "https://link.to/docs/snyk",
        "CROWDSTRIKE": "https://link.to/docs/crowdstrike",
        "SENTINELONE": "https://link.to/docs/sentinelone",
    }
    
    // ...

    <LeenOnRamp
        token={connectionInviteToken}
        setLeenOnRampResponse={setLeenOnRampResponse}
        setShowLeenOnRamp={setIsModalOpen}
        // optional overrides
        primaryColor="#000000"
        logoUrl="https://link.to/logo"
        docsUrlOverrides={vendorToDocsMappings}
        fontFamily="font-family-name"
        fontUrl="https://fonts.googleapis.com/css2?family=font-family-name&display=swap"
        fontSizes={{
            headerSize: "24px",
            bodySize: "18px",
            buttonSize: "12px",
        }}
        darkMode={true}
        darkModeColors={{
            primary: "#2A004E",
            secondary: "#500073",
        }}
    />

That’s it! Your users should now be able to create new connections or update existing connection within your application. OnRamp will open up as a modal in your application and your users will be presented with an interface to provide the right credentials for the vendor - via secrets or OAuth.