Sign in with Solana type error and subsequent failure when types are fixed.

[afisherdev]

Summary

Hey Phantom team!

I recently started going through your Sign-in with Solana example and implemented a PoC in our app. I copied the code examples over to our project with both our variables for the sign-in message, as well as an empty sign-in example. On each of them, I would get a Type error after I sent the stringified object to our backend. After the type error was addressed it just proceeded to fail verification.

Example

https://splits-git-dev-solsplits.vercel.app/

Steps to Reproduce

Hey Phantom team!

I recently started going through your Sign-in with Solana example and implemented a PoC in our app. I copied the code examples over to our project with both our variables for the sign-in message, as well as an empty sign-in example. On each of them, I would get an error after I sent the stringified object to our backend.

This is our AutoSignIn function:
`const autoSignIn = useCallback(async (adapter: Adapter) => {
// If the signIn feature is not available, return true
if (!("signIn" in adapter)) return true;

// Fetch the signInInput from the backend
const createResponse = await fetch("/api/auth/siws");
console.log(createResponse, "CREATE RESPONSE");
const input: SolanaSignInInput = await createResponse.json();
console.log(input, "CREATE RESPONSE JSON");
// console.log(input, "RECEIVED SIGNIN DATA ON FRONTEND")
// Send the signInInput to the wallet and trigger a sign-in request
const output = await adapter.signIn(input);
console.log(output, "OUTPUT");

// Verify the sign-in output against the generated input server-side
let strPayload = JSON.stringify({
  input,
  output: {
    account: {
      address: output.account.address,
      publicKey: Array.from(output.account.publicKey),
    },
    signature: Array.from(output["signature"]),
    signedMessage: Array.from(output["signedMessage"]),
  },
});
console.log(strPayload, "STR PAYLOAD")
const verifyResponse = await fetch("/api/auth/verifysiws", {
  method: "POST",
  mode: "cors",
  credentials: "same-origin",
  headers: {
    "Content-type": "application/json",
  },
  body: strPayload,
});
const success = await verifyResponse.json();

// If verification fails, throw an error
if (!success) throw new Error("Sign In verification failed!");

return false;

}, []);`

I would destructure the object like the example provided this is my backend route. `import { withIronSessionApiRoute } from "iron-session/next";
import { sessionOptions } from "@/lib/session";
import { NextApiRequest, NextApiResponse } from "next";
import { SigninMessage } from "@/lib/utils/SigninMessage";
import type {
SolanaSignInInput,
SolanaSignInOutput,
} from "@solana/wallet-standard-features";
import { verifySignIn } from "@solana/wallet-standard-util";

const supabase = supabaseServiceLevel
const handler = async (req: NextApiRequest, res: NextApiResponse) => {
const { method } = req;

switch (method) {
case "POST":
try{
console.log(req.body, "BODY IN VERIFY")
const { input, output } = req.body

  if (!verifySignIn(input, output)) {
    console.error('Sign In verification failed!')
    throw new Error('Sign In verification failed!');
  }
    res.status(200)
    } catch (error){
      console.log("ERROR", error)
    } 
default:
  res.setHeader("Allow", ["POST"]);
  res.status(405).end(`Method ${method} Not Allowed`);

}
};
export default withIronSessionApiRoute(handler, sessionOptions);
`
but the verifySignIn method would end up producing the following error.

ERROR TypeError: The "list" argument must be an instance of SharedArrayBuffer, ArrayBuffer or ArrayBufferView. at TextDecoder.decode (node:internal/encoding:429:16) at parseSignInMessage (/app/node_modules/@solana/wallet-standard-util/lib/cjs/signIn.js:69:36) at deriveSignInMessageText /app/node_modules/@solana/wallet-standard-util/lib/cjs/signIn.js:29:20) at deriveSignInMessage (/app/node_modules/@solana/wallet-standard-util/lib/cjs/signIn.js:19:18) at verifySignIn (/app/node_modules/@solana/wallet-standard-util/lib/cjs/signIn.js:11:21) at verifySIWS (webpack-internal:///(api)/./src/pages/api/auth/verifysiws.ts:17:86) at handler (webpack-internal:///(api)/./src/pages/api/auth/verifysiws.ts:26:32)
`

If I ended up changing the signature and signedMessage to Uint8Arrays like so...

    // If the signIn feature is not available, return true
    if (!("signIn" in adapter)) return true;

    // Fetch the signInInput from the backend
    const createResponse = await fetch("/api/auth/siws");
    const input: SolanaSignInInput = await createResponse.json();
    console.log(input, "Message Input");
    // Send the signInInput to the wallet and trigger a sign-in request
    const output = await adapter.signIn(input);
    console.log(output, " Sig Output");

    // Verify the sign-in output against the generated input server-side
    let strPayload = JSON.stringify({
      input,
      output: {
        account: {
          address: output.account.address,
          publicKey: Array.from(output.account.publicKey),
        },
        signature: new Uint8Array(output["signature"]),
        signedMessage: new Uint8Array(output["signedMessage"]),
      },
    });
    console.log(strPayload, "STR PAYLOAD")
    const verifyResponse = await fetch("/api/auth/verifysiws", {
      method: "POST",
      mode: "cors",
      credentials: "same-origin",
      headers: {
        "Content-type": "application/json",
      },
      body: strPayload,
    });
    
    const success = await verifyResponse.json();
    console.log(success, "SUCCESS")
    console.log(success, "SUCCESS")
    // If verification fails, throw an error
    if (!success) throw new Error("Sign In verification failed!");

    return false;
  }, []);

In this example it would stop giving me the type errors, but every single time the verification would fail.

Has anyone else had issues like this?

Phantom Version

No response

Is there an existing discussion for this?

• I have searched the existing discussions

[KultureElectric]

Getting the same error but for me it's for the input argument of the verifySignInFunction:

ERROR: The "input" argument must be an instance of ArrayBuffer or ArrayBufferView. Received an instance of Object.

Basically doing the exact same thing:

const verificationResult = verifySignIn(
        input as SolanaSignInInput,
        output as SolanaSignInOutput
      );

If I log the input that I pass into this function I see this:

{
  domain: 'localhost:3000',
  statement: 'Clicking Sign or Approve only means you have proved this wallet is owned by you. This request will not trigger any blockchain transaction or cost any gas fee.',
  version: '1',
  nonce: 'oBbLoEldZs',
  chainId: 'mainnet',
  issuedAt: '2023-09-09T12:01:41.201Z',
  resources: [ 'https://example.com', 'https://phantom.app/' ]
}

Help would be appreciated

[0xproflupin]

@afisherdev @KultureElectric Can you please log both the input and the output on the backend, just before verifySignIn to see if they are deserialised and are objects of SolanaSignInInput and SolanaSignInOutput respectively. If not, you will have to deserialise them into these objects before passing.

If you can share these inputs and outputs with me, that would be nice

[KultureElectric]

Input:

{
  domain: 'localhost:3000',
  statement: 'Clicking Sign or Approve only means you have proved this wallet is owned by you. This request will not trigger any blockchain transaction or cost any gas fee.',
  version: '1',
  nonce: 'oBbLoEldZs',
  chainId: 'mainnet',
  issuedAt: '2023-09-10T09:06:30.192Z',
  resources: [ 'https://example.com', 'https://phantom.app/' ]
}

Output:

{
  account: {
    address: '7WH4ctDQ6sY2DoeSyXewR1jrqPvFP5Q7mNcnvWyJWCNf',
    publicKey: {
      '0': 96,
      '1': 166,
      '2': 32,
      ...
    }
  },
  signature: {
    '0': 151,
    '1': 134,
    '2': 81,
   ...
  },
  signedMessage: {
    '0': 108,
    '1': 111,
    '2': 99,
    ...
}

Based on that I would assume it should work. The Input types are all strings and in the output object I serialized everything into Uint8Arrays.

Error remains the same: The "input" argument must be an instance of ArrayBuffer or ArrayBufferView. Received an instance of Object

[adamdelphantom]

@KultureElectric Anvit, should be following up with you on this shortly. Thanks for your patience!

[KultureElectric]

Actually Anvit was already able to help me solve it:

The Output object has to be formatted with Array.from() on the client side
-> Because apparently Uint8Arrays can't be Json.stringified

So on the client I need to do this:

let strPayload = JSON.stringify({ input, output: {
account: {
address: output.account.address,
publicKey: Array.from(output.account.publicKey),
},
signature: Array.from(output["signature"]),
signedMessage: Array.from(output["signedMessage"]),
} });

const verifyResponse = await fetch("/api/wallet/verifySIWS", {
method: "POST",
body: strPayload,
});

And then on my server I do as you say and reformat it back to a Uint8Array:

const deconstructPayload: {
input: SolanaSignInInput;
output: SolanaSignInOutput;
} = JSON.parse(req.body);

const backendInput = deconstructPayload.input;
const backendOutput: SolanaSignInOutput = {
account: {
...deconstructPayload.output.account,
publicKey: Uint8Array.from(
deconstructPayload.output.account.publicKey
),
},
signature: Uint8Array.from(deconstructPayload.output.signature),
signedMessage: Uint8Array.from(deconstructPayload.output.signedMessage),
};

const verificationResult = verifySignIn(backendInput, backendOutput);

---

Based on that I don't think the demonstration example would work for others. Probably best if you changed it.

Thanks a lot for your help! 🙏

[s-bilic]

Had the same issue, wish I read this earlier.

Thanks for the solution!