0

I've been trying to create a .env variable where initially it will be empty but after login process it will store the data to the .env variable for further work, but unfortunately, I am not able to do so.

Before I put my code example, I would like to have some suggestions!!

Yea, in the login process I'm using session storage to store the user token. So, will it be a good work to store the user data into a .env file and later access it for future use or should I just call getToken function every time I need the token to verify if the user is logged in.

login.js:

    const getToken = () => {
        const tokenString = sessionStorage.getItem('token');
        const userToken = JSON.parse(tokenString);
        return userToken?.token
    }

    const saveToken = (userData) => {
        sessionStorage.setItem('token', JSON.stringify(userData));
        setToken(userData)
    }

Tried different techniques to make it work, but I just couldn't get the data from the .env file. Watched many different YouTube videos and did exactly like them but it was all in vain. I checked multiple timed if there is any type or bug in my code or not! There was no error. I was getting the token after successful login and by default it was returning null. I was storing the token only when the user login successfully so that no garbage value gets inserted into the value.

Here's my logic:

const handleSubmit = async function (e) {
    e.preventDefault();
    const response = await loginUser(user);
    if (response.status === 200) {
        setToken(response.data);
        process.env.REACT_APP_USER_TOKEN=response.data;
        navigate("/");
    } else {
        console.error(response)
    }
}
Improve this question
7
  • 2
    just use cookies Commented Oct 26, 2022 at 13:15
  • 1
    Not sure env variables can be set on the fly like that. They work more like readonly consts IMO. Commented Oct 26, 2022 at 13:15
  • 1
    I suggest you can't do this. Even if you known how to write variables to the .env file, you need to restart you create-react application afterwards to apply new variables. So, you should use other storage, like session storage, cookies, local storage etc Commented Oct 26, 2022 at 13:20
  • 1
    @abolfazlshamsollahi doesn't that almost make it same as calling the getLogin function to get the token of the user? Commented Oct 26, 2022 at 13:24
  • 2
    Can you guys please suggest me some relevant ways to do this! Commented Oct 26, 2022 at 13:26

1 Answer 1

Reset to default
0

ENV files are used to store sensitive Api keys or secrets. which can only be read by the code when needed.

Storing user data in .env file is not the right way. If your user data should not be available easily in frontend, try encryption and store the encryption key in .env file or backend.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

If the login process is successful, I'm sending an access token which is encrypted, and it is randomly generated every time user logins. As I mentioned above, I want to use that token to enable persistent login and side by side to now put any load to the CPU and since calling Api multiple times to only check for token is useless, I think, thus leading to store the data in .env file.
the token authentication to check the user's credibility is happening in the backend right?
yes, it is happening in the backend, The only thing backend is returning is an object which is like this: {status:200, data: "token", message: "successfully logged In."}
write it as a middleware and call it everytime you send a request from frontend with that token. if that middleware returns 200 continue to process the api call or else return an error from middleware to frontend

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.