1

The user journey is as follows:

  1. user lands on my react website
  2. user connects their wallet
  3. user is then prompted to "Sign this message for authentication: "
  4. user signs the message and sends the signature to our server which then validates the authenticity of the message + signature

The user journey on desktop is flawless, but fails on step 3 on mobile. Instead of getting a prompt to sign a message, it redirects to a "you don't have a wallet installed" screen or breaks in some way.

Do I have to configure an additional mobile-wallet-adapter or should everything work out of the box with the wallet-adapter (because it's using mobile wallet adapter under the hood when user is on a mobile device)?

1 Answer 1

1

The reason why this happens is because you most likely rely on useEffect to prompt a user to sign a message.

Like so:

useEffect(() => {
  if (wallet?.publicKey) signMessageAndSendToBackend(wallet?.publicKey)
}, [wallet?.publicKey])

This will fail gloriously on mobile because most (if not all) mobile browsers check if the even is trusted or not. Even is not trusted if it didn't originate from a click. useEffect in this case could be a malicious script triggered on mobile browsers without users explicit approval. This flag can be found at event.isTrusted

What you should do is, add this logic to the WalletButton component so that it's done in the same click as with the wallet.connect().

There is a small issue though... on mobile this isn't possible yet because this signMessageAndSendToBackend function requires a mobileWallet from the transact object to be able to do it. WalletButton component does support callbacks within the wallet.connect and transact functions so you would have to be writing your own WalletButton component.

I have done it and I can share the code base as per request, just make sure to contact me somehow (twitter, discord, telegram... most of my handles are josip-volarevic or josipvolarevic2). I won't share those code snippets here because one day someone might expand the WalletButton component and deprecate that part of my answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.