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">© 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.
GM there!
So since you are logging in or authenticating w/ email + password already, the server will not allow you to authenticate again for another session with Metamask.
If you wanna connect your metamask after email login, use
await Moralis.enableWeb3()instead and it will do the job!Keep in mind that this is legacy now and our
moralislibrary have been renamedmoralis-v1and themoralislibrary is NodeJS SDK for Moralis 2.0if you have anymore questions, feel free to contact me and ask question in
Hope this helps, Cheers!