Moralis.authenticate - Sign In Message keeps popping up - does not await?

Moralis General
#1

Hi im following Chris Bs tutorial on creating your first dapp.

i dont get it, whenever i open up the local host metamask is popping up before i actually give details on username , email and click sign in? When i move from index.html to dahsboard.html it pops up again. Whats up with that?

Screen Shot 2021-09-11 at 11.58.09 AM
Screen Shot 2021-09-11 at 11.58.09 AM2744×1180 153 KB

on top of that - moralis seems to not be able to fetch the username & email and put it in the database.Screen Shot 2021-09-11 at 11.58.44 AM|658x284

code:

index.html

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

  </head>
  <body class="text-center">
    
<main class="form-signin">
  <form>
    <img class="mb-4" src="../ebb.png" alt="" width="80" height="80">
    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

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

    <div class="form-floating">
      <input type="email" class="form-control" id="userEmail" placeholder="[email protected]">
      <label for="userEmail">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>
  </form>
</main>
<script src="main.js"></script>
   
  </body>

code main.js

console.log("helloworld");

Moralis.initialize("HlFF10yjAlTVOgVKqbGQNsudjMOmlVoe4KOPtUlZ");
Moralis.serverURL = "https://yhitnni921dz.bigmoralis.com:2053/server";


async function login(){

    await Moralis.authenticate().then(function (user) {
        console.log("logged in");
        console.log(Moralis.User.current());

        user.set("name", document.getElementById("userUsername").value);
        user.set("email", document.getElementById("userEmail").value);
        user.save();
        console.log("user information saved");
        window.location.href = "dashboard.html"
    })
}

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

appreciate your help

x

#2

Try .onclick = login;

1 Like
#3

nice its now only popping up when signup is clicked. i believe it didnt work earlier without the () thats why i put it.

nevertheless, the USername & Email info isnt being put in the database @moralis. Also the jump from index.html to dashboard.html isnt working anymore. What else could be the issue?

thanks for your help @cryptokid

#4

Can you confirm that no new User objects are created in the database after authorization?

#5

yea can confirm that. i just went back to the moralis server page and saw this.
is it cuz

Screen Shot 2021-09-11 at 5.17.26 PM
Screen Shot 2021-09-11 at 5.17.26 PM998×364 16.5 KB

#6

You have a typo:

await Moralis.authenticate().then(async function (user) {
#7

i tried it before with async in the function and await user.save() but it doesnt really do anything so i was like fuck it and left it out.

So the error persists…
its kinda weird cuz if i type

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

metamask keeps popping up with every refresh of the localhost, but it forwards the website to the dashboard.html

if i do

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

as cryptokid recommended, metamask only pops up after the onclick of the sign up button, BUT it doesnt forward me to the dashboard.html page.

and regardless wich option i choose in both versions no user data is being added in the moralis server.

#8

Does this solution work for you: I built an nft game in 12 hours [SOLVED]

#9

not sure tbh how would i write it exactly?

this doesnt work:

const error = "error!";

(async function init() {
    let user = Moralis.User.current();
    console.log(user);
    if (user) {
        window.location.href = "dashboard.html";
    } else {
      $("btn-login").click(async () => {
        try {
            user = await Moralis.Web3.authenticate();
            user.set("name", document.getElementById("userUsername").value);
            user.set("email", document.getElementById("userEmail").value);
            await user.save();
            console.log("user info has been saved");
            window.location.href = "dashboard.html";
        } catch (error) {
          console.log(error);
        }
      });
    }
  })();
#10

It may be Moralis.authenticate() in latest Moralis SDK version.

What part doesn’t work, what happens?
Can you provide a minimal HTML + javascript that could reproduce the problem?

#11

The problem is in <form>

#12 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>
    <title>Static Template</title>
  </head>
  <body>
    <main class="form-signin">
      <form>
        <img class="mb-4" src="../ebb.png" alt="" width="80" height="80" />
        <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

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

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

        <button id="btn-login" class="w-100 btn btn-lg btn-primary">
          Sign in
        </button>
        <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
      </form>
    </main>
    <script src="main.js"></script>
  </body>
</html>

js:

Moralis.initialize("HlFF10yjAlTVOgVKqbGQNsudjMOmlVoe4KOPtUlZ");
Moralis.serverURL = "https://yhitnni921dz.bigmoralis.com:2053/server";

function stopDefAction(evt) {
  evt.preventDefault();
}

document
  .getElementById("btn-login")
  .addEventListener("click", stopDefAction, false);

async function login() {
  console.log("clicked");
  let user = await Moralis.authenticate();
  console.log("logged in");
  console.log(user);

  user.set("name", document.getElementById("userUsername").value);
  user.set("email", document.getElementById("userEmail").value);
  await user.save();
  console.log("user information saved");
  console.log(user.attributes);
}

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

when you use <form> and press a button inside it reloads the page

#14

@Yomoo Thank you.

was the issue... everything solved for now.

Thank you guys.

#15

New Issue:

clicking on transactions button throws the following error:

Screen Shot 2021-09-13 at 7.56.21 PM

code:

getTransactions = async () => {
    console.log("getTxs");

    const options = { chain: "bsc", address: "not showing my address here "};
    const transactions = await Moralis.Web3API.account.getTransactions(options);
    console.log(transactions);

    if(transactions.total > 0){
        let tableTx = `
        <table class="table">
            <thead>
                <tr>
                    <th scope = "col">Transaction</th>
                    <th scope = "col">Block Number</th>
                    <th scope = "col">Age</th>
                    <th scope = "col">Type</th>
                    <th scope = "col">Fee</th>
                    <th scope = "col">Value</th>
                </tr>
            </thead>
            </tbody id="theTransactions">
            </tbody>
            </table>
        `
        document.querySelector("#tableOfTransactions").innerHTML = tableTx;
    }

}

and the necessary html part:

<h2>Transactions</h2>
        <div id = "tableOfTransactions "class="table-responsive">

        </div>

please let me know how to fix this innerHTML problem.

thank you so much!!!

#16

Hi, you can create a separate forum post for this problem.

#17