[SOLVED] Moralis with NextJS

Technical Issue Reporting
#1

A basic metamask authentication app in nextjs working in local env but not in production in digital ocean.

https://cyberhornetscolony.club/staging

server url: https://ty7yus3mwpf6.usemoralis.com:2053/server

import { useMoralis } from “react-moralis”;

const Navbar = () => {

const { authenticate, isAuthenticated, logout, user } = useMoralis();
…
…

                      {isAuthenticated ? (
                        <>
                            <button onClick={logout}>Logout</button>
                            <h4>{user.get("ethAddress")}</h4> 
                        </>
                      ) : (
                        <button
                          onClick={() => {
                            authenticate({ provider: "metamask" });
                          }}
                        >
                          Sign in with MetaMask
                        </button>
                      )}

…

#2

what is not working in production, what happens?

#3

Hai,

On top right of this page https://cyberhornetscolony.club/staging
there is a button labeled “sign in metamask”.

On clicking the button it will ask the metamask login and we can login to metamask.
But this functionality is not working in production.
Same code is working in local environment.

login code
login code1366×768 93.4 KB

#4

I also want to confirm whether moving with nextjs is ok?
We prefer nextjs to reactjs.

Recently I saw a comment in stackoverflow that nextjs is not compatible with moralis. And that guy suggested react for moralis. Is it true?

When the code was working in local env,
and when a sample nextjs app was working in cloud (digital ocean),
i got approval from client to proceed with nextjs.

But it seems nextjs not working with moralis in cloud.
That may be because of that I am new to moralis.

But I just want to give a confirmation to client whether it is ok to proceed with moralis in nextjs. Or should I choose react for moralis.

I wish to use nextjs if I can.

#5

If you give a github account/id I shall share the code/repository.

#6

Next js is a framework built on top of react. If something works on react it works on next. Using the authenticate function in moralis assumes user has MetaMask as a plug in. When testing does your browser have MetaMask?

1 Like
#7

Yes, I have installed metamask browser extension and the same code is working as intended in local environment.

Happy to know that their is no issue in continuing with nextjs.

Thankyou

1 Like
#8

Problem Solved.

The problem was due to calling incorrect path for JavaScript files.
When I created a staging environment, I hadn’t updated the path and environment variables accordingly.

To solve this, I first created an environment variable named NODE_ENV with value “staging” as shown in the figure.

digocean
digocean1036×698 48.1 KB

Then I edited the file next.config.js (in root folder) similar to the code below.


if (process.env.NODE_ENV === 'production') {
  asset_refix = 'https://my-domain.com/live'
} else if (process.env.NODE_ENV === 'staging') {
  asset_refix = 'https://my-domain.com/staging'
} else {
  asset_refix = '';
}

module.exports = {
  // Use the CDN in production and localhost for development.
  assetPrefix: asset_refix,
  env: {
    NEXT_PUBLIC_MORALIS_APP_ID: process.env.NEXT_PUBLIC_MORALIS_APP_ID,
    NEXT_PUBLIC_MORALIS_SERVER_URL: process.env.NEXT_PUBLIC_MORALIS_SERVER_URL
  },
}

Thank You

2 Likes