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

Development

AI-generated summary

Mohammad_Ghandour is implementing SSO in a React app and encountering a “Nonce is incorrect” error. They’ve checked the necessary Discourse settings and verified their code, which generates a valid signature and redirects to Discourse. However, the nonce error persists, and they’re seeking help to resolve the issue.

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 ?