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

[Legacy] GitHub Discussions
1

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)
})
}

<span class="pl-k">const</span> <span class="pl-en">init</span> <span class="pl-c1">=</span> <span class="pl-k">async</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-k">try</span> <span class="pl-kos">{</span>
    <span class="pl-c">// https://web3auth.io/docs/sdk/web/core/initialize#example</span>
    <span class="pl-k">const</span> <span class="pl-s1">web3authCore</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">Web3AuthCore</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
      <span class="pl-c1">chainConfig</span>: <span class="pl-kos">{</span>
        <span class="pl-c">// this is ethereum chain config, change if other chain(Solana, Polygon)</span>
        <span class="pl-c1">chainNamespace</span>: <span class="pl-c1">CHAIN_NAMESPACES</span><span class="pl-kos">.</span><span class="pl-c1">EIP155</span><span class="pl-kos">,</span>
        <span class="pl-c1">chainId</span>: <span class="pl-s">'0x1'</span><span class="pl-kos">,</span>
        <span class="pl-c1">rpcTarget</span>:
          <span class="pl-s">'https://mainnet.infura.io/v3/776218ac4734478c90191dde8cae483c'</span><span class="pl-kos">,</span>
        <span class="pl-c1">blockExplorer</span>: <span class="pl-s">'https://etherscan.io/'</span><span class="pl-kos">,</span>
        <span class="pl-c1">ticker</span>: <span class="pl-s">'ETH'</span><span class="pl-kos">,</span>
        <span class="pl-c1">tickerName</span>: <span class="pl-s">'Ethereum'</span><span class="pl-kos">,</span>
      <span class="pl-kos">}</span><span class="pl-kos">,</span>
      <span class="pl-c1">enableLogging</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
    <span class="pl-kos">}</span><span class="pl-kos">)</span>

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

    <span class="pl-s1">web3authCore</span><span class="pl-kos">.</span><span class="pl-en">configureAdapter</span><span class="pl-kos">(</span><span class="pl-s1">adapter</span><span class="pl-kos">)</span>
    <span class="pl-en">subscribeAuthEvents</span><span class="pl-kos">(</span><span class="pl-s1">web3authCore</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
    <span class="pl-en">setWeb3auth</span><span class="pl-kos">(</span><span class="pl-s1">web3authCore</span><span class="pl-kos">)</span>

    <span class="pl-k">await</span> <span class="pl-s1">web3authCore</span><span class="pl-kos">.</span><span class="pl-en">init</span><span class="pl-kos">(</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span> <span class="pl-k">catch</span> <span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-smi">console</span><span class="pl-kos">.</span><span class="pl-en">log</span><span class="pl-kos">(</span><span class="pl-s1">error</span><span class="pl-kos">)</span>
  <span class="pl-kos">}</span>
<span class="pl-kos">}</span>

<span class="pl-en">init</span><span class="pl-kos">(</span><span class="pl-kos">)</span>

}, [])

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

<span class="pl-c">// https://web3auth.io/docs/sdk/web/core/usage#example</span>
<span class="pl-k">await</span> <span class="pl-s1">web3auth</span><span class="pl-kos">.</span><span class="pl-en">connectTo</span><span class="pl-kos">(</span><span class="pl-c1">WALLET_ADAPTERS</span><span class="pl-kos">.</span><span class="pl-c1">OPENLOGIN</span><span class="pl-kos">,</span> <span class="pl-kos">{</span>
  <span class="pl-c1">loginProvider</span>: <span class="pl-s">'jwt'</span><span class="pl-kos">,</span>
  <span class="pl-c1">extraLoginOptions</span>: <span class="pl-kos">{</span>
    <span class="pl-c1">domain</span>: <span class="pl-s">'XXX'</span><span class="pl-kos">,</span>
    <span class="pl-c1">verifierIdField</span>: <span class="pl-s">'sub'</span><span class="pl-kos">,</span>
    <span class="pl-c1">response_type</span>: <span class="pl-s">'token'</span><span class="pl-kos">,</span>
    <span class="pl-c1">scope</span>: <span class="pl-s">''</span><span class="pl-kos">,</span> <span class="pl-c">// e.g. email openid</span>
  <span class="pl-kos">}</span><span class="pl-kos">,</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span>

}



Originally posted by: gerardopar

Check the discussion at: https://github.com/orgs/Web3Auth/discussions/422