Next.js Discord

Discord Forum

AWS keys

Unanswered
Gharial posted this in #help-forum
Open in Discord
GharialOP
Hey guys, i am new to AWS and have a general question.

I have put few files on S3.
I want to read them, parse and then do some filtering on data (based on user selections ) before using them on my frontend.

I am doing:
AWS.config.update({
  accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY,
  region: process.env.REACT_APP_AWS_REGION,
});

const s3 = new AWS.S3();

const mapData = async () => {

  const key ="folder/"+structure_name +".csv";
  const params = {
    Bucket: "BucketName",
    Key: key,
  };

  try {
    const data = await s3.getObject(params).promise();
    if (!data) {
      throw new Error("Error fetching data");
    }
    const fileContent = data.Body.toString("utf-8");

    return new Promise((resolve, reject) => {
      Papa.parse(fileContent, {
        //doing something
      });
    });
  } catch (error) {
    return {};
  }
};


I have put the AWS access key, secret access key, in .env.
But I think i should never put my keys in frontend code.

What can I do?

18 Replies

Blanc de Hotot
You want the files to be pulled where? Server side?
I believe.. but I'm not sure next won't add env cars to the client side that don't have Next_public prefix
@Blanc de Hotot You want the files to be pulled where? Server side?
GharialOP
i want them to use it on frontend
that data in file will be used to render a structure
GharialOP
I was thinking to just move my AWS S3 operations to backend?
and then talk to backend from front end.
basically using backend api to communicate with s3, then send the data to frontend
Blanc de Hotot
Do you want to expose those files to users
If you don't, you do it in the backend
GharialOP
yes, i dont want to expose the files (i will just use a portion of the file data on frontend).

So, i need to do this operation in backend?


AWS.config.update({
  accessKeyId: process.env.REACT_APP_AWS_ACCESS_KEY_ID,
  secretAccessKey: process.env.REACT_APP_AWS_SECRET_ACCESS_KEY,
  region: process.env.REACT_APP_AWS_REGION,
});

const s3 = new AWS.S3();

const mapData = async () => {

  const key ="folder/"+structure_name +".csv";
  const params = {
    Bucket: "BucketName",
    Key: key,
  };

  try {
    const data = await s3.getObject(params).promise();
    if (!data) {
      throw new Error("Error fetching data");
    }
    const fileContent = data.Body.toString("utf-8");

    return new Promise((resolve, reject) => {
      Papa.parse(fileContent, {
        //doing something
      });
    });
  } catch (error) {
    return {};
  }
};
Blanc de Hotot
@Gharial does that get the file?
If it does, then that's it
You need to go grab the file and parse that way
But really if you're exposing everything anyway, why do you want to get it from the backend
Do you not want people to be able to download it directly?
Also a reminder, don't commit your keys to github
GharialOP
The file contains AI generated summaries for 1000+ residues. On my dashboard, a user will select a residue from the 3d structre of a protein, then i will get the summary from that file. SO, i dont want to give all the file data to users, i want to keep it safe.
Blanc de Hotot
Sounds like you'd be better off keeping it on your server
If they are static files
@Blanc de Hotot If they are static files
GharialOP
yes they are static .csv and .pdb files. Their data wont change.
I have moved my data fetching from S3 to backend, and then sending the data to frontend.