Algosigner not injected again after refreshing page in React

[kashishkhullar]

I am building a project using Algosigner and React and I followed the code given in the article Integrate AlgoSigner to JavaScript Application on Algorand

Code snippet:

    useEffect(() => {
        if (typeof window.AlgoSigner !== "undefined") {
            // connects to the browser AlgoSigner instance
            window.AlgoSigner.connect()
                // finds the TestNet accounts currently in AlgoSigner
                .then(() =>
                    window.AlgoSigner.accounts({
                        ledger: "TestNet",
                    })
                )
                .then((accountData) => {
                    // the accountData object should contain the Algorand addresses from TestNet that AlgoSigner currently knows about
                    console.log(accountData);
                })
                .catch((e) => {
                    // handle errors and perform error cleanup here
                    console.error(e);
                });
        } else {
            console.log(window.AlgoSigner);
        }
    }, []);

On opening the application for the first time, everything works fine. The accounts addresses get logged on the console.
However, on refreshing the page, the useEffect runs again and window.Algosigner is undefined.

[janmarcano]

Hello! Sorry for the late reply.

AlgoSigner kinda lives a global variable in the browser and that can cause issues with certain frameworks/libraries that are stricter about accessing global variables

We've encountered similar cases where adding const AlgoSigner = window.AlgoSigner; to the component and using that reference to access the AlgoSigner object helps with undefined errors

Feel free to reach out again it the issue persists.

[purestaketdb]

Not able to reproduce