OpenLogin & Solflare Issues using NoModal SDK

[joey1]

Hey all!

I’m attempting to provide options for Solflare and OpenLogin options for users using the NoModal SDK. I’m having some issues using the options interchangeably. I realize I need to configure an adapter before I initialize the “web3Auth” object. This becomes an issue when a user is deciding which authentication method to use.

If a user clicks the “sign in with google” button to attempt a google login, but then changes their mind and attempts to connect Solflare, an error occurs because OpenLogin has already been initialized.

I want to provide both options to users, and I’m not quite sure how to handle them.

Here are the useEffect functions that set things up:

useEffect(() => {
        const init = async () => {
            try {
                const web3Auth = new Web3AuthNoModal({
                    clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID as string,
                    web3AuthNetwork: "sapphire_devnet",
                    chainConfig,
                });

                setWeb3Auth(web3Auth);

                const privateKeyProvider = new SolanaPrivateKeyProvider({ config: { chainConfig } });

                const openloginAdapter = new OpenloginAdapter({
                    adapterSettings: {
                        uxMode: "redirect",
                        loginConfig: {
                            jwt: {
                                verifier: "stockpile-v2-dev",
                                typeOfLogin: "jwt",
                                clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID,
                            },
                        },
                    },
                    privateKeyProvider,
                });
                setOpenLogin(openloginAdapter);

                const solflareAdapter = new SolflareAdapter({
                    clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID,
                    sessionTime: 86400, // 1 day in seconds
                    web3AuthNetwork: "sapphire_devnet",
                    chainConfig: {
                        chainNamespace: CHAIN_NAMESPACES.SOLANA,
                        chainId: "0x3",
                        rpcTarget: `https://rpc.ironforge.network/${process.env.NEXT_PUBLIC_SOLANA_ENVIRONMENT}?apiKey=${process.env.NEXT_PUBLIC_IRONFORGE_API_KEY}`,
                    },
                });
                setSolflare(solflareAdapter);

                //web3Auth?.configureAdapter(solflareAdapter);

                //await web3Auth.init();
            } catch (err) {
                console.error(err);
            }
        }
        init();
    }, []);

    useEffect(() => {
        const provide = () => {
            if (web3Auth?.provider) {
                setProvider(web3Auth.provider);
            }

            if (web3Auth?.connected) {
                setLoggedIn(true);
            }
        }
    },[auth]);

Here is my signInWithGoogle function (using firebase auth):

const signInWithGoogle = async (): Promise<UserCredential> => {
        try {
            configure("open");

            await web3Auth?.init();
            
            const auth = getAuth(app);
            const googleProvider = new GoogleAuthProvider();
            const res = await signInWithPopup(auth, googleProvider);
            return res;
        } catch (err) {
            console.error(err);
            throw err;
        }
    };

Here is my signInWithSolflare function (attempting to get firebase auth to work with this):

const signInWithSolflare = async () => {
        if (!web3Auth) {
            return console.error("Auth has not been initialized.")
        }
        configure("solflare");
        await web3Auth.init();
        //const idToken = await web3Auth?.authenticateUser();

        await web3Auth?.connectTo(WALLET_ADAPTERS.SOLFLARE, {
            loginProvider: "jwt",
            extraLoginOptions: {
                verifiedField: "sub",
                //jwt: idToken
            }
        })

        setAuth(true);
    }

Lastly, the function I am using to set the adapter when the corresponding login method is selected:

function configure(adapter: string) {
        switch (adapter) {
            case "open": {
                return (
                    openLogin && web3Auth?.configureAdapter(openLogin)
                )
            }
            case "solflare": {
                return (
                    solflare && web3Auth?.configureAdapter(solflare)
                )
            }
        }
    }

I posted a previous topic related to this, but didn’t get a solid solution for this use case.

[maharshi]

Hey @joey1 ,

Noticed you’re dealing with a conflict between Solflare and OpenLogin in your NoModal SDK setup. The trick here is to manage user choice more efficiently. When a user opts for one auth method (like Google), programmatically disable the alternative (Solflare in this case). This prevents the system from attempting to initialize both, which is causing your errors.

Here’s a more dev-centric breakdown:

1. State Management: Use a state variable, maybe authMethodInUse, to track which auth method is currently active.

2. Conditional Button Disable: Based on authMethodInUse, dynamically disable the other auth button. If authMethodInUse is ‘Google’, grey out Solflare, and vice versa.

3. Reset Post-Auth: Once the authentication process concludes or is cancelled, reset authMethodInUse to null, making both auth options active again.

4. Error Handling: Ensure you handle edge cases, like a user closing the auth modal, to re-enable the other option.

This approach should streamline the user experience and eliminate the initialization conflict.

Give that a shot, should solve the problem.