Login that checks if an NFT is present

Moralis General
#1

Hi all,
I’ve got a very simple login dapp working with Moralis right now. It’s able to authenticate via signature which is the goal, but I’m hoping to add another check (that checks if an NFT from a specific contract is present) in order for the signature to actually give access to the dapp.

/** Connect to Moralis server */
const serverUrl = "https://3blwn0stnuyh.usemoralis.com:2053/server";
const appId = "lxHqQdUecmP7HlR6LO3HN1EI9kCvti2zfC4velJC";
Moralis.start({ serverUrl, appId });

/** Add from here down */
async function login() {
    new web3.eth.Contract["./abi.json", "0x...")

    const tokenOwner = await tokenContract.methods.ownerOf(tokenId).call()
    const hasToken = address === tokenOwner

    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");
}

these lines of code

new web3.eth.Contract["./abi.json", "0x1D0513111B51Fe8E3d6dFcE7d63971B6b06Df04f")

    const tokenOwner = await tokenContract.methods.ownerOf(tokenId).call()
    const hasToken = address === tokenOwner

cause this error in html
error

Without those lines of code the sign function works and metamask behaves accordingly. The goal is to have our dapp check the wallet for a specific token via the contract object.

Any ideas?

#2

which version of the SDK are you using? if you’re using the latest one it’s likely that it has changed to ether as default instead of web3js. For migration check on this guide Moralis JS SDK v1.0 (migration to Ethers.js) :raised_hands:

#3

Hey Yoseph, thanks for your reply.

Yeah that was originally done on the latest SDK. Just to get this concept going I’m gonna revert back to web3js as i think there is more documentation around on the old SDK, but I’m open to converting everything to ethers.js once i have a working dapp

I just installed via npm install [email protected]

import Web3 from 'web3' // Only when using package mananger. 
import Moralis from 'moralis' // Only when using package mananger

await Moralis.enableWeb3()
const web3 = new Web3(Moralis.provider)

/** Connect to Moralis server */
const serverUrl = "https://3blwn0stnuyh.usemoralis.com:2053/server";
const appId = "lxHqQdUecmP7HlR6LO3HN1EI9kCvti2zfC4velJC";
Moralis.start({ serverUrl, appId });

/** Add from here down */
async function login() {
    new web3.eth.Contract("/abi.json", "0.")

    const tokenOwner = await tokenContract.methods.ownerOf(tokenId).call()
    const hasToken = address === tokenOwner

    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");
}

Which is spitting out error2

The very first attempt to import is failing, so I may be misunderstanding if its needed at all

Here is my HTML

<!DOCTYPE html>
<html>

<head>
    <title>Vanilla Boilerplate</title>
    <script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/moralis.js"></script>
</head>

<body>
    <button id="btn-login">Moralis Metamask Login</button>
    <button id="btn-logout">Logout</button>
    <script type="text/javascript" src="./main.js"></script>
</body>

</html>

Am I overcomplicating things by thinking I need to check the wallet that is connecting to see if it has the required NFT during this login process? I’m able to get the sign/authenticate working, and it populates my database.

Is it preferred to use the NFT API’s to control access to various parts of the frontend? rather than have the sign and check existing in the same JS file?

This post https://forum.moralis.io/t/nft-ownership-based-login/385/2?u=juno makes it seem like its possible to block off parts of a dapp via api in Moralis

Thank you again!

1 Like
#5

Have you found a solution to your problem? I also need to check if a user has a specific NFT.