@authenticins/ts-client NPM

Authentic TypeScript Client

TypeScript SDK for interacting with the Authentic API.

Installation

npm install @authenticins/ts-client

Creating the `Client`

Most interaction with the SDK is done through the Client class, which must be configured with a base API URL and your tenant's AuthConfig on creation.

import * as Authentic from "@authenticins/ts-client";

const authentic = await Authentic.Client.create("{{AUTHENTIC_API_URL}}", {
  awsRegion: "{{YOUR_AWS_REGION}}",
  awsIdentityPoolId: "{{YOUR_AWS_IDENTITY_POOL_ID}}",
  awsUserPoolId: "{{YOUR_AWS_USER_POOL_ID}}",
  awsUserPoolWebClientId: "{{YOUR_AWS_USER_POOL_WEB_CLIENT_ID}}",
});

Creating an `Application`

An insurance Application with Authentic consists of three main parts: meta, fields, and exposures.

ApplicationMeta is a lead that is submitted to create a new application.

// Find the user's business class.
const businessClasses = await authentic.getBusinessClasses();
const userBusinessClass = businessClasses.find(
  (businessClass) => businessClass.name === "Juice Bar"
);

// Set up the user's states of operation.
const userStateCodes: Authentic.types.StateCode[] = ["OH", "NY"];

// Choose which insurance product the user is applying for.
const products = await authentic.getProducts(
  applicationMeta.businessClassCode,
  applicationMeta.stateCodes
);
const userProduct = products.find(
  (product) => product.backendIds.includes("GENERAL_LIABILITY")
);

// Submit the user's `ApplicationMeta` to create a new application.
const applicationMeta: Authentic.types.ApplicationMeta = {
  email: "user@email.com",
  businessClassCode: userBusinessClass.code,
  stateCodes: userStateCodes,
  productIds: userProduct.id;
};
const application = await authentic.createApplication(applicationMeta);

Submitting a field response

An Application's fields are broken up into sections. These sections are ordered, as are the fields within them. The SDK provides getters to track which sections have yet to be completed, updating these getters as new responses are submitted.

Note: If accepting user input, each ApplicationField includes properties to validate input as well as display the field. (ex: type, title, description, helperText, minimum, maximum, etc.)

// Find the first field within the current section that does not have a response.
const currentField: Authentic.types.ApplicationField = application.sections[
  application.firstIncompleteSectionIndex
].fields.find((field) => !application.answers.questions[field.name]);

// Submit a response for the current field.
const wasErrorSubmitting = await application.submitFieldResponses(
  authentic.api,
  [
    {
      fieldName: currentField.name,
      fieldValue: "Example value",
    },
  ]
);

Submitting an exposure reponse

Once all Application.sections are complete, at least one reponse for each ApplicationExposure must be submitted. Exposures are the last piece of information needed to generate policy quotes.

// Set up an exposure response to submit.
const exposureResponse: Authentic.types.ApplicationExposureResponse = {
  id: "1",
  exposureName: application.currentExposure.name,
  fieldValues: {},
};

// Populate our exposure response's `fieldValues`.
for (const exposureSection of application.currentExposure.sections) {
  for (const field of exposureSection.fields) {
    exposureResponse.fieldValues[field.name] = "Example value";
  }
}

// Submit the exposure response.
const wasErrorSubmitting = await application.submitExposureResponse(
  authentic.api,
  exposureResponse
);

Authenticating the user

In order to generate policy quotes the user must be signed up and authenticated. This is done by a verification code sent to the user's email.

// Send verification code (flagging `true` to sign up a new user if the email isn't registered).
const wasErrorSending = await authentic.auth.sendCode(
  application.meta.email,
  true
);

// Verify the code.
const wasErrorVerifying = await authentic.auth.verifyCode(code);

Generating quotes (applying for insurance)

With a completed Application and an authenticated user, policy quotes can now be generated for the user. These quotes can purchased by the user through a generated payment link.

const wasErrorApplying = await application.apply(authentic.api);

const policyQuotes: Authentic.types.QuoteData[] = application.quotes;

const quotesPaymentLink = await application.getQuotesPaymentLink(authentic.api);

Fetching user policies

With an authenticated user, you can easily fetch all policies associated with that user.

const policies: Authentic.types.Policy[] = await authentic.getPolicies();

Pre-filling data

An important tool within the SDK is the ability to pre-fill applications by responding to fields on behalf of the end user. These pre-filled responses serve to provide the user with a "one-click" experience.

Prefilling can be done programmatically when creating an application within the SDK, or encoded into your custom application URL.

Note: You do not need to respond to every field or exposure on the application. Applications can be created with partial pre-fills, with the user then providing the missing information.

const prefillData: Authentic.types.ApplicationPrefillData = {
  meta: {
    email: "user@email.com",
    businessClassCode: "72311",
    stateCodes: ["OH"],
    productIds: ["aee80d5f-d110-4edb-8708-e5db2190a618"],
  },
  answers: {
    questions: {
      CLASS_DESCRIPTION: "Barber Shops & Beauty Salons",
      MARKET_GROUP_LONG: "Personal Services",
      BUSINESS_LEGAL_NAME: "User Business Name",
      NAME: "User Name",
      FRANCHISE_SELECTED: "No",
      GENERIC_BUSINESS_MGMT_PRACTICES_DECLINE: "None of the above",
    },
    exposures: [
      {
        id: "1",
        exposureName: "business_location",
        fieldValues: {
          ADDRESS: "100 street, UNIT 2, city, OH 33333, US",
          SALES: "250000",
          PAYROLL: "40000",
          AREA: "3500",
        },
      },
    ],
  },
};

// Pre-fill programmatically.
const application = await authentic.createApplication(
  prefillData.meta,
  prefillData
);

// Pre-fill via encoded URL.
const insurancePortalUrl = Authentic.utils.getEncodedInsurancePortalUrl(
  "https://partner-name.authenticinsurance.com",
  prefillData
);

Branding your URL

Authentic allows you to theme your insurance portal to your brand, giving the end user a seamless and trustworthy experience.

Below is an example of redirecting your user to a partially pre-filled, fully branded insurance application with a React component.

function InsuranceQuoteButton() {
  const baseInsurancePortalUrl = "https://partner-name.authenticinsurance.com";
  const prefillData: Authentic.types.ApplicationPrefillData = {
    meta: {
      email: "user@email.com",
      stateCodes: ["OH"],
    },
  };
  const themeOverrides: Authentic.types.ThemeOverrides = {
    brand: {
      name: "Partner Name",
      logoUrls:  {
        light: "https://partner-website.com/logo-white.png",
        dark: "https://partner-website.com/logo.png",
      },
      faviconUrl: "https://partner-website.com/favicon.ico",
    }
    primaryColor: "#000000",
    borderRadius: 4,
  };

  return (
    <button
      onClick={() =>
        Authentic.utils.redirectToInsurancePortalUrl(
          baseInsurancePortalUrl,
          prefillData,
          themeOverrides
        )
      }
    >
      Get A Quote
    </button>
  );
}

Managing reactivity

If you'd like to trigger state changes in your frontend application upon Client auth changes, or an changes in an insurance Application, you can pass callback functions upon creation.