ReactアプリでSSO機能を実装したいのですが、常にnonceエラーが発生します

開発
1

enable discourse connect をチェックし、discourse connect url と discourse connect secret を正常に指定しました。
discourse connect url のページで、以下を行っています。

function rediretUserToDiscourse(user) {
        const url = new URL(window.location)
        const searchParams = new URLSearchParams(url.search);
        const ssoValue = searchParams.get("sso");
        const decodedSSOValue = window.atob(ssoValue);
        const queryParams = decodedSSOValue.split("&");

        let nonce = null;
        for (let param of queryParams) {
            const [key, value] = param.split("=");
            if (key === "nonce") {
                nonce = value;
                break;
            }
        }

        if (user) {
            const payload = `nonce=${nonce}&name=${user.username}&username=${user.username}&email=${user.email}&external_id=${user.id}&avatar_url=${user.avatar}`;

            const encodedPayload = window.btoa(JSON.stringify(payload));
            const secret = "discourse_connect_secret";

            hmac(encodedPayload, secret, HmacAlgorithms.HmacSHA256, Encoders.hex)
                .then(signature => {
                    if (signature) {
                        const discourseLoginURL = `https://community.mydomaine.co/session/sso_login?sso=${encodedPayload}&sig=${signature}`;
                        window.location.href = discourseLoginURL;
                    }
                });
        }
    };

すべて完璧に機能しています（署名は有効であり、Discourse にリダイレクトされます）。しかし、以下のエラーが引き続き表示されます：「Nonce が正しくありません。別のブラウザーセッションで生成されたか、有効期限が切れています」。ここで、Google、そして ChatGPT（なぜダメなのか :p）で解決策を探すのに何時間も費やしましたが、まだ解決策が見つかりません。

誰か修正方法を知っていたら教えてください。