Technical Solution Script for VectorShift Integration Assessment
Technical Solution Script for VectorShift Integration Assessment
Hello everyone! In this video, I'll walk you through the technical solution we developed for integrating
HubSpot into VectorShift using OAuth authentication and HubSpot's API. This solution ensures
seamless backend and frontend functionality, following a similar architecture we previously
established for AirTable and Notion integrations.
Let's break down the solution into key components: Backend Development, Frontend Development,
Creating a HubSpot Public App, and finally, Testing & Validation.
---
Backend Development
OAuth Integration
The OAuth integration for HubSpot was implemented in the [Link] file, located in the
/backend/integrations directory. Here are the key functions involved:
1. authorize_hubspot
- This function initiates the OAuth flow by redirecting the user to HubSpot's authorization endpoint.
It includes required client credentials like the client ID, requested scopes, and the redirect URI.
2. oauth2callback_hubspot
- Once the user authorizes the app, HubSpot sends a callback with an authorization code. This
Page 1
Technical Solution Script for VectorShift Integration Assessment
function handles that callback, exchanges the code for access and refresh tokens, and securely
stores them.
3. get_hubspot_credentials
- This function retrieves stored tokens and refreshes them if they are expired, ensuring valid
tokens are always available when interacting with HubSpot's API.
Retrieving HubSpot Items
The get_items_hubspot function handles API interactions with HubSpot. Here's how it works:
1. It first fetches valid credentials using the get_hubspot_credentials function.
2. Next, it sends authenticated requests to key HubSpot endpoints like Contacts, Deals, and
Companies.
3. Finally, the response data is parsed and mapped into IntegrationItem objects, encapsulating the
key fields required for integration.
Token Storage and Management
Tokens are securely stored in an encrypted database field. Token refreshes are managed through a
scheduler or a lazy refresh mechanism triggered during API requests.
---
Frontend Development
Page 2
Technical Solution Script for VectorShift Integration Assessment
Moving on to the frontend, a new module named [Link] was added in the
/frontend/src/integrations directory. Here's what it does:
HubSpot Integration UI
1. OAuth Flow Initiation
- A UI component triggers the backend's authorize_hubspot endpoint, redirecting users to
HubSpot for authorization.
2. Data Display
- Once the data is retrieved, it is displayed in a clean, intuitive format. This ensures users can view
and interact with HubSpot data alongside other integrated sources.
3. State Management
- We implemented state management using libraries such as Redux or React Context. This
approach ensures smooth handling of data fetching, caching, and UI updates.
---
How to Create a HubSpot Public App
To integrate with HubSpot, you need to create a public app in the HubSpot Developer Portal. Here's
a step-by-step guide:
Page 3
Technical Solution Script for VectorShift Integration Assessment
1. Access the HubSpot Developer Portal
- Go to the HubSpot Developer Portal and log in with your HubSpot account.
2. Create a New App
- Navigate to the "Apps" section and click on "Create App".
- Provide an app name, and optionally, add a logo and description.
3. Configure Scopes and Redirect URI
- Specify the required scopes, such as [Link] or [Link].
- Set the redirect URI to point to your backend's OAuth callback endpoint, e.g.,
[Link]
4. Get Client ID and Client Secret
- After saving the app, you'll receive a Client ID and Client Secret, which are essential for the
OAuth integration.
5. Test the App
- Use the "Test this app" option to walk through the OAuth flow with a test account.
- Verify token exchange, token refresh, and API access.
6. Publish the App (optional)
- If you want to make your app available to other HubSpot users, you can complete the publishing
process by meeting HubSpot's app review guidelines.
---
Page 4
Technical Solution Script for VectorShift Integration Assessment
Testing and Validation
Now, let's talk about how we tested and validated the integration.
OAuth Process Testing
1. Simulate Authorization
- We created a test HubSpot app with a redirect URI pointing to our development environment.
This allowed us to verify that tokens were correctly stored after user authorization.
2. Token Refresh Validation
- We simulated token expiry scenarios to ensure that the get_hubspot_credentials function
refreshed tokens seamlessly.
API Interaction Testing
1. API Request Validation
- We tested key endpoints like Contacts and Deals using valid credentials, ensuring the responses
were correctly parsed into IntegrationItem objects.
2. Error Handling
- We simulated various error scenarios, such as expired tokens and invalid scopes, to verify that
the solution handles errors gracefully.
Page 5
Technical Solution Script for VectorShift Integration Assessment
---
Conclusion
This HubSpot integration provides robust and scalable backend and frontend capabilities for
VectorShift. Looking ahead, here are a few potential improvements:
1. Enhanced Logging and Monitoring
- We can improve traceability for OAuth flows and API requests.
2. Support for Additional Endpoints
- Expanding the integration to cover more HubSpot data sources.
3. UI Enhancements
- Adding filters and sorting options to improve the user experience when interacting with HubSpot
data.
With that, we've covered the entire technical solution for integrating HubSpot into VectorShift. Thank
you for watching, and I hope this video helped you understand our approach. If you have any
questions, feel free to reach out!
Page 6