Unable to Connect with Android Emulator Running Locally

[MuckT]

Description

Connections fail with an Android Emulator when running locally.

Reproduction Steps

1. Install the repo and sever locally: yarn && yarn start
2. Attempt to navigate to the local deployment with an Android Emulator http//:<ip-address>:3000.
3. Tap Connect.
4. Unhandled Rejection.

Error

Unhandled Rejection (TypeError): Cannot read property 'importKey' of undefined
browserImportKey
src/lib/browser.ts:44
  41 | export async function browserHmacSha256Sign(key, data) {
  42 |     const subtle = env.getSubtleCrypto();
  43 |     const cryptoKey = await browserImportKey(key, HMAC_BROWSER);
> 44 |     const signature = await subtle.sign({
  45 |         length: HMAC_LENGTH,
  46 |         name: HMAC_BROWSER,
  47 |     }, cryptoKey, data);
View compiled
browserAesEncrypt
src/lib/browser.ts:59
  56 |     }, cryptoKey, data);
  57 |     return new Uint8Array(signature);
  58 | }
> 59 | export async function browserSha256(data) {
  60 |     const subtle = env.getSubtleCrypto();
  61 |     const result = await subtle.digest({
  62 |         name: SHA256_BROWSER_ALGO,
View compiled
Module.aesCbcEncrypt
src/browser/aes.ts:8
  5 | export function aesCbcDecrypt(iv, key, data) {
  6 |     return browserAesDecrypt(iv, key, data);
  7 | }
> 8 | //# sourceMappingURL=aes.js.map
View compiled
Module.encrypt
src/index.ts:49
async WalletConnect._encrypt
src/index.ts:1169
async WalletConnect._sendRequest
src/index.ts:790

[hollygrimm]

I was able to fix this error by starting the web server with https. Add HOST=192.168.1.2 HTTPS=true to the start command in package.json. Be sure to replace 192.168.1.2 with your local IP address.

It should look like this:
"start": "HOST=192.168.1.2 HTTPS=true react-scripts start",

I was able to get it working with both a physical Android phone and also an emulated phone using Genymotion.