spa_react_javascript_auth0

What it is

A reference implementation demonstrating how to integrate Auth0 user authentication into a React Single-Page Application using React Router 6. The repository also contains standalone JavaScript modules for recording audio, managing an upload queue, and uploading files to AWS S3 via presigned URLs, though these are distinct from the core authentication logic.

Features

• User login and logout via Auth0 Universal Login
• Protected routes using React Router 6 and Auth0 context
• User profile display and session management
• Client-side audio recording using MediaRecorder API
• Queue-based upload system for audio blobs
• Direct-to-S3 upload using presigned URLs

Quickstart

npm install
npm start

Architecture

flowchart TD
    User[User Browser] -->|Interacts| App[React SPA]
    App -->|Auth Requests| Auth0[Auth0 Identity Platform]
    App -->|API Calls| Backend[Optional API Server]
    App -->|Uploads| S3[AWS S3 Bucket]
    subgraph Client
        App
        AudioMod[Audio Modules]
    end
    AudioMod -->|Queue| Queue[In-Memory Queue]
    Queue -->|Fetch Presigned URL| Backend
    Queue -->|PUT Blob| S3

How it's built

The application is built with React and React Router 6 for client-side routing. It uses the Auth0 React SDK (@auth0/auth0-react) to handle login, logout, and user profile management. The auxiliary audio features use the Web MediaRecorder API, standard Fetch API for S3 interactions, and vanilla JavaScript for queue management.

How it runs

sequenceDiagram
    participant U as User
    participant R as React App
    participant A as Auth0
    participant M as MediaRecorder
    participant Q as Audio Queue
    participant S as S3

    U->>R: Click Login
    R->>A: Redirect to Login
    A-->>R: Return ID/Access Token
    R->>U: Show Protected Content

    U->>M: Start Recording
    M-->>Q: Add Audio Blob
    U->>M: Stop Recording
    Q->>S: Request Presigned URL
    S-->>Q: Return Signed URL
    Q->>S: PUT Audio Blob
    S-->>Q: Confirm Upload

How to apply & reuse

Use this project as a starting point for adding secure user authentication to React applications. Developers can copy the Auth0 configuration patterns and protected route wrappers. The audio modules can be reused in projects requiring client-side voice recording and direct-to-S3 uploads.

At a glance