How can I login with Magic and activate Metamask at the same time?

Hi,
I use Magic to login. It works fine with the following code:

Moralis.authenticate({
  provider: "magicLink",
  email: "email",
  apiKey: "pk_",
  network: "rinkeby",
});

How can I activate Metamask after the login?
For now, I have to reload the page and run Moralis.authenticate() . Metamask is available with this way. But it’s not ideal…

How can I smoothly activate Metamask without the reload?

Did you try calling Moralis.authenticate() on a button click?

Any use of Moralis.authenticate() after authenticating with Magic will switch the current logged in user and the active provider/web3 to MetaMask / injected (and then MetaMask should be used for any later transaction requests instead, etc.).

Can you post more of your code please.

Yes, but it brings me numerous issues, such that:

If I reload and run Moralis.authenticate(), I can avoid the issues.

I don’t have anymore. As @johnversus said, I have a button runs Moralis.authenticate(). This button is hidden until login process is over. If I rush to run Moralis.authenticate() along with Magic, MetaMask window override Magic login process.

I wonder why Magic does not include MetaMask authentication.

I don’t have anymore.

You say you have a button that runs Moralis.authenticate(), so can you please post the rest of your code.

If I rush to run Moralis.authenticate() along with Magic

If the button is hidden, how do you do this in your app? You can add await in front of any use of Moralis.authenticate() to wait for it to finish.

I wonder why Magic does not include MetaMask authentication.

If Magic doesn’t allow you to connect an external wallet like MetaMask and that’s what you want, you could use Web3Auth instead.

This is the code runs when a page is loaded. I can connect to MetaMask by reloading the page.

const serverUrl = 'https://2kymntxbwya7.usemoralis.com:2053/server';
const appId = 'EQXGXmwMRtl2gjYtrRlaiGD6SbUQJHL6zFgXDNkf';
Moralis.start({ serverUrl, appId });

async function init(){

const user = await Moralis.User.current();

if (user) {
const ethAddress =   user.get("ethAddress");
const email =   user.get("email");

console.log("current user logged in: ", user);
console.log("ethAddress: ", ethAddress);
console.log("user.accounts:", user.attributes.accounts);

await Moralis.enableWeb3();
await bubble_fn_email(email);

const connector = await Moralis.Web3.connector;
console.log("connector:", connector);

if (!email) {
bubble_fn_saveEmail();
}

// Save new Metamask account to Moralis db
Moralis.onAccountChanged( async (account) => {

bubble_fn_onAccountChanged(JSON.stringify(account));

});

} else {

// show the signup or login page
await bubble_fn_login();

}
}

init();

I’m not very sure how and why MetaMask is authenticated by reloading this script.

Thanks for the suggestion.
I have the following code that runs Web3Auth. Login process is done right, but the MetaMask is not associated along with code.

async function logIn() {
const user = await Moralis.authenticate({
provider: 'web3Auth',
clientId: 'BLSlQ_4',
loginMethodsOrder: ["email_passwordless", "google", "apple", "line", "twitter",],
});
const openlogin_store = localStorage.openlogin_store;   
const email = JSON.parse(openlogin_store).email;
user.set("email", `${email}`);
await user.save();
bubble_fn_w3a(email);
};

logIn();

Here is the errors on console:

Could you point me to right direction?

Login process is done right, but the MetaMask is not associated along with code.

You are connecting MetaMask through the “External Wallet” option? It should use this MetaMask wallet then. Check the address for example with Moralis.User.current() after your Moralis.authenticate.

Here is the errors on console:

You can ignore that tor.us error and the other logs, all of that looks pretty normal.

For the Web3Auth error at the bottom, it looks like you’re trying to use it somewhere in your code and it’s not imported or defined. Make sure you’ve followed the instructions here.

1 Like