Authentication

Often a page for customer administration should only be accessible to users we trust. This trust happens by having a Data² ID Authentication Strategy. With it, it is possible to protect a route from users who are not authenticated in the system.

For this, we will need to:

• Create a Data² Registry Table to store user data (such as email and password).
• Create a Data² ID Authentication Strategy linked to that table.
• Create an authentication page (Login).
• Configure the Main Router to protect the /customers route, which has the clients administration page, and add a Login page to the Main Router.

Creating the Users Table

Double-click on the Builder background, in the menu, select the Registry tab and click on Table.

Give your table a name, like Users.

Click on Schema to configure the fields that each user will have.

• Add an email field with a data2-core-primitives@String Component.
• Add a password field with a data2-core-types@Password Component.

Click on the + to add a DataSet and give it a name as well, like Users DataSet.

Let's add a user directly to the table, to do this:

• Click on email and type teste@teste.com.br
• Click on password and enter 123.

You will notice, that 123 becomes quite a different value. This is because fields that are data2-core-types@Password are stored securely and encrypted.

AuthenticationStrategy

Double-click on the Builder background, select the id tab and click on Authentication Strategy.

Select it and:

• Enable the Verifier parameter by clicking on the circle, and select the Users DataSet that was just created.

• Click on the Credentials parameter, and let's configure which fields will be used for the user to authenticate himself. Add the Email and Password fields.

Adding a Login Page

Double-click on the Builder background, select the ui tab and click on Artboard. Name this Artboard Login.

Draw a larger block, and three smaller blocks inside of it that will be: an email field, a password field and a login button.

Select the blocks that will be the email field and the password field by clicking on the first block, and then hold SHIFT before clicking on the second to be able to select multiple blocks. Change both blocks from data2-core-primitives@Block to data2-blocks@DataFieldBlock.

Click on another block to save, select the email field again and now you need to configure:

• The Dataset parameter of the first block will be the AuthenticationStrategy that was created.
• The Field parameter will be Email.

For the password field:

• The Dataset parameter of the second block will be the AuthenticationStrategy.
• The Field parameter will be Password.
• The Type parameter will be password, because when the user types his password, we don't want the password to be visible on the screen.

Select the third block, which will be the Login button, and:

• Add a text in Text: Login.
• Center the text by enabling Text Format, select horizontal centering and vertical centering.

• Enable the On Click parameter, in Module select AuthenticationStrategy, and in the Interaction select Login.

Configuring the Router

Select the Router created earlier. In the Login parameter, enable it and select the Artboard that was created to be used as the login page.

To add authentication to the /customers route, click on Routes to view the routes, click on the item that corresponds to the /customers route.

Click on Policies and add an item to add a Policy, click on that item and in the parameter Authentication Strategy select your AuthenticationStrategy. Click outside to save.

Test if it's working!

Preview your Application. You should be taken to your homepage, and when you try to navigate to the /customers route, instead of the client administration page, the login page should appear instead!

Try to login with the user that was created in the users table (in this case, teste@teste.com.br with password 123) and the client administration page will appear.

Next Steps

If you have gotten this far, you have created an application to manage your customers that needs authentication, congratulations!

You noticed that the user can only log in, and cannot log out? As a challenge, create a Logout button on the customers Artboard! Tip: The AuthenticationStrategy has an Interaction to do this.