[SOLVED] - Web3Authentication fails when adding an .env file

Hei out there :slight_smile:
I’m a frontender trying to get my sites up and running with the Web3Authentication and it works and puts entries in the db but it fails when I make an .env file…
I want to take out the ID’s and URL and put it in an .env file that I exclude from github . . . or is there another/better way?

Code:
.env
REACT_APP_MORALIS_APPLICATION_ID=‘xxxxxxxx’

_app.js
const appId = process.env.REACT_APP_MORALIS_APPLICATION_ID

return (

Error:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from C:\xxxxxxxxxxxxxxxxxxxxxxx\web3authenticate.env
[Error: UNKNOWN: unknown error, readlink ‘C:\xxxxxxxxxxxxxxxxxxxx\web3authenticate.next\server\webpack-runtime.js’] {
errno: -4094,
code: ‘UNKNOWN’,
syscall: ‘readlink’,
path: ‘C:\xxxxxxxxxxxxxxxxxxxx\web3authenticate\.next\server\webpack-runtime.js’
}

Thanx in advance <3

Yeah alright, so I put it in the .next folder and now it seems to almost work but I get this error:

Error:

Unhandled Runtime Error

ReactMoralisError: Provide a “appId” provided to

Call Stack
new ReactMoralisError

node_modules\react-moralis\lib\index.esm.js (3156:0)

eval

node_modules\react-moralis\lib\index.esm.js (3918:0)

step

node_modules\react-moralis\lib\index.esm.js (91:0)

Object.eval [as next]

node_modules\react-moralis\lib\index.esm.js (72:45)

eval

node_modules\react-moralis\lib\index.esm.js (65:0)

new Promise
__awaiter

node_modules\react-moralis\lib\index.esm.js (61:0)

eval

node_modules\react-moralis\lib\index.esm.js (3910:0)

eval

node_modules\react-moralis\lib\index.esm.js (3944:0)

invokePassiveEffectCreate

node_modules\react-dom\cjs\react-dom.development.js (23487:0)

HTMLUnknownElement.callCallback

node_modules\react-dom\cjs\react-dom.development.js (3945:0)

Object.invokeGuardedCallbackDev

node_modules\react-dom\cjs\react-dom.development.js (3994:0)

invokeGuardedCallback

node_modules\react-dom\cjs\react-dom.development.js (4056:0)

flushPassiveEffectsImpl

node_modules\react-dom\cjs\react-dom.development.js (23574:0)

unstable_runWithPriority

node_modules\scheduler\cjs\scheduler.development.js (468:0)

runWithPriority$1

node_modules\react-dom\cjs\react-dom.development.js (11276:0)

flushPassiveEffects

node_modules\react-dom\cjs\react-dom.development.js (23447:0)

eval

node_modules\react-dom\cjs\react-dom.development.js (23324:0)

workLoop

node_modules\scheduler\cjs\scheduler.development.js (417:0)

flushWork

node_modules\scheduler\cjs\scheduler.development.js (390:0)

MessagePort.performWorkUntilDeadline

node_modules\scheduler\cjs\scheduler.development.js (157:0)

So I’m a moron :sweat_smile:
It shouldn’t be REACT_APP_MORALIS… Since it’s a Next project it needed to be named: .env.local with the process.env.NEXT_PUBLIC_MORALIS_…
https://nextjs.org/docs/basic-features/environment-variables

However now I get this error:
“You need to call Moralis.start with an applicationId before using Moralis.”

Did you initialize the server with Moralis.start with the new env variables?

Sorry I’m not sure what you mean . . .I stopped and ran npm run dev again.
This is my first Moralis project, so still trying to figure out how it works

I got the .env.local thing working but it keeps insisting appId is not provided

My _app.js file looks like this now and clg’s the data from .env . . .

import { MoralisProvider } from “react-moralis”;

import “…/styles/globals.css”;

export const envData = {

serverUrl: process.env.MORALIS_SERVER_URL,

appId: process.env.MORALIS_APPLICATION_ID,

}

console.log(envData)

// const serverUrl = envData.serverUrl

// const appId = envData.appId

function MyApp({ Component, pageProps }) {

return (

<MoralisProvider serverUrl={envData.serverUrl} appId={envData.appId}>

  <Component {...pageProps} />

</MoralisProvider>

);

}

export default MyApp;

These require to be updated as per the new env variable name. This should solve the error.

Where do I need to update them? :slight_smile:

You mean, like with useState?

I guess those variables will be in the index.js file, if you are using the boilerplate.

So not like this in _app?

<MoralisProvider MORALIS_SERVER_URL={envData.serverUrl} MORALIS_APPLICATION_ID={envData.appId}>
  <Component {...pageProps} />
</MoralisProvider>

I’m using the code provided in the video on web2auth . . . My index looks like this

import { useMoralis } from “react-moralis”;

import styles from “…/styles/Home.module.css”;

import SignIn from “…/components/SignIn”;

import { SignOut } from “…/components/SignOut”;

export default function Home() {

const { isAuthenticated } = useMoralis();

return (

<div>

  <div className={styles.backgroundParent}>

    {isAuthenticated ? <SignOut /> : <SignIn />}

  </div>

</div>

);

}

update this to

      <MoralisProvider appId={envData.appId} serverUrl={envData.serverUrl}>
      <Component {...pageProps} />
      </MoralisProvider>

and this to

export const envData = {
serverUrl: process.env.NEXT_PUBLIC_MORALIS_SERVER_URL,
appId: process.env.NEXT_PUBLIC_MORALIS_APPLICATION_ID,
}

image

Yeah, I tried that, but still it wants me to run Moralis Start - which I assumed it did when running the app like normal . . . .

image

But yeah the issue seems to come from index . . . Undefined

I don’t understand why it won’t pass it along like if I just const the ID and URL in _app

the console log above the error show serverUrl and appId as undefined.

I think the env variables not getting read.

hmmmm . . . if I remove NEXT_PUBLIC_ it gets clg’d =

image

Twice apparently . . . .

In my terminal, but not in browser . . .

Next docs say this . . . but . . . hmmmmm

Also try this to load env variables in browser.