isAuthenticated for Modal

Moralis General
#1

I am trying to pull up a Modal when I call isAuthenticated in a function.
My project is built in simple Bootstrap using HTML-CSS-JS
When the user clicks on a button it opens up MetaMask and requests to Sign it for entering an Airdrop. This is connected to Moralis and stores the wallet address. After the user signs the message on MetaMask, I want it to open up a Modal which will then tell the user what action was taken by them for the Airdrop. i.e.: “You have entered the Airdrop Sweepstake.”

Everything works up until the isAuthenticated. I am able to sign the message and this stores into Moralis. The problem starts after login(); Below is the breakdown. I have a Modal in Bootstrap
Then I have stored the modal as a var
Then the action

  <!-- Modal -->
              <div class="modal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Modal title</h5>
                      <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                      </button>
                    </div>
                    <div class="modal-body">
                      <p>Modal body text goes here.</p>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-primary">Save changes</button>
                      <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    </div>
                  </div>
                </div>
              </div>

var modal = document.getElementById("modal");

document.getElementById("btn-login").onclick = function() {
            login();
                if(!isAuthenticated, user) {
                  console.log(isAuthenticated, user);
                }
              else if(authError) {
                console.log(authError);
              }
                  
            };

Instead of calling the Modal, I have used a console.log, just to see if I can access isAuthenticated. I don’t know if I am doing this correctly. How would I call the Modal after the signingMessage?

#2

what does this portion of the code do?

what you mean by a modal?

shouldn’t wait for that login to finish?

#3

what does this portion of the code do?
At this moment it does nothing. I wanted it to console.log the isAuthenticated for now but after the user signs the MetaMask signinmessage, I want a modal pop-up to inform a bit more about the airdrop

what you mean by a modal?
A Bootstrap Modal

shouldn’t wait for that login to finish?
The login does finish. I am able to get the user interaction through the login();. I want to perform another function after the signing message on MetaMask.

#4

what is the code that that login function, is a custom code that you wrote?
should use await login()?

#5

I am running an async function for login();

async function login() {
    let user = Moralis.User.current();
        if(!user) {
            user = await Moralis.authenticate({signingMessage:"You are signing to enter the Airdrop."}); 
                  
        }
            
        console.log("Your Wallet address has been submitted to enter the Airdrop.", user);
 
      
    }
#6

ok, can you add a console.log after calling that login function to see if that message appears before metamask appears?

#7

So just making sure I understand this correctly. Add the console.log after this part?

async function login() {
#8

no, not in this function, after you call this function

#9

So I console.log after the async function but it does not do anything. It also disables the click functions of the buttons.

After the async function login(), I also have an async function logout() . The console.log you have mentioned for me to try, I have placed in between these two functions.

#10

I mean here, after it calls login() to add a console.log

#11

Sorry for not understanding you the first time. The console.log after login(); logs before opening MM. So this works.

#12

it means that you should add an await before that login, it shouldn’t log before metamask appears

#13

Here is what happens. The onclick function doesn’t work when I add await to the function before login.

Without await login(); Everything works up until the if statement

 document.getElementById("btn-login").onclick = function() {
          login();
           
                if(!isAuthenticated, user) {

                  console.log("worked");
                }
              else if(authError) {
                console.log(authError);
              }
                  
            };
#14

I think that you have to define async that function for onclick to make it work

#15

Do you mean that I need to create an async function for isAuthenticated?

My eventual goal is to call the Bootstrap Modal when isAuthenticated verifies the signingmessage click on MetaMask. So far I am able to click on my “Sign for Airdrop” button to open MetaMask and sign the message. This is all going smoothly.

I am struggling with displaying the Modal after the signingmessage. isAuthenticated does not work, but also I don’t know how to display the Bootstrap Modal.

#16

I mean this function to be async so what you can use await in the function code

#17

Okay so I was able to add async to the onclick and added await like this:

document.getElementById("btn-login").onclick = async() =>{
            
          await login();
           
          
              if(!isAuthenticated, user) {

                console.log("log this");
              
              }
              
              else if(authError) {
           

              }
         
          }

However, isAuthenticated still does nothing.

#18

you have to get the value for isAuthenticated, it doesn’t change automatically

#19

I want it to return the modal. How do I do that?

#20

I don’t know how you can return a modal, I don’t know what you mean by returning a modal either