Build a Simple dApp in 3 Minutes - Login (Part 2)

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...
Build a Simple dApp in 3 Mins - Historical Transactions (Part 3)

🎓Guides - Previous

Build a Simple dApp in 3 Minutes - Setup (Part 1)

Next - 🎓Guides

Build a Simple dApp in 3 Mins - Historical Transactions (Part 3)

Last modified 14d ago

Copy link

Contents

How to Login with MetaMask

Run dApp on Localhost

Click Login

Logging Out

Wow!