Updated security signature

example/.env

@@ -1,4 +1,5 @@
 NODE_ENV=development
 
-REACT_APP_API_KEY=BvvmdguHXvrOiWmfWGJR4RvHSkYvbYQH
-REACT_APP_API_SECRET=BvvmdguHXvrOiWmfWGJR4RvHSkYvbYQH
+REACT_APP_API_MAILUI_PROJECT_ID=3
+REACT_APP_API_MAILUI_SECRET=BvvmdguHXvrOiWmfWGJR4RvHSkYvbYQH
+REACT_APP_MAILUI_API_KEY=BvvmdguHXvrOiWmfWGJR4RvHSkYvbYQH

example/.env.example

@@ -1,4 +1,5 @@
 NODE_ENV=development
 
-REACT_APP_API_KEY=
-REACT_APP_API_SECRET=
+REACT_APP_API_MAILUI_PROJECT_ID=
+REACT_APP_API_MAILUI_SECRET=
+REACT_APP_MAILUI_API_KEY=

example/basic/index.tsx

@@ -3,6 +3,7 @@ import MailUiEditor, {MailUiEditorProps, MailUiEditorRef} from "../../src";
 import packageJson from "../package.json";
 import sampleTemplate from "./sampleTemplate.json";
 import {FaDesktop, FaMobile, FaRedoAlt, FaTablet, FaUndoAlt} from "react-icons/fa";
+import crypto from "crypto";
 
 const classNames = (...args: (string | undefined | null | false | number)[]): string => {
     return args.filter(arg => typeof arg === 'string').join(' ');
@@ -239,6 +240,10 @@ const BasicExample = () => {
         console.log("onReady", mailui);
     };
 
+    const projectId = process.env.NEXTAUTH_MAILUI_PROJECT_ID || "";
+    const secretKey = process.env.NEXTAUTH_MAILUI_SECRET || "";
+    const signature = crypto.createHmac("sha256", secretKey).update(projectId).digest("hex");
+
     return (
         <main className="App">
             <nav className="App-header">
@@ -319,8 +324,7 @@ const BasicExample = () => {
                 onReady={onReady}
                 minHeight="calc(100vh - 57px)"
                 options={{
-                    apiKey: process.env.REACT_APP_API_KEY,
-                    apiSecret: process.env.REACT_APP_API_SECRET,
+                    signature,
 
                     defaultDevice: "desktop",
                     devices: ["desktop", "tablet", "mobile"],

example/package.json

@@ -8,6 +8,7 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
+    "crypto": "^1.0.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^1.0.0",
     "react-dom": "^18.2.0",

package.json

@@ -61,6 +61,6 @@
     "typescript": "^3.9.10"
   },
   "dependencies": {
-    "mailui-editor-types": "^1.0.15"
+    "mailui-editor-types": "^1.0.16"
   }
 }

src/hooks/useEditorOptions.ts

@@ -1,23 +1,21 @@
 import {MailUiEditorProps} from "../MailUiEditor";
 import {useMemo} from "react";
-import pkg from "../../package.json";
+// import pkg from "../../package.json";
 
 const useEditorOptions = (props: MailUiEditorProps, editorId: string) => {
     return useMemo(() => {
         const options: MailUiEditorProps['options'] = {
             ...(props.options || {}),
-            apiKey: props.options?.apiKey,
-            apiSecret: props.options?.apiSecret,
+            signature: props.options?.signature,
             appearance: props.options?.appearance,
             displayMode: props.options?.displayMode || 'email',
             locale: props.options?.locale,
-            projectId: props.options?.projectId,
             tools: props.options?.tools,
             id: editorId,
-            source: {
-                name: pkg.name,
-                version: pkg.version,
-            },
+            // source: {
+            //     name: pkg.name,
+            //     version: pkg.version,
+            // },
         };
         return options;
     }, [props.options, editorId]);