Algosigner react errors

Hello,

I’m trying to implement wallet login functionality with AlgoSigner, specifically I’m using a react component to for the wallet login by checking if AlgoSigner is installed and then attempting to connect as suggested by the Algosigner documentation.

However occasionally I’m getting an error

ERROR in src/components/Profile/Connect.js
** Line 19:13: ‘AlgoSigner’ is not defined no-undef**

It works as expected but I’m getting this error sometimes and it seems to be happening randomly. Here’s the code I’m using on my react component to handle the algosigner wallet connection:

    const algosignerHandler = (e) => {

        if (typeof AlgoSigner !== 'undefined') {
            console.log('algosigner installed');
            setWalletPluginInstalled(true);

            AlgoSigner.connect()
            .then((d) => {
                console.log('algosigner connected:');
                console.log(d)
                setWalletConnected(true);
                props.onWalletConnection(true);
            })
            .catch((e) => {
                console.log('failed to connect algosigner :');
                console.log(e);
                setWalletConnected(false);
            });
        } 
        else {
            console.log('algosigner not installed');
            setWalletPluginInstalled(false);
            return;
        };
    };

Anyone had any similar issues with Algosigner? The error occurs on the line AlgoSigner.connect() but I thought including it on the if (typeof AlgoSigner !== ‘undefined’) would protect me by hitting this error. Please let me know if you have any ideas on what might be causing this.

Many thanks!

I’ve let an AlgoSigner developer know and they should get back to you tomorrow.

1 Like

hello! could you try accessing the AlgoSigner object from the window object (window.AlgoSigner)? 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

Thanks @janmarcano , adding const AlgoSigner = window.AlgoSigner; on my component seems to have fixed the issue.