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
   

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