Maintaining a responsive, secure, and efficient user interface is crucial for single-page applications (SPAs). Employing modern JavaScript frameworks like React or Angular, SPAs offer a dynamic user experience by loading once and updating content as needed without full page reloads. This architecture's dependency on static assets being loaded into the browser, which are typically cached for optimal performance, and then dynamic content fetched via an API. This presents unique challenges when the assets are dynamically updated due to some external change, such as an update to authorization policies in a Cerbos Embedded PDP. Traditionally, any changes in these policies would require a complete application reload, disrupting the seamless user interaction.

Cerbos has added support for AutoUpdatingLoader to the [@cerbos/embedded](https://github.com/cerbos/cerbos-sdk-javascript/blob/main/docs/embedded.md) SDK, which facilitates real-time policy updates on the client without requiring a full reload, disrupting the ongoing user experience.

How It Works:

The AutoUpdatingLoader feature enhances application security by automating the update process for embedded policy decision points (PDPs). Here’s how it integrates seamlessly into your application workflow:

import { AutoUpdatingLoader, Embedded } from "@cerbos/embedded";

// Initialize the Cerbos Embedded instance with AutoUpdatingLoader
const cerbos = new Embedded(new AutoUpdatingLoader("<bundle URL>"))

Automatic Policy Fetching: The SDK continuously polls the Cerbos Hub for the latest updates in policy bundles. Developers can set the polling interval according to their needs, with the default being every minute.

>> interval?: number;

//"If we refer to the example mentioned above..."
const client = new Cerbos(
  new AutoUpdatingLoader("<bundle URL>", {
    interval: 60000 // Polling interval set to 60000 milliseconds (1 minute)
  }),
);

Immediate Updates Without Reload: Before the auto-updating feature in the Cerbos SDK, users had to manually update their policy definitions in the application, which could lead to outdated permissions and increased maintenance overhead. The SDK now allows developers to control the auto-updating behavior by setting options in the AutoUpdatingLoader, providing flexibility to manage how and when policies are updated. As a result, when a new policy bundle is available and successfully passes through CI checks, the SDK downloads this bundle and integrates it into the application automatically. This operation does not interrupt the application's operation or require a reload, maintaining a smoother user experience.

Configurable Update Behavior: Developers can configure the update mechanics. They can choose to have the application update policies immediately upon bundle download or at a more suitable time determined by the application’s logic. For example, when **activateOnLoad** is set to false, the policy bundle is downloaded but not immediately activated. This allows the application to control when to apply the new policies based on its state or user actions, ensuring that policy changes do not unexpectedly disrupt the user experience.

const loader = new AutoUpdatingLoader("<bundle URL>", {
    activateOnLoad: false // Updates policies immediately after downloading the bundle
  }),

You can check if there is a pending update and activate it manually, for example, during a navigation event where it is safe to change policies without affecting the user's current view.

const client = new Cerbos(loader);

// In view navigation handler, Assuming loader is already created with activateOnLoad set to false
if (loader.pending) {
  loader.activate();
}

Error Handling: In scenarios where the initial loading of a policy bundle fails or if updates fail post-initial load, the SDK provides convenient error-handling options. Developers can configure callbacks to handle these errors effectively, ensuring application functionality remains unaffected.

>> onError?: ((error: LoadError) => void) | undefined;

//If we refer to the example mentioned above...
const client = new Cerbos(
  new AutoUpdatingLoader("<bundle URL>", {
    onError: (error) => {
      console.error("Failed to load or update the policy bundle:", error);
    }
  }),
);

Stopping Updates: If required, updates can be paused by invoking the stop() method, which ceases the polling and updates the download process. This feature is useful during maintenance windows or when updates are no longer necessary.

>> stop(): void;

//If we refer to the example mentioned above...
const client = new Cerbos(loader);

// When needed to stop updates
loader.stop();

Benefits for Developers and Users:

• Seamless Integration: Developers benefit from the ease of integration with existing SPA frameworks, making it straightforward to add robust security features without significant redevelopment.
• Enhanced User Experience: Users experience no interruptions as authorization policies update in the background, enhancing trust and satisfaction.
• Improved Security Compliance: With the ability to rapidly deploy policy updates, organisations can ensure they remain compliant with regulatory standards without sacrificing user experience or application performance.

Conclusion:

The AutoUpdatingLoader feature helps SPAs address the critical need for dynamic policy management without compromising user experience. By automating policy updates, Cerbos simplifies the developer's workload and fortifies the application's security framework. As SPAs continue to dominate the web landscape, tools like Cerbos are pivotal in evolving these applications to be more secure, resilient, and user-friendly.

To get started with the AutoUpdatingLoader feature, visit the Cerbos GitHub repository. Join our Cerbos Community Slack if you have any questions.