Error JSS Editing Secret

Question

Finally, I configured a headless project on my xmcloud.localhost. An error exists when I try to access a page from my Headless local with Experience Manager.

Error: "Connection to your rendering host failed with an Unauthorized error.Ensure the JSS Editing Secret is configured.".

My localhost:3000 works fine, but when I try to open it in Experience Manager, it fails.

I configured in .env (from .env generated when I ran ./up.ps1) - JSS_EDITING_SECRET, it appears in config files xml page.

Also, I added
Server side rendering engine endpoint URL [shared]: http://localhost:3000/api/editing/render

ServerSideRenderingEngineApplicationUrl [shared]: http://localhost:3000 Also, if I try to open sitecore/content/Home, it works on Default Sitecore Website, but on my headless local experience editor does not work.

Do you have any idea how to solve this error? Thanks.

Answer 1

Once you have checked everything is OK with the JSS_EDITING_SECRET configuration, please follow these steps to solve your issue:

1. Leave blank these fields on the Settings item:

2. Create a local rendering host item on /sitecore/system/Settings/Services/Rendering Hosts with the following values:

Server Side Rendering Engine Endpoint Url: http://rendering:3000/api/editing/render

Server side rendering engine application URL: http://rendering:3000

Application Name : your app name

3. In /sitecore/content/yourApp/yourApp/Settings/Site Grouping/yourApp item, change the Default rendering host for the Local item created before.

Let me know if it works.

Answer 2

If you see this error, run your /sitecore/admin/ShowConfig.aspx and ensure that the JssEditingSecret property exists with a properly formatted value.

<setting
  name="JavaScriptServices.ViewEngine.Http.JssEditingSecret"
  value="00DC00FC0E000000BA0E000000DC0000"
/>

It should be in /App_Config/Include/zzz/(your-app-name).config. If you see the file but it's not in your config do an IIS reset.

Also please make sure this section has been uncommented in your config file because when did this (late 2022) it was commented out by default.

Reference: https://www.getfishtank.com/blog/troubleshooting-errors-for-sitecore-headless-sxa-next-js-xm-cloud-setup

Update:

Ensure the value of JSS_EDITING_SECRET= in your .env file matches the value in your JssEditingSecret property in your /App_Config/Include/zzz/(your-app-name).config.

Read more details here

Hope it helps!

Answer 3

As I understand you are using an XM Cloud starter kit, XM Cloud uses container and containers have specific URLs for the sites for internal communication

Your CM URL is https://CM likewise, your rendering host runs on http://rendering URL

So try using http://rendering:3000 instead of http://localhost:3000 and keep the remaining part the same

If you want to use http://localhost:3000 then you can stop your rendering container first and then you will have to start an app using jss start:connected or npm run start:connected depending on the package.json, one app runs on that port then you will be able to use http://localhost:3000 as rendering host urls

But generally, frontend developers who do not have docker and connecting to a remote host generally use the latter approach

With the docker container, you should only use http://rendering:3000

Let me know if you want to connect or know more to troubleshoot this

Answer 4

Check env file of your rendering host. Make sure JSS_EDITING_SECRET is filled there and matches with secret in Sitecore. Restart the rendering host and it should work.