Metamask says site is not secure

#21

Yes, in a few minutes. Thanks

#22

Okay, so to anyone who stumbles upon this post in despair, this is what fixed it.
First of all, changing the domain and uri in authService.ts doesn’t seem to change anything. So to change the domain and url, you have to either :
hardcode it in the same authService.ts file, change this

const result = await Moralis.Auth.requestMessage({
address,
chain,
networkType,
domain:url.hostname,
uri: url.ToString(),
statement: STATEMENT,
notBefore: now.toISOString(),
expirationTime: expirationTime.toISOString(),
timeout: TIMEOUT,
});

into this

const result = await Moralis.Auth.requestMessage({
address,
chain,
networkType,
domain: ‘domain’,
uri: ‘https://domain’,
statement: STATEMENT,
notBefore: now.toISOString(),
expirationTime: expirationTime.toISOString(),
timeout: TIMEOUT,
});

or, open config.ts and change the SERVER_URL parameter (haven’t tested this out yet, but should work)

1 Like
#23

I’ve cured this with ngrok. APP_DOMAIN is exactly the same as NEXTAUTH_URL but without https://

New problem. The signature is given (I can see it in web developer tools), but the signin page doesn’t redirect to the user page like it is supposed to!

#24

I don’t know what this means

#25

As seen in this youtube video. Once the user has signed the message, the user page should load in the browser and show the session data

#26

ok, you get any error, what happens?

#27

No errors. It stays on the signin page. If I try to go to the user page eg xxxx-xx-x-xxx-xxx.eu.ngrok.io/user it just reverts back to the signin page. This is only supposed to happen if the user hasn’t authenticated.

Many thanks for your help

#28

you are using a self hosted parse server or you use nextjs?

does it work without ngrok and with that warning?

#29

My knowledge in this area is weak at best. My background is in HTML, PHP and GML. I am new to nextjs.

I have the tutorial in Visual Studio Code and it has been running on Localhost:3000. As discussed, MetaMask gave a warning. If I signed anyway it still stays on the signin page without redirecting to the user page. Now I’m running it through ngrok everything seems to work but still not going to the user page.

everything from this tutorial works upto, and including part 3 of “Testing the MetaMask Wallet Connector”

Part 4: After successful authentication, you will be redirected to the /user page:
This doesn’t happen in either localhost or ngrok

#30

you can use php then, you don’t have to use nextjs, you call the auth api as a REST http call and you can get a message to sign that way, then sign it in the front end and then sent the message in backend and validate it with another call to auth api, then you create a session token and sent it to the front end

#31

Ive not done networking or blockchain in any language. Surley it would now be easier to finish this than start from scratch in PHP (though I would be more comfortable using PHP) but if you know of any PHP documentation on this I will take a look.

Many thanks for your help

#32

you can test it directly in documentation to see how to request the message and you will see an example in curl or in php

#33

For anyone else who has came across this error:

The issue is that when u deploy to production your sever’s hostname is different than your frontend’s hostname

This appears to be an issue within the authService.ts file for self hosted parse server.

const result = await Moralis.Auth.requestMessage({
    address,
    chain,
    networkType,
    domain: "frontendURL.hostname", //eg. 'example.com' 
    uri: url.toString(),
    statement: STATEMENT,
    notBefore: now.toISOString(),
    expirationTime: expirationTime.toISOString(),
    timeout: TIMEOUT,
  });

hardcoding the value for domain will get rid of that error,

You could also do a more permanent fix by adding this to your .env
FRONTEND_URL="yourUrl"

Then, adding this to your `config.ts

  FRONTEND_URL: str({
    desc: 'Referenece to your frontend URL. Replace this when your frontend is deployed',
    devDefault: `http://localhost:3000',
  }),

and adjust ur authService.ts accordingly

import Moralis from 'moralis';
import config from '../config';

export interface RequestMessage {
  address: string;
  chain: string;
  networkType: string;
}

const STATEMENT = 'Please sign this message to confirm your identity.';
const EXPIRATION_TIME = 900000;
const TIMEOUT = 15;

export async function requestMessage({
  address,
  chain,
  networkType,
}: {
  address: string;
  chain: string;
  networkType: 'evm';
}) {
  const serverURL = new URL(config.SERVER_URL);
  const frontendURL = new URL(config.FRONTEND_URL);
  const now = new Date();
  const expirationTime = new Date(now.getTime() + EXPIRATION_TIME);

  const result = await Moralis.Auth.requestMessage({
    address,
    chain,
    networkType,
    domain: frontendURL.hostname,
    uri: serverURL.toString(),
    statement: STATEMENT,
    notBefore: now.toISOString(),
    expirationTime: expirationTime.toISOString(),
    timeout: TIMEOUT,
  });

  const { message } = result.toJSON();

  return message;
}
``