portis-project / web-sdk

Portis Web SDK
https://portis.io
MIT License
77 stars 31 forks source link

TypeError: Cannot read property 'importKey' of null #1

Closed prestonvanloon closed 5 years ago

prestonvanloon commented 5 years ago
Uncaught (in promise) TypeError: Cannot read property 'importKey' of null
    at e.<anonymous> (main.7218ff32a9e6c025b113.js:1)
    at main.7218ff32a9e6c025b113.js:1
    at Object.next (main.7218ff32a9e6c025b113.js:1)
    at main.7218ff32a9e6c025b113.js:1
    at new Promise (<anonymous>)
    at r (main.7218ff32a9e6c025b113.js:1)
    at e.hmac (main.7218ff32a9e6c025b113.js:1)
    at e.<anonymous> (main.7218ff32a9e6c025b113.js:1)
    at main.7218ff32a9e6c025b113.js:1
    at Object.next (main.7218ff32a9e6c025b113.js:1)
    at main.7218ff32a9e6c025b113.js:1
    at new Promise (<anonymous>)
    at i (main.7218ff32a9e6c025b113.js:1)
    at e.hkdfExpand (main.7218ff32a9e6c025b113.js:1)
    at e.<anonymous> (main.7218ff32a9e6c025b113.js:1)
    at main.7218ff32a9e6c025b113.js:1
    at Object.next (main.7218ff32a9e6c025b113.js:1)
    at main.7218ff32a9e6c025b113.js:1
    at new Promise (<anonymous>)
    at i (main.7218ff32a9e6c025b113.js:1)
    at e.stretchKey (main.7218ff32a9e6c025b113.js:1)
    at e.<anonymous> (main.7218ff32a9e6c025b113.js:1)
    at main.7218ff32a9e6c025b113.js:1
    at Object.next (main.7218ff32a9e6c025b113.js:1)
    at o (main.7218ff32a9e6c025b113.js:1)

Context: I'm working on a testnet interface for our Ethereum 2.0 client, Prysm.

I tried to add the portis SDK into an Angular application, and it seems to throw the error above when I try to fetch the accounts.

The flow is

Repro commit: https://github.com/prestonvanloon/prysm-testnet-site/tree/a62922e489edfbcd6d13a5501f3a8d2ac0b0e84e

To repro, check out that commit, run the app npm start (you may need to yarn install first), navigate to participate and click on the portis icon. The user is prompted with a portis login and after a successful login, we get that error.

radotzki commented 5 years ago

Hi @prestonvanloon! Just tried it on Chrome and it looks good. On what browser did you test it?

Also, you can not assume that users will have MetaMask installed, so you might want to check it before you initiate a new web3 instance with window.ethereum :)

prestonvanloon commented 5 years ago

I'm on ChromeOS. This works for you? I'm totally stuck.

Google Chrome | 73.0.3683.20 (Official Build) dev (64-bit)

The demo for portis works fine for me, I'm lost to why this importkey of null error is happening. Probably something to do with the treeshaking in Angular?

Thanks for the note. I haven't handled the case where window.ethereum is undefined (yet).

radotzki commented 5 years ago

Can you please check if window.crypto works on your browser?

prestonvanloon commented 5 years ago

What should it look like?

image

radotzki commented 5 years ago

It looks good 🤔 Please try also window.crypto.subtle

prestonvanloon commented 5 years ago

window.crypto.subtle is undefined

radotzki commented 5 years ago

Do you test it on localhost:4200? Or different hostname?

prestonvanloon commented 5 years ago

I'm using the IP address, so in this case it is http://192.168.86.100:4200/

Using ng serve --host 0.0.0.0

radotzki commented 5 years ago

So that must be the issue :) Chrome blocks crypto functions on http unless it is localhost. Can you try it from localhost:4200?

prestonvanloon commented 5 years ago

Hmmm. Are you sure? I was able to access it from chrome on iOS at that link.

If there a flag I can enable to ignore or whitelist that IP?

radotzki commented 5 years ago

Yes I'm sure :)

Access to the WebCrypto API is restricted to secure origins (which is to say https:// pages).

https://www.chromium.org/blink/webcrypto

Don't sure about the flag, but you can try --disable-web-security 👍

prestonvanloon commented 5 years ago

OK. I feel satisfied with that answer.

Feel free to close this or consider a PR for graceful handling of the issue. I'm not sure if it is trivial to log a nice message or just close this as WAI. Thanks!