After reading this article you’ll know:

  • How you can apply your Authentication Profile(s) on your front end;

  • How you can log your web user in using Authentication Profile(s);

  • How you can apply an Authentication Profile to a page or page group;

  • How the inheritance between page groups works.

For this HowTo we'll create a new model named WebUser, but you can use every model you'd like for your authentication profile, as long as it has at least one unique, identifying property.

Let's say you want your customers to be able to order some nice products from your webshop. You'd probably identify them by an email address and a password. In that case you'll need:

  1. A model which stores at least an email address and a password

  2. An authentication profile which uses that model

  3. Web pages to use your authentication profile on.

Let's get started!

Create a model for your web user.

Head over to the Data Model of your application by clicking the Data Model icon in your builder bar, and create a new model. You can call it whatever you want, but simply calling it WebUser is the best practice for most applications. Create properties for an email address and a password. Be sure to give the properties their proper type. You don’t want to be storing passwords in plain text!

That's it for the Data Model, the first of three steps!

Create an authentication profile, matching your web user model.

Next up is creating the authentication profile for your web user. 

  • Click on authentication profiles in the settings menu of your builder bar.

  • Create a “Username / password” kind of authentication profile, based on the web user model we've just created. It should end up looking something like this:

If you've got no idea what you're doing here, take a look at What are Authentication Profiles. That will explain everything about the settings of an Authentication Profile.

As you can see, we've connected the page at /login to the authentication profile. If you don't have a login page yet, no worries. Choose a different endpoint, create a login page, and edit the authentication profile accordingly afterwards.

To learn how you can create a nice login page, take a look at HowTo create a login page using the UI Builder's grid system.

If you're all set on this, the only thing left to do is to connect the authentication profile to the page on which you want to use authentication.

Connect the authentication profile to the page.

  • Go to the web module of your app and open the page on which you want to use the authentication profile.

  • Open the settings of the page. In the page settings, you'll find the authentication profile setting. It will probably be set to [none].

  • Change the setting to the Authentication Profile you want to use for the page. In our case, this is "Web user account".

  • That’s it! Your page should now have an authentication profile, meaning that it’s inaccessible to anyone that isn’t logged in as a web user!

When you want your entire website to require a login to access, setting the authentication profile for every single page can be quite a tedious task. That's why you can also select an authentication profile for an entire page group!

Setting authentication profiles to a page group, using inheritance

  • Create a page group with the New group-button, next to the New page button at the top left of your screen. A new form will slide in from the right.

In this form you can set up your new page group by giving it a name, optionally giving it a prefixed path, and why we're here: an authentication profile.

  • Select the authentication profile you wish to use (in our case, 'Web user account' ) and press save.

  • Drag and drop all pages on which you want the given prefixed path (if given) and the given authentication profile into the new group.

All pages in this group will now have an extra, already checked checkbox option in their page settings: 'Inherit authentication profile'. This means these pages inherit the authentication profile of the group they’re in!

If you've got a page on which you don't want the authentication, but do want in this group, no worries! Just open the page's settings and uncheck this option.

This type of inheritance can also be applied to nested page groups. If you create another page group inside this page group, you'll have the option to inherit the authentication profile from the parent.

Did this answer your question?