React File Upload with Auth0 Authentication

A simple React application that allows users to upload files to a third-party API with Auth0 authentication.

Setup Instructions

1. Install dependencies:

   npm install
   

2. Configure Auth0:

   • Create an account at Auth0
   • Create a new application (Single Page Application)
   • Update the following values in src/main.jsx:
     • domain: Your Auth0 domain
     • clientId: Your Auth0 client ID
     • audience: Your API identifier (if applicable)

3. Update the API endpoint:

   • In src/App.jsx, update the /api/upload endpoint to your actual third-party API endpoint

4. Run the development server:

   npm run dev
   

Deployment

1. Build for production:

   npm run build
   

   This command generates the static files in the dist/ directory.

2. Deploy to AWS S3 Static Website:

   • Install AWS CLI if not already installed.
   • Configure AWS CLI with your credentials: aws configure
   • Create an S3 bucket for static hosting (e.g., s3://your-bucket-name):

     aws s3 mb s3://your-bucket-name
     

   • Enable static website hosting on the bucket.
   • Upload the built files from the dist/ directory:

     aws s3 sync dist/ s3://your-bucket-name --delete
     

   • Set bucket policy for public read access (if needed).
   • Your app will be available at the S3 static website endpoint.

Features

• Auth0 authentication (login/logout)
• File selection
• Secure file upload to third-party API with Bearer token
• Upload status feedback

How It Works

1. Users log in with Auth0
2. After authentication, users can select a file to upload
3. When uploading, the app requests an access token from Auth0
4. The file is sent to the third-party API with the access token in the Authorization header
5. Upload status is displayed to the user

Customization

• Modify the audience and scope in src/App.jsx based on your API requirements
• Update the file upload endpoint in the handleUpload function
• Customize the UI components as needed