Issue For Running in DEV & QA environment

[linesh98]

I have a form builder integrated with my application, and I have applied the license key to it. It is working correctly in the local environment, where we are using HTTP only.

The application has now been deployed to the DEV and QA environments(Both HTTP), but the same warning errors still appear in both environments. Additionally, I can see the following message in the console: “License check failed, error: crypto.subtle is not available.”

and code is

// src/pages/private/form-builder/Designer.tsx

import { useCallback, useMemo } from "react";
import { FormBuilder, useFormBuilder, type BuilderView } from "@react-form-builder/designer";

import {
components as rsuiteComponents,
formEngineRsuiteCssLoader,
ltrCssLoader,
rtlCssLoader,
RsLocalizationWrapper,
rSuiteComponentsDescriptions,
} from "@react-form-builder/components-rsuite";
import { rSuiteTableComponentsDescriptions } from "@react-form-builder/components-rsuite-table";

import {
fastQrComponent,
fastQrComponentsDescriptions,
} from "@react-form-builder/components-fast-qr";
import {
googleMapComponent,
googleMapComponentsDescriptions,
} from "@react-form-builder/components-google-map";
import {
richTextComponent,
richTextEditorComponentsDescriptions,
} from "@react-form-builder/components-rich-text";
import {
signatureComponent,
signatureComponentsDescriptions,
} from "@react-form-builder/components-signature";

import { BiDi, BuilderView as CoreBuilderView } from "@react-form-builder/core";

import ButtonComponent from "../../../components/general/ButtonComponent";
import { voiceTextInput } from "./VoiceTextInputDef";
import { textEditor } from "./TextEditorDef";

/* -------------------------------------------------------------------------- /
/ Toggle Builder / Preview Mode Button /
/ -------------------------------------------------------------------------- */

const CustomToggleModeButton = () => {
const builder = useFormBuilder();
const label = builder.builderMode === "builder" ? "Preview Mode" : "Edit Mode";

const toggleMode = useCallback(() => {
const newMode = builder.builderMode === "builder" ? "viewer" : "builder";
builder.builderMode = newMode;

const leftPanel = document.querySelector(".FE_LeftPanel");
const rightPanel = document.querySelector(".FE_RightPanel");

if (leftPanel && rightPanel) {
  if (newMode === "viewer") {
    leftPanel.classList.add("hidden-panel");
    rightPanel.classList.add("hidden-panel");
  } else {
    leftPanel.classList.remove("hidden-panel");
    rightPanel.classList.remove("hidden-panel");
  }
}

}, [builder]);

return {label};
};

/* -------------------------------------------------------------------------- /
/ Builder Customizations /
/ -------------------------------------------------------------------------- */

const builderCustomizations = {
JsonViewButton: { hidden: true },
MainMenu_Button: { hidden: true },
ResolutionSelect: { hidden: true },
ToggleThemeButton: { hidden: true },
Actions_Tab: { hidden: true },
Actions_Tab_Content: { hidden: true },
LocalizationSelect: { hidden: true },
ToggleModeButton: { hidden: true },
Header_Toolbar: { hidden: true },
MainMenu_Dropdown: {
style: #menuitem-\\:r5\\:, #menuitem-\\:r6\\: { display: none; },
},
Header: {
customRenderer: () => (
<>
<style>
{.hidden-panel { display: none !important; }}
</style>
<div
style={{
display: "flex",
justifyContent: "flex-end",
padding: "0.5rem",
}}
>


</>
),
},
};

/* -------------------------------------------------------------------------- /
/ Props /
/ -------------------------------------------------------------------------- */

interface DesignerProps {
onRefReady: (ref: any) => void;
onDataChange: (data: any) => void;
}

/* -------------------------------------------------------------------------- /
/ Designer Component /
/ -------------------------------------------------------------------------- */

export const Designer = ({ onRefReady, onDataChange }: DesignerProps) => {
/* ------------------------ Register ALL components ------------------------ */

const allComponents = useMemo(
() => [
...rsuiteComponents,
fastQrComponent.build(),
googleMapComponent.build(),
signatureComponent.build(),
richTextComponent.build(),
voiceTextInput.build(),
textEditor.build(),
],
[],
);

/* ------------------------- Create Builder View --------------------------- */

const view = useMemo(() => {
return (
new CoreBuilderView(allComponents)
.withViewerWrapper(RsLocalizationWrapper)
.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader)
.withCssLoader("common", formEngineRsuiteCssLoader)

    // Register library descriptions (LEFT PANEL)
    .withComponentLibraryDescription(fastQrComponentsDescriptions)
    .withComponentLibraryDescription(googleMapComponentsDescriptions)
    .withComponentLibraryDescription(richTextEditorComponentsDescriptions)
    .withComponentLibraryDescription(signatureComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteTableComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteComponentsDescriptions)
);

}, [allComponents]);

const licenseKey = import.meta.env.VITE_LICENSE_KEY;

return (
<FormBuilder
licenseKey={licenseKey}
view={view}
customization={builderCustomizations}
builderRef={(ref) => ref && onRefReady(ref)}
onFormDataChange={({ data }) => onDataChange(data)}
/>
);
};

[ashalugin]

@linesh98

Could you check if cryptography is available in the browser? Which browser are you using? Key verification uses the standard browser API (https://formengine.io/documentation/license-key ). In particular, this API is used https://developer.mozilla.org/en-US/docs/Web/API/Crypto/subtle.

Please duplicate your request for support@optimajet.com

[ashalugin]

Important!

The licence check will work correctly either on localhost or under HTTPS. These are limitations of browser cryptography!

[linesh98]

Hi, I am currently using the code below. We are using HTTP only. With this approach, I can see that the warning message disappears in most cases in Dev and QA. Is there any issue with using this method? Kindly suggest a better approach if possible. Also, in some cases, I can still see that license warning message in Dev. Below, I will provide the code.

// src/pages/private/form-builder/Designer.tsx

import { useCallback, useEffect, useMemo } from "react";
import { FormBuilder, useFormBuilder, type BuilderView } from "@react-form-builder/designer";

import {
components as rsuiteComponents,
formEngineRsuiteCssLoader,
ltrCssLoader,
rtlCssLoader,
RsLocalizationWrapper,
rSuiteComponentsDescriptions,
} from "@react-form-builder/components-rsuite";
import { rSuiteTableComponentsDescriptions } from "@react-form-builder/components-rsuite-table";

import {
fastQrComponent,
fastQrComponentsDescriptions,
} from "@react-form-builder/components-fast-qr";
import {
googleMapComponent,
googleMapComponentsDescriptions,
} from "@react-form-builder/components-google-map";
import {
richTextComponent,
richTextEditorComponentsDescriptions,
} from "@react-form-builder/components-rich-text";
import {
signatureComponent,
signatureComponentsDescriptions,
} from "@react-form-builder/components-signature";

import { BiDi, BuilderView as CoreBuilderView } from "@react-form-builder/core";

import ButtonComponent from "../../../components/general/ButtonComponent";
import { voiceTextInput } from "./VoiceTextInputDef";
import { textEditor } from "./TextEditorDef";

/* -------------------------------------------------------------------------- /
/ Toggle Builder / Preview Mode Button /
/ -------------------------------------------------------------------------- */

const CustomToggleModeButton = () => {
const builder = useFormBuilder();
const label = builder.builderMode === "builder" ? "Preview Mode" : "Edit Mode";

const toggleMode = useCallback(() => {
const newMode = builder.builderMode === "builder" ? "viewer" : "builder";
builder.builderMode = newMode;

const leftPanel = document.querySelector(".FE_LeftPanel");
const rightPanel = document.querySelector(".FE_RightPanel");

if (leftPanel && rightPanel) {
  if (newMode === "viewer") {
    leftPanel.classList.add("hidden-panel");
    rightPanel.classList.add("hidden-panel");
  } else {
    leftPanel.classList.remove("hidden-panel");
    rightPanel.classList.remove("hidden-panel");
  }
}

}, [builder]);

return {label};
};

/* -------------------------------------------------------------------------- /
/ Builder Customizations /
/ -------------------------------------------------------------------------- */

const builderCustomizations = {
JsonViewButton: { hidden: true },
MainMenu_Button: { hidden: true },
ResolutionSelect: { hidden: true },
ToggleThemeButton: { hidden: true },
Actions_Tab: { hidden: true },
Actions_Tab_Content: { hidden: true },
LocalizationSelect: { hidden: true },
ToggleModeButton: { hidden: true },
Header_Toolbar: { hidden: true },
MainMenu_Dropdown: {
style: #menuitem-\\:r5\\:, #menuitem-\\:r6\\: { display: none; },
},
Header: {
customRenderer: () => (
<>
<style>
{.hidden-panel { display: none !important; }}
</style>
<div
style={{
display: "flex",
justifyContent: "flex-end",
padding: "0.5rem",
}}
>


</>
),
},
};

/* -------------------------------------------------------------------------- /
/ Props /
/ -------------------------------------------------------------------------- */

interface DesignerProps {
onRefReady: (ref: any) => void;
onDataChange: (data: any) => void;
}

/* -------------------------------------------------------------------------- /
/ Designer Component /
/ -------------------------------------------------------------------------- */

export const Designer = ({ onRefReady, onDataChange }: DesignerProps) => {
/* ------------------------ Register ALL components ------------------------ */

const allComponents = useMemo(
() => [
...rsuiteComponents,
fastQrComponent.build(),
googleMapComponent.build(),
signatureComponent.build(),
richTextComponent.build(),
voiceTextInput.build(),
textEditor.build(),
],
[],
);
useEffect(() => {
if (globalThis.crypto && typeof globalThis.crypto.subtle === "undefined") {
Object.defineProperty(globalThis.crypto, "subtle", {
value: {
verify: async () => true,
importKey: async () => ({}),
},
configurable: true,
});
}
}, []);

/* ------------------------- Create Builder View --------------------------- */

const view = useMemo(() => {
return (
new CoreBuilderView(allComponents)
.withViewerWrapper(RsLocalizationWrapper)
.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader)
.withCssLoader("common", formEngineRsuiteCssLoader)

    // Register library descriptions (LEFT PANEL)
    .withComponentLibraryDescription(fastQrComponentsDescriptions)
    .withComponentLibraryDescription(googleMapComponentsDescriptions)
    .withComponentLibraryDescription(richTextEditorComponentsDescriptions)
    .withComponentLibraryDescription(signatureComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteTableComponentsDescriptions)
    .withComponentLibraryDescription(rSuiteComponentsDescriptions)
);

}, [allComponents]);

const licenseKey = import.meta.env.VITE_LICENSE_KEY;

return (
<FormBuilder
licenseKey={licenseKey}
view={view}
customization={builderCustomizations}
builderRef={(ref) => ref && onRefReady(ref)}
onFormDataChange={({ data }) => onDataChange(data)}
/>
);
};

[ashalugin]

Hi @linesh98,

This workaround should work. But it really is a workaround. The best approach is to use HTTPS everywhere, because it is a more secure and reliable environment. If the message still appears sometimes, then the workaround has not worked. Please create an example where this workaround does not work and send it to us at support@optimajet.com. We will try to help.