# I can't authenticate in my project and add content

**URL:** <https://forum.builder.io/t/i-cant-authenticate-in-my-project-and-add-content/3606>\
**Category:** Visual Editor Help\
**Tags:** visual-editor, react\
**Created:** [May 15, 2023, 11:10am UTC](https://forum.builder.io/t/i-cant-authenticate-in-my-project-and-add-content/3606 "2023-05-15T11:10:11Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kurbanovjasur](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/kurbanovjasur/32/2520_2.png) [@kurbanovjasur](https://forum.builder.io/u/kurbanovjasur)\
**Post date:** [May 15, 2023, 11:10am UTC](https://forum.builder.io/t/i-cant-authenticate-in-my-project-and-add-content/3606/1 "2023-05-15T11:10:11Z")

</div>

_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._

**Builder content link**  
_e.g. [Builder.io: Drag & Drop Headless CMS](http://builder.io/content/4cab34394e684fe7b93d6ef5493a8a51)_

**Builder public api key**  
_go to [Builder.io: Drag & Drop Headless CMS](https://builder.io/account/organization) and copy your PUBLIC api key_

**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](http://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](http://builder.io) edit content. I can’t enter my credentials. How to solve this problem?  
This is my route where I added [builder.io](http://builder.io) component.  
[Axevil Admin Panel](https://admin-dev.axevil.com/content-block)

Currenty, I successuly connected [builder.io](http://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_

 ![image](https://us1.discourse-cdn.com/flex020/uploads/builder/original/2X/d/de4a75b9d8886b3afe114b9f141d542d17d8da30.png)

**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!_

---

<div class="post-metadata">

**Author:** ![saura](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/saura/32/3625_2.png) [@saura](https://forum.builder.io/u/saura)\
**Post date:** [May 22, 2024, 3:09pm UTC](https://forum.builder.io/t/i-cant-authenticate-in-my-project-and-add-content/3606/2 "2024-05-22T15:09:26Z")

</div>

Did you find a solution here?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [May 22, 2024, 4:20pm UTC](https://forum.builder.io/t/i-cant-authenticate-in-my-project-and-add-content/3606/3 "2024-05-22T16:20:52Z")

</div>

Hello @saura,

To solve the issue of authenticated pages while using the [Builder.io](http://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:

1. **Create a Preview Route:**  
Create a route in your application that’s accessible without authentication but only during the preview in [Builder.io](http://Builder.io).

2. **Toggle Authentication based on Query Parameters:**  
Use a query parameter to differentiate between normal requests and [Builder.io](http://Builder.io) preview requests.

3. **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

1. **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:

```tsx
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,
    },
  };
}

```

1. **Set up a preview URL in [Builder.io](http://Builder.io):**  
When you edit your content in [Builder.io](http://Builder.io), you can specify a preview URL to include the `preview=true` query parameter. For example:

```auto
http://yourdomain.com/your-page?preview=true

```

### Steps

1. **Create a Preview URL:**  
Update the preview URL in [Builder.io](http://Builder.io) to include the `preview=true` parameter and point to the new route.

2. **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.

3. **Test the Setup:**

With this approach, you can work on your authenticated pages within [Builder.io](http://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.

---

<div class="post-metadata">

**Author:** ![saura](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.builder.io/saura/32/3625_2.png) [@saura](https://forum.builder.io/u/saura)\
**Post date:** [June 3, 2024, 9:21am UTC](https://forum.builder.io/t/i-cant-authenticate-in-my-project-and-add-content/3606/4 "2024-06-03T09:21:35Z")

</div>

how can a parameter be secure?

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [June 3, 2024, 10:58am UTC](https://forum.builder.io/t/i-cant-authenticate-in-my-project-and-add-content/3606/5 "2024-06-03T10:58:34Z")

</div>

Hello Saura,

Could you clarify what you mean by “can a parameter be secure”?