Create Web3Auth Client on next.js without exposing clientId

[Wobble5992]

Hi there, I’m a bit lost with this. I’ve started a project on next using this repo as an example web3auth-pnp-examples/App.tsx at main · Web3Auth/web3auth-pnp-examples · GitHub

The only issue here is that, I would prefer not to expose my clientId when creating the instance

    const web3auth = new Web3Auth({
          clientId <- this,
          chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x1",
            rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
          },
          web3AuthNetwork: "cyan",
        });

I’ve tried making a next.js api that returns the web3auth object, but I believe the object needs to be initialized on the browser, so that solution wasn’t working and I think getServerSideProps won’t work for this exact reason. I’m not sure how to initialize the web3auth client without exposing this clientID to the browser. Would appreciate some help

[lionell]

@Wobble5992 no, the client_id is normally public as we use it to identify your app. You can whitelist the domain you are using to prevent others from using your client_id

[tito]

Nextjs has a feature where you can share environmental variables to the browser, just add NEXT_PUBLIC_ to the beginning of ur env.

example: NEXT_PUBLIC_WEB3_AUTH = 1234456653535

Here is the link to the doc: Basic Features: Environment Variables | Next.js