SQLite Database Authentification

Thanks to the SQLite Authentification Plugin, it is now possible to add a basic Authentification workflow to a WebApp

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…)

    ...
    Sign In Form
    ...
    Sign In Form Settings

    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".

  • 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.

    ...
    Sign In Form
    ...
    Sign In Form

    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.

  • 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.)

    ...
    User Profile Form
  • 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.

    TEMPLATE

    A Template of a simple App that implements all those functionalities is available here: authentification_tutorial.hbt.zip

  • Note to developers

    ...

    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:

    ...
Copyright©  Nymphide Lab 2020 - All Rights Reserved 

...