'Moralis Login Using Metamask Problem (Decentralized Application)

I'm working on creating a dApp using Moralis framework.

The website is very simple.. I created the html for the login page

login.html

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
    <meta name="generator" content="Hugo 0.88.1">
    <title>Tomorrow Marketplace</title>

    <link rel="canonical" href="https://getbootstrap.com/docs/5.1/examples/sign-in/">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="signin.css">
    <link rel="stylesheet" href="style.css">


    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

</head>

<body class="text-center">

    <main class="form-signin">
        <img class="mb-4" src="tomorrow.svg" alt="" width="72" height="57">
        <h1 class="h3 mb-3 fw-normal">Please sign in</h1>


        <div class="form-floating">
            <input type="text" class="form-control" id="user-username" placeholder="username">
            <label for="user-username">Username</label>
        </div>

        <div class="form-floating">
            <input type="email" class="form-control" id="user-email" placeholder="[email protected]">
            <label for="user-email">Email address</label>
        </div>

        <button id="btn-login" class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
    </main>

    <script src="main.js"></script>

</body>

</html>

in the main.js



const serverUrl = "https://qqujdxp5bgle.usemoralis.com:2053/server";
const appId = "fZ73Z90MnT7Kj2H4C1JYu8EOSOaHkIRwPQ3V0JtD";
Moralis.start({
    serverUrl,
    appId
});

async function login() {
    const user = await Moralis.User.logIn("username", "email");
    user.set("username", document.getElementById("user-username").value);
    user.set("email", document.getElementById("user-email").value);
    await user.save();
    user = Moralis.User.current();
    if (!user) {
        user = await Moralis.authenticate();
    }
    console.log("logged in user:", user);
}

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

The website is not connecting to Metamask knowing that im working on the latest updated snippets for Moralis.

On another note, is Moralis the best framework to work with.. or there is other suggestions.

Appreciate your help and thank you.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Moralis Login Using Metamask Problem (Decentralized Application)

Sources

Related Questions