I have a react app, and I want to implement the SSO feature. But I always get a nonce error

Dev
1

So I already checked the enable discourse connect, and specified the discourse connect url
and set the discourse connect secret successfully.
On the page of the discourse connect url, I’m doing the following :

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;
                    }
                });
        }
    };

Everything works perfectly (the signature is valid, and it redirects me to the discourse). But I keep getting the following error : Nonce is incorrect, was generated in a different browser session, or has expired. I spent hours of searching for a solution in here, google, and chatGPT (cz why not :p) and I still didn’t found a solution.

Does anyone knows how can I fix it please ?