Build a Custom App Card from Scratch (Part 2) | OAuth Config & App Card Install

In our last video, we got our HubSpot project set up, initialized our Public App with UI Extensions, and got our initial files uploaded. Now, it's time to bring that custom app to life in your CRM!

This video is your essential guide to getting your HubSpot Public App installed and ready for development. We'll demystify OAuth 2.0, understanding its core principles and how it secures app connections for HubSpot Public Apps. You'll learn:

0:00 Intro & OAuth Overview
1:01 Authorization Workflow Explained
2:11 Cloning the Quickstart Repo
3:48 Configuring Scopes & Env File
5:53 Installing Public App Card
8:17 Local Dev with Project Dev
9:50 Wrap-up & Next Steps

✨ Before you dive into the code, make sure you have:

➡️ An active HubSpot account.
➡️ A HubSpot Developer account with a developer test account. (Learn how to set up your developer accounts here: app.hubspot.com/signup-hubspot/developers)
➡️ Node.js and Yarn are installed on your machine.

✨Missed the last video where we got our HubSpot project set up, initialized our Public App with UI Extensions, and got our initial files uploaded? Check it out here:    • Build a Custom App Card from Scratch (Part...  

✨Coming Up Next
Stay tuned for Part 3! In our next video, we're diving deep into building the robust backend for our Public App! We'll set up our Next.js application, create custom API endpoints to handle our availability logic, and configure a local proxy for seamless local development with hubspot.fetch(). Finally, we'll deploy our Next.js backend to Vercel, completing the full Public App architecture. Get ready to bring your UI Extension to life with real-time data!

✨Resources
✳️ HubSpot OAuth Quick Start NodeJS Starter: github.com/HubSpot/oauth-quickstart-nodejs
✳️ Enhancing User Insights in Public Apps Using OAuth Tokens by Hannah Seligson: developers.hubspot.com/blog/enhancing-user-insight…
✳️ Build public app cards with HubSpot’s UI Extensions:
developers.hubspot.com/docs/guides/crm/public-apps…
✳️ Create a HubSpot Developer account: developers.hubspot.com/get-started
✳️ GitHub repo for this project: github.com/hubspotdev/uie-contact-call-availabilit…
✳️ HubSpot CLI Documentation: developers.hubspot.com/docs/guides/crm/developer-p…

📢 Important Information
This is not a support forum. For all support-related questions, please visit the HubSpot Community. 👉 bit.ly/49Lto5N
Discover everything HubSpot has to offer: bit.ly/3P5A59b
Follow us for the latest updates and insights: bit.ly/4iJLXve

📖 Learn More & Stay Connected
Get started with HubSpot Development 👉 bit.ly/3DhfEmU
Learn more with the HubSpot Academy 👉bit.ly/3P06AFR
Subscribe to our newsletter for tips and news 👉 bit.ly/41Fm6hC
Stay up to date with changes that affect you by subscribing to the changelog 👉 bit.ly/49J95FP
Know when an Developer Event is happening 👉 bit.ly/3VOLT3h

🤝 Engage With Us
Have feedback? There's a link for that! 👉 bit.ly/400bUzi
Like this video? Give it a thumbs up and subscribe for more content on HubSpot development, integrations, and customization.
Have a topic you'd like us to cover? Drop your suggestions in the comments below!

#HubSpotDevelopers #OAuth2 #Nodejs #UIExtensions #HubSpotCLI
HubSpot development, HubSpot CMS, HubSpot API, HubSpot integration, HubSpot CRM, HubSpot tutorials, HubSpot themes, HubSpot modules, HubSpot workflows, app development, web development, CRM customization, marketing automation, HubSpo