Web3Auth + React (JSX) + Solana - unable to get working with the examples

jordanhinks0 · August 5, 2025, 1:05pm

I have been trying for the past 2 days to get Web3Auth working based on the example “working” code but I’ve had nothing but problems with it where I’ve found it only actually works with Ethereum chain but not Solana, nevermind even the Solana devnet.

I was following instructions from the below link (granted converting any TS to just JS (JSX).

The issues I encountered were that I could not sign in the Solana Devnet at all with eventually figuring out I had to include a chainConfig to manually specify it rather than using what the example recommended and on top of this, the Chains & Network section within the Web3Auth dashboard seem to be misleading where that I am running v10+ but doesn’t respect using the Solana Devnet at all.

Are there any proper instructions on how to use Web3Auth?

w3abot · August 5, 2025, 1:07pm

Thank you for sharing your detailed experience and feedback! Here’s a summary of your situation for the support team, along with some immediate guidance to help you move forward:

Issue Summary

SDK/Integration: Web3Auth Plug n Play (PnP) with React (JSX)
Platform: React (Web, using JSX, not TypeScript)
Blockchain: Solana (mainnet and devnet)
Problem:
- Web3Auth works for Ethereum but not for Solana (especially Solana Devnet).
- Required manual addition of chainConfig for Solana, which was not clear in the docs.
- The Web3Auth dashboard’s Chains & Network section seems misleading; v10+ does not respect Solana Devnet settings as expected.
Documentation Used: Web3Auth React Quick Start
Attempted Solutions: Converted TypeScript examples to JavaScript/JSX and tried manual chainConfig.

Details Needed (if you can provide them)

To help the team debug faster, could you share:

The code snippet you’re using to initialize Web3Auth for Solana?
Any error messages or console logs you see when trying to use Solana?
The version of the @web3auth/modal or related SDKs you are using (if not already mentioned as v10+).

Immediate Guidance & References

Solana Integration in React

The React Solana Quick Start Guide provides the recommended way to set up Solana with Web3Auth Modal SDK.

For Solana, you must use the correct chainConfig and ensure the chainNamespace is set to solana. Example:

import { CHAIN_NAMESPACES } from "@web3auth/base";
const chainConfig = {
  chainNamespace: CHAIN_NAMESPACES.SOLANA,
  chainId: "0x1", // Use "0x3" for devnet
  rpcTarget: "https://api.devnet.solana.com", // For devnet
  displayName: "Solana Devnet",
  blockExplorer: "https://explorer.solana.com?cluster=devnet",
  ticker: "SOL",
  tickerName: "Solana",
};

When using devnet, make sure your chainId and rpcTarget match the devnet values.

Web3Auth Dashboard Settings
- The dashboard’s Chains & Network settings are mainly for reference and project setup. The actual network your dApp connects to is controlled by your chainConfig in code, not the dashboard.
- If you’re on v10+, always ensure your code’s chainConfig is correct for the blockchain/network you want.
Example Repos
- React Solana Example
- Solana Hooks Documentation
Troubleshooting
- If you see errors related to missing dependencies or polyfills (like Buffer or process), check the Troubleshooting Guides.

Next Steps

Please share your initialization code and any error logs if possible.
Double-check your chainConfig for Solana devnet as shown above.
Let us know if you’re using any custom authentication or just the standard social login/modal.

Helpful Links:

Thank you for your feedback on the documentation—this will help us improve clarity for future users. If you can provide the requested details, the support team can help you resolve the Solana integration issue faster!

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. Web3Auth Developer Office Hours

jordanhinks0 · August 5, 2025, 1:23pm

Nice - a useless bot providing documentation on the site which already doesn’t work.

maharshi · August 6, 2025, 1:57am

Hey @jordanhinks0 — welcome.

I get that you’re frustrated, but let’s be clear: you didn’t need to override anything manually. The React Solana example works out of the box if you just clone and run it as-is. The clientId used in the examples is configured to support multiple chains, and if you want to use only Solana Devnet, you just toggle that in the dashboard — no manual overrides required.

If you had followed the example properly or even glanced at the dashboard config, you’d have been up and running already. The UI exists specifically to make life easier — the fact that it still didn’t help says more about the effort put in than the tool itself.

We’ve built Web3Auth to be as frictionless as possible. But there’s only so much we can do if folks ignore examples and documentation designed to hand-hold through the entire flow.

We’re here to help — constructively. Try the example linked above, and if something still breaks, feel free to share the actual setup you’re using.

jordanhinks0 · August 6, 2025, 10:46am

Thank you - ok so are you saying I do not need to change the clientId which is currently in the code to the one shown within the project settings contrary to what the comment beside it states of getting it from the dashboard?

in my project dashboard I had enabled Solana Devnet then used the example code provided just to get a baseline. I then tried signing in using my Phantom wallet which had Solana devnet enabled but Phantom kept stating that the correct network has not been enabled when every network was already enabled.

I was only able to get it working with Ethereum test network.

Here is my current code as I’ve went through the documentation looking for what I’m missing. I would not be surprised if the code below somehow is not even relevant to getting it working.

Additionally I had ensured I’m running the latest available version of web3auth packages such as base, modal phantom-adapter and solana-provider.

const chainConfig = {
        chainNamespace: CHAIN_NAMESPACES.SOLANA,
        chainId: '0x3', // Solana Devnet. Use '0x1' for Mainnet, '0x2' for Testnet
        rpcTarget: 'https://api.devnet.solana.com', // Devnet RPC URL
        displayName: 'Solana Devnet',
        blockExplorerUrl: 'https://explorer.solana.com/?cluster=devnet',
        ticker: 'SOL',
        tickerName: 'Solana',
    };

    // Initialize Web3Auth instance
    useEffect(() => {
        const initWeb3Auth = async () => {
            try {
                setIsLoading(true);
                setError(null);

                // Create Phantom Wallet Adapter instance
                const phantomAdapter = new PhantomAdapter();

                // Initialize Web3Auth
                const web3authInstance = new Web3Auth({
                    clientId: '[my client id from project dashboard',
                    chainConfig: chainConfig,
                    uiConfig: {
                        appName: 'Solana Phantom App',
                        mode: 'dark',
                        logoLight: 'https://web3auth.io/images/w3a-L-Favicon-1.svg',
                        logoDark: 'https://web3auth.io/images/w3a-D-Favicon-1.svg',
                        defaultLanguage: 'en',
                        loginGridCol: 3,
                        primaryButtonProvider: 'phantom',
                    },
                    adapters: [phantomAdapter],
                });
                
                console.log("Web3Auth instance before initModal:", web3authInstance);

                // Initialize Web3Auth modal
                await web3authInstance.initModal();

                setWeb3auth(web3authInstance);

                // Check if already logged in
                if (web3authInstance.provider) {
                    setProvider(web3authInstance.provider);
                    setLoggedIn(true);
                }
            } catch (err) {
                console.error('Error initializing Web3Auth:', err);
                setError(err);
            } finally {
                setIsLoading(false);
            }
        };

        initWeb3Auth();
    }, []);

jordanhinks0 · August 6, 2025, 11:28am

Ok I’ve done a test with the react-solana-quick-start example but didn’t change the clientId to my own which is provided by the project dashboard and can see it works.

If I then proceed to follow the steps in the README which state to enter my project dashboard client Id into .env I can see this value is not being picked up anywhere throughout the project and if I try replace it for the clientId within the web3authContext file I then get error on the website stating Wallet is not ready yet, Login modal is not initialized

Could you advise what the correct procedure is in this case as it is not happy with the client Id I provide from the project dashboard?

maharshi · August 6, 2025, 11:47am

One case could be that the project you have on your dashboard is on sapphire_mainnet and the one that I shared with you might be on sapphire_devnet.
Basically a network mismatch.
If it’s not that, can you share a recording using the extension https://jam.dev ?
It records your screen plus the network logs and console logs.
Would be helpful for me to understand where the issue lies.

jordanhinks0 · August 6, 2025, 12:13pm

I would not feel comfortable at this time using https://jam.dev

Currently in my project dashboard it is using devnet.

In the current project, I changed the default clientId shown in the web3authContext.tsx file to the one which is projected within the project dashboard. Once I change that I received Wallet is not ready yet, Login modal is not initialized on the website.

In the domains section of project dashboard, I do have http://localhost:5173 which is what the website runs on for testing purposes.

In the chains and networks, under the testnet networks, I have enabled Solana Devnet.

jordanhinks0 · August 9, 2025, 9:18pm

Are there any recommendations in this case to get this working considering I have tried to use the React Solana example, then just change out the Client ID with the one provided within the project dashboard?

I don’t believe there is even anything special with regards to the project settings.

maharshi · August 9, 2025, 9:42pm

I have DM’d you, can you please share the client id this isn’t working with?
I’ll try it on my end once and let you know what’s the issue.

maharshi · August 11, 2025, 3:44am

Thanks for sending the client ID over
I wasn’t able to get it work as well.
Can you please try whitelisting the domain http://localhost:5173 and try again post that?
You should be able to find the option to whitelist domains in this section of your projects

jordanhinks0 · August 11, 2025, 4:34pm

Apologies for the delay.

You’re going to find this annoying but I had already had http://localhost:5173 in the whitelist URL as its the same I’m using.