Just getting started with a new app - using the below React to Login with Metamask:
import { useMoralis } from "react-moralis";
import { useRouter } from "next/router";
import { useEffect } from "react";
export default function SignIn() {
const { authenticate, isAuthenticated } = useMoralis();
const router = useRouter();
useEffect(() => {
if (isAuthenticated) router.replace("/work/search");
}, [isAuthenticated]);
return (
<div className="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<Head>
<title>Sign In - Worklink</title>
</Head>
<div className="max-w-md w-full space-y-8">
<div>
<h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">Sign in to your account</h2>
<button className="mt-2 text-center text-sm text-gray-600"
onClick={() =>
authenticate({ signingMessage: "Authorize linking of your wallet" })
}>
Sign in with Metamask
</button>
</div>
</div>
</div>
)
}
When testing in the browser, it opens Metamask and asks for authentication, but when agreeing the app won’t authenticate, returning a 403 response:
