Auth0 (Universal Login) and HubSpot Tracking Code (with Collected Forms)

Develop, Build & Integrate APIs & Integrations
1

Hey!

We are using Auth0 new universal login and HubSpot Tracking Code with form collection. Form collection does not work. HubSpot submit event tracking is binded successfully to Auth0 form, but the HTTP Post to https://forms.hscollectedforms.net/collected-forms/submit/form gets cancelled immediately when the Auth0 finishes the authentication.

Any suggestions? Thank you!

2

Hey, @fs_mb :waving_hand: Welcome to our community! I don’t have a solution for you. And I’d love to brainstorm with you a bit. Have you looked into utilizing event.preventDefault()?— MDN Event: preventDefault() method.

  • Try using event.preventDefault() to prevent the Auth0 form from submitting immediately
  • Submit the HubSpot form using our API or manually trigger it using the form’s submit event
  • Wait (listen) for the HubSpot form submission to complete
  • Resume the Auth0 authentication

This is a rough outline that makes multiple assumptions. If you’ve already ruled this out or found a different path for success, please let our community know.

Have fun building! — Jaycee

3

Hi Jaycee,

I am a colleague of @fs_mb.

So we have a react SPA with a (non-hubspot) form (react-hook-form) that hooks onto onSubmit for validation. Once validation passes we call the Auth0-js login which triggers a browser redirect.

This redirect is what (sometimes) cancels the in-flight HubSpot form submission.

Your idea has merit but I don’t know how to wait for the HubSpot (non-hubspot) form submission to finish. The docs mention listening on the window.onmessage but that seems to me to be only for Hubspot forms in an iframe (i.e. not non-hubspot forms).

Could you clarify this for me please?

Thank you!