Extranet with Sitecore JSS and NextJS
Creating an extranet in a headless setup isn't always that straight forward. It is not up to your content management system (in this case Sitecore) anymore to deliver pages and as such also not to check who is actually demanding which content. The Sitecore security settings as we used in the XP days are not sufficient here.
In this case we also had a few particular requirements and architectural choices:
- users are not stored through Sitecore, but in a custom database
- roles are maintained in Sitecore (as content items)
- pages can be visible for people from one or more roles, or even for people without a role (not yet registered guests)
- components can have security settings that define which role(s) can view the component
- API calls are also using the roles as security guidelines to determine who can get which data
Let's focus on the parts that get us in touch with Sitecore. So we need a solution that can set security on pages and components for roles defined and known in Sitecore.
Pages
We created a base template with 2 fields:
- a multiselect field to select one or multiple roles
- a checkbox field to set the page open for everyone - including guest without a role
As we do not want to close pages for everyone (would be silly - one could unpublish the page if you want that) we also count no selected roles as all roles.
This base template is added to all page templates. As this data is part of the page data, it is included when a page is requested by the NextJs app and can be used by that app to handle the security appropriately - send a 403 page if the page is not available for the current user.
I'm afraid I cannot share code in this article so you'll have to do with the ideas. But if you are familiar with NextJs development (which I am not btw) I would assume that this is not rocket science.
A small tip however: do not forget to check editing mode, as you do not want the security rules to be adapted when editing.
Components
For the components, we used a similar setup. We created another base template that can be included in a component - it will not be included in all components, just in those where we want the security functionality. This creates also a similar setup in the front app as that will receive the security data and display the components based on what it knows about the current user.
Again, don't forget to skip the security check when editing. Although it can look weird when you have multiple components targeted at different roles, you still want to be able to edit everything.
Options
I assume there would be other options to tackle our request. It feels a lot like personalization so we also thought in that direction, but in the end our solution seemed like a simple one that would do as expected. And it is - the implementation was fairly easy and fast and the editors find their way when editing the pages and components.
As I could only share the conceptual ideas here I hope you found it useful. And if you have any other thoughts or ideas on how to handle such requirements, I would be happy to discuss those. Always eager to learn ;)
