Itās working now. Found out that I have to save the user email myself when signing up with Magic Link and also save the used provider to the User object. This way I can enabledWeb() with the right params on reload. Hereās some boilerplate to set up and test multiple auth options for Rinkeby:
<!DOCTYPE html>
<html>
<head>
<title>Moralis Multi Auth Test</title>
<script src="https://unpkg.com/moralis/dist/moralis.js"></script>
<script src="https://auth.magic.link/sdk"></script>
<script src="https://github.com/WalletConnect/walletconnect-monorepo/releases/download/1.7.1/web3-provider.min.js"></script>
</head>
<body>
<button id="btn-loginMM">Moralis Metamask Login</button>
<button id="btn-loginWC">Moralis WC Login</button>
<button id="btn-loginMagic">Moralis Magic Login</button>
<button id="btn-logout">Logout</button>
<input type="email" id="email" placeholder="email..." />
<div id="balance">User balance: <span>logged out</span></div>
<script type="text/javascript" src="./script.js"></script>
</body>
</html>
const serverUrl = 'xxx';
const appId = 'xxx';
Moralis.start({ serverUrl, appId });
// metamask
async function loginMM() {
let user = Moralis.User.current();
if (!user) {
try {
await Moralis.authenticate()
initUser()
} catch(error) {
console.log(error)
}
}
}
// wallet connect
async function loginWC() {
if (!Moralis.User.current()) {
Moralis.authenticate({ provider: 'walletconnect', chainId: 4 })
.then((user) => {
// save the provider to User object, optionally check if already set
user.set('provider', 'walletconnect')
user.save()
initUser()
})
}
}
// magic link
function loginMagic() {
if (!Moralis.User.current()) {
const email = document.getElementById('email').value
Moralis.authenticate({
provider: 'magicLink',
email: email,
apiKey: 'xxx',
network: 'rinkeby',
})
.then((user) => {
// save the email and provider to User object, optionally check if already set
user.set('email', email)
user.set('provider', 'magicLink')
user.save()
initUser()
})
}
}
// set web3 and get user balance to test it
async function initUser () {
const user = Moralis.User.current()
if (user) {
if (!Moralis.ensureWeb3IsInstalled()) {
const userProvider = user.get('provider')
let providerOptions
switch (userProvider) {
case 'magicLink':
providerOptions = {
provider: 'magicLink',
email: user.get('email'),
apiKey: 'xxx',
network: 'rinkeby',
}
break
case 'walletconnect':
providerOptions = {
provider: 'walletconnect',
chainId: 4,
}
break
default:
// metamask
providerOptions = null
}
try {
await Moralis.enableWeb3(providerOptions)
} catch (err) {
console.log(err);
}
}
Moralis.web3.getBalance(user.get('ethAddress'))
.then((balance) => {
document.getElementById('balance').firstElementChild.textContent = Moralis.web3Library.utils.formatEther(balance)
})
}
}
async function logOut() {
await Moralis.User.logOut();
document.getElementById('balance').firstElementChild.textContent = 'logged out'
}
document.getElementById('btn-loginMM').onclick = loginMM;
document.getElementById('btn-loginWC').onclick = loginWC;
document.getElementById('btn-loginMagic').onclick = loginMagic;
document.getElementById('btn-logout').onclick = logOut;
// init user on reload
window.addEventListener('load', initUser);
Not sure why Moralis implementation doesnāt save the email or set a provider. Maybe the React boilerplate does this already, but Iām allergic to anything related to FB
Further findings on Magic Link are still mentioned in Magic Link Authetntication