HubSpot Seamless Install With Partner Sign In

Harish from HubSpot shows how to set up apps that need both partner sign-in and HubSpot OAuth. The install flow sends redirect URLs and query parameters to your app, which must send users back to HubSpot after login and token exchange or the install fails. An upcoming change will let you pass conditional scopes as query parameters.
Chapters
Hello all, my name is Harish. I'm a product manager in the Marketplace team, and today I'm going to demo how the seamless install with partner sign-on works. So this seamless, this flow install flow is suitable for all apps which need a login page in addition to the HubSpot OAuth. And typically, as of now in the Marketplace, at least more than 50% of the apps fall into this category. So to do this, I'm going to go to my app listing. I already have an app created for this flow, so I'm going to go to app listing. Click on the app name, click on edit listing. Once I go into this listing, since I've already opted in seamless install, I just have to select one of the redirect URLs from the dropdown. If you don't have a redirect URL, you will have to go and add one. So you can see what redirect URLs you have in your developer projects and Instant Potato. And sorry, the Instant Potato is the app name in my case though. So you can see the redirect URLs in here and in the, under the section. And if you want to add more, you can click on this DevTalk. This walks through about the OAuth and redirect URLs and all the other things that you need to know. You can also, for developer, for projects, you need to add like the redirect URLs through the command prompt in here. So once you add the redirect URLs, they'll be populated in this dropdown. You just have to select one of them. I've already made a selection. I also set the, in the sign-in configuration, I said include partner sign-in. This is needed for us because this is how we know which installed flow to surface, whether it's with partner sign-on, without partner sign-on for installation, app installation per se. So once you have that, these two are the only changes that you have to do in the listing. I'm going to walk through an actual customer demo and I'll talk through what happens behind the scenes in that case. So for that, I'm going to go click on this app. For the demo purposes, I'm going to uninstall and install this app again because still Done. Okay. And so I'm going back to the marketplace and back. Yeah. So now when I click on install, similar to the seamless install without partner sign-on, the same modal opens up, but you have an additional step here. And the connect— what I did, the connect app name is the partner sign-in login step. Connect HubSpot is the HubSpot OAuth step. And then the app Completion is the app installation completion step. So once you click on sign in, so what exactly happens right now is HubSpot uses the install button URL to direct the customer to the app. And when they send it to the app, they also send two other items as query parameters though. One is a step parameter, which is step 2, which is set to authorize to basically indicate that this is the first step in the installation process. And number 2 is the return URL. So the return URL is for the app to return the customer back to HubSpot after They do what they have to do. Again, at this point, the full control goes to the app. The app can, in my case, I'm just going to do like a, make them sign in or sign up and then log in and it will return the user back. But then in, in app's case, they can do their whole onboarding flow. They can make them sign up, get their details, sign up for free trial or sign up for payment plan. The options are left to the app. What we want the app to do is get all the information that they need from the customer and then send the customer back to HubSpot. In this case, I already created login, so I would try to log in and all this stuff happens here. The login happens and once I'm logged in, I'm returned back to HubSpot here. When I return, when the app returns the customer back to HubSpot, they also send a state token. This state token is usually used by HubSpot or is used by the app for customer verification in the next step, which I'll go in detail later. So the one mandatory thing that needs to happen is the app has to return the customer back to HubSpot after the login or whatever information that they want to collect from customer is done. The main reason is at this point, the app may be— the customer may be and like have signed up with the app and has an account there and all, but on HubSpot side, the app is still not installed. So from our perspective, we'll still have this modal open and, or if you even close the modal, next time they come in, we'll still show as install and not just manage, which we show for installed apps. So the customer has to go through the install flow again. So the customer, it'll be confusing for customer, like why no matter how many times they try to install app, why am I still having to install it every time and go through the flow and nothing happens there? So it leads to a bad customer install experience. So the customer has to be returned back to HubSpot by the app after the initial login page. And then you have the HubSpot OAuth side of things. So you go through all the permissions and connect app and now an invisible iframe opens up. And HubSpot again redirects the customer using the install button URL to the app. And along with that, they send 3 things or 4 things though. They send the code used for token exchange. They use the— they send the step parameter which is set to finalize to indicate that's the last step of the install. They send the return URL to which the— which we can use by the app to return the customer back to HubSpot. And finally, they send the state token which is that which app had sent us in the first place in the first— as after the login. So we, the state token is for customer verification, the code is for token exchange, and then the return URL is used to return the customer back to Bot after the token exchange is completed. Again, this step is also needed because without returning it here, we will think of, we don't know, we'll be listening for the app to send us back to customer so that you can complete this step and go to the next one. So the bot step will never complete. It will lead to a broken install. Flow though. So it's mandatory that the customer is returned back after the login page and after the token exchange based on all the other parameters that you have though. This is definitely something that has to be taken care of by the app to return the customer back after both these steps though. Once you go here, it's pretty much same as what I just demoed for the partner sign-on. You have explore app features, you have customized app cards, and you have the closing the button. If you close the button, you'll stay within the listing. The customized app cards is only displayed for apps who have App Cards. If you don't have an App Card, then it won't be displayed. Or you can click on App Features though. When you click on App Features, it'll take you to the Feature Discovery Card one. Again, this is a different type of a flavor of the Feature Discovery Card. This will lead you to any, anywhere that you want to go in HubSpot. There are more than about 20 options that they can do, like deals, tickets, marketplace, workflows. You can, it's up to the purview of the app on where they want to direct the customer to if they wanted to. There are other flavors of App Cards which I showed in the demo on Seamless Install Flow without partner sign-on. If you haven't checked it out, you can check it out though. But ideally the feature discovery cards can be created from the listing editor in the app features though. So I'm going to collapse all, just going to create a new item. Once you have it here, if you have the toggle turned on, then it'll show up the feature discovery card below and you can add external, like a guide, setup guide, how you customize the button, how you customize everything. It's pretty much left to the, left to the app though, so they can figure it out however they want it. So I would highly recommend apps to create feature discovery cards and make sure that they leverage it as they are a very good onboarding vehicle or activation vehicle. If you had clicked on app cards, you would come here to configure those app cards. And if you have the overview page, you would basically be on this page, which gives you information about like the app and also the permissions and other stuff along with it. So that concludes the demo on the seamless install with partner sign-on. Again, the core piece here is that the customer is returned back to the HubSpot by the app after the login page or after the login step and after the token exchange. And also feature discovery cards are super useful in as an activation vehicle. So definitely take leverage of that. One last thing that I want to mention, this one was like, as of now, as of today, which is March 19th, the conditionally required scopes and optional scopes cannot be passed in seamless install. We are working on a change. And that change should be released sometime next week by March 25th. So we make an update and it's like an update to all the apps as well, all the app developers. But essentially that will allow them to pass the conditionally required and the optional scopes as query parameters as well. So that's definitely coming. That should be available next week, early next week in this bundle. That's all I had for the PATA sign-on, seamless PATA sign-on. Thank you.










