"Document security key is not correctly formed" error in OnlyOffice, ReactJS

Question

I have to integrate onlyOffice in ReactJS.

OnlyOffice is running on docker and accessible on localhost

Showing this error while opening editor in react app:

"Document security key is not correctly formed. Please contact your document server administrator"

React component:

import React, { useRef } from 'react';
import { DocumentEditor } from "@onlyoffice/document-editor-react";

var onDocumentReady = function (event) {
    console.log("Document is loaded");
};

var onLoadComponentError = function (errorCode, errorDescription) {
    switch(errorCode) {
        case -1: // Unknown error loading component
            console.log(errorDescription);
            break;

        case -2: // Error load DocsAPI from http://documentserver/
            console.log(errorDescription);
            break;

        case -3: // DocsAPI is not defined
            console.log(errorDescription);
            break;
    }
};

const formUrl = `${process.env.PUBLIC_URL}/sample4.docx`;

const OnlyOffice = () => {
    return (
        <>
            <DocumentEditor
                id="docxEditor"
                documentServerUrl="http://localhost"
                config={{
                    "document": {
                        "fileType": "docx",
                        "title": "Example Document Title.docx",
                        "url": formUrl
                    },
                    
                    "documentType": "word",
                    "editorConfig": {
                        "callbackUrl": "https://example.com/url-to-callback.ashx"
                    }
                }}
                events_onDocumentReady={onDocumentReady}
                onLoadComponentError={onLoadComponentError}
            />
        </>
    );
}

export default OnlyOffice

Answer 1

You can see this error because of the invalid jwt token. In your case JWT seems to be turned on for your Document Server and you don't pass token in editor config, thus the issue occurs.

Since JWT is an important security measure, it's highly advised to leave JWT enabled and provide a correct token in editor.config.

Alternatively, for testing purposes, you can also disable JWT in /etc/onlyoffice/documentserver/local.json by setting token.inbox/outbox/browser values to false and restarting Document Server services with supervisorctl restart all (for docker) or systemctl restart ds-* (for deb/rpm installation type) or restarting all ONLYOFFICE services in Windows Services (in case with .exe installation type) to apply the changes. In this case the error shouldn't occur and you will not need to specify the token in editor config.