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

Docs
1

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
2

Hi @harshilsharma,
You need to add token to the editor initialization token when JWT is enabled in Document Server.

If you don’t need JWT, re-deploy the Document Server container and set the JWT_ENABLED variable to false.
docker run -i -t -d -p 80:80 --restart=always -e JWT_ENABLED=false onlyoffice/documentserver

3

Hi,

When I run this without JWT token than it is not even working on localhost, showing this error “Download Failed”
But if I enable the JWT than it work on localhost but not in reactJS app.

Can you tell me where I have to put the JWT_SECRET in my reactJs app if I want to do by enabling the JWT SECRET ?

5

As I mentioned earlier, you need to add a token to the editor initialization config as described here:

Editor initialization config is adjusted in App.js file

config={{
                    "document": {
                        "fileType": "docx",
                        "key": "Khirz6zTPdfd7",
                        "title": "Example Document Title.docx",
                        "url": "https://example.com/url-to-example-document.docx"
                    },
                    "documentType": "word",
                    "editorConfig": {
                        "callbackUrl": "https://example.com/url-to-callback.ashx"
                    }
                }}

Also we have noticed that you sent the same request to support@onlyoffice.com. Please do not duplicate the requests.

6

I tried with JWT_ENABLED=false,

It showing the editor but not able do anything.

showing error:

err2
err21920×1027 52.2 KB

<div className='h-screen'>
            <DocumentEditor
                height="700"
                id="docxEditor"
                documentServerUrl="http://localhost"
                config={{
                    "document": {
                        "fileType": "docx",
                        "title": "Example Document Title.docx",
                        "url": `http://localhost:3001/sample4.docx`,
                        "key": "Khirz6zTPdfd7"
                    },
                    
                    "documentType": "word",
                    "editorConfig": {
                        "callbackUrl": "http://localhost:8002/track",
                    },
                }}
                events_onDocumentReady={onDocumentReady}
                onLoadComponentError={onLoadComponentError}
            />
        </div>

(The document.url string is correct)

7

Document Server does not allow localhost or internal IP addresses by default. Please use this solution: When I call Conversion API，the editor seems to be blocked - #7 by Carl