Auth0 + Firebase + WebR Integration

Overview

This application demonstrates a secure integration between Auth0 authentication, Firebase services, and WebR, enabling browser-based R computation with persistent state. It uses a modular, component-based architecture with vanilla JavaScript and maintains strict CORS headers for security.

Live Demo

Current version is hosted at: https://testauthfirebase.netlify.app

Core Features

• Auth0 Authentication (Login/Logout)
• WebR Integration
  • Browser-based R REPL
  • State persistence between sessions
  • Plot generation and storage
• Firebase Integration
  • Firestore for state management
  • Storage for plot images
• Custom Web Components
• Secure CORS Configuration

Technical Architecture

Components

1. Authentication

   • Auth0 configuration and service layer
   • Login button component
   • User session management

2. WebR Integration

   • REPL interface
   • State management
   • Plot generation

3. Database Operations

   • Firebase Firestore for state
   • Firebase Storage for plots
   • Real-time updates handling

Security Features

• CORS Headers Configuration for cross-origin isolation
• Secure token management
• Graceful connection cleanup

Development Notes

CORS Configuration

The application requires specific CORS settings to enable:

• WebR's SharedArrayBuffer requirements
• Firebase Storage access
• Secure cross-origin isolation

Development-only storage rules are in place - must be updated for production.

State Management

• Command history persistence
• Session state restoration
• Plot storage and retrieval

Future Enhancements

1. Secure Storage Rules

   • Implement proper authentication for Firebase Storage
   • Add user-specific access controls

2. Enhanced R Features

   • File upload/download
   • Package management
   • Advanced plotting options

3. Collaborative Features

   • Shared workspaces
   • Real-time collaboration
   • Session sharing