Can you create password protected pages in Builder?

[korey]

Yes, but it depends on how “secure” you need your password protected page to be. By default, content management platforms like Builder take the content you enter and make it retrievable via API so that it can be displayed on your site or app. This means that if you publish a page in Builder, that content is now available publicly via API, so that everyone visiting your site gets to see the updated content.

If you need the content to be secure and only accessible by authorized users, you should take the approach outlined in this forum post using private keys: Create Private Pages that are accessible only after authorization.

Or, if you are creating a page that you just want to add some hidden content to, and it is okay if people are able to dissect API requests or code to figure out what’s in the hidden content, you can create a page in Builder and add an input with a hardcoded password field and have it only show the proper content when the correct password is entered. This content is not secure and can still be read by anyone, but it is hidden, which may be enough for your use case. Here is a Builder page that takes that approach (password is secret-password): Super secret page

You can see that the content is hidden from view until you enter the correct password. To build a similar page, take a look at the source fiddle: Builder.io: Drag and drop page builder and CMS

The main concept is that you add an input to the page, and attach a change handler to that input to set the current password to whatever the visitor has entered. Then, attach a click handler to a button that will set a state variable to show the protected content only if the password entered is correct.

[Marea]

This way can i protect a screen/page and make it accessible only after that Stripe communicates the subscription has been actually paid ?

[TimG]

@Marea absolutely, there are ways you could achieve this in Builder. Generally, as Korey mentioned above, the logic around whether users have paid, or users are logged in, are handled within your app itself. So the most sure-fire way to handle auth or some restricted content would be to set up that logic in your app and then get and display content from Builder depending on that logic.

That being said, there are a number of ways you could ensure to show correct content based on a user’s attributes . Depending on your exact use case, I think there are at least 2 ways you could achieve this.

If you want entire pages to be visible only once some criteria is met, you could use Targeting with a custom targeting attribute called something like paidSubscription or whatever you like. Then if you pass that value into your <BuilderComponent /> calls as a userAttribute, the page would only ever be visible to users that satisfy that criteria. So if this was a React app, something like this:

//get your user's subscription status with some method within your app
const hasUserPaid = checkHasUserPaidSubscription();

//getting content, as on a server
const page = (
    await builder
      .get(myPageModel, {
        userAttributes: {
          url: currentUrl
          paidSubscription: hasUserPaid
        },
      })
      .toPromise()) || null;
...
//inside your render
<BuilderComponent model={myPageModel} content={page} options={ userAttribute} />

Or for client-side rendered content, you can just include:

//or if you are only doing client-side rendering:
builder.setUserAttributes({
  paidSubscription: hasUserPaid
});
...
<BuilderComponent model={myPageModel} />

If you just want to have certain sections or content on a given page or section model to display based on that same user attribute, you could pass that value into Builder as a data prop to add it to state:

//get your user's subscription status with some method within your app
const hasUserPaid = checkHasUserPaidSubscription();

<BuilderComponent model={myPageModel} data={hasUserPaid} />

Then, you would be able to access that value in state

And use that data to set up data bindings to hide or show content dynamically based on that value

Hopefully this helps! Let me know if you have any further questions!

[Marea]

Yes it does , sorry for the late reply , while i’m not so skilled i will practice on this , thank you so much.