# 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:
   ```bash
   npm install
   ```

2. Configure Auth0:
   - Create an account at [Auth0](https://auth0.com/)
   - 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:
   ```bash
   npm run dev
   ```

## Deployment

1. Build for production:
   ```bash
   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`):
     ```bash
     aws s3 mb s3://your-bucket-name
     ```
   - **Enable static website hosting** on the bucket.
   - **Upload the built files** from the `dist/` directory:
     ```bash
     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