When you have private models in Builder.io, you can securely enable preview functionality using the builder.authToken property in the Gen1 SDK. This approach keeps your private API key secure on the server while allowing content editors to preview draft content in the Visual Editor.
The builder.authToken property authenticates your server-side requests to access private model content without exposing your private API key to client-side code. This is essential for maintaining security while providing a seamless editing experience.
Note: Setting builder.authToken is only needed if using the Gen 1 SDK. Gen 2 SDKs are stateless, and therefore do not require this additional step.
Before you begin, ensure you have:
- A private model configured in Builder.
- A private API key generated in your Organization Settings.
- A Next.js project with the React Gen 1 SDK (
@builder.io/react) installed. - Server-side rendering setup using
getStaticPropsor similar.
If you haven't already created a private model, follow the instructions in Creating a Private Model to set up your model with the Public Readable toggle switched off.
Configure your private API key on your server using builder.authToken. This property should only be set in server-side contexts like getStaticProps, API routes, or server components.
Add your private API key to your environment variables:
In your page component, set authToken during server-side data fetching:
Important: Never set builder.authToken in client-side code or expose your private API key in your front-end compiled code.
Use the useIsPreviewing() hook to detect when content is being previewed in the Visual Editor. This ensures your page renders correctly even when no published content exists:
For static generation, configure your paths to include fallback handling:
The BuilderComponent receives the pre-fetched content from your server-side function. Since the private API key was used server-side, the content is safely passed to the client without exposing sensitive credentials:
Here's a full implementation for a private model page:
Now that you have secure private model previewing set up, you can:
- Add custom components to your private models
- Set up targeting and scheduling for your private content
- Configure data bindings for dynamic private content
- Learn about Content API for advanced private content querying