abnf.js", which threw an exception: TypeError: Cannot read property 'decode' of undefined

[Jonathansoufer]

Trying to use ParsedMessage from '@spruceid/siwe-parser'; on our React Native app to parse the payload string received from WalletConnect. The error can be reproduced by implementing the snippet below and trying https://login.xyz/.

export function parseSiweMessageRequest(message: string) {
  try {
    const parsedMessage = new ParsedMessage(message);

    return parsedMessage;
  } catch (error) {
    console.log({ parsedMessage: error });
    return null;
  }
}

[w4ll3]

Hello, glad to have your feedback. siwe libraries require some node polyfills, I'm afraid you might be missing them. You might want to use [SSX](https://docs.ssx.id) which already includes those and also give you a lot more on top. In the same repo there are a lot of React examples not sure if they can help you out.

[Jonathansoufer]

Thank you for your quick reply. I am afraid that doesn't solve the problem. In the scenario, I'm the wallet not the dApp itself. So ssx is used by the dApp to establish with the respective backend all the SIWE flow, but as a wallet using the WalletConnect lib (https://walletconnect.com/) to connect into dApps. From that perspective I just need to parse a request and be able to identify if it's a SIWE or not and produce an object out of the string payload received. I can do it via custom implementation but seems that @spruceid/siwe-parser implements that. What am I missing to make this work with React NATIVE?

[Jonathansoufer]

FIX Summary: It's boils down that the problem is related with the transformers.js file from a dependency called apg-js. This call thisThis.utf16le.decode returns undefined from thisThis. Referencing this reported issue https://stackoverflow.com/questions/74969277/jest-import-module-typeerror-cannot-read-properties-of-undefined-reading-utf, the fix was patching the package apg-js as follows:

diff --git a/src/apg-conv-api/transformers.js b/src/apg-conv-api/transformers.js
index 286ee809ab885035b28b206b8bb4967c47ffb849..e359a21f4b00d14e7fa7f9d13076f9320282a060 100644
--- a/src/apg-conv-api/transformers.js
+++ b/src/apg-conv-api/transformers.js
@@ -504,7 +504,7 @@ exports.utf16be = {
 };
 
 // The UTF16LE algorithms.
-exports.utf16le = {
+const utf16le = {
   encode(chars) {
     const bytes = [];
     let char;
@@ -575,6 +575,8 @@ exports.utf16le = {
   },
 };
 
+exports.utf16le = utf16le;
+
 // The UTF32BE algorithms.
 exports.utf32be = {
   encode(chars) {
@@ -795,10 +797,10 @@ exports.uint32le = {
 // Uses the node.js Buffer's native "utf16le" capabilites.
 exports.string = {
   encode(chars) {
-    return thisThis.utf16le.encode(chars).toString('utf16le');
+    return utf16le.encode(chars).toString('utf16le');
   },
   decode(str) {
-    return thisThis.utf16le.decode(Buffer.from(str, 'utf16le'), 0);
+    return utf16le.decode(Buffer.from(str, 'utf16le'), 0);
   },
 };
 

[w4ll3]

Wow, that's quite a finding. Just found a similar issue in APG's issues and will try to see if they might accept your solution. Thanks for the time.

[Jonathansoufer]

Team work!

[luneShaoGM]

Same with me

[ldthomas]

I've just published apg-js version 4.2.0 specifically modified to address the fix that @Jonathansoufer pointed out and more. Give 4.2.0 a try and if it fixes this problem then I would assume this issue could be closed.