How to create a Login flow in the Page Builder

Users that need to log in on an application is a key functionality that almost all applications have. In this article, we’ll talk about how we can create a login flow in the Page Builder and go through the process.

Jip Volkers

Published: 15-07-2020

Last updated: 27-08-2020

First we’ll start with preparing the data model and authentication profile. Next will be the action, and we’ll also create a page with the login form. We’ll start with some preparations and requirements before we will actually build the login flow itself. Let’s get started!


After reading this article, you’ll know:

  • The conventions for a login flow
  • How to build a login flow in the Page Builder

Preparations

It might be pretty obvious, but for users to log in, we need a place to save our user credentials! To start off, let’s create a new model, naming it Webuser and adding two properties to it. The two properties will be of the types Email and Password, and we’ll name them email and password as well. 

Note: Make sure to add a Has and belongs to Many relation between the models Webuser and Roles because otherwise, the login flow will not work. This is because users and the login feature are heavily intertwined with the Data API, which is based on the permission structure of models using Roles

Right below you’ll see a couple of screenshots of the properties and relations of the Webuser model.



The next step is to add a Webuser record to our application. Navigate to the Back Office and create a new Grid for your Webuser model. Once the grid is created, add a Webuser record by clicking the `+ New` button.


Authentication profile

Now that we’ve prepared our Webuser model and record, it’s time to set up an authentication profile. Authentication profiles let you define which model(s) you want to use to protect your web pages; how you'd like to call these web users and where non-authenticated users should be redirected to when they're trying to access a page which requires authentication. Let’s navigate to the Authentication profile tab which is located under the Tools sidebar item. Click on `+ New` to create a new authentication profile and fill in the Profile and Settings as in the screenshot below.

For now the Login redirect to endpoint is set to the GET / endpoint. We will be changing this later on when we’ve created a suitable page to redirect to when a user tries to navigate to an authentication-required page.


Authentication action

Navigate to the Action tab and create a new action. Make sure to check the Use new runtime option. Add two input variables of the type Text for the email and password properties. These two input variables will catch the values submitted by the login form on the page that we’ll create soon. For both input variables, enable the Required checkbox option and go ahead and click `Save`.

Add an action event of the type Authenticate user and assign both input variables to the corresponding fields in the action event. This will create a JSON Web Token (JWT) which we will use later on in the front end. A JWT is an encrypted token based on the email and password of the user submitted in the login form. Go back to the action itself, click Edit, and assign the JWT as the result. This way we’re able to use it on the front end.




Login page

Time to create the actual login page. Navigate to the Pages tab and click the New page button to create a new page, or use an existing page to create the form on.

Drag any Column component onto the canvas and add a Form component inside of it. Delete the TextField component that comes with the form by default. Now drag an EmailInput and PasswordInput component into the form and create an input variable for both of them by clicking on the + Create input variable button in their options.


Connecting the authentication action to the form action

We’ve created a login page with a form which executes an action on submit. We now want to pass the email and password values from the form action to the authentication action which then authenticates the web user.

Select the Form component, click on Edit action, and within the action, create a new event of the type Action. For this event, we’ll need to select our previously created action. Also, check the Execute this action in foreground option and set the Result as option to ‘jwt’. And finally, assign the email and password and hit Save. Now close the action event and click the Edit button of the action itself. Uncheck the Background option if it's still checked and assign the jwt variable to the action’s Result.


Go back to the authentication profile to set the Login redirect endpoint option to the login page that you’ve just created! After updating the authentication profile, navigate to Endpoints in the builder bar and select the newly created endpoint in the __pages folder. Open the template and enter the following: `{{ jwt | json | raw }}`.


Component interactions

Now we only have to add a component interaction to the Form component that redirects the user to a certain page on a successful login. Navigate back to the Page Builder and select the form, click on Component interactions located at the bottom of the sidebar followed by the button + Create new interaction. The user should only be redirected when the form is successfully submitted and the action ran without failure. So let’s choose the trigger Success, Login as for the interaction, and select a desired endpoint to redirect to.

It's time to see your login form in action, click the play button and log in with the web user that you created earlier!

In this tutorial
×

Not sure where to start?

Click here to register and start learning
Register