0

I have achieved it by using the AWS credentials embedded in the code. But this is not good practice ..could someone suggest another way to do that maybe by using IAM role or assume role.

Code for receiving the file from frontend

<Grid item xs={12} className={classes.field}>
        <Typography variant="h6">
            6. If File Not Present In S3 buket then First Upload The File In S3
          </Typography>
            <DropzoneArea
              acceptedFiles={['.csv']}
              //acceptedFiles={['image/*']}
              dropzoneText={"Drag and drop an .csv file here"}
              dropzoneClass={classes.dropZone}
              useChipsForPreview={true}
              filesLimit={1}
              ////maxFileSize={200000}
              //fileObjects=fileObjects
              onChange={(files) =>  setFileList(files)} 
            />
            <Button
                size="large"
                type="submit"
                color="primary"
                variant="contained"
                endIcon={<FiUpload />}
                onClick={handleFileUploadSubmit}
              >
                Upload File In S3
              </Button>
          </Grid>

Passing the file object and further below is the code for uploading the file in AWS using credentials embeeded in code-

import S3 from 'react-aws-s3';
import {
    errorAlertWithoutTimer,
    successAlert,
  } from '../../sweetAlerts/SweetAlerts'
window.Buffer = window.Buffer || require("buffer").Buffer;

const config = {
    bucketName: '',
    region: '',
    accessKeyId: '',
    secretAccessKey: '',
    s3Url: '',
}





export const  uploadFileInAws= (file: any) => {
    const ReactS3Client = new S3(config);
    console.log(file,file.name)
    ReactS3Client
    .uploadFile(file, file.name)
    .then(successAlert('Success', 'File Upload SuccessFully Queued'))
    .catch(err => console.error(err))

  }
Naman Jain
  • 1
  • I need a way such that i can implement file upload feature in AWS via frontend without exposing my AWS credentials and using technique like IAM roles or Assume roles so that it via IAM role i could create some sort of temporary access to my S3 bucket and get my job done . This method exists but not given in detailed view on any site. – Naman Jain Aug 18 '22 at 07:29

1 Answers1

0

You probably want to access the variables through the process.env variables.

Since this is on the client-side and assuming you're just using a bootstrapped CRA app (and not a barebones babel + webpack (or other) config), you can access the variables through a .env file.

This link is a good example.

Hope this helps!

stephenisau
  • 56
  • 2
  • 1
    Even being stored in a dotfile, if the credentials are transmitted as part of a network request, they will still be observable to any user via their dev tools. There isn't really any good way to protect secrets in a front end application, you'd need to call a back end which will access secrets on behalf of the client app. – Chris B. Aug 18 '22 at 06:55
  • So is there not any way to do via frontend so that my AWS accessKeyId and secretAccessKey is not been exposed like using IAM role or using Assume role features which will fetch temporary credentials automatically and make our job done? – Naman Jain Aug 18 '22 at 07:22
  • I've never used those services, so I can't say for certain that AWS has no solutions that would work for your specific use case. But it sounds to me like generating temporary credentials on the front end just moves the issue up a level. You would need permanent credentials to make an authorized request which generates temporary credentials, so where would those be stored? The best solution would probably be to deploy a Lamda which performs these authorized operations, and call it from your app. – Chris B. Aug 18 '22 at 16:32
  • @ChrisB. is correct here. From a security perspective, it's best practice to make a request to the backend, thanks for the clarification! – stephenisau Aug 23 '22 at 06:18