Upload an Encrypted File to S3 Using Next.js

Amazon S3 (Simple Storage Service) is a cloud-based storage service offered by Amazon Web Services (AWS) that provides highly scalable, secure, and durable object storage. If you’ve made it to this guide, there’s a good chance you’re using it now or have before.

Amazon S3 provides encryption at rest using Advanced Encryption Standard (AES) 256-bit encryption. However, experts suggest that this may not be enough security assurance.

In this guide you will create a simple Next.js app that encrypts an uploaded file using the Evervault React SDK and and saves the encrypted file to a S3 bucket via a presigned url.

Prerequisites

• An AWS account (sign up or log in here)
• An Evervault account (create a free account here)
• NodeJS v12.22.0 or higher

Create a new S3 bucket

First go to your AWS console into Amazon S3 > Buckets.

1. Click “Create bucket”
2. Give your bucket a name
3. Choose a region for your bucket
4. Uncheck “Block all public access”

Configure the S3 bucket

In your new bucket, go to the permissions tab. In the bucket policy section, click edit and paste in the below.

1
;[
2
  {
3
    AllowedHeaders: ['*'],
4
    AllowedMethods: ['PUT', 'POST', 'DELETE'],
5
    AllowedOrigins: ['*'],
6
    ExposeHeaders: [],
7
  },
8
]

This will allow you to make the PUT request to your bucket to upload the file.

Create an Evervault app

After you have created or logged in to your Evervault account, create a new app. In the app, go to your app settings dashboard. You will need your App ID and Team ID in a few steps — they should look like app_XXXX and team_xxx.

Set up the app

Environment Variables

Open your favorite text or code editor and go to .env.example. Rename it .env and add the following variables from your Amazon and Evervault accounts:

1
# EVERVAULT
2
EVERVAULT_API_KEY="ev_XXXXXXXX"
3
4
#AWS
5
S3_REGION='your-region'
6
ACCESS_KEY=XXXXX
7
SECRET_ACCESS_KEY=XXXXX
8
BUCKET_NAME="your-bucket-name"

Client

Open up _app.js to see where the SDK is instantiated.

1
<EvervaultProvider
2
  teamId={process.env.NEXT_APP_TEAM_ID}
3
  appId={process.env.NEXT_APP_APP_ID}
4
>
5
  <ChildComponent />
6
</EvervaultProvider>

Now in ChildComponent see the following code.

1
import { useState } from 'react'
2
import { useEvervault } from '@evervault/react'
3
4
export default function ChildComponent() {
5
  const evervault = useEvervault()
6
7
  const [selectedFile, setSelectedFile] = useState('')
8
  const [encrypted, setEncrypted] = useState('')
9
10
  async function uploadFile(e) {
11
    e.preventDefault()
12
    const fileName = encrypted.name
13
    const fileType = encrypted.type
14
    const res = await fetch(
15
      `/api/get-url?fileName=${fileName}&fileType=${fileType}`
16
    )
17
    const { url } = await res.json()
18
19
    const upload = await fetch(url, {
20
      method: 'PUT',
21
      body: encrypted,
22
      headers: { 'Content-Type': fileType },
23
    })
24
    if (upload.ok) {
25
      console.log('Uploaded :)')
26
    } else {
27
      console.error('Upload failed :(')
28
    }
29
  }
30
31
  async function encryptFile(input) {
32
    let encrypted = await evervault.encrypt(input)
33
    console.log(encrypted)
34
    setEncrypted(encrypted)
35
  }
36
37
  return (
38
    <div>
39
      <input
40
        type="file"
41
        id="myFile"
42
        name="myFile"
43
        value={selectedFile}
44
        onChange={(e) => encryptFile(e.target.files[0])}
45
      />
46
      <button onClick={(e) => uploadFile(e)}>save to s3</button>
47
    </div>
48
  )
49
}

In this code you are rendering a file upload input, which will encrypt a file as soon as it’s uploaded. The encrypted file is logged in case you want to check to see that it is indeed encrypted. You then make a request to the backend to generate a presigned URL using the AWS SDK. Once you have the presigned URL, you will make a PUT request to handle the object upload.

Server

In src/pages/api/get-url.js, you should see the below:

1
import { getSignedUrl } from '@aws-sdk/s3-request-presigner'
2
import { S3Client, PutObjectCommand } from '@aws-sdk/client-s3'
3
import * as dotenv from 'dotenv'
4
5
dotenv.config()
6
7
export default async function handler(req, res) {
8
  const clientParams = {
9
    credentials: {
10
      accessKeyId: process.env.ACCESS_KEY,
11
      secretAccessKey: process.env.SECRET_ACCESS_KEY,
12
    },
13
    region: process.env.S3_REGION,
14
  }
15
16
  const client = new S3Client(clientParams)
17
  const command = new PutObjectCommand({
18
    Bucket: process.env.BUCKET_NAME,
19
    Key: req.query.fileName,
20
    ContentType: req.query.fileType,
21
  })
22
23
  const preSignedUrl = await getSignedUrl(client, command, { expiresIn: 3600 })
24
25
  res.status(200).json({
26
    url: preSignedUrl,
27
  })
28
}

This is where the presigned URL is generated. You will need to pass in your credentials stored as environment variables, then use the PutObjectCommand() method from the AWS SDK to generate the correct type of URL. The URL is set to expire in one hour but you can adjust this amount as needed. Once the URL is generated, you return it to the client.

Try it out

Install the dependencies using your preferred package manager.

1
npm install
2
pnpm install
3
yarn install

Then run the code.

1
npm run dev
2
pnpm run dev
3
yarn run dev

Add a file to upload and then click the save to s3 button. If working properly you should see your encrypted files uploaded in the bucket.

Conclusion

In this guide, you uploaded an encrypted file to s3 using the Evervault React SDK with Next.js.

If you ran into any issues or have questions about this guide, feel free to raise them on GitHub or drop them in the Evervault Discord. Keep sensitive files safe!