FastAPI React Oauth integrations

A full-stack application designed to manage OAuth2 authentication and data ingestion across multiple SaaS providers.

Live Demo: HubSpot CRM Integration (Fully Functional) Architecture Support: Notion, Airtable

🚀 Tech Stack

• Frontend: React, Material UI, Axios
• Backend: Python, FastAPI, Redis (for state/token management)
• Integration: HubSpot, Airtable and Notion OAuth 2.0 API

🧩 Architecture & Extensibility

This project uses a modular design pattern to handle multiple third-party integrations. While HubSpot is the fully active demo, the architecture includes templates for:

• Notion (Workspace search)
• Airtable (Base integration)

The backend uses a standard IntegrationItem interface, allowing the frontend to display data agnostically, regardless of the source (CRM, Database, or Notes).

⚙️ Features

• OAuth 2.0 Handshake: Securely redirects users to HubSpot and exchanges auth codes for access tokens.
• State Validation: Prevents CSRF attacks by validating unique state strings during the callback.
• Token Management: Temporarily stores credentials in Redis for the session.
• Data Ingestion: Fetches and normalizes Contact data from HubSpot.

🛠️ Setup & Installation

Prerequisites

• Python 3.9+
• Node.js & npm
• Redis Server
• A HubSpot or Airtable or Notion Developer Account (to get Client ID/Secret)

1. Backend Setup

cd backend
python -m venv venv
source venv/bin/activate
pip install -r requirements.txt

1. Create a .env file
2. Add your any one of HubSpot or Airtable or Notion credentials:
3. HUBSPOT_CLIENT_ID=your_id_here
4. HUBSPOT_CLIENT_SECRET=your_secret_here

2. Frontend Setup

cd frontend
npm install
npm start

3. Running the App

1. Start Redis:

redis-server 

2. Start Backend:

uvicorn main:app --reload 

3. Start Frontend:

npm start 

4. Open http://localhost:3000 in your browser.

📸 Usage (Same for Airtable and Notion)

1. Select "HubSpot" from the dropdown menu.
2. Click "Connect to HubSpot".
3. Log in via the secure HubSpot popup window.
4. Once authenticated, click "Load Data" to see contacts fetched directly from your CRM.