🧙
Platform
🔥
Speedy Nodes
👨🍳 Tutorials
🎓Guides
Build a Simple dApp in 3 Minutes - Login (Part 2)
Build Your First Moralis dApp! This Guide Series Covers the Basics and How to Get Started Fast. In Part Two, We Implement User Login with MetaMask.
How to Login with MetaMask
Install MetaMask if you haven't already. Add the following code to the
<script> tag below the Moralis init code.1
<script>
2
// connect to Moralis server
3
const serverUrl = "https://xxxxx/server";
4
const appId = "YOUR_APP_ID";
5
Moralis.start({ serverUrl, appId });
6
7
// add from here down
8
async function login() {
9
let user = Moralis.User.current();
10
if (!user) {
11
user = await Moralis.authenticate();
12
}
13
console.log("logged in user:", user);
14
}
15
16
async function logOut() {
17
await Moralis.User.logOut();
18
console.log("logged out");
19
}
20
21
document.getElementById("btn-login").onclick = login;
22
document.getElementById("btn-logout").onclick = logOut;
23
</script>
Copied!
Run dApp on Localhost
Run
index.html on localhost as a web page. The easiest way is by using the live server extension Visual Studio Code. Just right click on index.html and select Open with Live Server.
Click Login
You will see a page like the following. Clicking the
Moralis Login button will call Moralis.authenticate() and prompt the user to connect MetaMask.
Sign a message to prove address ownership.
Press the login button, then enter your MetaMask password.
Open the JavaScript console by pressing
F12 . You should see a message like the following. Congratulations, your dApp has it's first user!
Logging Out
Pressing the
Logout button will call Moralis.User.logOut() . It's that easy.Wow!
Wowww! Congratulations! You have a login working! Keep the pamp going...