How to Build a Custom Login Page for RStudio (Posit) Connect
It’s hard to argue with the fact that user experience can make or break digital products, Shiny apps included. A custom login page is one of those early UX touchpoints with the potential to infuse users with brand awareness from the get-go. But achieving that ultimate first impression when hosting your Shiny app with RStudio Connect is a challenge. Happy Cabbage Analytics wanted more for their users and so they reached out to Appsilon to explore custom options for their login page on RStudio Connect.
This article will show you how to do the same. Read on to take your login page to the next level.
Note: At the time of writing this article, Posit PBC was RStudio PBC. We use RStudio and Posit interchangeably in this text (e.g. RStudio Connect == Posit Connect).
Table of contents:
Custom login page for Connect calls for custom development processes
RStudio Connect is a mighty offering for companies looking for an all-in-one hosting solution. Happy Cabbage relies on RStudio Connect’s user management and password authentication to grant access to their Shiny apps. However, the customer experience that Happy Cabbage envisioned went beyond the default landing page, which had RStudio logos and additional features they didn’t need.
The project goal was a clean and simple login user interface with the client’s branding, to keep the user experience as smooth as possible. The Appsilon team loves a good Shiny challenge and the development process we proposed went far beyond the standard procedure.
Research and experiments
Being an RStudio full-service certified partner, we are well-versed in their publishing platform – RStudio Connect. It has a feature that allows you to customize the landing page to some extent, but we needed next-level options. The stock customization options don’t translate to significant changes in the interface design and the RStudio branding remains.
It was time to look for a viable alternative. We briefly considered using proxied authentication to customize user authentication and management. We weren’t convinced this was the most efficient way to achieve our goals. So we decided to stick to the current infrastructure and get creative.
One of the experiments we ran involved some reverse engineering and proved particularly promising. The idea was to build a Shiny app working as a landing page customers can use to log in and out of. With this option, we’d have complete control over the look and feel of the customer login page. Which was exactly what Happy Cabbage needed.
The authentication mechanism in RStudio (Posit) Connect
To understand this solution, let’s take a step back and look at how the default RStudio Connect landing page works first.
After the user enters their credentials and hits “log in”, the browser sends a login API request. If the credentials are valid, RStudio Connect replies with an HTTP-only session cookie, which will serve as a “proof of identity” for the browser.
Access to content
The session cookie is also sent when the user requests to open a Shiny app. RStudio Connect decides whether the user is authorized to run it, based on the user identity and access settings of the app.
How to customize login page in RStudio (Posit) Connect
The key takeaways from the research phase helped us understand both the constraints and the opportunities that come with the RStudio Connect API.
- To access apps on RStudio Connect, the browser needs to get the session cookie somehow.
And so we return to the reverse-engineered part. To log in, we needed to use an API endpoint that is not listed in the official documentation. We also relied on another undocumented fact: the session cookie is sufficient to access the API for subsequent requests.
We wanted to keep the login page simple, with just a few vital functionalities:
- log in
- log out
- get username
- list content
- change password
This way, the Shiny app loads the landing page, which was built using Create React App as a foundation. It’s a fairly simple React app, styled with Bootstrap and Sass. It uses axios to make API requests with the following simple configuration:
The second line ensures that the session cookie is attached to all requests, while the remaining lines handle the XSRF protection built into RStudio Connect.
In the end, you can deploy the app like any other Shiny app. You should enable access for all users (no login required) so all new customers can effectively use the app to log in.
Optionally, we can also add a neat Content URL.
Outcome: Custom Login Page for RStudio (Posit) Connect
What you can see below is a slick custom login page that takes Happy Cabbage customers to the aggregated view of the Shiny apps at their disposal. The apps and logos are fetched dynamically from the RStudio Connect instance.
Happy Cabbage Analytics can continue to scale its offering while enjoying the advantages brought by the customization:
- No superfluous features to steal user attention from the login procedure.
- The minimalist design makes the solution elegant and reduces user friction.
- Logos and fonts are fully consistent with the brand identity.
“With Appsilon clearly having the expertise and the skill set that we need, we can get a lot of stuff done quickly on the front end.” – Andrew Watson, CEO of Happy Cabbage Analytics
Custom solutions from R Shiny innovators
At Appsilon, we take pride in our R Shiny expertise and treat each challenge as an opportunity to grow our know-how. From pioneering the space of enterprise Shiny dashboards and speeding up Shiny apps to creating bespoke open source packages – our custom solutions keep pushing the limits of Shiny app development. Whenever your data science team needs a lightning-speed PoC or struggles with making your Shiny app production-ready, let us know. Our engineers are here to support you every step of the way.