No waiting after connection for signing request with walletconnect on mobile

After connection request approved, it moves back to application page. It does not waits for wallet signatures on wallet screen. I have tested in trust wallet and metamask both in mobile devices. User need to go back to wallet screen by minimising the current screen and sign message manually. It breaks the flow of user and it’s annoying. I am posting a video for better understanding. Is there any way to make this happen that connect and sign done on wallet and after return to application screen. If there is any help will be appreciated.

here is the sample code

htmt file here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Wallet-Connect</title>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.7.1/web3-provider.min.js"></script>
</head>
<body>
    <h1 class="title">WalletConnect Authentication</h1>

    <button class="button" id="btn-login">Login</button>
    <button class="button" id="btn-logout">Logout</button>

    <script type="text/javascript" src="./main.js"></script>
    <!-- <link rel="stylesheet" type="text/css" href="style.css" /> -->
</body>
</html>

js file here*****

// Moralis Initialisation Code

const serverUrl = "https://t15nrxcr1twb.usemoralis.com:2053/server";
const appId = "J3VGR********************************************RFME";
Moralis.start({ serverUrl, appId});

// User Authentication

async function login () {
    let user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate({
            signingMessage: "Log in using WalletConnect",
            provider: "walletconnect",
            chainId: "80001"
        })
        .then (function (user){
            console.log("Logged in User:", user);
            document.getElementById("btn-login").innerHTML = user.get("ethAddress");
        })
        .catch(function (error) {
            console.log(error);
        });
    }
}

async function logOut() {
    await moralis.User.logOut();
    console.log("logged out");
}

document.getElementById("btn-login").onclick = login;
document.getElementById("btn-logout").onclick = logOut;

****See issue here in Video

Issue description video

1 Like

Yes on Android at least, this is the default behaviour. I think it is how the flow works in general when asking for a connection + signing message together. Worth it to try testing without Moralis authentication (prompt for a WalletConnect connection + normal signature request).

They should look upon this feature. Breaks a lot user flow.

Please friend,
Can you post a working code so that I could test and implement into my project. Thanks in advance.

There is a demo here you can look at. The second button implements a different flow to initiate both the WalletConnect connection and the Moralis authentication signature request instead of having to do both manually.