How to Authenticate Users with MetaMask

#1

I’ve been trying to get this tutorial to work without any luck. The Youtube video, github and Howto are all different and none actually work

Youtube: https://www.youtube.com/watch?v=hhkWQPorBKQ&t=658s
Github: https://github.com/MoralisWeb3/demo-apps/tree/main/nextjs_moralis_auth
Howto: how-to-sign-in-with-metamask

The youtube video appears to be out of date. It does connect the wallet and show the message to sign but then fails

The Github and Howto are close to each other but some files have different extensions and the Howto has references to Mainnet but Github doesn’t

Without mainnet: error - TypeError: Cannot read properties of undefined (reading ‘length’)
With Mainnet: TypeError: Cannot read properties of null (reading ‘useEffect’)

Does anyone have an upto date version?

Thanks in advance

#2

You can follow the steps in our docs here

#3

Thanks for replying but that is the Howto that I was in my first message.

#4

I have got a mostly working version by setting up with “npm init” instead of
“npx create-next-app”.

However, after connect I’m getting a “Deceptive site request”. I believe that it is caused by a MetatMask update and now “amazing.dapp” can’t be used as a placeholder. I’ve no idea what to put (it’s running on localhost:3000)

Also there isn’t a signing message that comes with the warning. It just shows the uri, version, chain, nonce and issued at values.

Screenshot 2023-03-29 at 18.34.53
Screenshot 2023-03-29 at 18.34.53688×1522 72.8 KB

Any ideas on what I need to do next?

Thanks.

#5

Hello there, I am facing the same problem in a local environment. For now, I use the free “hobby” license of vercel to deploy the project: https://vercel.com/
Vercel seems cool, but testing things by pushing to a github repo and waiting for vercel to build and deploy seems kind of overkill -> Any hints to make the local dev work again is greatly appreciated :slight_smile:

I set the environment variables in .env.local as:
APP_DOMAIN=vercel-githubName.vercel.app
NEXTAUTH_URL=https://vercel-githubName.vercel.app/.

Note that I use the APP_DOMAIN variable in “/pages/api/moralis/[…moralis].ts”

I further added a statement when calling “requestChallengeAsync({,})” in “/pages/signin.jsx”.

const { message } = await requestChallengeAsync({
address: account,
chainId: chain.id,
statement: “Please confirm to authenticate yourself.”,
});

Hope this helps @mrepad

#6

Many thanks for your reply. I will give that a try and let you know how I get on.

EDIT: Took me less than a minute to update my project with the statement line. I did have to change the " to ’

It does make you wonder why the statement line wasn’t in the tutorial in the first place!

#7

I’m not convinced that this is an issue with MetaMask. I’ve just tested the Thirdweb demo and it works fine on localhost