How to get private key (in the right format) with sodium-plus js (secretbox) from html page for decrypting a message

Question

I can do that : Encrypt on frontend (sodium-plus.js) with public-key from backend (PHP sodium)

But I want to do the contrary (encrypt with php, decrypt with javascript), and I have an issue.

I can get my private key from my html page (generated with php) as a hex string ( sodium_bin2hex(sodium_crypto_secretbox_keygen()) ), but I can't use it with sodium plus.

I know this code to get public key :

let key = X25519PublicKey.from('...', "hex");

but in my case that doesn't work and I have an error passing this variable in

await sodium.crypto_secretbox_open(text, nonce, key);

I've tried just with the hex string convert to bin ( await sodium.sodium_hex2bin(key) ) but it doesn't work too.

Here is my code :

define(function (require) {
    const { SodiumPlus } = require("sodium-plus");
});

let sodium;

(async function () {
    if (!sodium) sodium = await SodiumPlus.auto();
    let text = "...";//my text + nonce (at the end) in hex

    let nonce = text.substr(-48);
    text = text.substr(0, text.length - 48);
    let key = X25519PublicKey.from($("#key").text(), "hex");//get my private key in hex, on my html page

    text = await sodium.sodium_hex2bin(text);
    nonce = await sodium.sodium_hex2bin(nonce);

    let output = await sodium.crypto_secretbox_open(text, nonce, key);    

    console.log(output.toString());

})();

thank you