Building a Simple Web3-Native File Sharing Portal

payton@newsletter.paragraph.com (payton) — Sun, 13 Nov 2022 03:43:42 GMT

Motivation

Web3 revolves around key pair ownership (Ethereum account). As a user, you bring your own key pair to use decentralized applications and therefore have total control over your identity. Web2 applications, on the other hand, store user keys and passwords with the application itself.

We've seen many examples of platforms supporting "bring your own keys". A common example is through static media that you can "unlock" by being a member of a DAO or owning a particular NFT. In these cases, the key pair owner needs to sign a message that proves they do indeed own the private key associated with their public key. You can do the same thing with your own static media!

ENS DAO has funded Spruce ³ to deploy and maintain a hosted OIDC provider ⁴ that supports Sign-In with Ethereum ⁵. We will take advantage of this publicly funded service to share our own static media with Ethereum frens.

This tutorial is meant for educational uses only. Code and infrastructure have not been audited for production use.

Problem Statement

"I have a file that I only want to share with my fren who owns wallet 0x..."

Prerequisites

AWS Account
Git
(Optional) General knowledge of:
- AWS (event-driven architecture, S3, CloudFront, Lambda)
- OpenID Connect ¹
- widen/cloudfront-auth ²

Authentication is the process of verifying the identity of a user or process.

Authorization is the process of assigning permission or authority to an authenticated user.

Architecture

We are making heavy use of AWS services. However, keep in mind that most cloud providers offer nearly identical services that can also be utilized. All infrastructure will be contained within a single CloudFormation stack. The user flow is as follows:

Request file from CloudFront Distribution endpoint
CloudFront sends request to Lambda@Edge function
Lambda@Edge function authenticates the user with our OIDC Provider
Once authenticated, the Lambda@Edge function determines if the user is authorized to access the requested file
If they are, we return the file. If they are not, we return an HTTP 401 status code (unauthorized)

Tutorial

Pull the example project from GitHub
All tutorial files are in my examples repository on GitHub. Pull the latest version of that repository and cd into the paragraph.xyz/web3-file-sharing-example directory.
```
$ git clone git@github.com:payton/examples.git && cd examples
$ git submodule update --init paragraph.xyz/web3-file-sharing-example/cloudfront-auth
$ cd paragraph.xyz/web3-file-sharing-example
```
Spin Up Infrastructure
We are going to create the following AWS resources:
1. CloudFront Distribution for distributing our static media
2. S3 Bucket for storing our static media
3. Lambda Function for authenticating and authorizing requests to access our static media
To quickly spin up your infrastructure, go to CloudFormation in the AWS Console, upload paragraph.xyz/web3-file-sharing-example/stack-step-1.yaml, and follow the prompts (everything can be left default).
Once your stack creation has been completed, take note of the RedirectURI value in your stack's Outputs tab. We will use this next.
Register and Configure Client with OIDC Provider
We are using OpenID Connect to authenticate incoming users. Spruce has built siwe-oidc ⁴, and they are running a provider for public usage that is funded by ENS DAO.
Run the below command to register a new client and take note of the return values:
```
$ curl -X POST https://oidc.signinwithethereum.org/register -H 'Content-Type: application/json' -d '{"redirect_uris": [""]}'
```
Response example:
```
{
    "client_id":"",
    "client_secret":"",
    "registration_access_token":"",
    "registration_client_uri":"https://oidc.signinwithethereum.org/client/",
    "redirect_uris":[""]
}
```
And GET the client configuration to verify your registration is complete with the expected redirect URI:
```
$ curl http://oidc.signinwithethereum.org/client/
```
If you need to update your redirect URI at any time, you can POST updates to the registration client URI:
```
$ curl -X POST http://oidc.signinwithethereum.org/client/ -H 'Authorization: Bearer ' -H 'Content-Type: application/json' -d '{"redirect_uris": [""]}'
```
If you need to delete your client, you can DELETE the registration client URI:
```
$ curl -X DELETE http://oidc.signinwithethereum.org/client/ -H 'Authorization: Bearer '
```
Build, Upload, and Deploy Lambda Function Code
In the paragraph.xyz/web3-file-sharing-example directory, run:
```
$ cd cloudfront-auth && ./build.sh
```
This is going to build our Lambda code that interacts with our OIDC provider to authenticate and authorize incoming requests to view your static media. Follow the prompts for Sign-In with Ethereum. You will be asked for outputs from steps 1 and 2 along with a list of Ethereum addresses that should have access (add your own to the list).
After the build script finishes, you will have a zip file in the distribution folder. In your CloudFormation Stack resources, go to the Resources tab and select the S3 bucket.
Upload your distribution's zip file to the bucket root.
In your CloudFormation Stack, update the existing stack with paragraph.xyz/web3-file-sharing-example/stack-step-2.yaml.
There will be a new parameter for the name of the zip file you uploaded in your S3 bucket's root.
Upload Static Media to Share
Back in your S3 bucket, create a new folder called cdn and upload any content you want to share.
For the sake of the tutorial, upload mellon.txt to the cdn folder.
"Mellon" is the Elvish word for friend, which was the key to entering the Mines of Moria in the Fellowship of the Ring.
Access Your Static Media
Now, we will try to access your now-protected static media. Find your CloudFront distribution domain name in the Outputs of your CloudFormation stack. Go to that link with your static media appended to the name. For example, if we want to access a file named mellon.txt, we would go to https://abc123.cloudfront.net/mellon.txt.
Authorized flow:
Unauthorized flow:

What's next?

You've successfully deployed your own CloudFront distribution that retrieves any static media for a pre-approved set of Ethereum addresses. Congratulations!

A clear next question is, "Well, how do I share file A with address 0x1... and file B with address 0x2... exclusively". That's where a more feature-full authorization layer comes in. We'll go in-depth on this in the next technical tutorial.

Until then, if you have any questions or comments, please reach out to me on any of the following platforms:

Farcaster @payton
Twitter @0xpayton
Other platform links at nf.td/payton

Thank you for reading!

Archiv3 by payton