47 lines
1.4 KiB
Markdown
47 lines
1.4 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
|
|
```
|
|
|
|
## 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 |