CODEWITHSUNDEEP
reactjsenvironment-variableskeyfetchcorrupt
Ivan Vasilev
Ivan Vasilev

Reputation: 3

Fetching my auth key from an .env file and it is missing characters

On a mac machine, this has no problem running but on a windows machine, it started breaking and for no apparent reason.
On the windows one, it returns the key with missing characters.

In my env file, I have the following (the auth key is a sample one).

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

And I am fetching the data in the following way:

process.env.AUTH_KEY;

I would appreciate it if you have any ideas.

Upvotes: 0

Views: 2307

Answers (5)

yavuzdeveloper20
yavuzdeveloper20

Reputation: 1

You should use

AUTH_KEY=ec4\$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj\$u5hBm$FQDuBXJV/lYWo

instead of

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

You should type the \ character before each $ character.

Otherwise, it will mistake it for a variable.

Upvotes: 0

yavuzdeveloper20
yavuzdeveloper20

Reputation: 1

You should use

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

instead of

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

You should type the \ character before each $ character.

Otherwise, it will detect it as a variable.

Upvotes: 0

Jarrett GXZ
Jarrett GXZ

Reputation: 608

I also faced the same problem where my .env data are being cut off. I believe this may be caused by the word wrap/line break when you copy and paste it to the .env file. I managed to solve it copying the string to a notepad and manually breaking the word wrap. This works for me afterwards, however it can be rather tedious. I guess an easier way could be to set the variables in the .env file programmatically so as to prevent that bug. This link should help https://stackoverflow.com/a/59198410/14631246

However, I had to edit a little from that answer and implement a line break method to remove the line break.

fs.appendFileSync(
  "file_name",
  `ENV_NAME=${VALUE_TO_STORE.replace(/(\r\n|\n|\r)/gm, "")}`
);

Upvotes: 0

Beginner
Beginner

Reputation: 9105

Since you are using CRA(create-react-app), you need to add REACT_APP prefix for the env variables.

So in your case

Instead of 

AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

Need to update as

REACT_APP_AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

Then in code you can access process.env.REACT_APP_AUTH_KEY;

Detailed Description

First of all, it must be clear that there is no such thing as environment variables inside the browser environment. Whichever solution we use nowadays is nothing but a fake abstraction.

But, then you might ask, what about .env files and REACT_APP prefixed environment variables which come straight from documentation? Even inside the source code, these are used as process.env just like we use environment variables inside Node.js.

In reality, the object process does not exist inside the browser environment, it’s Node-specific. CRA by default doesn’t do server-side rendering. It can’t inject environment variables during content serving (like Next.js does). During transpiling, Webpack process replaces all occurrences of process.env with a string value that was given.

Upvotes: 0

onuriltan
onuriltan

Reputation: 3908

You should put REACT_APP_ at the beginning of the environment variables like

.env

REACT_APP_AUTH_KEY=ec4$t2VmVoCxW1thpi0tcCW1FdeWla1y2UI16Kxj$u5hBm$FQDuBXJV/lYWo

and use it in your components as

component.js

let key = process.env.REACT_APP_AUTH_KEY

Upvotes: 1

Related Questions