[SOLVED] Web3Auth & Magic Link do not restore session when user is already logged in

matiyin · March 5, 2022, 7:13am

I’m testing out other wallet providers and ran into the same issue with both Wallet Connect and Magic Link:
I’m using my app with Metamask, then I log out of the app with the metamask user.
When I log in with another wallet provider (WC/Magic) the auth works but when I try run a contract method like buying an NFT, I get a revert saying “cannot buy from yourself”. It turns out the signer is still the address from metamask!

web3.getSigner() still has the old metamask address and not the one from the new provider.

and so it’s sending from the address and not the one logged in with Magic Link or WC:

Only after I fully Disconnect metamask from the site, revoke the connection, it will work and gives the right address:

Since this is for both WC and Magic there’s something not right in setting the alternative provider when metamask is still ‘connected’ though not logged in.

matiyin · February 19, 2022, 4:55pm

Ok I think this is related to me not setting the provider correctly when initiating the new user
It was authenticating fine but doing transactions is where it became funky.

await Moralis.enableWeb3({provider: 'magicLink'})

matiyin · February 19, 2022, 5:45pm

@cryptokid still weird stuff happening though: why I get an email not provided error when doing this:

function loginMagic() {
    Moralis.authenticate({ 
      provider: 'magicLink',
      email: '[email protected]',
      apiKey: 'pk_live_xxx',
      network: 'rinkeby',
    })
    .then((user) => {
      Moralis.enableWeb3({ provider: "magicLink" })
      console.log('Magic user', user);
      console.log(user.get('ethAddress'))
    })
}

MagicWeb3Connector.js from Moralis SDK:

export default class MagicWeb3Connector extends AbstractWeb3Connector {
  type = 'MagicLink';
  async activate({ email, apiKey, network }) {
    let magic = null;
    let ether = null;

    try {
      await this.deactivate();
    } catch (error) {
      // Do nothing
    }

    if (!email) {
      throw new Error('"email" not provided, please provide Email');
    }
    if (!apiKey) {
      throw new Error('"apiKey" not provided, please provide Api Key');
    }
    if (!network) {
      throw new Error('"network" not provided, please provide network');
    }

cryptokid · February 19, 2022, 5:57pm

I see a different syntax here:

github.com

MoralisWeb3/Moralis-JS-SDK/blob/a0928dcbeb2b25bdae56526c89ea95ab574cd4ad/src/Web3Connector/MagicWeb3Connector.js#L7


/* global window */
import { ethers } from 'ethers';
import AbstractWeb3Connector from './AbstractWeb3Connector';
export default class MagicWeb3Connector extends AbstractWeb3Connector {
  type = 'MagicLink';
  async activate({ email, apiKey, network, newSession } = {}) {
    let magic = null;
    let ether = null;
    if (!email) {
      throw new Error('"email" not provided, please provide Email');
    }
    if (!apiKey) {
      throw new Error('"apiKey" not provided, please provide Api Key');
    }
    if (!network) {

matiyin · February 19, 2022, 9:57pm

Thanks for the input, totally sharp, I was looking at an older version. However, I’m using the correct version in my bare bone test setup from https://unpkg.com/moralis/dist/moralis.js

Still throws the same error, caused by calling Moralis.enableWeb3({ provider: "magicLink" }) when a user has been found. Not only after login, but also on reloading the page and user session.

Will test some more.

On localhost it also throws errors when loading magic as you can see. Here’s the Chromium log:

Not sure what that’s about yet, but so far connecting other providers has been a real drag. Probably working to hard

matiyin · February 19, 2022, 11:35pm

Tried Web3Auth, same thing but asking for clientId. Ok so I did

function loginMagic() {
    Moralis.authenticate({ 
      provider: 'magicLink',
      email: '[email protected]',
      apiKey: 'pk_live_xxx',
      network: 'rinkeby',
    })
    .then((user) => {
      Moralis.enableWeb3({
        provider: 'magicLink',
        email: '[email protected]',
        apiKey: 'pk_live_xxx',
        network: 'rinkeby',
      })
      console.log('Magic user', user);
      console.log(user.get('ethAddress'))
    })
}

Seems better but not that logical? Am I missing something? Why can’t I call Moralis.enableWeb3() without adding in those vars again…

cryptokid · February 20, 2022, 7:22am

Can you try enable web3 only with the provider type?

matiyin · February 20, 2022, 7:35am

Ok so I was calling enableWeb() right after authenticate(), which is not needed I found out, as authenticate already adds Moralis.web3.
So logging in is fine now, but when I refresh or come back to an existing user session, I’m already authenticated so I need to call enableWeb().
How do I know the provider options for the current user session?
I cannot call it with just await Moralis.enableWeb3({provider: state.provider}), this will always throw ‘missing clientId’ or ‘email’ or any params you need to set when connecting to an alternative provider.

For example doing this:

window.addEventListener('load', 
  async function() { 
    if (Moralis.User.current()) {
      const web3 = await Moralis.enableWeb3({ provider: 'web3Auth' })
    }
  }
})

cryptokid · February 20, 2022, 7:43am

How do you call authenticate?

matiyin · February 20, 2022, 7:47am


const serverUrl = "hxxx";
const appId = "xxx";
Moralis.start({ serverUrl, appId });

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 loginWC() {
  let user = Moralis.User.current();
  if (!user) {
   try {
      user = await Moralis.authenticate({ provider: 'walletconnect', chainId: 4 })
      console.log(user)
      console.log(user.get('ethAddress'))
   } catch(error) {
     console.log(error)
   }
  }
}

function loginMagic() {
  let user = Moralis.User.current();
  if (!user) {
    Moralis.authenticate({ 
      provider: 'magicLink',
      email: 'xxx',
      apiKey: 'pk_live_xxx',
      network: 'rinkeby',
    })
    .then((user) => {
      const address = user.get('ethAddress')
      console.log(address)
    })
  }
}

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

document.getElementById("btn-login").onclick = login;
document.getElementById("btn-loginWC").onclick = loginWC;
document.getElementById("btn-loginMagic").onclick = loginMagic;
document.getElementById("btn-logout").onclick = logOut;

window.addEventListener('load', 
  async function() { 
    if (Moralis.User.current()) {
      const web3 = await Moralis.enableWeb3({  provider: 'magicLink'  })
      /// throws Uncaught (in promise) Error: "email" not provided, please provide Email
  });

cryptokid · February 20, 2022, 8:10am

found these fixes related to magic by now:

matiyin · February 20, 2022, 9:07am

whichever way I look at the code, Moralis.enableWeb3() is always wanting to do a new login and I have to provide all options. So basically there is no session that can be restored on refresh, it’s always forcing a new login and forcing those options.
For example for Magic Link there’s magic.user.isLoggedIn() to check a valid session https://magic.crisp.help/en/article/how-are-sessions-handled-with-magic-1h92t2s/
But what the MagicWeb3Connector does is always log in again when calling enableWeb3().

github.com

MoralisWeb3/Moralis-JS-SDK/blob/main/src/Web3Connector/MagicWeb3Connector.js#L52


    if (magic?.user) {
      try {
        await magic?.user?.logout();
      } catch (error) {
        // Do nothing
      }
    }
  }
  ether = new ethers.providers.Web3Provider(magic.rpcProvider);
  await magic.auth.loginWithMagicLink({
    email: email,
  });
} catch (err) {
  throw new Error('Error during enable via MagicLink, please double check network and apikey');
}
const loggedIn = await magic.user.isLoggedIn();
if (loggedIn) {
  const signer = ether.getSigner();
  const { chainId } = await ether.getNetwork();

cryptokid · February 20, 2022, 9:18am

if the user is not logged in, then it works fine?

matiyin · February 20, 2022, 9:28am

well not really either, on a buy order Web3Auth is throwing:

never seen that message…
I will go back to just trying WC first, but the ‘just one line to integrate’ is a bit oversold at the moment

matiyin · February 20, 2022, 6:49pm

Can 100% confirm now I have have WC working, session is restored on refresh, transactions all good, can switch back and forth between a WC and Metamask user without issues
If the RPC stays healthy, should be fine. I did loose connection one time between the mobile and website and had to logout and login again. Will see later if I can catch that somehow to warn the user.

As for Web3Auth and Magic Link, the main issue remains that I cannot call Moralis.enableWeb3() when a user is found on refresh. Unlike WC, it’s asking for all options to be passed, not only the provider name.

As discussed already in this thread, this does not work for both Web3Auth and Magic:

function loginMagic() {
    Moralis.authenticate({ 
      provider: 'magicLink',
      email: '[email protected]',
      apiKey: 'pk_live_xxx',
      network: 'rinkeby',
    })
    .then((user) => {
      // all fine
      console.log('Magic user', user);
      console.log(user.get('ethAddress'))
    })
}

// enable web3 if user present
window.addEventListener('load', 
  async function() { 
    if (Moralis.User.current()) {
      const web3 = await Moralis.enableWeb3({ provider: 'magicLink' })
      // throws error missing options
    }
  }
})

Looking at the code, I would suggest to check for magic.user.isLoggedIn() and call magic.auth.loginWithMagicLink() when no user session has been found?

github.com

MoralisWeb3/Moralis-JS-SDK/blob/main/src/Web3Connector/MagicWeb3Connector.js#L59


  }
  ether = new ethers.providers.Web3Provider(magic.rpcProvider);
  await magic.auth.loginWithMagicLink({
    email: email,
  });
} catch (err) {
  throw new Error('Error during enable via MagicLink, please double check network and apikey');
}
const loggedIn = await magic.user.isLoggedIn();
if (loggedIn) {
  const signer = ether.getSigner();
  const { chainId } = await ether.getNetwork();
  const address = (await signer.getAddress()).toLowerCase();
  // Assign Constants
  this.account = address;
  this.provider = ether.provider;
  this.chainId = `0x${chainId.toString(16)}`;
  // Assign magic user for deactivation
  this.magicUser = magic;

Hard to debug the rest if I cant refresh properly, but have been able to done some tx.

It’s crazy this Magic Link… there are no confirmation windows, no wallet(?), it just goes wow…Feels funny. Question is, can I see my wallet elsewhere or should I build additional wallet features inside my app?

React · February 22, 2022, 7:33pm

Hi matiyin, were you able to do any workaround to make Magic Link work? I am having the same issue you are having here.

matiyin · February 23, 2022, 6:13am

@cryptokid did you relay or test the issue already? Magic Link is useless at the moment, and so is Web3Auth…

@react The workaround is to change the Moralis code or implement a custom provider. I didnt find time yet to look myself and create a PL.

I made a little review here by the way: Magic Link Authetntication

cryptokid · February 23, 2022, 7:25am

I created an internal issue for this, I don’t expect a fix this week.

ls.oliveiras.santos · March 3, 2022, 11:39pm

Hello! Now I’m working to implement Moralis with Magic in React Native application. Can this issue affect my application?

cryptokid · March 4, 2022, 6:17am

Can you give an example of code/application that replicates this problem?