Hello,
I try to go live with the “Authenticate Users with MetaMask” example on Vercel with NextJS.
The local project works fine but I cannot make it works on Vercel… I got an error 401 Unauthorized.
Here is the configuration:
{
"name": "test-auth",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@moralisweb3/next": "2.9.0",
"@next/font": "13.1.2",
"ethers": "^5.6.9",
"moralis": "^2.9.0",
"eslint": "8.32.0",
"eslint-config-next": "13.1.2",
"next": "13.1.2",
"next-auth": "^4.10.3",
"react": "18.2.0",
"react-dom": "18.2.0",
"wagmi": "0.6.1"
},
"devDependencies": {
"@types/react": "18.0.25",
"typescript": "4.9.3"
}
}
[…moralis].ts :
import { MoralisNextApi } from '@moralisweb3/next';
export default MoralisNextApi({
apiKey: process.env.MORALIS_API_KEY || '',
authentication: {
domain: 'amazing.dapp',
uri: `https://${process.env.NEXT_PUBLIC_VERCEL_URL}` || '',
timeout: 120,
},
});
I write some logs on signin page:
import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
import { signIn } from 'next-auth/react';
import { useAccount, useConnect, useSignMessage, useDisconnect } from 'wagmi';
import { useRouter } from 'next/router';
import { useAuthRequestChallengeEvm } from '@moralisweb3/next';
function SignIn() {
const { connectAsync } = useConnect();
const { disconnectAsync } = useDisconnect();
const { isConnected } = useAccount();
const { signMessageAsync } = useSignMessage();
const { requestChallengeAsync } = useAuthRequestChallengeEvm();
const { push } = useRouter();
const handleAuth = async () => {
if (isConnected) {
await disconnectAsync();
}
const { account, chain } = await connectAsync({ connector: new MetaMaskConnector() });
console.log("account: ", account);
console.log("chain: ", chain);
const { message } = await requestChallengeAsync({ address: account, chainId: chain.id });
console.log("message: ", message);
const signature = await signMessageAsync({ message });
console.log("signature: ", signature);
// redirect user after success authentication to '/user' page
const { url } = await signIn('moralis-auth', { message, signature, redirect: false });
console.log("url: ", url);
/**
* instead of using signIn(..., redirect: "/user")
* we get the url from callback and push it to the router to avoid page refreshing
*/
push(url);
};
return (
<div>
<h3>Web3 Authentication</h3>
<button onClick={handleAuth}>Authenticate via Metamask</button>
</div>
);
}
export default SignIn;
Here the logs and error:
