[SOLVED] Sign In with MetaMask, AxiosError: Request failed with status code 400

Moralis General
#1

I followed everything in here:

I donā€™t want to bother anyone by sharing all of those codes, I have re-paste and checked them several times:

pages/_app.js
pages/api/auth/[...nextauth].js
pages/api/auth/request-message.js
pages/signin.js
/user.js

 

I can see ā€œAuthenticate with metamaskā€ button, I could connect to the app but signin fails with that error. Please help me if you 've been through this before, thanks

 

page:

Unhandled Runtime Error
AxiosError: Request failed with status code 400

Call Stack
settle
node_modules/axios/lib/core/settle.js (19:0)
XMLHttpRequest.onloadend
node_modules/axios/lib/adapters/xhr.js (100:12)

 

console:

{
    "message": "Request failed with status code 400",
    "name": "AxiosError",
    "stack": "AxiosError: Request failed with status code 400\n    at settle (webpack-internal:///./node_modules/axios/lib/core/settle.js:24:12)\n    at XMLHttpRequest.onloadend (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:117:66)",
    "config": {
        "transitional": {
            "silentJSONParsing": true,
            "forcedJSONParsing": true,
            "clarifyTimeoutError": false
        },
        "transformRequest": [
            null
        ],
        "transformResponse": [
            null
        ],
        "timeout": 0,
        "xsrfCookieName": "XSRF-TOKEN",
        "xsrfHeaderName": "X-XSRF-TOKEN",
        "maxContentLength": -1,
        "maxBodyLength": -1,
        "env": {},
        "headers": {
            "Accept": "application/json, text/plain, */*",
            "Content-Type": "application/x-www-form-urlencoded",
            "content-type": "application/json"
        },
        "method": "post",
        "url": "/api/auth/request-message",
        "data": "{\"address\":\"0x4b27...1dFf\",\"chain\":1,\"network\":\"evm\"}"
    },
    "code": "ERR_BAD_REQUEST",
    "status": 400
}
1 Like
#2

Make sure all your code matches the final repo.

Have you set all the required values in your .env.local file e.g. API key, secret?

#3

thanks for your interest.

.env.local file:

APP_DOMAIN=some.io
W3W_API_KEY=3C***ZL
MORALIS_API_KEY=hqMS***3lGO
MORALIS_URL=https://xrib7xxxuwbs.usemoralis.com
MORALIS_APP_ID=8fy***7bI
NEXTAUTH_URL=http://localhost:3000       
NEXTAUTH_SECRET=7x84x6b5ea60ex20x16ccxdb3c6xfcd3
  • I have created a NEXTAUTH_SECRET by the URL (https://generate-secret.now.sh/32)
  • I created some.io line for APP_DOMAIN refers to 127.0.0.1 in known_hosts at my workstation to try if the issue could be fixed

There is nothing seems wrong in .env.local file

What happens if I renew NEXTAUTH_SECRET?

Also I noticed that yarn dev terminal console gives that error, if that helps:

TypeError: Cannot read properties of undefined (reading 'toString')
    at Function.EvmChainParser.parse (.../node_modules/@moralisweb3/evm-utils/lib/dataTypes/EvmChain/EvmChainParser.js:40:34)
    at new EvmChain (.../node_modules/@moralisweb3/evm-utils/lib/dataTypes/EvmChain/EvmChain.js:17:55)
    at Function.EvmChain.create (.../node_modules/@moralisweb3/evm-utils/lib/dataTypes/EvmChain/EvmChain.js:212:16)
    at makeEvmRequestMessage (.../node_modules/@moralisweb3/auth/lib/methods/requestMessage.js:71:161)
    at .../node_modules/@moralisweb3/auth/lib/methods/requestMessage.js:90:43
    at step (.../node_modules/@moralisweb3/auth/lib/methods/requestMessage.js:44:23)
    at Object.next (.../node_modules/@moralisweb3/auth/lib/methods/requestMessage.js:25:53)
    at .../node_modules/@moralisweb3/auth/lib/methods/requestMessage.js:19:71
    at new Promise (<anonymous>)
    at __awaiter (.../node_modules/@moralisweb3/auth/lib/methods/requestMessage.js:15:12)
#4

Which changes have you made in code? The tutorial only uses:

MORALIS_API_KEY= xxxx
APP_DOMAIN=amazing.finance
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET= # Linux: `openssl rand -hex 32` or go to https://generate-secret.now.sh/32

What happens if I renew NEXTAUTH_SECRET?

NEXTAUTH_SECRET can be any value - you can leave it.

Cannot read properties of undefined (reading ā€˜toStringā€™)

You get this error as soon as the app starts? Or when you try and authenticate?

#5

In order to make sure I re-pasted all files from the latest version in github that you shared.

I get this error only after I click to authenticate button SECOND time. It goes like that:

  • localhost:3000/signin App starts well, no errors, button ā€œAuthenticateā€ appears, ok
  • click ā€œAuthenticateā€, metamask appears, ok
  • click ā€œConnectā€ at metamask, it connects the app and the wallet, ok
  • click on second ā€œauthenticateā€ throws the error.
  • or, refresh the page which already connected to the wallet throws the error

It is about request-message.js and next/auth I believe.

#6

There should be only one signature request and then youā€™re meant to see all of the session data.

Can you try this repo - it is a direct clone of the final code with the .env already setup, so you just need to install (yarn install) and run the app (yarn dev). Then go to http://localhost:3000/signin.

1 Like
#7

Thatā€™s fine, it works with your repo, positive.

But I noticed the very diff between our package.json files

Yours | Mine
"dependencies": { | "dependencies": {
    "axios": "^0.27.2", |     "axios": "^1.1.2",
    "ethers": "^5.6.9", |     "ethers": "^5.7.1",
    "moralis": "2.0.1", |     "moralis": "^2.6.4",
    "next": "^12.2.4", |     "next": "12.3.1",
    "next-auth": "^4.10.3", |     "next-auth": "^4.12.3",
    "react": "^18.2.0", |     "react": "18.2.0",
    "react-dom": "^18.2.0", |     "react-dom": "18.2.0",
    "wagmi": "^0.6.1" |     "wagmi": "^0.6.8"
} | }

in this case I have to downgrade to your versions.

Alright, thank you very much for your tolerance to the topic.