70 lines
2.1 KiB
Markdown
70 lines
2.1 KiB
Markdown
# 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 |