Thanks to the SQLite Authentification Plugin, it is now possible to add a basic Authentification workflow to a WebApp
For more advanced and secured Authentification, you can consider using the Firebase Auth Plugin
In order to implement an Authentification process to an App, follow the instructions below:
1° Enable the Authentification Plugin for your Project (Project Settings=> Plugins Tab)
Note: The Authentification Plugin is only available for WebApp with Database Projects
2° Add a Signin Form to your Index page
The SignIn form is available from the Database Widgets list.Note that you can customise all the texts by double-clicking on the form (Labels, Button, etc…)
After adding the Form, create a new page call “Home” for example, go bak to the SignIn form settings and select the page “Home” in the popup menu for the option “Post Login Page".
The user password is stored with a strong one-way bcrypt hashing algorithm when the WebApp is online. (Except during during the development phase, the password is then stored as plain text)
3° Create a new page for the Register (eg. A page named “register")
The Register form is available from the Database Widgets list.Note that you can customise all the texts by double-clicking on the form (Labels, Button, etc…)
The Register form includes the email, the password and a Password verification input field.
Now just add a link to the register page on the index page.If you run the App at this step, you will be able to register and to connect to the App.The Register page will let you create your account (email & password) and then to signing.After login (if successfully logged in) , the WebApp will automatically open the “Home” page/view.
4° Create a new page for the “Rest Password” option.
From this step, you can create a new “ResetPassword” page, with a “Lost Password Form” inside.Then just add a link to the register page on this new page page.This option will let the users enter their email address when they loose their password.They will receive an email with a link that will reset the user password, generate a temporary new password that they will receive by email just right after.
As there’s no mailer in the software, this email won’t be sent with the development version. You have to host the App on a server with the php mail function enabled in order to make it work normally.
5° Create a new page for the “Edit Profile” option.
Now create a new page “user profile” for example, and add an “Edit Profile” form within this page.Then just add a link to this page within the “Home” page, for example an icon in the main toolbar. (don’t put this link to the index page, because when the user access to the WebApp, he is not supposed to be connected and opening the “Edit Profile” page without being connected would display an error.)
You can add many different fields to the user profile (text input, texture, listbox, radios etc…)
6° Add a logout Button.
If you want to let the possibility to a user to logout, then just add a link on the “home” page (a button, a text link or an icon for instance), and add the action “Logout” to this link.
this is not mandatory to add this option. By default, once the user log in to the system, the created session will keep alive a long period of time, and when the user will enter to the WebApp, he will be automatically connected and the “home” page will be displayed, without showing the “index” page.
A Template of a simple App that implements all those functionalities is available here: authentification_tutorial.hbt.zip
The Database Manager (SQLite Database Express) includes a User management window:
If you want to add some custom code to the Authentification process, then you can implement some functions by using the new “Respond to Events” functionality accessible in the Events tab of the widget properties panel (Developer Edition)
Then you can add your own code attached to the selected event: