Tenant or application specific view customizations

Why view customizations?

Company branding is important for SaaS applications. Your customers often like to have their corporate identity throughout the applications they use on a daily basis and therefore also the the login process should take this into account. With the enterprise license you are able to customize all the login pages. ProAuth is offering full control over the layout and therefore the login experience can use the same styles as your application or incorporate your customer’s company colors, logos and style.

How to customize the views?

ProAuth offers an advanced editor to modify the views which means you can actually change the HTML markup or the CSS completely. If you don’t want to go to re-designing the whole page, you could also just add some custom CSS stylesheets with new colors or just replace the images.

The views can be customized on the following levels and order (most specific on top):

• Tenant
• Client Application
• Subscription

If there is no customization available, the standard views will be rendered. In our scenario, we will change the background image, the logos as well as changing some colors. To do so, we need to implement the following:

• Create a custom view to overwrite the default layout
• Upload a custom CSS file to change the styling
• Upload the custom images for the background and the logos

ProAuth is using strict same-site security headers. Therefore it is not possible to reference files from other websites. All the assets need to be uploaded to ProAuth and they will be served from the ProAuth host.

Create a custom layout

1. Open the admin app and navigate to “Admin Settings” and then open the “Views” page.
2. Add a new custom view
3. Open the drop down menu to select the target view to overwrite.
4. In our case we need to change the main layout. Therefore, we will select the shared layout page to be overwritten.

We would like to customize the login experience for a specific tenant. Therefore, we are going to

1. Choose the tenant scope for this customization
2. Select the corresponding tenant from the dropdown menu

The custom view has been created and can now be edited. Before we do that, we need to create the custom assets in order to get their locations. The assets can be created the same way by using the assets management view.

We will perform the same actions for the background image and the logos. Each custom assets will get a location based on the scope. In our case the tenant id will be used in the path of the custom assets.

Adopt the layout

Once the custom view and the custom assets have been created, we are able to change the content of those files. ProAuth provides a built in editor for HTML, CSHTML and CSS files.

In the editor, we will add our custom css file and change the images in the main layout.

In our custom css file and we need to adopt the custom assets url for the background image.

Verify the results

If we now authenticate for an application of that particular tenant, we should see a different layout with custom images and changed button text colors.

If you would like to change the label values respectively their translations, you can also do so in the admin settings and overwrite the label values for your subscription, the application or a specific tenant.

Automation ideas

Sometimes the marketing department wants to change the background images periodically or has season specific images. This is often managed in other applications. The view customization and custom assets management is available by API as well. So if the layout has been adopted by your web designer, the background images could be updated periodically by a job calling the management API and overwriting the custom background image. The changes are effective immediately after uploading the new files.

Conclusion

ProAuth offers an easy and efficient way to customize the login views for tenants, applications or subscriptions. The configuration is either done trough the admin UI or the management API. All those changes are performed during runtime and therefore no re-deployment is needed. The tenant-specific pipelines are dynamically updated and the users do not experience any downtime.

If you are interested in ProAuth or if you would like to see more features, please reach out to our team by using the contact form or write us an e-mail. We are looking forward to get to know you and analyze your authentication requirements.