How to add multiple login options

Moralis General
#1

How can I add multiple login options?
I want the user being able to select between metamask and walletconnect

I tried this attempt which does the trick but i hope there is a better solution for that

 /** Connect to Moralis server */
 const serverUrl = 
 const appId = 
 Moralis.start({ serverUrl, appId });

 /** Add from here down */
 async function Walletlogin() {
     let user = Moralis.User.current();
     if (!user) {
         try {
             user = await Moralis.authenticate({ provider: "walletconnect", chainId: 56 })
             console.log(user)
             console.log(user.get('ethAddress'))
         } catch (error) {
             console.log(error)
         }
     }
 }



 async function login() {
  let user = Moralis.User.current();
  if (!user) {
      try {
          user = await Moralis.authenticate({ signingMessage: "Hello World!" })
          console.log(user)
          console.log(user.get('ethAddress'))
      } catch (error) {
          console.log(error)
      }
  }
}



 async function logOut() {
     await Moralis.User.logOut();
     console.log("logged out");
 }

 document.getElementById("btn-login2").onclick = Walletlogin;
 document.getElementById("btn-login").onclick = login;
 document.getElementById("btn-logout").onclick = logOut;

What i want is a connect button which opens up a modal and than user can select metamask login or walettconnect login and so that i can extend this and add more login options in the future

#2

You already said the solution.

Create a Modal which opens up whenever someone wants to login.
Then have two entries in the Modal :
-Metamask
-Walletconnect

And run the right functions whenever someone clicks one of them

#3

Yes, but how do i implement this in JS, i posted above code but as i said it doesnt look right

#4

You can use something like:

async function login(provider) {
  let user = Moralis.User.current();
  if (!user) {
      try {
          user = await Moralis.authenticate({ signingMessage: "Hello World!", provider })
          console.log(user)
          console.log(user.get('ethAddress'))
      } catch (error) {
          console.log(error)
      }
  }
}

 document.getElementById("btn-login-metamask").onclick = login;
 document.getElementById("btn-login-wc").onclick = login("walletconnect");
1 Like
#5

perfect, thanks a lot

1 Like