Getting an empty modal? (Web3Auth/core + custom JWT authentication)

[gerardopar]

Currently getting an empty modal when I trigger Login. Currently have the code below in a useEffect() ... Am curious what could be causing the blank modal?

useEffect(() => {
    // subscribe to lifecycle events emitted by web3auth
    const subscribeAuthEvents = (web3auth: any) => {
      web3auth.on(ADAPTER_EVENTS.CONNECTED, (data: CONNECTED_EVENT_DATA) => {
        console.log('connected to wallet', data)
        // web3auth.provider will be available here after user is connected
      })
      web3auth.on(ADAPTER_EVENTS.CONNECTING, () => {
        console.log('connecting')
      })
      web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => {
        console.log('disconnected')
      })
      web3auth.on(ADAPTER_EVENTS.ERRORED, (error: any) => {
        console.log('error', error)
      })
      web3auth.on(ADAPTER_EVENTS.ERRORED, (error: any) => {
        console.log('error', error)
      })
    }

    const init = async () => {
      try {
        // https://web3auth.io/docs/sdk/web/core/initialize#example
        const web3authCore = new Web3AuthCore({
          chainConfig: {
            // this is ethereum chain config, change if other chain(Solana, Polygon)
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: '0x1',
            rpcTarget:
              'https://mainnet.infura.io/v3/776218ac4734478c90191dde8cae483c',
            blockExplorer: 'https://etherscan.io/',
            ticker: 'ETH',
            tickerName: 'Ethereum',
          },
          enableLogging: true,
        })

        // https://web3auth.io/docs/sdk/web/openlogin#openlogin-adapter-settings
        const adapter = new OpenloginAdapter({
          adapterSettings: {
            clientId:
              'XXX', // get from Plug n play section
            network: 'testnet',
            uxMode: 'popup', // other option: popup
            whiteLabel: {
              name: 'MyApp',
              logoLight: 'https://web3auth.io/images/w3a-L-Favicon-1.svg',
              logoDark: 'https://web3auth.io/images/w3a-D-Favicon-1.svg',
              defaultLanguage: 'en',
              dark: true, // whether to enable dark mode. defaultValue: false
            },
            loginConfig: {
              jwt: {
                name: 'Custom Verifier',
                verifier: 'my-verifier',
                typeOfLogin: 'jwt',
                showOnModal: true,
                mainOption: true,
              },
            },
          },
        })

        web3authCore.configureAdapter(adapter)
        subscribeAuthEvents(web3authCore);
        setWeb3auth(web3authCore)

        await web3authCore.init()
      } catch (error) {
        console.log(error)
      }
    }

    init()
  }, [])

  const login = async () => {
    if (!web3auth) {
      console.log('web3authCore not initialized yet')
      return
    }

    // https://web3auth.io/docs/sdk/web/core/usage#example
    await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
      loginProvider: 'jwt',
      extraLoginOptions: {
        domain: 'XXX',
        verifierIdField: 'sub',
        response_type: 'token',
        scope: '', // e.g. email openid
      },
    })
  }

[shahbaz17]

Hey @gerardopar

Please follow https://github.com/orgs/Web3Auth/discussions/476#discussioncomment-3471701 and share your progress here.

[yashovardhan]

Hey @gerardopar

I see that you're using Web3Auth Core and using the option in openlogin called showOnModal. Please note that Web3Auth Core doesn't give you any modal, it just directly redirects you to openlogin.com and according to your verifier, either asks the user to sign in to their particular login provider or reconstructs the key according to the jwt id_token received.

According to your code, I feel you're using your custom JWT token and just directly passing it to Web3Auth. In this case you need to separately handle your login aspect. Once successfully logged in, trigger the connectTo function while passing the JWT id_token within it.

I hope that answers your question.

Further, as @shahbaz17 pointed out, have a look at the discussion thread and let us know if there are any further questions around it.