Please fill out as many of the following questions as possible so we can help you promptly! If you don’t know how to answer or it does not apply, feel free to remove it or leave it blank.
What are you trying to accomplish e.g. I want to integrate builder on a landing page
I want to add content using builder.io. But in my project we have authentication. Page I want to add is required to be authenticated user. However, when I opened builder.io edit content. I can’t enter my credentials. How to solve this problem?
This is my route where I added builder.io component. Axevil Admin Panel
Currenty, I successuly connected builder.io with my project
Screenshots or video link Screenshots of your issue, or even better a link to a video of what is happening or what you are trying to accomplish. We love using loom for that sort of thing
Code stack you are integrating Builder with e.g. NextJS, react, Shopify
Reproducible code example If you are having integration errors, please link to codesandbox or copy and paste your problematic code here. The more detail the better!
To solve the issue of authenticated pages while using the Builder.io content editor, you can set up a public “preview” environment that mimics the authenticated version. This environment will allow the Builder Visual Editor to access and render your page but ensure that real authentication is enforced in the production environment.
Here’s a general approach to achieve this:
Create a Preview Route:
Create a route in your application that’s accessible without authentication but only during the preview in Builder.io.
Toggle Authentication based on Query Parameters:
Use a query parameter to differentiate between normal requests and Builder.io preview requests.
Render the Builder Component in the Preview Route:
Ensure that the Builder component can be fetched on the preview route.
Implementing the Preview Route in Next.js
Modify your route to check for the preview query parameter:
Here’s an example of how you might modify your existing page component to check for a special query parameter (preview) to disable authentication:
import { builder, BuilderComponent } from '@builder.io/react';
import { useRouter } from 'next/router';
// Replace with your Public API Key
builder.init(YOUR_API_KEY);
export default function Page({ content }) {
const router = useRouter();
const isPreviewing = router.query.preview === 'true';
// If not previewing and user is not authenticated, redirect to login
if (!isPreviewing && !userAuthenticated) {
return <Redirect to="/login" />;
}
return (
<>
<Head>
<title>{content?.data.title || 'Page title'}</title>
</Head>
<BuilderComponent model="page" content={content} />
</>
);
}
// Fetch the Builder content using the `preview` query parameter
export async function getServerSideProps(context) {
const isPreviewing = context.query.preview === 'true';
const userAuthenticated = checkUserAuthenticated(context); // Implement this function
let content = null;
if (isPreviewing || userAuthenticated) {
content = await builder.get('page', {
url: context.resolvedUrl,
}).promise();
}
return {
props: {
content,
},
};
}
Set up a preview URL in Builder.io:
When you edit your content in Builder.io, you can specify a preview URL to include the preview=true query parameter. For example:
http://yourdomain.com/your-page?preview=true
Steps
Create a Preview URL:
Update the preview URL in Builder.io to include the preview=true parameter and point to the new route.
For Pages:
Go to your Builder model.
Set the preview URL to: http://localhost:3000/your-page-route?preview=true
Update Your Authentication Logic:
Adjust your authentication logic to allow access to the pages when isPreviewing flag is true as shown in the code snippet above.
Test the Setup:
Open the Builder.io editor and navigate to the specified preview URL.
Ensure that the page renders correctly without requiring authentication.
Verify that the BuilderComponent loads the correct content.
With this approach, you can work on your authenticated pages within Builder.io without exposing the actual content or authentication logic on the live environment.
Note: Replace YOUR_API_KEY, checkUserAuthenticated, and customize the logic according to the specifics of your authentication system.
