Accessing HubSpot user data in Angular 17 application

[AdventurousHiker17]

I’m working on an Angular 17 project that has HubSpot integration. When users log into HubSpot, their email gets stored somewhere but I can’t figure out how to access it from my Angular code.

I tried using the ngx-cookie-service package but it doesn’t show any HubSpot related data. I also checked document.cookie directly but the HubSpot information isn’t there either.

What I’m trying to do is create a function that checks if someone is already logged into HubSpot, then redirects them accordingly:

redirectUser(targetUrl: string) {
    const userInfo = this.#dataService.getHubSpotUser();
    if (userInfo) {
        window.location.href = targetUrl + '/signin';
    } else {
        window.location.href = targetUrl + '/register';
    }
}

I also tried this approach with cookie service but it returns nothing:

import { CookieService } from 'ngx-cookie-service';

constructor(private cookies: CookieService) {}

checkUserEmail() {
    this.userEmail = this.cookies.get('hubspot_user_email');
}

Any suggestions on how to properly retrieve HubSpot user information in Angular?

[pixelPilot]

The Problem:

You’re trying to retrieve HubSpot user information within your Angular 17 application to control user redirection based on their login status. Directly accessing HubSpot’s authentication cookies from the client-side (using ngx-cookie-service or document.cookie) is failing because HubSpot intentionally restricts client-side access to this sensitive data for security reasons. Your current approach attempts to read cookies that are not accessible to JavaScript in the browser due to security measures.

Understanding the “Why” (The Root Cause):

HubSpot employs a security mechanism where authentication cookies are marked as httpOnly. This crucial setting prevents client-side JavaScript code, including your Angular application, from accessing these cookies directly. This is a deliberate security measure to protect user credentials from potential vulnerabilities. Attempting to circumvent this using client-side methods is highly discouraged and unsafe.

Step-by-Step Guide:

1. Implement Server-Side Authentication Verification: Create an API endpoint on your backend server (e.g., Node.js, Python, etc.) that handles the interaction with HubSpot’s API. This endpoint will be responsible for verifying the user’s HubSpot authentication status and retrieving the necessary user information. This typically involves using HubSpot’s API and potentially your own session management (e.g., JWTs) to handle the backend authentication steps securely and then provide information to the Angular frontend.

2. Angular Service to Fetch User Data: In your Angular application, create a service that communicates with your newly created backend API endpoint. This service will make an HTTP request to the endpoint, which will return the user’s authentication status and data.

3. Update redirectUser Function: Modify your redirectUser function to use the new service. Instead of trying to directly access cookies, your function should now call the service to get the user information.

import { UserService } from './user.service'; // Import your new service

constructor(private userService: UserService) {}

redirectUser(targetUrl: string) {
    this.userService.getHubSpotUser().subscribe({
        next: (userInfo) => {
            if (userInfo) {
                window.location.href = targetUrl + '/signin';
            } else {
                window.location.href = targetUrl + '/register';
            }
        },
        error: (err) => {
            console.error('Error fetching user info:', err);
            // Handle errors appropriately, e.g., display an error message to the user.
        }
    });
}

4. Backend API Endpoint Implementation (Example - Node.js with Express): This is a simplified example; you’ll need to adapt it based on your specific backend technology and HubSpot API integration. This assumes that you’ve already established authentication with the HubSpot API.

const express = require('express');
const router = express.Router();
const hubspot = require('@hubspot/api-client'); // Or your HubSpot API client library

router.get('/api/user/status', async (req, res) => {
    try {
        const client = new hubspot.Client({ accessToken: 'YOUR_HUBSPOT_ACCESS_TOKEN' }); // Replace with your token
        const user = await client.contacts.getById(req.session.hubspotUserId); // Replace with how you store user ID on session
        res.json(user ? user : null); //Send user data or null if no user
    } catch (error) {
        console.error('Error:', error);
        res.status(500).json({ error: 'Failed to get user information' });
    }
});
module.exports = router;

Common Pitfalls & What to Check Next:

• HubSpot API Key & Access Tokens: Ensure you have the correct HubSpot API key and access tokens set up on your server to authorize requests.
• Backend Session Management: Properly manage user sessions on your server-side to maintain the association between a logged-in user and their HubSpot profile. Consider JWTs (JSON Web Tokens) for secure session handling.
• Error Handling: Implement robust error handling in both your Angular service and your backend API to gracefully handle potential issues (network errors, API rate limits, authentication failures, etc.).
• CORS Configuration: If your frontend and backend run on different domains, ensure you have correctly configured Cross-Origin Resource Sharing (CORS) on your backend to allow requests from your Angular application.

Still running into issues? Share your (sanitized) config files, the exact command you ran, and any other relevant details. The community is here to help!

[Ryan_Innovative]

HubSpot uses httpOnly cookies for auth data, so JavaScript can’t touch them directly - that’s by design for security. You’ll need server-side session management where your backend checks the HubSpot session and exposes user status through your own API. I’ve dealt with similar integrations before. I created a middleware layer that handles the HubSpot OAuth flow server-side. When users authenticate, the server stores their info in your own session store or JWT tokens that Angular can actually read. For your case, try adding an endpoint like ‘/api/user/status’ that your Angular service can call. This endpoint checks HubSpot auth server-side and returns whatever your redirectUser function needs. Way more secure than trying to grab sensitive auth data on the client side.

[CreatingStone]

yea, hubspot is a bit tricky with user data, u might want to look into their API for gettin contact info instead of just relyin on cookies, its def more reliable and easier to work with!