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

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by githubdiscussions on 8/17/2022.
This content has been migrated from our previous community forum to preserve valuable discussions.

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>

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

&lt;span class="pl-s1"&gt;web3authCore&lt;/span&gt;&lt;span class="pl-kos"&gt;.&lt;/span&gt;&lt;span class="pl-en"&gt;configureAdapter&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-s1"&gt;adapter&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;
&lt;span class="pl-en"&gt;subscribeAuthEvents&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-s1"&gt;web3authCore&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;&lt;span class="pl-kos"&gt;;&lt;/span&gt;
&lt;span class="pl-en"&gt;setWeb3auth&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-s1"&gt;web3authCore&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;

&lt;span class="pl-k"&gt;await&lt;/span&gt; &lt;span class="pl-s1"&gt;web3authCore&lt;/span&gt;&lt;span class="pl-kos"&gt;.&lt;/span&gt;&lt;span class="pl-en"&gt;init&lt;/span&gt;&lt;span class="pl-kos"&gt;(&lt;/span&gt;&lt;span class="pl-kos"&gt;)&lt;/span&gt;



<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