[SOLVED] Moralis with Web3Auth throwing UserRejectedRequestError: User rejected request

Moralis General
#1

I am trying to follow the tutorial here. I was able to get Metamask working, and I was trying to get Web3Auth to work. I can get to the Web3Auth modal with login options, but when I log in with Gmail, it throws Unhandled Runtime Error UserRejectedRequestError: User rejected request (see attached screenshot).

Screenshot 2022-12-24 at 8.36.16 PM
Screenshot 2022-12-24 at 8.36.16 PM2968×2160 331 KB

My package.json looks like:

{
  "name": "moralisweb3auth",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "clean": "sudo rm -rf node_modules",
    "reinstall": "npm run clean && npm install",
    "rebuild": "npm run reinstall && npm run build",
    "rebuildrun": "npm run rebuild && npm run dev"
  },
  "dependencies": {
    "@moralisweb3/next": "^2.10.3",
    "@next/font": "13.1.1",
    "@web3auth/web3auth-wagmi-connector": "^1.0.0",
    "ethers": "^5.7.2",
    "moralis": "^2.10.3",
    "next": "13.1.1",
    "next-auth": "^4.18.7",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "wagmi": "0.8.10"
  },
  "devDependencies": {
    "@types/react": "18.0.26"
  }
}

My signin.jsx looks like:

import { Web3AuthConnector } from '@web3auth/web3auth-wagmi-connector'
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({
    connector: new Web3AuthConnector({
      options: {
        enableLogging: true,
        clientId: '...', // Get your own client id from https://dashboard.web3auth.io
        network: 'testnet', // web3auth network
        chainId: '0x1', // chainId that you want to connect with
      },
    }),
  })
  const { disconnectAsync } = useDisconnect()
  const { isConnected } = useAccount()
  const { signMessageAsync } = useSignMessage()
  const { push } = useRouter()
  const { requestChallengeAsync } = useAuthRequestChallengeEvm()

  const handleAuth = async () => {
    if (isConnected) {
      await disconnectAsync()
    }

    const { account } = await connectAsync()

    const userData = { address: account, chain: '0x1', network: 'evm' }
    
    const { message } = await requestChallengeAsync(userData)

    const signature = await signMessageAsync({ message })


    // redirect user after success authentication to '/user' page
    const { url } = await signIn('moralis-auth', {
      message,
      signature,
      redirect: false,
      callbackUrl: '/user',
    })
    /**
     * 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 Web3Auth</button>
    </div>
  )
}

export default SignIn

Thoughts of what I might be doin wrong are greatly appreciated. Thanks in advance!

#2

What browser are your using?

If your browser have any extensions that block 3rd party cookies or scripts, maybe try disabling them.

Did you receive an email for signing?

#3

I got it work – I had to use chains in Web3AuthConnector in signin.jsx:

const { chains, provider } = configureChains(
		[chain.goerli, chain.polygon],
		[publicProvider()]
	);

const { connectAsync } = useConnect({
		connector: new Web3AuthConnector({
			chains,
			options: {
				enableLogging: true,
				clientId: '...', // Get your own client id from https://dashboard.web3auth.io
				network: 'testnet', // web3auth network
				chainId: '0x1', // chainId that you want to connect with
			},
		}),
	});

Thanks for looking! Hope this helps others.

2 Likes
#4